/* KUMO — "The Three Seals". Mobile-first. Tokens from work/design-spec.md */

@property --r { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root {
  --bg-0: #07060c; --bg-1: #0d0b14; --night-blue: #142030; --plum: #1f1018;
  --surface-1: #15121f; --surface-2: #1e1a2c; --surface-warm: #1f1410;
  --stone: #1b1924; --stone-hi: #2a2735; --stone-line: #3b3648; --void: #0b0a10;
  --text: #f4ead8; --text-muted: #b5abc6; --text-dim: #938aa6; --text-stone: #a49bb8;
  --ink: #1a0d05; --engraved: #3a3346;
  --pumpkin: #f46a12; --pumpkin-hi: #ff8a3d;
  --amber: #ffb340; --amber-soft: #ffd99a; --candle-core: #fff3d6;
  --violet: #9d4efc; --violet-soft: #c9a2ff;
  --green: #a6f26b;
  --border: rgba(244, 234, 216, .10); --border-strong: rgba(244, 234, 216, .18);
  --border-amber: rgba(255, 179, 64, .45); --border-violet: rgba(157, 78, 252, .35);

  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-hero: clamp(2.75rem, 1.636rem + 4.571vw, 5.75rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.667vw, 3.75rem);
  --fs-h3: clamp(1.5rem, 1.314rem + .762vw, 2rem);
  --fs-story: clamp(1.75rem, 1.1rem + 2.667vw, 3.5rem);
  --fs-lead: clamp(1.125rem, 1.032rem + .381vw, 1.375rem);
  --fs-body: clamp(1rem, .954rem + .19vw, 1.125rem);
  --fs-small: clamp(.875rem, .852rem + .095vw, .9375rem);
  --fs-label: clamp(.75rem, .727rem + .095vw, .8125rem);
  --fs-numeral: clamp(7rem, 5rem + 8vw, 13rem);
  --lh-display: 1.02; --lh-h2: 1.08; --lh-story: 1.18; --lh-body: 1.65; --lh-label: 1.4;
  --ls-hero: .02em; --ls-h2: .04em; --ls-wordmark: .12em; --ls-label: .18em; --ls-button: .06em;

  --container: 1200px; --container-wide: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-pad: clamp(72px, 2rem + 8vw, 176px);
  --r-sm: 8px; --r-md: 12px; --r-lg: 22px; --r-pill: 999px;
  --shadow-card: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 60px -20px rgba(0,0,0,.7);
  --glow-amber: 0 0 24px rgba(255,179,64,.35), 0 0 64px rgba(244,106,18,.22);
  --glow-violet: 0 0 32px rgba(157,78,252,.35), 0 0 80px rgba(157,78,252,.18);
  --glow-green: 0 0 12px rgba(166,242,107,.55);
  --text-glow-amber: 0 0 8px rgba(255,179,64,.85), 0 0 22px rgba(244,106,18,.55), 0 0 44px rgba(244,106,18,.25);
  --text-carved: 0 1px 0 rgba(255,255,255,.07), 0 -1px 0 rgba(0,0,0,.75);
  --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-snap: cubic-bezier(.2, .8, .2, 1); --ease-ignite: cubic-bezier(.3, 0, .2, 1);
  --header-h: 60px; --seal: 64px; --seal-y: 112px;
}
@media (min-width: 960px) { :root { --header-h: 72px; --seal: 72px; --seal-y: 120px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); background: var(--bg-1); }
html, body { overflow-x: clip; }
html.intro-on { overflow: hidden; }
body { margin: 0; min-height: 100vh; background: var(--bg-1); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(rgba(244,234,216,.03) 1px, transparent 1px) 0 0 / 24px 24px; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(255,179,64,.18); }
.ico { width: 18px; height: 18px; flex: none; fill: currentColor; }
.ico--sm { width: 14px; height: 14px; opacity: .7; }
.ico--up { transform: rotate(-45deg); }
.nw { white-space: nowrap; }
.container, .container-wide { width: 100%; margin-inline: auto; padding-inline: var(--gutter); }
.container { max-width: calc(var(--container) + 2 * var(--gutter)); }
.container-wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }

.eyebrow, .status, .chip, .seal-card__label, .scramble, .c3, .seal-card__dark, .countdown__label, .tx__hud, .tx__time, .tx__label, .tx__hint, .tx__ctrl, .tx__clock, .tx__caption, .seal-line, .ca__label, .ca__value, .ca__addr, .footer__label, .story__count, .intro__lines, .intro__skip, .scroll-cue {
  font-family: var(--font-mono); font-feature-settings: "liga" 0, "calt" 0;
}
.eyebrow { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-dim); }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; color: var(--text-muted); max-width: 46ch; text-wrap: balance; }

.section { position: relative; padding-block: var(--section-pad); }
/* anchor landings: skip the big top padding so the eyebrow sits 24px under the header (adds to html scroll-padding-top) */
.section[id] { scroll-margin-top: calc(24px - var(--section-pad)); }
.section__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.section__inner { position: relative; z-index: 4; }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head--center { justify-items: center; text-align: center; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: var(--r-md); border: 1px solid transparent; font-family: var(--font-body); font-weight: 700; font-size: .9375rem; line-height: 1.15; letter-spacing: var(--ls-button); text-transform: uppercase; text-decoration: none; text-align: center; transition: transform .2s var(--ease-out), background-color .2s, box-shadow .2s, border-color .2s, color .2s; }
.btn--primary { background: var(--pumpkin); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.18), 0 10px 30px -12px rgba(244,106,18,.6); }
.btn--primary:focus-visible { outline-color: var(--candle-core); }
.btn--ghost { background: rgba(13,11,20,.4); border-color: var(--border-strong); color: var(--text); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: .875rem; }
.btn--lg { min-height: 52px; }
.btn--xl { min-height: 60px; padding: 0 36px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn:active { transform: scale(.98); transition-duration: 80ms; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--pumpkin-hi); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--glow-amber); }
  .btn--ghost:hover { border-color: var(--border-amber); color: var(--amber-soft); background: rgba(255,179,64,.06); }
}

.skip-link { position: fixed; top: 10px; left: 10px; z-index: 101; padding: 12px 18px; border-radius: var(--r-md); background: var(--pumpkin); color: var(--ink); font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: none; outline-color: var(--candle-core); }
.noscript { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-strong); font-size: var(--fs-small); text-align: center; }

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: radial-gradient(60% 50% at 50% 42%, rgba(75,31,138,.28), transparent 70%), var(--bg-0); transition: opacity .4s var(--ease-in-out); }
html.intro-on .intro { display: flex; }
html.intro-leaving .intro { opacity: 0; }
html.intro-quick .intro { transition-duration: .2s; }
.intro__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 24px; text-align: center; transition: transform .4s var(--ease-in-out); }
/* content fades faster than the backdrop, so the hero entrance underneath never double-exposes with the wordmark */
html.intro-leaving .intro__inner { opacity: 0; transform: scale(1.04); transition: opacity .18s ease-out, transform .4s var(--ease-in-out); }
.intro__avatar { width: 120px; height: 120px; border-radius: 50%; box-shadow: var(--glow-violet); animation: introAvatar .7s var(--ease-out) .2s both; }
.intro__word { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.75rem, 1.6rem + 4.4vw, 4.5rem); line-height: 1; letter-spacing: .12em; padding-left: .12em; }
.intro__word .ch { display: inline-block; animation: ignite .42s var(--ease-ignite) calc(500ms + var(--k) * 70ms) both; }
.intro__lines { display: grid; justify-items: center; min-height: 1.5em; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-dim); }
.intro__line { grid-area: 1 / 1; white-space: nowrap; clip-path: inset(0 100% 0 0); }
.intro__line:nth-child(1) { animation: type .4s steps(18) .2s forwards, out .15s .78s forwards; }
.intro__line:nth-child(2) { animation: type .4s steps(18) .95s forwards, out .15s 1.48s forwards; }
.intro__line:nth-child(3) { color: var(--amber); animation: type .3s steps(11) 1.65s forwards; }
.intro__skip { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--r-md); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-dim); transition: color .2s; }
.intro__skip:hover { color: var(--text); }
@keyframes introAvatar { from { opacity: 0; transform: scale(.92); } }
@keyframes type { to { clip-path: inset(0 0 0 0); } }
@keyframes out { to { opacity: 0; } }
@media (min-width: 600px) { .intro__avatar { width: 160px; height: 160px; } }

/* ---------- ignite (tablet letters) ---------- */
@keyframes ignite {
  0% { color: var(--engraved); text-shadow: var(--text-carved); }
  60% { color: var(--candle-core); text-shadow: 0 0 12px rgba(255,243,214,.95), 0 0 32px rgba(255,179,64,.7); }
  100% { color: var(--amber-soft); text-shadow: var(--text-glow-amber); }
}
.ignite .w { display: inline-block; white-space: nowrap; }
.ignite .ch { display: inline-block; }

/* ---------- header ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color .28s, border-color .28s; }
.header.is-scrolled, .header.menu-open { background: rgba(13,11,20,.94); border-bottom-color: var(--border); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .header.is-scrolled, .header.menu-open { background: rgba(13,11,20,.72); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
}
.header__bar { height: var(--header-h); display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; margin-right: auto; text-decoration: none; border-radius: var(--r-md); }
.brand__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 1px var(--border-violet), 0 0 16px rgba(157,78,252,.35); }
.brand__word { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; letter-spacing: var(--ls-wordmark); line-height: 1.15; }
.header__actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: rgba(13,11,20,.4); color: var(--text); transition: border-color .2s, color .2s; }
.icon-btn:hover { border-color: var(--border-amber); color: var(--amber-soft); }
.lg-only { display: none; }
/* phones: Telegram is a 44x44 icon button (the hero CTA right below carries the label) */
@media (max-width: 599px) { .header__tg { width: 44px; padding: 0; } .header__tg .sm-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* very narrow: the X icon would push the menu button off-screen; X stays in the footer */
@media (max-width: 419px) { .header__actions .icon-btn[data-x] { display: none; } }

/* mobile menu = the same nav, shown as a panel */
.nav { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 49; padding: 8px var(--gutter) 24px; background: rgba(21,18,31,.97); border-bottom: 1px solid var(--border); max-height: calc(100svh - var(--header-h)); overflow-y: auto; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .nav { background: rgba(21,18,31,.98); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } } /* near-opaque: the header's own blur makes this one a no-op */
/* open panel: dim the page below it (shadow pushed down so the header bar itself is not dimmed) */
.nav.is-open { display: block; animation: menuIn .24s var(--ease-out); box-shadow: 0 100vmax 0 100vmax rgba(7,6,12,.62); }
@media (max-width: 959px) { .header.menu-open .header__tg { visibility: hidden; } }
.nav__list a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: .04em; text-decoration: none; color: var(--text); }
.nav__list a.is-active { color: var(--amber-soft); }
.nav__cta { margin-top: 20px; min-height: 52px; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } }

@media (min-width: 960px) {
  .lg-only { display: inline; } .sm-only, .menu-btn { display: none; }
  .brand__avatar { width: 40px; height: 40px; }
  .brand__word { font-size: 1.375rem; }
  .brand { margin-right: 0; }
  .nav, .nav.is-open { display: block; position: static; margin-inline: auto; padding: 0; background: none; border: 0; max-height: none; overflow: visible; animation: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav__list { display: flex; gap: clamp(20px, 2.4vw, 32px); }
  .nav__list a { position: relative; min-height: 44px; border: 0; font-family: var(--font-body); font-weight: 600; font-size: .9375rem; letter-spacing: .01em; color: var(--text-muted); transition: color .2s; }
  .nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .24s var(--ease-out); }
  .nav__list a:hover, .nav__list a.is-active { color: var(--text); }
  .nav__list a.is-active::after { transform: scaleX(1); }
  .nav__cta { display: none; }
}

/* ---------- fog ---------- */
.fog { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; overflow: hidden; pointer-events: none; z-index: 2; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 35%); mask-image: linear-gradient(0deg, transparent 0, #000 35%); }
.fog__sheet { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; background: radial-gradient(28% 60% at 22% 70%, rgba(196,186,226,.10), transparent 70%), radial-gradient(26% 50% at 58% 80%, rgba(196,186,226,.08), transparent 70%), radial-gradient(24% 55% at 82% 65%, rgba(180,170,215,.09), transparent 70%); background-size: 50% 100%; background-repeat: repeat-x; animation: fogDrift 80s linear infinite; will-change: transform; }
.fog__sheet--2 { display: none; opacity: .6; transform-origin: bottom; scale: 1 1.3; animation-duration: 120s; animation-direction: reverse; }
@media (min-width: 960px) { .fog__sheet--2 { display: block; } html.save-data .fog__sheet--2 { display: none; } }
@keyframes fogDrift { to { transform: translateX(-50%); } }

/* ---------- embers canvas ---------- */
.embers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* ---------- reveal ---------- */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero { position: relative; display: flex; align-items: flex-end; min-height: max(640px, 100vh); min-height: max(640px, 100svh); padding: calc(var(--header-h) + 24px) 0 28px; }
.hero__media { position: absolute; left: 0; right: 0; top: 0; height: 72%; z-index: 0; overflow: hidden; background: var(--night-blue) url("../video/awakening-poster.jpg") 50% 50% / cover no-repeat; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 55%; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(180deg, rgba(7,6,12,.75) 0%, rgba(7,6,12,0) 22%),
  linear-gradient(0deg, var(--bg-1) 0%, rgba(13,11,20,.88) 22%, rgba(13,11,20,.35) 50%, rgba(13,11,20,0) 70%),
  radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(7,6,12,.55) 100%); }
.hero__inner { position: relative; z-index: 4; display: grid; gap: 22px; }
.hero__content { max-width: 640px; }
.eyebrow--live { display: flex; align-items: center; gap: 10px; color: var(--amber); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: var(--glow-green); flex: none; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.hero__title { margin: 14px 0 16px; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-hero); line-height: var(--lh-display); letter-spacing: var(--ls-hero); text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.hero__title .w { display: inline-block; }
.hero__sub { max-width: 46ch; font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; color: var(--text-muted); text-wrap: balance; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.hero__ctas { display: grid; gap: 12px; margin-top: 26px; }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 16px; border-top: 1px solid var(--border); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.status__row { display: flex; align-items: center; gap: 10px; }
.status__k { color: var(--text-dim); }
.status__seals { display: flex; gap: 6px; }
.st { width: 20px; height: 20px; fill: currentColor; }
.st--1 { color: var(--amber); filter: drop-shadow(0 0 6px rgba(255,179,64,.7)); }
.st--2 { color: var(--violet); }
.st--3 { color: var(--text-dim); opacity: .35; }
.status__v { color: var(--text-dim); }
.status__v.is-live { color: var(--amber); }
.is-q { animation: qflicker 4s steps(1) infinite; }
@keyframes qflicker { 0%, 100% { opacity: 1; } 42% { opacity: .35; } 44% { opacity: 1; } 71% { opacity: .55; } 73% { opacity: 1; } }
.scroll-cue { display: none; }
html.js .h-in { opacity: 0; }
html.is-ready .h-in { animation: rise .8s var(--ease-out) var(--d, 0ms) both; }
html.no-entrance .h-in { opacity: 1; animation: none; } /* ?skipintro=1 (automated screenshots): hero shown at rest */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (min-width: 600px) {
  .hero__ctas { display: flex; flex-wrap: wrap; }
}
@media (min-width: 960px) {
  .hero { min-height: max(720px, 100vh); min-height: max(720px, 100svh); padding-bottom: 96px; }
  .hero__media { height: auto; bottom: 0; }
  .hero__scrim { background:
    linear-gradient(180deg, rgba(7,6,12,.75) 0%, rgba(7,6,12,0) 22%),
    linear-gradient(0deg, var(--bg-1) 0%, rgba(13,11,20,.88) 16%, rgba(13,11,20,.35) 40%, rgba(13,11,20,0) 60%),
    linear-gradient(90deg, rgba(7,6,12,.86) 0%, rgba(7,6,12,.55) 38%, rgba(7,6,12,0) 62%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(7,6,12,.55) 100%); }
  .hero__video { object-position: 50% 50%; }
  /* text stays in the left ~44% so it never runs into the creature walking down the street */
  .hero__content { max-width: min(600px, 44vw); }
  .hero__sub { max-width: 34ch; }
  .hero__inner { grid-template-columns: 1fr auto; align-items: end; gap: 40px; }
  .status { display: grid; gap: 12px; width: 248px; padding: 16px 20px; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: rgba(21,18,31,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .status__row { justify-content: space-between; }
  .status__row:first-of-type { display: grid; grid-template-columns: auto auto; gap: 10px; }
  .status__txt { grid-column: 1 / -1; color: var(--text); }
  .status__seals { justify-self: end; }
  .status__row--next { padding-top: 12px; border-top: 1px solid var(--border); }
  .st { width: 22px; height: 22px; }
  .scroll-cue { position: absolute; left: 50%; bottom: 14px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 4px; transform: translateX(-50%); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--text-dim); border-radius: var(--r-sm); }
  .scroll-cue i { display: block; width: 1px; height: 40px; background: linear-gradient(var(--amber), transparent); transform-origin: top; animation: cue 1.8s var(--ease-in-out) infinite; }
}
@media (min-width: 960px) and (max-height: 820px) { .scroll-cue { display: none; } } /* short laptops: no room under the CTAs */
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- story ---------- */
.story { position: relative; }
.story__stage { position: relative; display: grid; gap: 40px; justify-items: center; padding: var(--section-pad) var(--gutter) calc(var(--section-pad) + 10vh); overflow: hidden; }
.story__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(80% 60% at 50% 80%, #1a1426 0%, var(--bg-1) 70%); }
.story__bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(0deg, var(--bg-1) 8%, transparent); }
.story__castle { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: max(34%, 26.4vw); fill: #120f1c; }
.story__castle .win { fill: var(--amber); transform-box: fill-box; transform-origin: center; animation: flicker 2.4s ease-in-out infinite; }
.story__castle .win:nth-of-type(2) { animation-delay: -1.1s; } .story__castle .win:nth-of-type(3) { animation-delay: -1.9s; }
.story__orb { position: absolute; left: 50%; top: 70%; width: min(56vw, 420px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--candle-core) 0%, var(--amber) 14%, rgba(244,106,18,.45) 32%, rgba(157,78,252,.12) 55%, transparent 70%); mix-blend-mode: screen; opacity: min(.9, calc(.18 + var(--step, 6) * .12)); transform: translate(-50%, -50%) scale(calc(.6 + var(--step, 6) * .07)); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.story__orb span { position: absolute; inset: 36%; border-radius: 50%; background: radial-gradient(circle, rgba(255,243,214,.9), transparent 70%); animation: flicker 2.4s ease-in-out infinite; }
.fog--story { height: 40%; }
.story__lines { position: relative; z-index: 4; display: grid; gap: clamp(40px, 5vw, 64px); justify-items: center; }
.story__line { max-width: 22ch; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: var(--lh-story); letter-spacing: .01em; text-wrap: balance; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.story__more { display: flex; align-items: center; justify-content: center; width: max-content; min-height: 44px; margin: 18px auto 0; padding: 0 12px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; text-decoration: none; color: var(--violet-soft); border-radius: var(--r-sm); }
.story__more:hover { color: var(--amber-soft); }
/* the 01 / 06 counter only means something while lines advance one at a time (JS + motion allowed) */
.story__count { display: none; position: relative; z-index: 4; font-size: var(--fs-label); letter-spacing: .2em; color: var(--text-dim); }
.story__steps { display: none; }
@media (max-width: 599px) { .story__castle .win:nth-of-type(3) { display: none; } } /* fog hides its tower on phones */

@media (prefers-reduced-motion: no-preference) {
  html.js .story__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 520px; padding: 0; display: block; }
  html.js .story__steps { display: block; margin-top: -100vh; margin-top: -100svh; }
  html.js .story__step { height: 70vh; height: 70svh; }
  html.js .story__lines { position: absolute; left: 0; right: 0; top: 36%; transform: translateY(-50%); padding: 0 var(--gutter); gap: 0; }
  html.js .story__line { grid-area: 1 / 1; max-width: 20ch; font-size: var(--fs-story); opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
  html.js .story__line.is-past { transform: translateY(-16px); }
  html.js .story__line.is-active, html.js .story__line:focus-within { opacity: 1; transform: none; pointer-events: auto; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out); }
  html.js .story__count { display: block; position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (min-width: 960px) {
  html.js .story__line { filter: blur(8px); }
  html.js .story__line.is-active { filter: none; }
}

/* ---------- unlocks ---------- */
.unlocks__bg { background: radial-gradient(60% 50% at 18% 30%, rgba(255,179,64,.08), transparent 70%), radial-gradient(50% 45% at 82% 70%, rgba(157,78,252,.06), transparent 70%); }
.seals { display: grid; }
.fuse { justify-self: center; width: 2px; height: 40px; background: var(--amber); box-shadow: var(--glow-amber); }
.fuse--dim { background: repeating-linear-gradient(180deg, var(--violet) 0 6px, transparent 6px 14px); opacity: .4; box-shadow: none; }

.seal-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 28px 22px 24px; border-radius: var(--r-lg); }
.seal-card__numeral { position: absolute; right: -2%; top: 16%; z-index: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-numeral); line-height: .8; letter-spacing: .08em; pointer-events: none; user-select: none; } /* spacing keeps the I's serifs apart: carved strokes, not one slab */
.seal-card__top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 28px; }
.seal-card__label { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.seal-card__seal { position: relative; z-index: 3; width: var(--seal); height: var(--seal); margin: 24px auto 22px; flex: none; }
.wax { position: relative; z-index: 2; width: 100%; height: 100%; overflow: visible; }
.wax__ring { fill: none; stroke: rgba(255,230,200,.28); stroke-width: 1.5; }
.wax__glyph { font-family: var(--font-display); font-weight: 800; font-size: 34px; fill: var(--amber-soft); fill-opacity: .85; }
.seal-card__title { position: relative; z-index: 3; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: .08em; text-align: center; }

/* card 1 — broken seal */
.seal-card--1 { background: radial-gradient(120% 70% at 50% 0%, rgba(255,179,64,.14), transparent 60%), linear-gradient(180deg, #24170f 0%, var(--surface-warm) 60%, #170f0c 100%); border: 1px solid var(--border-amber); box-shadow: var(--shadow-card), 0 0 60px -20px rgba(244,106,18,.45); transition: transform .28s var(--ease-out), border-color .28s, box-shadow .28s; }
/* numerals: opaque pre-mixed colours (alpha on a big variable font shows overlapping contours as hollow slabs) */
.seal-card--1 .seal-card__numeral { color: #2f1f13; color: color-mix(in srgb, var(--amber) 7%, #1f1410); }
.seal-card--1 .seal-card__label { color: var(--amber); }
.chip--open { background: var(--amber); color: var(--ink); }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1.5px rgba(26,13,5,.55); }
.seal-glow { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255,179,64,.55), transparent 65%); animation: flicker 2.4s ease-in-out infinite; }
.seal-flash { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; background: radial-gradient(circle, rgba(255,243,214,.95), rgba(255,179,64,.45) 35%, transparent 68%); opacity: 0; z-index: 3; pointer-events: none; }
.burst { position: absolute; left: 50%; top: 50%; z-index: 4; }
.burst i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--amber-soft); box-shadow: 0 0 6px var(--amber); opacity: 0; }
.half { transform-box: fill-box; transform-origin: center; }
.half-l { transform: translate(-13px, 5px) rotate(-18deg); }
.half-r { transform: translate(12px, 4px) rotate(14deg); }
.crack { fill: none; stroke: var(--candle-core); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 0; filter: drop-shadow(0 0 3px rgba(255,179,64,.9)); }
.seal-card--1 .seal-card__title { color: var(--amber-soft); text-shadow: var(--text-glow-amber); }
.seal-card__body { position: relative; z-index: 3; margin-top: 16px; color: var(--text); font-size: var(--fs-small); line-height: 1.65; text-align: center; text-wrap: pretty; }
.seal-card--1 .seal-card__body { text-align: left; } /* matches the checklist and button below it */
.checks { position: relative; z-index: 3; display: grid; gap: 10px; margin: 20px 0 24px; padding: 16px 0 0; border-top: 1px solid rgba(255,179,64,.16); font-weight: 600; font-size: var(--fs-small); }
.checks li { display: flex; align-items: center; gap: 10px; }
.candle { width: 18px; height: 18px; color: var(--amber); }
.candle .flame, .candle use { transform-box: fill-box; }
.seal-card__cta { position: relative; z-index: 3; margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
  .seal-card--1:hover { transform: translateY(-4px); border-color: rgba(255,179,64,.7); box-shadow: var(--shadow-card), 0 0 80px -20px rgba(244,106,18,.6); }
}

/* card 1 — pre-break state (JS only) and the break itself */
html.js .seal-card--1:not(.is-broken) .half { transform: none; }
html.js .seal-card--1:not(.is-broken) .crack { stroke-dashoffset: 120; }
html.js .seal-card--1:not(.is-broken) .seal-glow { opacity: .25; }
html.js .seal-card--1:not(.is-broken) .seal-card__title .ch { color: var(--engraved); text-shadow: var(--text-carved); }
html.js .seal-card--1 .seal-card__title { text-shadow: none; }
html.js .seal-card--1 .seal-card__title .ch { color: var(--amber-soft); text-shadow: var(--text-glow-amber); }
.seal-card--1.is-broken .wax--1 { animation: shake .24s linear; }
.seal-card--1.is-broken .crack { animation: draw .22s linear .26s both; }
.seal-card--1.is-broken .half-l { animation: splitL .52s var(--ease-snap) .48s both; }
.seal-card--1.is-broken .half-r { animation: splitR .52s var(--ease-snap) .48s both; }
.seal-card--1.is-broken .seal-flash { animation: flash .9s var(--ease-out) .48s both; }
.seal-card--1.is-broken .seal-glow { animation: glowIn .9s var(--ease-out) .48s both, flicker 2.4s ease-in-out 1.4s infinite; }
.seal-card--1.is-broken .burst i { animation: ember var(--t, .8s) var(--ease-out) .48s both; }
.seal-card--1.is-broken .seal-card__title .ch { animation: ignite .42s var(--ease-ignite) calc(560ms + var(--k) * 55ms) both; }
@keyframes shake { 0%, 100% { transform: none; } 11% { transform: rotate(-4deg); } 22% { transform: rotate(4deg); } 33% { transform: rotate(-3deg); } 44% { transform: rotate(4deg); } 55% { transform: rotate(-4deg); } 66% { transform: rotate(3deg); } 77% { transform: rotate(-3deg); } 88% { transform: rotate(2deg); } }
@keyframes draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes splitL { from { transform: none; } }
@keyframes splitR { from { transform: none; } }
@keyframes flash { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .9; } 100% { opacity: .35; transform: scale(1.6); } }
@keyframes glowIn { from { opacity: .25; } }
@keyframes ember { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }

/* card 2 — stone, chains, glyphs */
.seal-card--2 { background: linear-gradient(160deg, var(--stone-hi) 0%, var(--stone) 45%, #14121b 100%); border: 1px solid var(--border); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -2px 0 rgba(0,0,0,.4); text-align: center; }
.seal-card--2::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .12; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stone-cracks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; fill: none; stroke: var(--stone-line); stroke-width: 1; stroke-opacity: .8; vector-effect: non-scaling-stroke; }
.stone-cracks path { vector-effect: non-scaling-stroke; }
.seal-card--2 .seal-card__numeral { color: #241d33; color: color-mix(in srgb, var(--violet) 8%, var(--stone)); }
.seal-card--2 .seal-card__label { color: var(--violet-soft); }
.chip--sealed { background: rgba(157,78,252,.22); border: 1px solid var(--border-violet); color: var(--text); }
.chains { position: absolute; left: 50%; top: calc(var(--seal-y) + 1px); z-index: 2; width: 0; height: 0; }
.chain { position: absolute; left: -420px; top: -13px; width: 840px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26'%3E%3Crect x='3' y='4' width='26' height='18' rx='9' fill='none' stroke='%234a4458' stroke-width='4.5'/%3E%3Crect x='3.5' y='3.2' width='25' height='17' rx='8.5' fill='none' stroke='%237d7493' stroke-width='1' opacity='.55'/%3E%3Cpath d='M27 10.5h13v5H27zM0 10.5h6v5H0z' fill='%23514a61'/%3E%3C/svg%3E") 0 0 / 40px 26px repeat-x; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.chain--a { transform: rotate(52deg); } .chain--b { transform: rotate(-52deg); }
.seal-card--2.is-rattle .chain--a { animation: rattleA .27s linear; }
.seal-card--2.is-rattle .chain--b { animation: rattleB .27s linear; }
.seal-card--2.is-rattle .wax--2 { animation: sealPulse .3s var(--ease-out); }
@keyframes rattleA { 0%, 100% { transform: rotate(52deg); } 17% { transform: rotate(53.5deg); } 50% { transform: rotate(50.5deg); } 83% { transform: rotate(53deg); } }
@keyframes rattleB { 0%, 100% { transform: rotate(-52deg); } 17% { transform: rotate(-50.5deg); } 50% { transform: rotate(-53.5deg); } 83% { transform: rotate(-51deg); } }
@keyframes sealPulse { 50% { transform: scale(1.06); } }
.wax--2 { filter: drop-shadow(0 0 14px rgba(157,78,252,.5)); }
.seal-card--2 .seal-card__title { color: var(--text-stone); text-shadow: var(--text-carved); }
.seal-card--2 .seal-card__title.is-glitch { animation: glitch .28s steps(1) both; }
@keyframes glitch {
  0% { clip-path: inset(0 0 58% 0); transform: translateX(-3px); text-shadow: 2px 0 var(--violet), -2px 0 var(--pumpkin); }
  33% { clip-path: inset(38% 0 22% 0); transform: translateX(4px); text-shadow: -1px 0 var(--violet), 1px 0 var(--pumpkin); }
  66% { clip-path: inset(72% 0 0 0); transform: translateX(-2px); text-shadow: 1px 0 var(--violet), -1px 0 var(--pumpkin); }
  100% { clip-path: none; transform: none; }
}
/* own dark plate so the chains never cross the letters (contrast stays AA) */
.seal-card__micro { position: relative; z-index: 3; align-self: center; width: max-content; max-width: 100%; margin-top: 12px; padding: 3px 10px; border-radius: 4px; background: rgba(20,18,27,.9); box-shadow: 0 0 14px 6px rgba(20,18,27,.75); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-soft); }
.scramble { position: relative; z-index: 1; order: 9; display: grid; gap: 6px; justify-items: center; margin: auto 0; padding-top: 28px; font-size: 15px; font-weight: 500; letter-spacing: .12em; line-height: 1.3; color: #6e6585; white-space: pre; user-select: none; }

/* card 3 — the void */
.seal-card--3 { background: var(--void); text-align: center; touch-action: pan-y; cursor: crosshair; transition: --r .4s var(--ease-out); -webkit-user-select: none; user-select: none; }
.seal-card--3::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px); }
.seal-card--3::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle var(--r) at var(--mx, 50%) var(--my, 40%), rgba(255,217,154,.10), transparent 70%); }
.seal-card--3.is-lit { --r: 120px; transition-duration: .24s; }
.seal-card--3.is-touch.is-lit { --r: 110px; }
.seal-card--3.is-touch:not(.is-lit) { transition-duration: .9s; }
.seal-card--3:focus-visible { --mx: 50%; --my: 45%; --r: 130px; outline-offset: 4px; }
.void-outline { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.void-outline rect { width: calc(100% - 1px); height: calc(100% - 1px); fill: none; stroke: rgba(244,234,216,.12); stroke-dasharray: 2 9 14 6 3 11; }
.seal-card--3 .seal-card__numeral { color: #171519; color: color-mix(in srgb, var(--text) 5%, var(--void)); }
@media (max-width: 599px) { .seal-card__numeral { right: 16px; top: 60px; font-size: 6rem; } } /* inside the card, not a tab off the edge */
.c3 { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; }
.c3__label { color: var(--text-dim); clip-path: polygon(0 0, 100% 0, 100% 48%, 0 48%, 0 56%, 100% 56%, 100% 100%, 0 100%); }
.chip--void { border: 1px dashed rgba(244,234,216,.16); color: var(--text-dim); }
.void-seal { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px dashed rgba(244,234,216,.14); }
/* redactions read as burnt ink, not a loading skeleton: torn edges, slight tilt, no rounded UI corners */
.redact { display: block; height: 18px; margin: 0 auto 10px; border-radius: 0; background: repeating-linear-gradient(90deg, #040308 0 3px, #09080e 3px 4px); box-shadow: 0 0 22px 2px rgba(0,0,0,.85); clip-path: polygon(0 14%, 5% 0, 33% 9%, 61% 0, 86% 11%, 100% 3%, 98% 88%, 72% 100%, 45% 91%, 18% 100%, 1% 86%); transform: rotate(-.7deg); }
.redact + .redact { transform: rotate(.5deg); }
.c3__noise { display: block; margin-top: 14px; overflow: hidden; white-space: nowrap; font-size: 13px; letter-spacing: .1em; color: var(--violet); opacity: .28; text-shadow: 1px 0 rgba(244,106,18,.45), -1px 0 rgba(157,78,252,.45); }
.c3__foot { display: block; margin-top: auto; padding-top: 22px; font-size: var(--fs-label); letter-spacing: .14em; color: var(--text-dim); }
.c3__hint { display: none; margin-top: 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
@media (hover: none) { .c3__hint { display: block; } }
.seal-card__dark { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle var(--r) at var(--mx, 50%) var(--my, 40%), rgba(255,217,154,.10), transparent 70%), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px), var(--void); -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx, 50%) var(--my, 40%), #000 0%, rgba(0,0,0,.35) 50%, transparent 100%); mask-image: radial-gradient(circle var(--r) at var(--mx, 50%) var(--my, 40%), #000 0%, rgba(0,0,0,.35) 50%, transparent 100%); }
.dk-key { position: absolute; left: 50%; top: var(--seal-y); width: 34px; height: 34px; margin: -17px 0 0 -17px; fill: var(--amber-soft); filter: drop-shadow(0 0 8px rgba(255,179,64,.6)); }
.dk-title { position: absolute; left: 0; right: 0; top: calc(var(--seal-y) + var(--seal) / 2 + 22px); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); letter-spacing: .08em; line-height: 1.1; color: var(--text-muted); text-shadow: 2px 0 rgba(244,106,18,.55), -2px 0 rgba(157,78,252,.55); }
.dk-line { position: absolute; left: 0; right: 0; top: calc(var(--seal-y) + var(--seal) / 2 + 74px); font-size: var(--fs-label); letter-spacing: .2em; color: var(--amber-soft); }
.seal-card--3.is-jitter .c3 { animation: jitter .12s steps(1); }
.seal-card--3.is-jitter .c3__label { text-shadow: 1px 0 rgba(244,106,18,.5), -1px 0 rgba(157,78,252,.5); }
@keyframes jitter { 0% { transform: translateX(2px); } 33% { transform: translateX(-1px); } 66% { transform: translateX(1px); } 100% { transform: none; } }

/* card heights: the less we know, the smaller the card */
.seal-card--1 { min-height: 460px; } .seal-card--2 { min-height: 380px; } .seal-card--3 { min-height: 300px; }

@media (min-width: 960px) {
  .seals { grid-template-columns: 1fr 32px 1fr 32px 1fr; align-items: stretch; }
  .fuse { align-self: start; justify-self: stretch; width: auto; height: 2px; margin-top: var(--seal-y); }
  .fuse--dim { background: repeating-linear-gradient(90deg, var(--violet) 0 6px, transparent 6px 14px); }
  .seal-card { padding: 32px 28px 28px; min-height: 560px; }
  .seal-card__numeral { right: -4%; top: 18%; }
  /* the less we know, the shorter the card; seals stay on one line for the fuse (--seal-y) */
  .seals { align-items: start; }
  .seal-card--1 { min-height: 560px; } .seal-card--2 { min-height: 500px; } .seal-card--3 { min-height: 440px; }
}

/* countdown slot */
.countdown { display: grid; justify-items: center; gap: 10px; max-width: 620px; margin: clamp(48px, 7vw, 72px) auto 0; padding: 28px 24px 30px; text-align: center; border-radius: var(--r-lg); border: 1px solid var(--border); background: linear-gradient(180deg, rgba(30,26,44,.55), rgba(21,18,31,.25)); }
.countdown__label { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-dim); }
.countdown__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); line-height: 1; letter-spacing: .14em; padding-left: .14em; color: var(--text-dim); }
.countdown__note { font-size: var(--fs-small); color: var(--text-muted); }
.countdown.is-live .countdown__label { color: var(--amber); }
.cd { display: flex; align-items: flex-start; justify-content: center; gap: clamp(8px, 2vw, 16px); letter-spacing: 0; padding: 0; }
.cd__u { display: grid; gap: 8px; min-width: 2.2ch; }
.cd__n { color: var(--amber-soft); text-shadow: var(--text-glow-amber); font-variant-numeric: tabular-nums; }
.cd__sep { color: var(--text-dim); opacity: .6; }
.cd__l { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.cd__l .s { display: none; }
@media (max-width: 599px) { .cd__l .s { display: inline; } .cd__l .l { display: none; } }
@media (max-width: 359px) { .countdown { padding-inline: 14px; } .countdown__value.cd { font-size: 1.875rem; } .cd { gap: 6px; } }

/* ---------- transmission ---------- */
.tx__bg { background: radial-gradient(50% 60% at 50% 55%, rgba(157,78,252,.14), transparent 70%); }
.tx__wrap { max-width: 1040px; margin-inline: auto; }
/* frame + HUD + controls fit one screen on short laptops */
.tx__wrap { max-width: min(1040px, max(320px, calc((100svh - var(--header-h) - 150px) * 16 / 9))); }
@media (min-width: 960px) and (max-height: 820px) {
  .tx .section-head { margin-bottom: 32px; }
  .tx__wrap { max-width: min(1040px, max(320px, calc((100svh - var(--header-h) - 240px) * 16 / 9))); }
}
/* taller desktops (1440x900 etc.): leave room for the ~240px section head so the controls stay in view */
@media (min-width: 960px) and (min-height: 821px) {
  .tx__wrap { max-width: min(1040px, max(320px, calc((100svh - var(--header-h) - 330px) * 16 / 9))); }
}
/* the play group is sized by the frame (this container), not by the viewport */
.tx__wrap { container-type: inline-size; }
.tx__hud { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.tx__hud > span { white-space: nowrap; }
.tx__hud-r { display: none; }
.rec { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--pumpkin); vertical-align: 1px; animation: blink 1.2s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.tx__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; border: 1px solid var(--border-strong); background: #000; box-shadow: var(--glow-violet), 0 40px 100px -40px rgba(0,0,0,.8); transition: border-color .2s; }
.tx__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.tx__veil, .tx__brackets, .tx__time, .tx__play { transition: opacity .3s var(--ease-out); }
.tx__veil { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), radial-gradient(42% 30% at 50% 88%, rgba(7,6,12,.7), transparent 100%), radial-gradient(100% 80% at 50% 50%, transparent 50%, rgba(7,6,12,.6) 100%), rgba(7,6,12,.45); }
.tx .lead { max-width: 60ch; }
.tx__brackets i { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,179,64,.7); pointer-events: none; }
.tx__brackets i:nth-child(1) { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.tx__brackets i:nth-child(2) { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.tx__brackets i:nth-child(3) { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.tx__brackets i:nth-child(4) { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.tx__time { position: absolute; right: 44px; bottom: 18px; font-size: 11px; letter-spacing: .14em; color: rgba(255,217,154,.8); pointer-events: none; }
/* play group sits under the tablet's lettering, never over it */
.tx__play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; padding-bottom: clamp(14px, 6%, 44px); color: var(--text); border-radius: 18px; }
.tx__play:focus-visible { outline-offset: -6px; }
.tx__ring { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--amber); background: rgba(13,11,20,.55); color: var(--amber-soft); transition: transform .2s var(--ease-out), box-shadow .2s; }
.tx__icon { width: 26px; height: 26px; fill: currentColor; transform: translateX(1.5px); }
.tx__label { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.tx__hint { margin-top: -4px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber-soft); opacity: .85; }
.tx__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); pointer-events: none; }
.tx__progress i { display: block; height: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left; }
.tx.is-playing .tx__veil, .tx.is-playing .tx__brackets, .tx.is-playing .tx__time, .tx.is-playing .tx__play { opacity: 0; pointer-events: none; }
.tx.is-started .tx__time { opacity: 0; }
.tx__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.tx__ctrl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: rgba(21,18,31,.6); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--text); transition: border-color .2s, color .2s; }
.tx__ctrl:hover { border-color: var(--border-amber); color: var(--amber-soft); }
.tx__clock { min-width: 13ch; font-size: var(--fs-label); letter-spacing: .12em; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tx__fallback { margin-top: 12px; text-align: center; color: var(--amber-soft); }
.tx__caption { margin-top: 14px; text-align: center; font-size: var(--fs-label); letter-spacing: .1em; color: var(--text-dim); text-wrap: balance; }
/* before the first play: one play button (the ring in the frame), not two */
.tx:not(.is-started) [data-tx-toggle] { display: none; }
.tx:not(.is-started) .tx__clock { opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  .tx__frame:hover { border-color: var(--border-amber); }
  .tx__frame:hover .tx__ring { transform: scale(1.06); box-shadow: var(--glow-amber); }
}
/* frames under 860px wide: small ring, no labels, so it stays under the tablet's "25 OCTOBER" lettering
   (the lead text and the "Sound: on" control still say the clip has sound) */
@container (max-width: 859px) { .tx__label, .tx__hint { display: none; } .tx__ring { width: 56px; height: 56px; } .tx__icon { width: 22px; height: 22px; } }
@container (min-width: 860px) { .tx__ring { width: 88px; height: 88px; } .tx__icon { width: 30px; height: 30px; } }
@container (min-width: 520px) { .tx__hud-r { display: inline; } }
/* browsers without container queries: the safe, small play group */
@supports not (container-type: inline-size) { .tx__label, .tx__hint { display: none; } .tx__ring { width: 56px; height: 56px; } .tx__icon { width: 22px; height: 22px; } }

/* ---------- lair ---------- */
.lair__bg { background: radial-gradient(55% 60% at 30% 50%, var(--plum), transparent 70%); }
.lair__grid { display: grid; gap: 40px; align-items: center; }
.lair__media { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--r-lg); background: var(--plum); box-shadow: 0 0 0 1px var(--border-violet), 0 -30px 90px -40px rgba(157,78,252,.55), 0 40px 110px -45px rgba(244,106,18,.5); }
.lair__media img { width: 100%; height: 100%; object-fit: cover; }
.lair__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 90% at 50% 45%, transparent 60%, rgba(7,6,12,.55) 100%); }
.lair__text { display: grid; gap: 16px; justify-items: start; }
.lair__body { max-width: 44ch; color: var(--text-muted); }
.lair__aside { font-size: var(--fs-small); color: var(--text-dim); text-wrap: pretty; }
.lair__text .btn { margin-top: 10px; width: 100%; }
@media (min-width: 600px) { .lair__text .btn { width: auto; } }
@media (min-width: 960px) {
  .lair__grid { grid-template-columns: 7fr 5fr; gap: 64px; }
  /* image never taller than the screen, so the text and CTA beside it stay in view */
  .lair__media { justify-self: end; width: min(100%, calc(100vh - var(--header-h) - 96px)); width: min(100%, calc(100svh - var(--header-h) - 96px)); }
  @media (prefers-reduced-motion: no-preference) {
    .lair__media img { transition: transform 14s linear; }
    .lair__media.is-in img { transform: scale(1.04); }
  }
}

/* ---------- faq ---------- */
.faq__grid { display: grid; gap: 40px; }
.faq__head { display: grid; gap: 14px; align-content: start; justify-items: start; }
.faq__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 1px var(--border-violet), 0 0 24px rgba(157,78,252,.35); }
.faq__ask { display: none; align-items: center; gap: 14px; min-height: 44px; margin-top: 10px; text-decoration: none; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--violet-soft); border-radius: var(--r-md); transition: color .2s; }
.faq__ask:hover { color: var(--amber-soft); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item:first-child { border-top: 1px solid var(--border); }
.faq__item summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: 20px 52px 20px 0; list-style: none; cursor: pointer; font-weight: 700; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.35; transition: color .2s, background .2s; border-radius: 4px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
.faq__icon { position: absolute; right: 6px; top: 50%; width: 24px; height: 24px; margin-top: -12px; color: var(--text-dim); transition: transform .24s var(--ease-out), color .24s; }
.faq__icon svg { width: 24px; height: 24px; }
.faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--green); box-shadow: var(--glow-green); opacity: 0; transition: opacity .24s; }
.faq__item[open] .faq__icon { transform: rotate(90deg); color: var(--amber); }
.faq__item[open] .faq__icon::after { opacity: 1; }
.faq__item[open] summary { color: var(--amber-soft); }
.faq__a { max-width: 62ch; padding: 0 8px 24px 0; color: var(--text-muted); text-wrap: pretty; }
.faq__item[open] .faq__a { animation: faqIn .28s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
@media (hover: hover) and (pointer: fine) { .faq__item summary:hover { color: var(--amber-soft); background: linear-gradient(90deg, rgba(255,179,64,.04), transparent); } }
@media (min-width: 960px) {
  .faq__grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .faq__head { position: sticky; top: 120px; }
  .faq__ask { display: inline-flex; }
  .faq__a { padding-right: 52px; }
}

/* ---------- cta ---------- */
.cta { display: flex; align-items: center; min-height: 80vh; min-height: 80svh; text-align: center; overflow: hidden; }
.cta__bg { background: radial-gradient(45% 55% at 50% 42%, rgba(157,78,252,.20), transparent 70%), linear-gradient(180deg, transparent 60%, var(--bg-0) 100%); }
.cta__bg .fog { height: 40%; }
.cta__inner { display: grid; justify-items: center; gap: 18px; }
.cta__sigil { position: relative; display: grid; place-items: center; width: 170px; height: 170px; margin-bottom: 14px; }
.cta__orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--border-violet); animation: spin 40s linear infinite; }
.cta__orbit::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--amber); box-shadow: var(--glow-amber); }
.cta__avatar { width: 128px; height: 128px; border-radius: 50%; animation: halo 3.2s ease-in-out infinite alternate; }
.cta__title { font-size: calc(var(--fs-h2) * 1.15); font-weight: 800; }
.cta .btn { margin-top: 12px; width: 100%; max-width: 420px; }
.seal-line { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.cta .seal-line { margin-top: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes halo { from { box-shadow: 0 0 0 0 rgba(157,78,252,0), 0 0 48px rgba(157,78,252,.35); } to { box-shadow: 0 0 0 10px rgba(157,78,252,.10), 0 0 80px rgba(157,78,252,.55); } }
@media (min-width: 600px) { .cta .btn { width: auto; } .cta__sigil { width: 220px; height: 220px; } .cta__avatar { width: 168px; height: 168px; } }
@media (max-width: 959px) { .cta { min-height: auto; } }
@media (min-width: 600px) and (max-height: 820px) { /* short laptops: the final button stays above the fold */
  .cta { padding-block: clamp(64px, 9vh, 120px); }
  .cta[id] { scroll-margin-top: calc(24px - clamp(64px, 9vh, 120px)); } /* matches the smaller padding, so #cta lands with the sigil in view */
  .cta__sigil { width: 170px; height: 170px; margin-bottom: 6px; }
  .cta__avatar { width: 128px; height: 128px; }
}

/* ---------- footer ---------- */
.footer { position: relative; z-index: 4; padding: 64px 0 calc(32px + env(safe-area-inset-bottom)); background: var(--bg-0); border-top: 1px solid var(--border); }
.footer__grid { display: grid; gap: 40px; }
.footer__word { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; letter-spacing: var(--ls-wordmark); }
.footer__word img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1px var(--border-violet); }
.footer__tag { margin-top: 12px; font-size: var(--fs-small); color: var(--text-dim); }
.ca__label, .footer__label { margin-bottom: 10px; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); color: var(--text-dim); }
.ca__box { padding: 16px 20px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-1); }
.ca__sealed { display: flex; align-items: center; gap: 14px; }
.ca__lock { width: 20px; height: 20px; color: var(--violet-soft); }
.ca__value { font-weight: 600; letter-spacing: .2em; color: var(--text); }
.ca__note { margin-top: 2px; font-size: var(--fs-small); color: var(--text-dim); }
.ca__set { display: flex; align-items: center; gap: 12px; }
.ca__addr { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--text); word-break: break-all; }
.ca__copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--border-strong); font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; flex: none; transition: border-color .2s, color .2s; }
.ca__copy:hover { border-color: var(--border-amber); color: var(--amber-soft); }
.ca__copy.is-done { color: var(--green); border-color: rgba(166,242,107,.4); }
.ca__toast { min-height: 1.2em; margin-top: 8px; font-size: var(--fs-small); color: var(--green); }
.ca__toast.is-fail { color: var(--amber-soft); }
.ca__antiscam { font-size: var(--fs-small); color: var(--text-muted); max-width: 52ch; text-wrap: pretty; }
.footer__nav a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 8px; text-decoration: none; color: var(--text-muted); transition: color .2s; }
.footer__nav a:hover { color: var(--amber-soft); }
.footer__legal { display: grid; gap: 4px; margin-top: 48px; padding-top: 28px; background: linear-gradient(var(--border), var(--border)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.footer__disclaimer { max-width: 110ch; font-size: var(--fs-small); line-height: 1.7; color: var(--text-dim); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 24px; font-size: var(--fs-small); color: var(--text-dim); }
.footer__bottom .seal-line { display: none; } /* already shown in the CTA right above */

/* ---------- tablet (600–959): a designed middle, not a stretched phone ---------- */
@media (min-width: 600px) and (max-width: 959px) {
  .seals { max-width: 520px; margin-inline: auto; }
  .seal-card__numeral { right: 24px; top: 64px; font-size: 7.5rem; } /* inside the card, not a tab off the edge */
  .lair__media { width: min(100%, 520px); justify-self: center; }
  .lair__text { max-width: 560px; justify-self: center; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid .ca { grid-column: 1 / -1; order: 3; }
}
@media (min-width: 960px) {
  .footer__grid { grid-template-columns: 4fr 5fr 3fr; gap: 48px; }
  .footer__nav ul { justify-self: end; }
  .footer__nav { justify-self: end; }
}

/* ---------- candle flicker ---------- */
@keyframes flicker { 0% { opacity: .92; transform: scale(1); } 18% { opacity: .78; transform: scale(.97); } 37% { opacity: 1; transform: scale(1.02); } 52% { opacity: .84; transform: scale(.99); } 71% { opacity: .97; transform: scale(1.01); } 100% { opacity: .9; transform: scale(1); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fog__sheet, .is-q, .rec, .live-dot, .cta__orbit, .cta__avatar, .scroll-cue i, .seal-glow, .story__orb span, .story__castle .win { animation: none !important; }
  .story__orb { opacity: .7; transform: translate(-50%, -50%) scale(1); }
  html.js .reveal, html.js .h-in { opacity: 1 !important; transform: none !important; }
  .seal-card--3, .seal-card--3.is-touch:not(.is-lit) { transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: -1ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}