/* Vernom — the parasite canvas.
   One bold canvas (deep purple), black ink, acid accent.
   Architecture after claus.si: one full-viewport stage, living character,
   symbol navigation, editorial reading pages, machine-readable about.json. */

@font-face {
  font-family: 'Vernom Grotesk';
  src: url('/assets/vernom-grotesk.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  size-adjust: 98%;
}

:root {
  --canvas: #3d1d63;        /* deep purple — the living background */
  --canvas-deep: #2c1450;   /* shade for gradient breathing */
  --ink: #100a1c;           /* near-black purple ink */
  --ink-soft: rgba(16, 10, 28, .62);
  --acid: #c8f542;          /* the parasite's blood — acid green */
  --paper: #f3ecff;         /* pale text on deep panels */
  --line: rgba(16, 10, 28, .28);
  --font: 'Vernom Grotesk', ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
svg { display: block; overflow: visible; }
[hidden] { display: none !important; }
::selection { background: var(--acid); color: var(--ink); }

/* ————— the stage ————— */
#stage { width: 100%; height: 100%; position: relative; isolation: isolate; overflow: hidden; }

/* The canvas breathes — a slow radial pulse behind everything. */
.breath {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, var(--canvas) 40%, var(--canvas-deep) 100%);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.045); opacity: .88; }
}

/* ————— the symbiote ————— */
.creature {
  position: absolute; left: 66%; top: -2%;
  --cx: -50%; --cy: 0%; --cs: 1;
  transform: translate(var(--cx), var(--cy)) scale(var(--cs));
  transform-origin: 50% 0; width: min(50vmin, 540px); z-index: 1;
}
.creature .bob { transform-box: fill-box; transform-origin: 50% 0; animation: bob 7.2s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: rotate(-2.4deg); }
  50% { transform: rotate(2.2deg) translateY(6px); }
}
/* on reading pages the symbiote shrinks back against the right edge */
body:not([data-page='home']) .creature { left: 88%; --cs: .5; transform-origin: 100% 0; }
.blink { transform-box: fill-box; transform-origin: center; animation: blink 7.8s 2.2s infinite; }
.blink.b2 { animation-delay: 5.1s; }
@keyframes blink {
  0%, 41%, 44.6%, 100% { transform: scaleY(1); }
  42.3%, 43.4% { transform: scaleY(.05); }
}
/* pupils are driven by character.js (pointer tracking); these only style */
.sclera, .iris { transform-box: fill-box; transform-origin: center; transition: scale .35s ease; }
.drip { transform-box: fill-box; transform-origin: top center; animation: drip 5.8s ease-in infinite; }
.drip.d2 { animation-delay: 2.9s; animation-duration: 7.3s; }
@keyframes drip {
  0% { transform: scaleY(0); opacity: 0; }
  18% { transform: scaleY(.4); opacity: 1; }
  82% { transform: scaleY(1); opacity: 1; }
  100% { transform: translateY(26px) scaleY(1.15); opacity: 0; }
}

/* ————— intro latch (first visit only, driven by html.latch / html.reveal) ————— */
#latch-veil {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: var(--canvas-deep); opacity: 0; transition: opacity .45s ease;
}
html.latch #latch-veil { opacity: 1; }
.splat {
  position: absolute; left: 50%; top: 47%; z-index: 1; pointer-events: none;
  width: 46vmin; aspect-ratio: 1; border-radius: 50%;
  border: 2.5px solid var(--ink); opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}
html.latch .splat { animation: splat .7s cubic-bezier(.2, .7, .3, 1) .8s both; }
@keyframes splat {
  0% { transform: translate(-50%, -50%) scale(.08); opacity: .85; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
/* the symbiote drops in, squashes on impact, settles into its bob */
/* the symbiote drops in, squashes on impact, settles into its bob (after the ink covers) */
html.latch .creature { animation: latch-in 1.15s cubic-bezier(.22, .9, .3, 1.06) .75s both; }
@keyframes latch-in {
  0% { transform: translate(-50%, -190%) scale(.5); opacity: 0; }
  28% { opacity: 1; }
  62% { transform: translate(-50%, 2%) scale(1.07, .93); }
  79% { transform: translate(-50%, -1.5%) scale(.96, 1.05); }
  100% { transform: translate(-50%, 0) scale(1); }
}
html.latch .splat { left: 66%; top: 30%; }
html.latch :is(.masthead, .home, .chip) { opacity: 0; }
html.ink #latch-veil { display: none; }
#vernom-ink { position: fixed; inset: 0; z-index: 30; pointer-events: none; }

/* ————— character reactions (driven by character.js) ————— */
.creature.flinch { animation: flinch .45s ease; }
@keyframes flinch {
  0%, 100% { transform: translate(var(--cx), var(--cy)) scale(var(--cs)); }
  30% { transform: translate(calc(var(--cx) - .8%), calc(var(--cy) - 1.6%)) rotate(-2.4deg) scale(calc(var(--cs) * 1.02), calc(var(--cs) * .98)); }
  62% { transform: translate(calc(var(--cx) + .7%), calc(var(--cy) + .7%)) rotate(1.7deg) scale(calc(var(--cs) * .99), calc(var(--cs) * 1.01)); }
}
.creature.startle { animation: startle .65s ease; }
.creature.startle .sclera { scale: 1.07; }
.creature.startle .iris { scale: .72; }
@keyframes startle {
  0%, 100% { transform: translate(var(--cx), var(--cy)) scale(var(--cs)); }
  22% { transform: translate(var(--cx), calc(var(--cy) - 3.5%)) scale(calc(var(--cs) * 1.05), calc(var(--cs) * .95)); }
  55% { transform: translate(var(--cx), calc(var(--cy) + 1.2%)) scale(calc(var(--cs) * .97), calc(var(--cs) * 1.04)); }
}
.creature.shiver { animation: shiver .8s ease-in-out; }
@keyframes shiver {
  0%, 100% { transform: translate(var(--cx), var(--cy)) rotate(0deg) scale(var(--cs)); }
  20% { transform: translate(calc(var(--cx) - .4%), var(--cy)) rotate(-1.1deg) scale(var(--cs)); }
  45% { transform: translate(calc(var(--cx) + .3%), calc(var(--cy) - .3%)) rotate(1.2deg) scale(var(--cs)); }
  70% { transform: translate(calc(var(--cx) - .3%), calc(var(--cy) + .2%)) rotate(-.7deg) scale(var(--cs)); }
}
html.reveal .masthead > *, html.reveal .home-copy > *, html.reveal .home-side > section, html.reveal .symbols .symbol, html.reveal .chip, html.reveal .socials {
  animation: rise .75s cubic-bezier(.2, .75, .25, 1) backwards;
}
html.reveal .home-side > section:nth-child(2) { animation-delay: .14s; }
html.reveal .symbols .symbol { animation-delay: .2s; }
html.reveal .symbols .symbol:nth-child(2) { animation-delay: .26s; }
html.reveal .symbols .symbol:nth-child(3) { animation-delay: .32s; }
html.reveal .symbols .symbol:nth-child(4) { animation-delay: .38s; }
html.reveal .symbols .symbol:nth-child(5) { animation-delay: .44s; }
html.reveal .chip { animation-delay: .5s; }
html.reveal .socials { animation-delay: .56s; }

/* ————— intro screen (claus-style): character hanging, click to enter ————— */
.intro {
  position: fixed; inset: 0; z-index: 25; cursor: pointer;
  display: grid; place-items: end center; padding-bottom: clamp(20px, 5vh, 60px);
  background: transparent; user-select: none; -webkit-user-select: none;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.intro-scene { width: min(58vmin, 470px); height: auto; }
.intro .hang { transform-origin: 190px 0; animation: hang 7.5s ease-in-out infinite; }
@keyframes hang {
  0%, 100% { transform: rotate(-2.2deg); }
  50% { transform: rotate(2deg); }
}
.intro .tendril { transform-box: fill-box; transform-origin: top center; animation: tendril 5.4s ease-in-out infinite; }
@keyframes tendril {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(5deg); }
}
.intro-hint {
  position: absolute; left: 50%; bottom: clamp(14px, 3.4vh, 40px); transform: translateX(-50%);
  font-size: 14.5px; letter-spacing: .06em; opacity: .55; margin: 0;
  animation: hint-fade 3.4s ease-in-out infinite;
}
.intro-hint .drop-cap { font-size: 2.1em; line-height: .7; margin: .05em .1em 0 0; }
@keyframes hint-fade { 0%, 100% { opacity: .55; } 50% { opacity: .25; } }
html.entered .intro { opacity: 0; visibility: hidden; pointer-events: none; }
html.entered .intro-scene { transition: transform 1.1s cubic-bezier(.6, 0, .8, .4), opacity .9s ease; transform: translateY(14vh); opacity: 0; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ————— symbol navigation (dock under the home copy) ————— */
.symbols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: clamp(24px, 4vh, 40px) 0 0; }
.symbol { --turn: -3deg; display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .34s cubic-bezier(.2, .75, .25, 1); transform-origin: 50% 70%; }
.symbol:nth-child(even) { --turn: 3deg; }
.symbol svg { width: clamp(44px, 5vw, 62px); height: auto; aspect-ratio: 1; margin: 0 auto; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.symbol:hover { transform: translateY(-6px) rotate(var(--turn)); }
.symbol:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 14px; }
.symbol .label { display: block; margin-top: 6px; text-align: center; font-size: 12.5px; font-weight: 550; letter-spacing: .06em; text-transform: uppercase; }

/* ————— home: editorial columns, like a front page ————— */
.home {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr);
  gap: clamp(36px, 5vw, 96px); align-items: start;
  padding: clamp(96px, 15vh, 150px) clamp(24px, 5vw, 90px) clamp(60px, 9vh, 90px) clamp(28px, 7vw, 120px);
}
.home > * { pointer-events: auto; }
.home-copy { max-width: 62ch; }
.home-copy .kicker { margin-bottom: 18px; }
.home-intro { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.55; margin: 0 0 14px; text-align: justify; text-wrap: pretty; }
.home-more { font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.55; margin: 0; opacity: .85; }
.drop-cap { float: left; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 4.3em; line-height: .78; margin: .06em .12em 0 0; }
.home-more a { color: inherit; text-decoration: none; border-bottom: 1.5px solid var(--line); transition: border-color .2s; }
.home-more a:hover { border-color: var(--ink); }
.home-side { display: grid; gap: clamp(26px, 3.5vh, 40px); padding-top: 6px; }
.home-side header { margin: 0 0 4px; }
.home-side h2 { font-size: 21px; font-weight: 550; letter-spacing: -.025em; margin: 0; }
.home-side h2 a { color: inherit; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.home-side h2 a:hover { opacity: .65; }
.home-entries { list-style: none; margin: 0; padding: 0; }
.home-entries li { border-top: 1px solid var(--line); padding: 14px 0 16px; }
.home-entries .when { display: block; font-size: 12.5px; opacity: .55; margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.home-entries h3 { font-size: 17.5px; font-weight: 500; letter-spacing: -.015em; margin: 0; line-height: 1.25; position: relative; display: inline; }
.home-entries h3::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .24s cubic-bezier(.22, .61, .36, 1); }
.home-entries li:hover h3::after { transform: scaleX(1); transform-origin: left; }
.home-entries p { font-size: 14.5px; line-height: 1.5; margin: 5px 0 0; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.facts-home { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 16px 0; border-block: 1px solid var(--line); }
.facts-home > div { display: flex; flex-direction: column-reverse; gap: 5px; }
.facts-home dd { margin: 0; font-size: clamp(19px, 1.8vw, 24px); font-weight: 550; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.facts-home dt { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; opacity: .6; }

/* ————— header ————— */
.masthead {
  position: absolute; left: clamp(22px, 6vw, 96px); right: clamp(22px, 6vw, 96px); top: clamp(18px, 3.6vh, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; z-index: 5;
}
.wordmark { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 24px; font-weight: 550; letter-spacing: -.045em; }
.wordmark svg { width: 40px; height: 40px; flex: none; }
.masthead nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); }
.masthead nav a {
  color: inherit; text-decoration: none; font-size: 15.5px; font-weight: 540;
  opacity: .66; min-height: 44px; display: inline-flex; align-items: center; transition: opacity .18s;
}
.masthead nav a:is(:hover, [aria-current='page']) { opacity: 1; }
.masthead nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; border-radius: 3px; }

/* ————— reading pages (shared) ————— */
.page { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.page-inner {
  position: absolute; left: clamp(22px, 6vw, 96px); right: clamp(22px, 6vw, 96px);
  top: clamp(96px, 14vh, 148px); bottom: clamp(28px, 5vh, 56px);
  pointer-events: auto; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(16,10,28,.35) transparent;
  padding: 4px clamp(6px, 1vw, 18px) 60px 4px;
}
.page-inner > * { max-width: 74ch; }
.page h1 { font-size: clamp(38px, 4.2vw, 58px); font-weight: 550; letter-spacing: -.05em; line-height: 1.04; margin: 0 0 26px; text-wrap: balance; }
.page h2 { font-size: clamp(21px, 2vw, 27px); font-weight: 500; letter-spacing: -.025em; margin: 44px 0 12px; }
.page h3 { font-size: 19px; font-weight: 560; letter-spacing: -.02em; margin: 28px 0 8px; }
.page p { font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.6; margin: 0 0 18px; text-wrap: pretty; }
.page a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
.page a:hover { text-decoration-color: var(--ink); }
.page ul { padding-left: 1.3em; margin: 0 0 18px; }
.page li { margin: 7px 0; line-height: 1.55; }
.page code { font: 13.5px/1.5 ui-monospace, 'SF Mono', Menlo, monospace; background: rgba(16,10,28,.1); border-radius: 6px; padding: 2px 7px; }
.page .addr { font: 13.5px/1.55 ui-monospace, 'SF Mono', Menlo, monospace; user-select: all; word-break: break-all; background: rgba(16,10,28,.08); border-radius: 8px; padding: 8px 12px; display: inline-block; }
.page strong { font-weight: 600; }
.kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .62; margin: 0 0 14px; }

/* facts strip — like claus hook-facts */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 34px; margin: 30px 0 38px; padding: 22px 0; border-block: 1.5px solid var(--line); }
.facts > div { display: flex; flex-direction: column-reverse; gap: 6px; }
.facts b { font-size: clamp(21px, 2vw, 27px); font-weight: 550; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.facts small { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .62; }

/* fee split table */
.split { width: 100%; border-collapse: collapse; margin: 8px 0 26px; }
.split th { text-align: left; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; padding: 8px 10px 8px 0; border-bottom: 1.5px solid var(--ink); }
.split td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.split td:last-child, .split th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.split .bar { height: 7px; border-radius: 4px; background: var(--ink); display: block; min-width: 4px; }

/* module list (Token page) */
.modules { list-style: none; margin: 20px 0; padding: 0; }
.modules li { border-top: 1px solid var(--line); padding: 15px 2px; display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: baseline; }
.modules .num { font-size: 12px; opacity: .55; font-variant-numeric: tabular-nums; }
.modules b { font-size: 17.5px; font-weight: 500; letter-spacing: -.015em; }
.modules p { margin: 3px 0 0; font-size: 15px; line-height: 1.5; opacity: .8; }
.modules .state { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.modules .state.on { color: var(--ink); }
.modules .state.on::before { content: '● '; }
.modules .state.off { opacity: .45; }
.modules .state.off::before { content: '○ '; }

/* journal */
.journal { list-style: none; margin: 24px 0; padding: 0; }
.journal li { border-top: 1px solid var(--line); padding: 22px 2px 26px; }
.journal .n { font-size: 12.5px; font-weight: 700; opacity: .55; font-variant-numeric: tabular-nums; }
.journal h3 { margin: 6px 0 4px; }
.journal .when { font-size: 13px; opacity: .55; }
.journal p { margin: 6px 0 0; }

/* game page */
.hol-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 26px 0; }
.hol-card { border: 1.5px solid var(--ink); border-radius: 16px; padding: 18px 18px 16px; background: rgba(16,10,28,.05); }
.hol-card h3 { margin: 0 0 4px; }
.hol-card .big { font-size: 30px; font-weight: 550; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hol-card small { opacity: .62; }

/* CTA buttons — acid on ink */
.cta { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 24px; border-radius: 12px; background: var(--ink); color: var(--acid); font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background .18s, color .18s, transform .18s; }
.cta:hover { background: var(--acid); color: var(--ink); transform: translateY(-2px); }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.cta.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.cta.ghost:hover { background: var(--ink); color: var(--paper); }

/* weather line bottom-left, addresses bottom-right (home only) */
.chip { position: absolute; left: clamp(28px, 7vw, 120px); bottom: clamp(16px, 3vh, 30px); z-index: 3; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .72; display: flex; align-items: center; gap: 8px; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .5; } }
.socials { position: absolute; right: clamp(24px, 5vw, 90px); bottom: clamp(16px, 3vh, 30px); z-index: 3; font: 12.5px/1.5 ui-monospace, 'SF Mono', Menlo, monospace; opacity: .62; }
.socials span { user-select: all; }

@media (prefers-reduced-motion: reduce) {
  .breath, .bob, .blink, .pupil, .drip, .chip .dot, .symbol, .cta { animation: none !important; transition: none !important; }
  html.latch .creature, html.latch .splat, html.reveal :is(.masthead, .home, .chip), html.reveal :is(.masthead > *, .home-copy > *, .home-side > section, .symbols .symbol, .chip, .socials) { animation: none !important; }
  html.latch :is(.masthead, .home, .chip) { opacity: 1 !important; }
  #latch-veil, #vernom-ink { display: none !important; }
  .intro, .intro .hang, .intro .tendril, .intro-hint, html.entered .intro-scene { transition: none !important; animation: none !important; }
  html.entered .intro { display: none; }
  .creature.flinch, .creature.startle, .creature.shiver { animation: none !important; }
  .sclera, .iris { scale: 1 !important; transition: none !important; }
  .home-entries h3::after { transition: none !important; }
}

@media (max-width: 900px) {
  .home {
    display: block; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    padding: 96px 24px 300px;
  }
  .home::-webkit-scrollbar { display: none; }
  .home-side { margin-top: 42px; max-width: 560px; }
  .creature { left: 50%; --cs: .72; }
  body:not([data-page='home']) .creature { --cs: .58; }
  .intro-scene { width: min(80vw, 420px); }
  .page-inner { right: 20px; bottom: 40px; }
  .page h1 { font-size: 34px; }
  .chip { left: 24px; bottom: 12px; }
  .socials { right: 24px; bottom: 12px; }
  .masthead { left: 20px; right: 20px; }
  .masthead nav { gap: 14px; }
  .masthead nav a { font-size: 13.5px; }
  .facts-home dd { font-size: 18px; }
}

/* footer strip (on pages) */
.colophon { margin-top: 56px; padding-top: 18px; border-top: 1.5px solid var(--line); font-size: 13.5px; opacity: .7; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.colophon a { text-decoration: none; }