/*
  PALETTE PROVENANCE
  Method: k-means (k=14, n_init=4, random_state=1) over 120000 sampled pixels from each of
    brand/LOGO MOLLYBOT PNG...png  (opaque pixels only, alpha==255)
    reference/SAMPUL MOLLYBOT JPG.jpg.jpeg (all pixels)
  Each centroid is snapped to the real pixel closest to it in the cluster; the value below is that pixel.
  Coordinates are (x,y) in the source file at native resolution.
  This is the only file in the project that may contain colour literals.
*/
:root {
  --cream:     #fcf6e8; /* SAMPUL 146,194   banner ground */
  --fur-light: #f3e0d1; /* LOGO 1190,1119   fur highlight */
  --fur:       #e9d5c6; /* LOGO 1238,944    fur body */
  --fur-mid:   #d6bfae; /* LOGO 1053,1644   fur shade */
  --fur-deep:  #c2a795; /* LOGO 807,1892    fur shadow */
  --yellow:    #fcc84e; /* SAMPUL 319,247   wordmark face */
  --amber:     #faae25; /* SAMPUL 571,223   wordmark shade */
  --pink:      #fb6183; /* SAMPUL 1396,90   heart */
  --brown:     #50230c; /* SAMPUL 652,209   wordmark outline */
  --brown-mid: #93674c; /* SAMPUL 1087,420  outline soft edge */
  --night:     #130d0a; /* LOGO 867,1168    eye */
}

/* Colour literals live in tokens.css only. Numbers below are measured off the reference build. */
:root {
  --bg: var(--night);
  --ink: var(--brown);
  --paper: var(--cream);
  --display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --bar: 76px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --line: color-mix(in srgb, var(--paper) 32%, transparent);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--paper);
  background: var(--bg);
  font-family: var(--mono);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--ink); background: var(--yellow); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 5px; }

.cursor-dot, .cursor-ring { position: fixed; z-index: 2000; top: 0; left: 0; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); display: none; }
.cursor-dot { width: 5px; height: 5px; background: var(--pink); }
.cursor-ring { width: 30px; height: 30px; border: 1px solid var(--pink); transition: width .2s, height .2s, background .2s, border-color .2s; }
body.cursor-hover .cursor-ring { width: 54px; height: 54px; background: color-mix(in srgb, var(--yellow) 22%, transparent); border-color: var(--ink); }
@media (pointer: fine) { .cursor-dot, .cursor-ring { display: block; } }

/* ---------- top bar: nav, socials, contract slot ---------- */
.topbar {
  position: fixed; z-index: 300; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 16px;
  min-height: var(--bar); padding: 6px 20px;
  color: var(--ink);
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  border-bottom: 2px solid var(--ink);
}
.micro-nav { display: flex; align-items: center; gap: 3px; grid-column: 1; }
.micro-nav a, .micro-nav .nav-buy {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  border-left: 1px solid currentColor;
  transition: letter-spacing .2s, color .2s, background .2s;
}
.micro-nav a:hover, .micro-nav a:focus-visible { color: var(--pink); letter-spacing: .24em; }
.micro-nav .nav-buy { background: var(--ink); color: var(--cream); border-left: 0; }
.micro-nav .nav-buy.is-inert { opacity: .55; }
.socials { grid-column: 3; display: flex; gap: 4px; justify-content: flex-end; }
.social {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  color: var(--ink); border: 2px solid var(--ink); border-radius: 50%;
  transition: transform .18s var(--ease), background .18s, color .18s;
}
a.social:hover, a.social:focus-visible { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.social.is-inert { opacity: .45; cursor: not-allowed; }

.ca {
  grid-column: 2; grid-row: 1; justify-self: center;
  display: flex; align-items: baseline; gap: 12px; min-width: 0; max-width: 100%;
}
.ca-label { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.ca-value {
  margin: 0; padding: 4px 6px; border: 0; background: transparent; color: inherit; text-align: left;
  font: 600 clamp(.95rem, 1.5vw, 1.35rem)/1.25 var(--mono);
  overflow-wrap: anywhere; min-height: 44px; display: inline-flex; align-items: center;
}
button.ca-value { cursor: pointer; border-radius: 10px; transition: background .2s; }
button.ca-value:hover, button.ca-value:focus-visible { background: color-mix(in srgb, var(--yellow) 60%, transparent); }
.ca.is-inert .ca-value { opacity: .6; cursor: not-allowed; }
.ca-hint { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brown-mid); white-space: nowrap; }
.ca.is-copied .ca-hint { color: var(--ink); }

/* ---------- hero ---------- */
.hero-scroll { height: 260vh; position: relative; background: var(--yellow); }
.hero {
  position: sticky; top: 0; height: 100vh; min-height: 650px; overflow: hidden; color: var(--ink); isolation: isolate;
  background:
    radial-gradient(circle at 72% 38%, color-mix(in srgb, var(--cream) 80%, transparent), transparent 27%),
    linear-gradient(122deg, var(--cream) 0%, var(--yellow) 50%, var(--amber) 100%);
}
.hero-grid {
  position: absolute; inset: 0; opacity: .12;
  background-image: linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px);
  background-size: 7vw 7vw; transform: scale(1.15);
}
.hero-word {
  position: absolute; left: -1.5vw; top: 46%; z-index: 1; margin: 0;
  font-family: var(--display); font-weight: 700; font-size: clamp(13rem, 31vw, 40rem);
  line-height: .68; letter-spacing: -.055em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: clamp(2px, .32vw, 6px) var(--ink);
  transform: translateY(-50%) scaleX(.98); transform-origin: center; will-change: transform;
}
.hero-word::after {
  content: "MOLLY"; position: absolute; inset: 0;
  color: color-mix(in srgb, var(--ink) 8%, transparent); -webkit-text-stroke: 0; transform: translate(1.1vw, 1.1vw);
}
.hero-portrait {
  position: absolute; z-index: 3; left: 62%; bottom: 0;
  height: 78vh; width: auto; max-width: none;
  transform: translateX(-50%) scale(1.03); transform-origin: 50% 100%;
  filter: drop-shadow(24px 24px 0 color-mix(in srgb, var(--ink) 24%, transparent));
  will-change: transform, filter; opacity: 0; animation: portrait-in 1s .25s var(--ease) forwards;
}
@keyframes portrait-in { to { opacity: 1; } }
.hero-kicker {
  position: absolute; z-index: 5; left: 5vw; top: calc(var(--bar) + 6vh); width: min(370px, 31vw);
  margin: 0; padding-top: 10px; border-top: 4px solid var(--ink);
  font-size: clamp(.7rem, 1.05vw, .92rem); font-weight: 700; line-height: 1.45; text-transform: uppercase;
  opacity: 0; transform: translateY(16px) rotate(-1.5deg); animation: reveal .55s .08s forwards;
}
@keyframes reveal { to { opacity: 1; transform: translateY(0) rotate(-1.5deg); } }
.hero-line {
  position: absolute; z-index: 6; right: 3.5vw; top: calc(var(--bar) + 5vh); width: min(300px, 24vw); margin: 0;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 4.6rem); line-height: .9; text-align: right; text-transform: uppercase;
  transform: rotate(2deg); opacity: 0; animation: phrase-in .65s .8s forwards;
}
@keyframes phrase-in { to { opacity: 1; transform: rotate(2deg) translateY(0); } }
.hero-meta { position: absolute; z-index: 5; left: 3vw; bottom: 4vh; display: grid; gap: 5px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.hero-meta strong { font-size: 13px; }
.hero-scene { position: absolute; right: 2.5vw; bottom: 3vh; z-index: 5; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.buy-ticket {
  position: absolute; z-index: 8; right: 6vw; bottom: 12vh; display: grid; place-items: center;
  width: clamp(160px, 16vw, 230px); min-height: 82px; padding: 16px 22px;
  font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 3.1vw, 3.8rem); line-height: 1; letter-spacing: .02em;
  color: var(--cream); background: var(--ink); border: 3px solid var(--ink);
  clip-path: polygon(0 12%, 8% 12%, 8% 0, 92% 0, 92% 12%, 100% 12%, 100% 88%, 92% 88%, 92% 100%, 8% 100%, 8% 88%, 0 88%);
  box-shadow: 11px 11px 0 var(--cream); transform: rotate(-4deg);
  opacity: 0; animation: cta-in .55s 1.25s forwards;
  transition: transform .18s, box-shadow .18s, color .18s, background .18s;
}
@keyframes cta-in { to { opacity: 1; } }
.buy-ticket small { display: block; font: 700 9px/1 var(--mono); letter-spacing: .2em; margin-bottom: 6px; }
a.buy-ticket:hover, a.buy-ticket:focus-visible { color: var(--ink); background: var(--cream); transform: rotate(-4deg) translate(-5px, -5px) scale(1.04); box-shadow: 17px 17px 0 var(--ink); }
a.buy-ticket:active { transform: rotate(-4deg) translate(5px, 5px); box-shadow: 2px 2px 0 var(--ink); }
.buy-ticket.is-inert { cursor: not-allowed; filter: saturate(.5); }

/* ---------- ticker ---------- */
.ticker { position: relative; z-index: 20; overflow: hidden; border-block: 2px solid var(--cream); color: var(--cream); background: var(--night); transform: rotate(-.7deg) scale(1.02); }
.ticker-track { display: flex; width: max-content; animation: marquee 27s linear infinite; }
.ticker-line { flex: none; padding: 13px 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 2.5rem); letter-spacing: .08em; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- about ---------- */
.about-scroll { position: relative; height: 260vh; background: var(--fur); }
.about {
  position: sticky; top: 0; height: 100vh; min-height: 700px; overflow: hidden; color: var(--ink);
  background:
    linear-gradient(105deg, transparent 0 61%, color-mix(in srgb, var(--brown-mid) 16%, transparent) 61%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 7px),
    var(--fur);
}
.about-index { position: absolute; left: 4vw; top: calc(var(--bar) + 6vh); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; transform: rotate(-90deg) translateX(-100%); transform-origin: top left; }
.about-title {
  position: absolute; z-index: 3; left: 8vw; top: calc(var(--bar) + 2vh); margin: 0;
  font-family: var(--display); font-weight: 700; font-size: clamp(5rem, 13vw, 14rem); line-height: .78; letter-spacing: -.035em; text-transform: uppercase; max-width: 70vw;
}
.about-title .outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.evidence-photo {
  position: absolute; z-index: 2; right: -4vw; bottom: -9vh; width: min(66vw, 900px); height: 82vh;
  object-fit: cover; object-position: 50% 12%;
  background: var(--yellow); border: 8px solid var(--cream); box-shadow: -22px 26px 0 var(--brown-mid);
  transform: rotate(2.8deg) translate3d(0, 6%, 0); will-change: transform;
}
.evidence-tag { position: absolute; z-index: 6; right: 5vw; top: calc(var(--bar) + 4vh); padding: 9px 14px; color: var(--ink); background: var(--pink); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transform: rotate(5deg); box-shadow: 6px 6px 0 var(--ink); }
.story-note { position: absolute; z-index: 7; left: 8vw; bottom: 7vh; width: min(480px, 40vw); padding: 26px 28px 28px; background: var(--cream); border: 2px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); transform: rotate(-2deg); }
.story-note::before { content: "Molly Bot"; display: block; margin-bottom: 14px; font-size: 9px; font-weight: 700; letter-spacing: .17em; }
.story-note p { margin: 0; font-size: clamp(.8rem, 1vw, 1rem); line-height: 1.65; }
.traits { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.trait { position: absolute; max-width: 220px; padding: 10px 12px; color: var(--cream); background: var(--ink); font-size: 10px; line-height: 1.45; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(24px) rotate(var(--r)); transition: opacity .45s, transform .45s; }
.trait.on { opacity: 1; transform: translateY(0) rotate(var(--r)); }
.trait b { color: var(--yellow); }
.trait-1 { --r: -5deg; left: 47%; top: 27%; }
.trait-2 { --r: 3deg; left: 56%; top: 48%; }
.trait-3 { --r: -2deg; right: 5%; top: 33%; }
.trait-4 { --r: 4deg; left: 41%; bottom: 8%; }
.marker-arrow { position: absolute; z-index: 5; left: 40%; top: 41%; width: 10vw; height: 5vw; min-width: 90px; border-top: 5px solid var(--pink); transform: rotate(12deg); }
.marker-arrow::after { content: ""; position: absolute; right: -2px; top: -11px; border: 8px solid transparent; border-left: 18px solid var(--pink); }

/* ---------- trail (horizontal scene) ---------- */
.flow-scroll { height: 310vh; position: relative; background: var(--yellow); }
.flow { position: sticky; top: 0; height: 100vh; min-height: 660px; overflow: hidden; color: var(--ink); background: var(--yellow); isolation: isolate; }
.sky-poster { position: absolute; inset: -7%; width: 114%; height: 114%; object-fit: contain; object-position: 85% 100%; opacity: .42; transform: scale(1.06); will-change: transform; }
.flow-wash { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--cream) 93%, transparent) 0 22%, color-mix(in srgb, var(--amber) 15%, transparent) 50%, color-mix(in srgb, var(--cream) 78%, transparent)); }
.flow-title { position: absolute; z-index: 3; left: 4vw; top: calc(var(--bar) + 2vh); margin: 0; max-width: 25vw; font-family: var(--display); font-weight: 700; font-size: clamp(4rem, 9vw, 10rem); line-height: .78; text-transform: uppercase; letter-spacing: -.03em; }
.flow-title small { display: block; margin-top: 18px; font: 700 10px/1.5 var(--mono); letter-spacing: .18em; }
.migration-map { position: absolute; z-index: 4; left: 25vw; top: 8vh; width: 125vw; height: 82vh; transform: translate3d(0, 0, 0); will-change: transform; }
.flight-line { position: absolute; left: 2%; right: 2%; top: 51%; height: 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 18px, transparent 18px 29px); transform: rotate(-6deg); transform-origin: left center; }
.flight-line::before, .flight-line::after { content: ""; position: absolute; border: 3px solid var(--ink); border-radius: 50%; }
.flight-line::before { width: 22vw; height: 22vw; left: 17%; top: -8vw; border-right-color: transparent; }
.flight-line::after { width: 13vw; height: 13vw; right: 19%; top: -11vw; border-left-color: transparent; }
.stage { position: absolute; width: 250px; padding: 15px 17px 17px; color: var(--ink); background: color-mix(in srgb, var(--cream) 95%, transparent); border: 3px solid var(--ink); box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 90%, transparent); clip-path: polygon(0 0, 93% 0, 100% 14%, 100% 100%, 8% 100%, 0 88%); }
.stage b { display: block; font-family: var(--display); font-weight: 700; font-size: 2rem; text-transform: uppercase; }
.stage span { display: block; margin-top: 7px; font-size: 11px; font-weight: 600; line-height: 1.45; text-transform: uppercase; overflow-wrap: anywhere; }
.stage em { position: absolute; right: 9px; top: 7px; font-style: normal; font-size: 9px; }
.stage .asof { display: block; margin-top: 8px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.stage-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.stage-1 { left: 3vw; top: 48%; transform: rotate(-6deg); }
.stage-2 { left: 35vw; top: 21%; transform: rotate(4deg); background: var(--amber); }
.stage-3 { left: 67vw; top: 57%; transform: rotate(-3deg); background: var(--ink); color: var(--cream); }
.stage-4 { left: 99vw; top: 30%; transform: rotate(5deg); background: var(--pink); }
.map-bird { position: absolute; z-index: 5; left: 7vw; top: 28%; width: clamp(100px, 13vw, 180px); aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; background: var(--pink); border: 3px solid var(--ink); border-radius: 50%; filter: drop-shadow(9px 9px 0 color-mix(in srgb, var(--ink) 30%, transparent)); transform: rotate(-8deg); }
.flow-counter { position: absolute; z-index: 6; right: 3vw; bottom: 3vh; display: flex; align-items: baseline; gap: 10px; font-family: var(--display); font-weight: 700; font-size: clamp(3.5rem, 7vw, 7rem); }
.flow-counter small { font: 700 10px var(--mono); letter-spacing: .2em; }

/* ---------- chart ---------- */
.chart-section {
  position: relative; padding: calc(var(--bar) + 8vh) 5vw 8vh; min-height: 100vh; overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 28%),
    repeating-linear-gradient(90deg, transparent 0 59px, color-mix(in srgb, var(--yellow) 4%, transparent) 60px),
    var(--night);
}
.chart-heading { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto; align-items: end; margin-bottom: -12px; }
.chart-heading h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(5rem, 14vw, 15rem); line-height: .78; letter-spacing: -.04em; text-transform: uppercase; color: var(--cream); }
.live-badge { margin: 0 1vw 26px 0; padding: 8px 12px; color: var(--ink); background: var(--yellow); font-size: 11px; font-weight: 700; letter-spacing: .2em; box-shadow: 6px 6px 0 var(--brown-mid); animation: live-pulse 2.2s ease-in-out infinite; }
@keyframes live-pulse { 50% { filter: brightness(1.2); transform: translateY(-2px); } }
.terminal-shell {
  position: relative; z-index: 4; max-width: 1380px; margin: 0 auto; padding: 42px 28px 28px;
  background: linear-gradient(135deg, var(--brown), var(--night) 45%, var(--brown));
  border: 3px solid var(--brown-mid);
  box-shadow: 28px 34px 0 var(--night), 0 0 55px color-mix(in srgb, var(--yellow) 12%, transparent);
  clip-path: polygon(0 26px, 26px 0, calc(100% - 42px) 0, 100% 42px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 18px 100%, 0 calc(100% - 18px));
}
.terminal-top { position: absolute; top: 11px; left: 30px; right: 30px; display: flex; justify-content: space-between; color: var(--yellow); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.terminal-top span:last-child { color: var(--fur-mid); }
.terminal-screen { position: relative; overflow: hidden; border: 3px solid var(--night); background: var(--night); }
.terminal-screen::before { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--cream) 4%, transparent) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; }
.terminal-screen::after { content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none; box-shadow: inset 0 0 50px color-mix(in srgb, var(--night) 65%, transparent); }
.terminal-screen iframe { display: block; width: 100%; height: 650px; border: 0; background: var(--night); }
.screen-empty { display: grid; place-content: center; gap: 10px; height: 650px; padding: 24px; text-align: center; color: var(--fur-mid); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.screen-empty p { margin: 0; }
.screen-empty .asof { font-size: 10px; color: var(--brown-mid); }
.screw { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--night); border: 2px solid var(--brown-mid); }
.screw::after { content: ""; position: absolute; width: 7px; height: 1px; background: var(--brown-mid); top: 3px; left: 1px; transform: rotate(-20deg); }
.s1 { left: 8px; top: 9px; } .s2 { right: 8px; top: 9px; } .s3 { left: 8px; bottom: 8px; } .s4 { right: 8px; bottom: 8px; }
.chart-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1380px; margin: 38px auto 0; }
.dex-control {
  display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 11px 16px;
  color: var(--yellow); border: 1px solid var(--yellow); background: transparent;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: color .2s, background .2s, filter .2s;
}
.dex-control::before { content: ">"; }
a.dex-control:hover { color: var(--ink); background: var(--yellow); filter: drop-shadow(0 0 13px var(--yellow)); }
a.dex-control:active { filter: none; transform: scale(.98); }
.dex-control.is-inert { opacity: .5; cursor: not-allowed; }
.chart-note { max-width: 420px; margin: 0; color: var(--fur-mid); font-size: 10px; line-height: 1.5; text-align: right; text-transform: uppercase; }

/* ---------- footer ---------- */
.end-scene { position: relative; min-height: 65vh; display: grid; place-items: center; overflow: hidden; color: var(--ink); background: var(--yellow); }
.end-word { font-family: var(--display); font-weight: 700; font-size: clamp(8rem, 28vw, 30rem); line-height: .72; letter-spacing: -.05em; transform: rotate(-3deg); }
.x-stamp { position: absolute; width: 150px; aspect-ratio: 1; display: grid; place-items: center; border: 5px double var(--ink); border-radius: 50%; font-family: var(--display); font-weight: 700; font-size: 1.7rem; text-align: center; text-transform: uppercase; transform: rotate(10deg); transition: color .25s, background .25s; }
a.x-stamp:hover { color: var(--yellow); background: var(--ink); animation: stamp-wobble .45s ease-in-out; }
.x-stamp.is-inert { opacity: .5; cursor: not-allowed; }
@keyframes stamp-wobble { 35% { transform: rotate(-5deg) scale(1.07); } 70% { transform: rotate(14deg) scale(1.03); } }
.end-caption { position: absolute; left: 3vw; bottom: 3vh; margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.footer-line { position: absolute; right: 3vw; bottom: 3vh; margin: 0; font-size: 9px; text-align: right; text-transform: uppercase; }

.reveal-block { opacity: 0; transform: translateY(40px) rotate(1deg); transition: opacity .7s, transform .7s var(--ease); }
.reveal-block.visible { opacity: 1; transform: translateY(0) rotate(0); }

/* ---------- tablet / phone ---------- */
@media (max-width: 900px) {
  :root { --bar: 112px; }
  .topbar { grid-template-columns: 1fr auto; row-gap: 2px; padding: 4px 8px 6px; }
  .micro-nav { grid-column: 1; grid-row: 1; }
  .socials { grid-column: 2; grid-row: 1; }
  .ca { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .ca-hint { display: none; }
  .ca-label { font-size: 1.2rem; }
  .ca-value { font-size: clamp(.78rem, 3.6vw, 1.1rem); }
  .hero-scroll { height: 190vh; }
  .hero { min-height: 560px; }
  .hero-word { top: 40%; font-size: clamp(10rem, 47vw, 18rem); left: -4vw; }
  .hero-portrait { height: 62vh; left: 50%; bottom: 0; }
  .hero-kicker { top: calc(var(--bar) + 3vh); left: 5vw; width: 50vw; }
  .hero-line { top: calc(var(--bar) + 3vh); right: 5vw; width: 36vw; font-size: clamp(1.8rem, 7vw, 3.4rem); }
  .buy-ticket { right: 7vw; bottom: 8vh; width: 176px; min-height: 72px; font-size: 2.2rem; }
  .hero-meta { bottom: 2vh; }
  .about-scroll { height: 205vh; }
  .about { min-height: 640px; }
  .about-title { left: 5vw; top: calc(var(--bar) + 2vh); font-size: clamp(4.5rem, 18vw, 9rem); max-width: 92vw; }
  .evidence-photo { right: -24vw; bottom: -2vh; width: 100vw; height: 56vh; }
  .story-note { left: 5vw; bottom: 5vh; width: 54vw; padding: 18px; }
  .traits, .marker-arrow { display: none; }
  .evidence-tag { top: 40vh; right: 5vw; }
  .flow-scroll { height: 250vh; }
  .flow-title { left: 5vw; top: calc(var(--bar) + 2vh); max-width: 46vw; font-size: clamp(4rem, 15vw, 8rem); }
  .migration-map { left: 42vw; top: 12vh; width: 210vw; height: 76vh; }
  .stage { width: 210px; }
  .stage-1 { left: 3vw; } .stage-2 { left: 51vw; } .stage-3 { left: 102vw; } .stage-4 { left: 153vw; }
  .chart-section { padding: calc(var(--bar) + 4vh) 3vw 8vh; }
  .chart-heading { margin-bottom: 0; }
  .chart-heading h2 { font-size: clamp(4rem, 16vw, 8rem); }
  .terminal-shell { padding: 38px 14px 18px; box-shadow: 12px 16px 0 var(--night); }
  .terminal-screen iframe, .screen-empty { height: 560px; }
  .chart-note { display: none; }
  .end-scene { min-height: 55vh; }
}

@media (max-width: 560px) {
  .micro-nav a, .micro-nav .nav-buy { padding: 0 6px; letter-spacing: .07em; }
  .hero-line { top: calc(var(--bar) + 15vh); right: 5vw; width: auto; white-space: nowrap; font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .hero-kicker { width: 74vw; font-size: .65rem; }
  .hero-portrait { height: 47vh; }
  .hero-word { top: 47%; }
  .hero-meta { display: none; }
  .hero-scene { bottom: 1.5vh; }
  .about-title { top: calc(var(--bar) + 3vh); font-size: clamp(3.6rem, 15.5vw, 6rem); left: 9vw; }
  .about-index { left: 1vw; }
  .evidence-photo { right: -36vw; width: 126vw; height: 50vh; }
  .story-note { width: 76vw; left: 6vw; bottom: 4vh; padding: 15px; }
  .story-note p { font-size: .72rem; line-height: 1.5; }
  .evidence-tag { top: 44vh; font-size: 9px; }
  .flow-title { max-width: 70vw; }
  .flow-title small { font-size: 8px; }
  .migration-map { left: 55vw; width: 260vw; }
  .stage-1 { left: 3vw; } .stage-2 { left: 64vw; } .stage-3 { left: 127vw; } .stage-4 { left: 190vw; }
  .flow-counter small { display: none; }
  .terminal-screen iframe, .screen-empty { height: 500px; }
  .terminal-top span:last-child { display: none; }
  .chart-controls { align-items: flex-start; }
  .x-stamp { width: 128px; }
  .end-caption { max-width: 45vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-scroll, .about-scroll, .flow-scroll { height: auto; }
  .hero, .about, .flow { position: relative; }
  .hero-word, .evidence-photo, .migration-map, .sky-poster { transform: none !important; }
  .hero-portrait { transform: translateX(-50%) !important; }
  .trait, .reveal-block { opacity: 1 !important; transform: none !important; }
  .ticker-track { animation: none; }
}

/* ---------- premium layer: entrances, hover lift and glow, type rhythm ---------- */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --lift: cubic-bezier(.2, .8, .2, 1);
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, .hero-line, .hero-kicker, .chart-note { text-wrap: balance; }
.story-note p, .screen-empty p { text-wrap: pretty; }
.about-title, .flow-title, .chart-heading h2 { letter-spacing: -.045em; }
.story-note { padding: var(--s5) var(--s6) var(--s6); }
.story-note p { line-height: 1.7; }
.story-note::before { margin-bottom: var(--s3); letter-spacing: .2em; }
.chart-controls { margin-top: var(--s7); gap: var(--s5); }
.stage { padding: var(--s4) var(--s4) var(--s4); }
.stage b { letter-spacing: -.01em; line-height: 1.05; }
.stage span { line-height: 1.5; letter-spacing: .02em; }
.terminal-top, .ca-hint, .hero-meta, .hero-scene, .about-index { letter-spacing: .18em; }

/* entrances: one-shot, staggered by --i. Uses the individual translate property so it never fights a transform. */
.enter { opacity: 0; translate: 0 28px; transition: opacity .8s var(--lift), translate .8s var(--lift); transition-delay: calc(var(--i, 0) * 90ms); }
.enter.in { opacity: 1; translate: 0 0; }

@media (hover: hover) {
  .story-note, .stage, .terminal-shell { transition: translate .35s var(--lift), box-shadow .35s var(--lift), background-color .35s; }
  .story-note:hover { translate: 0 -6px; box-shadow: 16px 18px 0 var(--ink), 0 0 36px color-mix(in srgb, var(--yellow) 55%, transparent); }
  .stage:hover { translate: 0 -8px; background-color: var(--cream); }
  .stage-2:hover { background-color: var(--yellow); }
  .stage-3:hover { background-color: var(--brown-mid); }
  .stage-4:hover { background-color: var(--fur-light); }
  .terminal-shell:hover { translate: 0 -4px; }
  a.social { transition: transform .25s var(--lift), background .25s, color .25s, box-shadow .25s; }
  a.social:hover, a.social:focus-visible { transform: translateY(-3px) scale(1.06); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 40%, transparent), 0 8px 18px color-mix(in srgb, var(--pink) 45%, transparent); }
  a.social:active { transform: translateY(0) scale(.97); }
  button.ca-value:hover, button.ca-value:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 70%, transparent), 0 6px 18px color-mix(in srgb, var(--amber) 40%, transparent); }
  a.dex-control { transition: color .25s, background .25s, filter .25s, translate .25s var(--lift); }
  a.dex-control:hover { translate: 0 -3px; }
  .micro-nav .nav-buy:not(.is-inert):hover { background: var(--pink); color: var(--ink); }
  a.stage-link { transition: translate .2s var(--lift); }
  a.stage-link:hover { translate: 3px 0; }
}
.story-note, .stage, .terminal-shell, .social, .ca-value, .dex-control { transition-timing-function: var(--lift); }

@media (prefers-reduced-motion: reduce) {
  .enter { opacity: 1 !important; translate: none !important; }
  .story-note:hover, .stage:hover, .terminal-shell:hover, a.social:hover, a.dex-control:hover, a.stage-link:hover { translate: none; transform: none; }
  .flow { overflow-x: auto; }
}