/* ══════════════════════════════════════════════════════════════════════
   0.4 ON THE WEB (2026-09-26). Loaded after site.css and the page sheet.

   The app's 0.4 language on every page, plus the motion layer (js/fx.js,
   js/hero-gl.js). Jon: "animated and stylised to hell".

   - Navy header plate; navy plates for titles (kicker over title, the right
     end cut on the crystal wipe's 14° lean, tan 14° = 0.2493).
   - Faint circuit traces behind the crystal pages, lit under the pointer,
     with currents running them.
   - The crystal wipe: stacked 14° panels, used for the intro and for every
     move between pages.
   - Hex medals on the feature tiles, the dark event rows with diamond pips.

   Colour laws (specs/UI_KIT.md): violet belongs to Dark Mother alone, gold
   only to rarity stars and legendary chrome; "ready" states are deep
   crystal blue #3D7EC2.

   Every loop stops under prefers-reduced-motion. Without JS (or without
   the motion layer) every section still lays out and reads normally: the
   .fx class on <html> switches the motion layouts on.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --navy-top: #1C2E52;
  --navy-bot: #101B35;
  --navy-deep: #0B1122;
  --kicker-on-navy: #8FD3FF;
  --ready: #3D7EC2;
  --lean: 0.2493;
}

@property --w {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

/* ── Colour-law fixes on existing chrome ────────────────────────────── */
.badge-slot.soon::after {
  background: linear-gradient(180deg, #5C9DE0, var(--ready)); color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(61, 126, 194, 0.45);
}

/* ── The header: a navy plate on every page, in both modes ───────────── */
header.site,
body[data-zone] header.site {
  background: linear-gradient(180deg, #1A2949, #0D152A);
  border-bottom: 1px solid rgba(111, 182, 239, 0.22);
  box-shadow: 0 10px 30px rgba(8, 14, 30, 0.16);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.6s ease;
}
header.site.tuck { transform: translateY(-100%); }
header.site .mark img { height: 34px; width: auto; }
header.site nav a,
body[data-zone] header.site nav a { color: rgba(234, 244, 255, 0.78); position: relative; }
header.site nav a:hover,
body[data-zone] header.site nav a:hover { color: #FFFFFF; background: rgba(111, 182, 239, 0.14); }
/* The active page: a crystal key, its right end on the lean. */
header.site nav a.active,
body[data-zone] header.site nav a.active {
  color: #0C1226;
  background: linear-gradient(180deg, #D9EFFE, #86C4F2);
  border-radius: 8px 3px 3px 8px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  padding-right: 17px;
}
/* A hairline along the bottom edge: the page's progress, and a light that
   runs it now and then. */
header.site .hp {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #8FD3FF, #5BC4F0 60%, #CFF0FF);
  transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 10px rgba(143, 211, 255, 0.8);
  pointer-events: none;
}
/* The running light is a bar that slides (a transform, never a repaint). */
header.site::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 30%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(207, 240, 255, 0.95) 50%, transparent);
  animation: v4-hdr-run 7s cubic-bezier(0.45, 0, 0.3, 1) infinite;
  pointer-events: none;
}
@keyframes v4-hdr-run {
  0% { transform: translateX(-110%); opacity: 0; }
  8% { opacity: 1; }
  60% { transform: translateX(340%); opacity: 1; }
  66%, 100% { transform: translateX(340%); opacity: 0; }
}
/* No blur behind the header: it is 95% opaque, the blur was invisible and
   it re-ran every frame the page moved. */
header.site { backdrop-filter: none; -webkit-backdrop-filter: none; overflow: clip; }
/* Nothing may ever widen the page: a phone browser widens its whole layout
   to fit anything that sticks out (the header's running light did, and
   the page could be dragged sideways). clip, unlike hidden, makes no
   scroll container, so the sticky header still sticks. */
html, body { overflow-x: clip; }

/* ── Plates: the app's header plate, for section and page titles ─────── */
.plate {
  --plate-h: 76px;
  position: relative; display: inline-flex; flex-direction: column; justify-content: center;
  min-height: var(--plate-h); max-width: 100%;
  padding: 12px calc(30px + var(--plate-h) * var(--lean)) 14px 24px;
  margin: 0 0 24px;
  background: linear-gradient(180deg, var(--navy-top), var(--navy-bot));
  clip-path: polygon(0 0, var(--w) 0, calc(var(--w) - var(--plate-h) * var(--lean)) 100%, 0 100%);
  transition: --w 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s;
  color: #FFFFFF;
}
/* The crystal accent down the left edge. */
.plate::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, #8FD3FF, #3F86E4);
}
/* The tick the app's rows carry, top right, on the lean. */
.plate::after {
  content: ''; position: absolute; top: 8px; right: calc(16px + var(--plate-h) * var(--lean) * 0.25);
  width: 16px; height: 3px; border-radius: 2px;
  background: #8FD3FF; box-shadow: 0 0 8px rgba(143, 211, 255, 0.9);
  transform: skewX(-14deg);
}
.plate .pk {
  font-family: var(--display); font-weight: 800; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker-on-navy);
  margin-bottom: 4px; min-height: 1em; white-space: nowrap;
}
.plate h1, .plate h2 { color: #FFFFFF; margin: 0; }
.plate h2 { font-size: clamp(1.45rem, 3.4vw, 2.2rem); }
/* A plate is hidden until its section reveals: it wipes in from the left.
   The plate itself never drifts or blurs; only its wipe plays. */
.reveal:not(.in) .plate, .plate.reveal:not(.in) { --w: 0%; }
.plate.reveal { opacity: 1 !important; transform: none !important; filter: none !important; }

/* A page's own title plate (the prose pages). */
.page-plate { --plate-h: 100px; display: flex; margin-bottom: 20px; padding-bottom: 18px; }
.page-plate h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); }
.page-plate .title-trace { position: absolute; left: 24px; bottom: 7px; width: 170px; height: 10px; margin: 0; }
.page-plate .title-trace .tt-line { stroke: #8FD3FF; stroke-opacity: 0.45; }
.page-plate .title-trace .tt-node { fill: #8FD3FF; }
.fx .page-plate.pre { --w: 0%; }

/* Split text: every letter is its own piece (js/fx.js). */
.fx .split .sw { display: inline-block; white-space: nowrap; }
.fx .split .sc { display: inline-block; transform-origin: 50% 90%; }
.fx .split .mask, .fx .split .w { display: inline; transform: none; overflow: visible; }

/* ── The circuit layer: traces behind the crystal pages ───────────────── */
#circuits, #circuits-pulse {
  position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%;
  pointer-events: none; transition: opacity 0.9s ease;
}
#circuits .ci { fill: none; stroke: rgba(78, 156, 224, 0.16); stroke-width: 1.2; stroke-linejoin: round; }
#circuits .cn { fill: #F3F7FC; stroke: rgba(78, 156, 224, 0.34); stroke-width: 1.2; }
#circuits .cv { fill: rgba(78, 156, 224, 0.28); }
#circuits-pulse .cp {
  fill: none; stroke: #7CC8F7; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 3 97; stroke-dashoffset: 100;
  animation: v4-ci-run var(--d, 9s) linear infinite; animation-delay: var(--dl, 0s);
}
@keyframes v4-ci-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* The lit copy only shows in a pool of light around the pointer: a round
   window that moves with the pointer while the copy inside moves the other
   way, so both are plain transforms and nothing repaints. */
#circuits-lit {
  position: fixed; left: 0; top: 0; z-index: -1; width: 480px; height: 480px;
  pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 0.5s ease;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 100%);
  will-change: transform;
}
#circuits-lit svg { position: absolute; left: 0; top: 0; will-change: transform; }
#circuits-lit.on { opacity: 1; }
#circuits-lit .ci { fill: none; stroke: rgba(63, 134, 228, 0.55); stroke-width: 1.4; stroke-linejoin: round; }
#circuits-lit .cn { fill: #FFFFFF; stroke: rgba(63, 134, 228, 0.8); stroke-width: 1.4; }
#circuits-lit .cv { fill: rgba(63, 134, 228, 0.7); }
body[data-zone="rift"] #circuits, body[data-zone="night"] #circuits,
body[data-zone="rift"] #circuits-pulse, body[data-zone="night"] #circuits-pulse,
body[data-zone="rift"] #circuits-lit, body[data-zone="night"] #circuits-lit { opacity: 0; }
body.art-active #circuits, body.art-active #circuits-pulse, body.art-active #circuits-lit { opacity: 0; }
/* Hidden pulses stop running. */
body[data-zone="rift"] #circuits-pulse .cp, body[data-zone="night"] #circuits-pulse .cp, body.art-active #circuits-pulse .cp { animation-play-state: paused; }

/* ── The cursor: a diamond and a lagging ring ────────────────────────── */
#pw-cursor { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity 0.3s ease; }
#pw-cursor.on { opacity: 1; }
#pw-cursor .cd, #pw-cursor .cr { position: absolute; left: 0; top: 0; will-change: transform; }
#pw-cursor .cd i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #FFFFFF; transform: rotate(45deg); transition: transform 0.25s ease; }
#pw-cursor .cr i {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid #FFFFFF; transform: rotate(45deg) scale(1);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.3), background 0.3s ease;
}
#pw-cursor .cr b {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(0.6);
  font-family: var(--display); font-weight: 800; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #FFFFFF; opacity: 0; white-space: nowrap; transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.3);
}
#pw-cursor.link .cr i { transform: rotate(45deg) scale(1.5); background: rgba(255, 255, 255, 0.14); }
#pw-cursor.link .cd i { transform: rotate(45deg) scale(0); }
#pw-cursor.label .cr i { transform: rotate(45deg) scale(2.3); background: rgba(255, 255, 255, 0.1); }
#pw-cursor.label .cr b { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#pw-cursor.label .cd i { transform: rotate(45deg) scale(0); }
#pw-cursor.down .cr i { transform: rotate(45deg) scale(0.75); }
html.has-cursor, html.has-cursor * { cursor: none !important; }

/* ── The rail: where you are on the home page ─────────────────────────── */
#pw-rail {
  position: fixed; right: 22px; top: 50%; z-index: 40; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 22px;
  padding: 6px 0; opacity: 0; transition: opacity 0.6s ease;
}
#pw-rail.on { opacity: 1; }
#pw-rail .rl-line { position: absolute; right: 5px; top: 10px; bottom: 10px; width: 1.5px; background: rgba(78, 156, 224, 0.25); }
#pw-rail .rl-line i { position: absolute; inset: 0; background: linear-gradient(180deg, #8FD3FF, #3F86E4); transform-origin: 50% 0; transform: scaleY(0); box-shadow: 0 0 8px rgba(91, 196, 240, 0.8); }
#pw-rail a { position: relative; display: flex; align-items: center; gap: 12px; text-decoration: none; }
#pw-rail a::after {
  content: ''; width: 11px; height: 11px; transform: rotate(45deg); flex: none;
  background: #FFFFFF; border: 1.5px solid rgba(78, 156, 224, 0.6);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
#pw-rail a b {
  font-family: var(--display); font-weight: 800; font-size: 0.72rem; color: var(--ink);
  opacity: 0; transform: translateX(8px); transition: opacity 0.25s ease, transform 0.3s ease;
  background: rgba(255, 255, 255, 0.85); padding: 3px 8px; border-radius: 6px;
}
#pw-rail a:hover b, #pw-rail a.on b { opacity: 1; transform: none; }
#pw-rail a.on::after { background: #5BC4F0; border-color: #FFFFFF; box-shadow: 0 0 12px rgba(91, 196, 240, 0.95); transform: rotate(45deg) scale(1.25); }
body[data-zone="rift"] #pw-rail a b, body[data-zone="night"] #pw-rail a b { background: rgba(12, 18, 38, 0.85); color: #F4F9FF; }
@media (max-width: 1180px) { #pw-rail { display: none; } }

/* ── The crystal wipe: stacked 14° panels (intro and page moves) ──────── */
#pw-wipe { position: fixed; inset: 0; z-index: 3000; pointer-events: none; overflow: hidden; display: none; }
#pw-wipe.busy { display: block; }
#pw-wipe i {
  position: absolute; top: -10%; bottom: -10%; left: -30%; right: -30%;
  transform: translateX(-140%) skewX(-14deg);
}
#pw-wipe i:nth-child(1) { background: linear-gradient(90deg, #FFFFFF, #EAF5FE); }
#pw-wipe i:nth-child(2) { background: linear-gradient(90deg, #CFE9FD, #A9D6F8); }
#pw-wipe i:nth-child(3) { background: linear-gradient(90deg, #86C4F2, #5BA9EC); }
#pw-wipe i:nth-child(4) { background: linear-gradient(90deg, #3F86E4, #2A62C2); }
#pw-wipe i:nth-child(5) { background: radial-gradient(90% 70% at 50% 45%, #1C2E52, #0B1122); }
#pw-wipe .wm {
  position: absolute; left: 50%; top: 50%; width: min(240px, 50vw); transform: translate(-50%, -50%);
  opacity: 0; z-index: 2;
}
#pw-wipe.busy { pointer-events: all; }
html.pw-covered #pw-wipe { display: block; }
html.pw-covered #pw-wipe i { transform: translateX(0) skewX(-14deg); }
html.pw-covered #pw-wipe .wm { opacity: 1; }
/* Before the script builds the wipe, cover the page. */
html.pw-covered body::after {
  content: ''; position: fixed; inset: 0; z-index: 2999;
  background: radial-gradient(90% 70% at 50% 45%, #1C2E52, #0B1122);
}
html.pw-covered body::after {
  background: url('../assets/brand/logo_white.webp') center / min(240px, 50vw) auto no-repeat, radial-gradient(90% 70% at 50% 45%, #1C2E52, #0B1122);
}
/* Until the motion layer has set its opening poses, the pieces it brings
   in stay hidden (a failsafe in each page's head lifts this). */
html.pw-pre .hero-copy, html.pw-pre .hero-fan, html.pw-pre .scroll-cue, html.pw-pre .page-plate { visibility: hidden; }

/* Lenis (smooth scroll) owns the scroll while it runs. */
html.fx { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 0; min-height: calc(100svh - 52px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hero-grid { padding-top: 38px; padding-bottom: 60px; width: 100%; z-index: 2; }
.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.hero.gl-on .hero-gl { opacity: 1; }
.hero.gl-on .hero-fan .fan-card, .hero.gl-on .hero-fan .fan-glow { visibility: hidden; }
.hero-copy { position: relative; z-index: 3; }
.hero h1 { max-width: 13ch; }
.hero .kicker[data-scramble] { min-height: 1.2em; }

/* The stripe band: the crystal wipe at rest, behind the fan. */
.hero-stripes {
  position: absolute; right: -4%; width: 62%; top: 8%; bottom: 8%;
  pointer-events: none; z-index: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.hero-stripes i {
  position: absolute; top: -10%; bottom: -10%; transform: skewX(-14deg);
  background: linear-gradient(180deg, rgba(143, 211, 255, 0), rgba(143, 211, 255, 0.34) 45%, rgba(143, 211, 255, 0));
  animation: v4-st-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-stripes i:nth-child(1) { left: 8%; width: 9%; animation-delay: 0.25s; }
.hero-stripes i:nth-child(2) { left: 22%; width: 20%; animation-delay: 0.33s; }
.hero-stripes i:nth-child(3) { left: 50%; width: 6%; animation-delay: 0.41s; }
.hero-stripes i:nth-child(4) { left: 62%; width: 15%; animation-delay: 0.49s; }
.hero-stripes i:nth-child(5) { left: 84%; width: 5%; animation-delay: 0.57s; }
@keyframes v4-st-in { from { transform: translateX(-220%) skewX(-14deg); opacity: 0; } to { transform: skewX(-14deg); } }
.hero-stripes::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: v4-st-glint 6.5s ease-in-out 1.6s infinite;
}
@keyframes v4-st-glint {
  0% { transform: translateX(-140%) skewX(-14deg); opacity: 0; }
  10% { opacity: 1; }
  55% { transform: translateX(520%) skewX(-14deg); opacity: 1; }
  60%, 100% { transform: translateX(520%) skewX(-14deg); opacity: 0; }
}
.fx .hero-stripes i { animation: none; }

/* The scroll cue: a light runs down a trace. */
.scroll-cue {
  position: absolute; left: 50%; bottom: 18px; z-index: 3; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.scroll-cue .sc-line { position: relative; width: 1.5px; height: 46px; background: rgba(78, 156, 224, 0.25); overflow: hidden; }
.scroll-cue .sc-line i { position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, #3F86E4); animation: v4-sc 2.2s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
@keyframes v4-sc { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
.scroll-cue .sc-label { font-family: var(--display); font-weight: 800; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 900px) { .scroll-cue { display: none; } }

/* ── The crossing bands of type ───────────────────────────────────────── */
.bands { position: relative; height: 230px; margin: 10px 0 -30px; overflow: hidden; pointer-events: none; z-index: 3; }
.band { position: absolute; left: -10%; right: -10%; top: 50%; padding: 16px 0 14px; white-space: nowrap; overflow: hidden; box-shadow: 0 18px 40px rgba(8, 14, 30, 0.22); }
.band-a { background: linear-gradient(180deg, #1C2E52, #0E1731); transform: translateY(-50%) rotate(-4deg); z-index: 2; }
.band-b { background: linear-gradient(180deg, #D5ECFD, #8DCAF4); transform: translateY(-50%) rotate(3.2deg); }
.band-track { display: inline-flex; align-items: center; gap: 30px; padding-right: 30px; will-change: transform; }
.band span { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 4.4vw, 3.3rem); line-height: 1.05; color: #FFFFFF; }
.band span.o { color: #8FD3FF; }
.band b { color: #8FD3FF; font-size: clamp(1.1rem, 2.4vw, 1.7rem); font-weight: 800; }
.band-b span { color: #0E1731; }
.band-b span.o { color: #2A6FDB; }
.band-b b { color: #2A6FDB; }

/* ── The wanderer section ─────────────────────────────────────────────── */
.wanderer { margin-top: 0; }
.wanderer .plate { margin-bottom: 10px; }
.wanderer .plate, .demo-section .plate { --navy-top: #22375F; --navy-bot: #15223F; }

/* The kinetic scene. Static by default; the motion layer pins it. */
.kinetic { position: relative; padding: 30px 0 10px; text-align: center; }
.kinetic .radar-wrap { margin: 10px auto 18px; }
.kinetic .radar .p4 { left: 34%; top: 30%; animation-delay: 1.2s; }
.kinetic .radar .p5 { left: 76%; top: 56%; animation-delay: 2.8s; }
.kl { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 7vw, 4rem); line-height: 1.05; color: #F4F9FF; margin: 0; white-space: nowrap; }
.kl span { display: inline-block; }
.kl2 span { color: #8FD3FF; }
.kl-end { margin-top: 14px; font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 2.6vw, 1.7rem); color: #8FD3FF; }
.kinetic { overflow: hidden; }
@media (min-width: 900px) {
  .fx .kinetic { height: 100vh; height: 100svh; padding: 0; }
  .fx .kinetic .radar-wrap { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); }
  .fx .kinetic .radar { width: min(76vmin, 640px); }
  .fx .kl { position: absolute; left: 0; right: 0; font-size: clamp(3rem, 9vw, 8.5rem); text-align: center; pointer-events: none; }
  .fx .kl1 { top: 12%; } .fx .kl2 { top: 38%; } .fx .kl3 { top: 64%; }
  .fx .kl-end { position: absolute; left: 0; right: 0; bottom: 7%; margin: 0; opacity: 0; }
  .fx .kl span { will-change: transform; text-shadow: 0 10px 40px rgba(5, 10, 24, 0.6); }
  .fx .kl2 span { text-shadow: none; }
}
/* Phones: the scene scrolls normally and builds as it arrives. */
@media (max-width: 899px) {
  .fx .kinetic { padding: 18px 0 6px; }
  .fx .kinetic .radar { width: min(74vw, 340px); }
  .fx .kl { font-size: 10.5vw; line-height: 1.12; }
  .fx .kl-end { margin-top: 18px; }
}

/* Meet, trade, battle: panels. A column on phones; a horizontal run on
   wide screens once the motion layer pins it. */
.wh-pin { position: relative; }
.wanderer-cards { max-width: 1080px; margin: 34px auto 0; padding: 0 20px; }
.wcard { padding: 0; display: flex; flex-direction: column; }
.wcard .wstage { margin: 0; border-radius: 22px 22px 0 0; }
.wcard .wbody { position: relative; padding: 18px 22px 24px; }
.wcard .wnum {
  position: static; display: block; width: auto; height: auto; margin: 0 0 2px;
  background: none; box-shadow: none; border-radius: 0;
  font-family: var(--display); font-weight: 800; font-size: 2.4rem; line-height: 1;
  color: #8FD3FF;
}
.wcard h3 { margin: 4px 0 6px; font-size: 1.5rem; }
@media (min-width: 900px) {
  .fx .wh-pin { height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
  .fx .wh-track {
    display: flex; gap: 4vw; width: max-content; max-width: none; margin: 0;
    padding: 0 max(8vw, calc((100vw - 1080px) / 2 + 20px));
  }
  .fx .wcard {
    width: min(70vw, 900px); flex-direction: row; align-items: stretch;
    border-radius: 26px; overflow: hidden;
  }
  .fx .wcard .wstage { flex: 0 0 52%; height: auto; min-height: 400px; border-radius: 0; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, 0.08); }
  .fx .wcard .wbody { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 34px 38px; }
  .fx .wcard .wnum { font-size: 4.2rem; }
  .fx .wcard h3 { font-size: 2.3rem; margin: 10px 0 12px; }
  .fx .wcard p { font-size: 1.1rem; max-width: 30ch; }
}

/* The run's dressing: a giant word behind each panel, a glowing edge, a
   light that crosses as the panel travels, and the progress line. */
.wcard .wbig, .wcard .wsheen, .wh-prog { display: none; }
@media (min-width: 900px) {
  .fx .wcard { position: relative; border: 1px solid rgba(143, 211, 255, 0.16); box-shadow: 0 50px 90px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
  .fx .wcard .wstage { min-height: 440px; }
  .fx .wcard .wbig {
    display: block; position: absolute; right: -1%; bottom: -6%; z-index: 0; pointer-events: none; white-space: nowrap;
    font-family: var(--display); font-weight: 800; font-size: clamp(7rem, 15vw, 13rem); line-height: 0.8;
    color: rgba(143, 211, 255, 0.05);
  }
  .fx .wcard .wstage, .fx .wcard .wbody { position: relative; z-index: 1; }
  .fx .wcard .wsheen {
    display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; z-index: 2; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(169, 214, 248, 0.12) 50%, transparent);
  }
  .fx .wh-prog {
    display: flex; align-items: center; gap: 14px; position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
    font-family: var(--display); font-weight: 800; font-size: 0.8rem; color: rgba(143, 211, 255, 0.6);
  }
  .fx .wh-prog i { position: relative; width: 220px; height: 2px; background: rgba(143, 211, 255, 0.18); overflow: hidden; }
  .fx .wh-prog b { position: absolute; inset: 0; background: linear-gradient(90deg, #5BC4F0, #CFF0FF); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px rgba(91, 196, 240, 0.8); }
}

/* The Wanderer Track. */
.wtrack { margin-top: 34px; }
.wtrack-card { position: relative; flex: none; width: 124px; border-radius: 10px; overflow: hidden; transform: rotate(-4deg); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 28px rgba(143, 211, 255, 0.25); animation: track-float 6s ease-in-out infinite; }
.wtrack-card img { width: 100%; display: block; }
.wt-holo { position: absolute; top: 0; bottom: 0; left: 0; width: 300%; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.5) 45%, rgba(160, 225, 255, 0.45) 50%, rgba(255, 190, 245, 0.35) 55%, transparent 65%); mix-blend-mode: screen; animation: v4-holo-pan 4.5s ease-in-out infinite; }
@keyframes v4-holo-pan { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(-60%); } }
.wt-bar { display: block; margin-top: 14px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.wt-bar i { display: block; height: 100%; width: 72%; border-radius: 3px; background: linear-gradient(90deg, #5BC4F0, #CFF0FF); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s; box-shadow: 0 0 12px rgba(91, 196, 240, 0.7); }
.wtrack.in .wt-bar i { transform: scaleX(1); }
.wtrack .wt-body { flex: 1; }

/* ── The Rift: the dark opens from a tear of light ────────────────────── */
.rift-band { display: none; }
.fx .demo-section::before { display: none; }
.fx .rift-band {
  display: block; position: absolute; top: -36px; bottom: -36px; left: 50%; width: 100vw; z-index: 0 !important;
  margin-left: -50vw; pointer-events: none; transform-origin: 50% 0;
  background: linear-gradient(180deg, transparent 0, #0D1428 40px, #0D1428 calc(100% - 40px), transparent 100%);
}
.rift-tear {
  position: absolute; left: 50%; top: -36px; width: 100vw; height: 2px; z-index: 2 !important;
  transform: translateX(-50%) scaleX(0); opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, #CFF0FF 18%, #FFFFFF 50%, #CFF0FF 82%, transparent);
  box-shadow: 0 0 22px 5px rgba(91, 196, 240, 0.85), 0 0 60px 12px rgba(91, 196, 240, 0.35);
}

/* ── Features ─────────────────────────────────────────────────────────── */
.feature-grid { gap: 22px; }
.feature { overflow: hidden; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.feature::after {
  content: ''; position: absolute; top: 0; right: 0; width: 40px; height: 40px; z-index: 5;
  background: linear-gradient(225deg, rgba(111, 182, 239, 0.7) 0 34%, transparent 35%);
  pointer-events: none;
}
.feature .medal {
  position: absolute; top: 12px; left: 12px; z-index: 6;
  width: 52px; height: 52px; filter: drop-shadow(0 6px 10px rgba(16, 36, 80, 0.35));
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.5);
}
.feature:hover .medal { transform: translateY(-3px) rotate(-8deg) scale(1.08); }
.feature h3 { font-size: 1.3rem; }
/* A holo sweep crosses the art when the tile is hovered. */
.feature .feature-art::after {
  content: ''; position: absolute; top: -10%; bottom: -10%; width: 40%; left: 0; z-index: 5;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), rgba(169, 214, 248, 0.4), transparent);
  transform: translateX(-160%) skewX(-14deg); pointer-events: none; opacity: 0;
}
.feature:hover .feature-art::after { animation: v4-art-sweep 0.9s cubic-bezier(0.3, 0.6, 0.2, 1); }
@keyframes v4-art-sweep { from { transform: translateX(-160%) skewX(-14deg); opacity: 1; } to { transform: translateX(330%) skewX(-14deg); opacity: 1; } }
/* The tile catches a light where the pointer is (fx sets --lx/--ly). */
.feature .glint {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(320px circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 255, 255, 0.35), transparent 60%);
  mix-blend-mode: soft-light;
}
.feature:hover .glint { opacity: 1; }

/* The events prop: the app's dark rows, art on the lean, diamond pips. */
.events-stage { padding: 58px 16px 8px; }
.events-stage .ev-list { gap: 5px; max-width: 290px; }
.events-stage .ev-row {
  position: relative; display: flex; align-items: center; gap: 9px;
  height: 31px; padding: 0 10px 0 0; border: 0; border-radius: 0;
  background: linear-gradient(180deg, #1D2F55, #111C37);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  box-shadow: none; color: #FFFFFF; font-size: 0.7rem;
}
.events-stage .ev-row::after { content: ''; position: absolute; left: 0; right: 8px; bottom: 0; height: 1.5px; background: var(--t); opacity: 0.8; }
.events-stage .ev-row img {
  flex: none; width: 46px; height: 31px; object-fit: cover; object-position: 50% 20%;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.events-stage .ev-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }
.events-stage .ev-row b { color: #FFFFFF; font-family: var(--display); font-weight: 800; font-size: 0.72rem; white-space: nowrap; flex: none; }
.events-stage .ev-row small { color: rgba(234, 241, 249, 0.62); font-weight: 700; font-size: 0.56rem; white-space: nowrap; }
.events-stage .ev-row .pips { display: flex; gap: 3px; }
.events-stage .ev-row .pips i { width: 6px; height: 6px; background: var(--t); transform: rotate(45deg); box-shadow: 0 0 5px var(--t); }
.events-stage .ev-row .stamp { font-size: 0.46rem; padding: 2px 5px; background: color-mix(in srgb, var(--t) 30%, transparent); color: #FFFFFF; }
.events-stage .ev-row.boss { background: linear-gradient(180deg, #3A2432, #1E1320); }
.feature:hover .events-stage .ev-row:nth-child(2) { transform: translateX(5px); }
.feature:hover .events-stage .ev-row:nth-child(4) { transform: translateX(-3px); }
.feature:hover .events-stage .ev-row.boss { transform: translateX(7px); }

/* ── The showcase ring ────────────────────────────────────────────────── */
.carousel.ring-on {
  height: clamp(440px, 56vw, 620px); padding: 0; overflow: hidden;
  perspective: 1700px; perspective-origin: 50% 42%;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ring-on .car-track {
  position: absolute; left: 50%; top: 46%; width: 0; height: 0;
  transform-style: preserve-3d; animation: none; will-change: transform;
}
.ring-on .car-card {
  position: absolute; width: var(--cw, 190px); left: calc(var(--cw, 190px) / -2); top: calc(var(--cw, 190px) * -0.731);
  transform-style: preserve-3d; transition: none; overflow: visible; box-shadow: none; border-radius: 12px;
}
.ring-on .car-card::after { display: none; }
.ring-on .car-card .pw-card {
  backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px;
  box-shadow: 0 18px 34px rgba(14, 22, 38, 0.3);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.3), box-shadow 0.35s ease;
}
.ring-on .car-card:hover .pw-card, .ring-on .car-card.hot .pw-card { transform: translateY(-16px) scale(1.07); box-shadow: 0 0 34px rgba(91, 196, 240, 0.55), 0 22px 40px rgba(14, 22, 38, 0.35); }
.ring-on .car-card .cb {
  position: absolute; inset: 0; border-radius: 12px; transform: rotateY(180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background:
    url('../assets/brand/logo_white.webp') center 46% / 72% auto no-repeat,
    repeating-linear-gradient(-76deg, rgba(143, 211, 255, 0.07) 0 2px, transparent 2px 14px),
    radial-gradient(90% 70% at 50% 40%, #22375F, #0B1122);
  border: 1.5px solid rgba(143, 211, 255, 0.35);
}
.ring-floor { position: absolute; left: 50%; bottom: 4%; width: 70%; height: 60px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(78, 156, 224, 0.28), transparent); filter: blur(8px); pointer-events: none; }

/* ── Milestone ────────────────────────────────────────────────────────── */
.milestone .bar { position: relative; overflow: visible; }
.milestone .fill { position: relative; overflow: hidden; }
.milestone .fill::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); animation: v4-charge 2.4s linear infinite; }
@keyframes v4-charge { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
.ms-nodes { position: absolute; inset: 0; pointer-events: none; }
.ms-nodes i { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; transform: rotate(45deg); background: #FFFFFF; border: 1.5px solid rgba(78, 156, 224, 0.55); }
.ms-nodes i:nth-child(1) { left: 25%; } .ms-nodes i:nth-child(2) { left: 50%; } .ms-nodes i:nth-child(3) { left: 75%; }

/* ── Footer: the navy plate closes every page ─────────────────────────── */
footer.site {
  position: relative; margin-top: 90px; overflow: hidden;
  background: linear-gradient(180deg, #16244A, #0B1330);
  border-top: 1px solid rgba(111, 182, 239, 0.26);
  color: rgba(234, 244, 255, 0.82);
}
footer.site::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(207, 240, 255, 0.9), transparent);
}
footer.site a { color: rgba(234, 244, 255, 0.78); }
footer.site a:hover { color: #FFFFFF; }
footer.site .foot-tag, footer.site .legal { color: rgba(234, 244, 255, 0.55); }
/* Why the app asks for a Google or Apple sign-in: Google's OAuth brand
   check wants the home page to say it (2026-10-04). */
footer.site .foot-data { margin-top: 10px; }
footer.site .foot-data a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
footer.site .socials .orb { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: rgba(234, 244, 255, 0.5); }
footer.site .socials a.orb:hover { color: #FFFFFF; border-color: rgba(143, 211, 255, 0.6); }
.foot-word {
  position: relative; margin: -6px auto 26px; text-align: center; white-space: nowrap;
  font-family: var(--display); font-weight: 800; line-height: 0.95;
  font-size: clamp(3.2rem, 14.5vw, 13rem); letter-spacing: -0.02em;
  color: rgba(143, 211, 255, 0.1);
  user-select: none;
}
.foot-word span { display: inline-block; }
.foot-word::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  color: transparent;
  background: linear-gradient(100deg, #8FD3FF, #FFFFFF 30%, #FFD9F0 45%, #A9F0D9 60%, #8FD3FF 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), #000 10%, transparent 70%);
  mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), #000 10%, transparent 70%);
}
.foot-logo { height: 44px; }

/* ── The prose pages ──────────────────────────────────────────────────── */
.prose { padding-top: 34px; }
.prose > .updated { margin-bottom: 30px; }
.prose > h2 { position: relative; padding-left: 16px; }
.prose > h2::before { content: ''; position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 4px; border-radius: 2px; background: linear-gradient(180deg, #8FD3FF, #3F86E4); }

/* Roadmap: the colour laws. The "free" stamp is deep crystal blue, not
   gold, and the last node is crystal navy, not violet. */
.rm-free { color: #FFFFFF !important; background: linear-gradient(180deg, #5C9DE0, var(--ready)) !important; box-shadow: 0 6px 16px rgba(61, 126, 194, 0.35) !important; }
.rm-more .rm-node { background: linear-gradient(180deg, #2B5BAE, #132F66) !important; color: #FFFFFF !important; }

/* ── The motion layer's resting states ────────────────────────────────── */
/* fx drives these with GSAP; the CSS entrance stays for the fallback. */
.fx .rise { animation: none; opacity: 1; transform: none; }

/* ── Dark mode ────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root { --navy-top: #22375F; --navy-bot: #15223F; }
  #circuits .ci { stroke: rgba(169, 214, 248, 0.09); }
  #circuits .cn { fill: #0C1228; stroke: rgba(169, 214, 248, 0.22); }
  #circuits .cv { fill: rgba(169, 214, 248, 0.18); }
  #circuits-lit .ci { stroke: rgba(143, 211, 255, 0.5); }
  #circuits-lit .cn { fill: #0C1228; stroke: rgba(143, 211, 255, 0.8); }
  #pw-rail a::after { background: #0C1228; }
  #pw-rail a b { background: rgba(12, 18, 38, 0.85); color: #F4F9FF; }
  .feature::after { background: linear-gradient(225deg, rgba(143, 211, 255, 0.4) 0 34%, transparent 35%); }
  .ms-nodes i { background: #0C1228; }
  .scroll-cue .sc-line i { background: linear-gradient(180deg, transparent, #8FD3FF); }
  .band-b { background: linear-gradient(180deg, #2A4E86, #1B3563); }
  .band-b span { color: #EAF5FE; }
  .band-b span.o { color: #8FD3FF; }
  .band-b b { color: #8FD3FF; }
  .ring-floor { background: radial-gradient(closest-side, rgba(143, 211, 255, 0.2), transparent); }
}

/* ── Phones ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-grid { padding-top: 26px; padding-bottom: 30px; }
  .hero-stripes { width: 110%; right: -5%; top: 44%; bottom: 2%; }
}
@media (max-width: 640px) {
  .plate { --plate-h: 64px; padding-left: 18px; }
  .page-plate { --plate-h: 88px; }
  header.site .mark img { height: 28px; }
  .bands { height: 170px; margin-bottom: -20px; }
  .band { padding: 11px 0 9px; }
  .events-stage { padding-top: 72px; }
  .foot-word { margin-bottom: 18px; }
}
@media (max-width: 520px) {
  header.site nav a.active { padding-right: 14px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  header.site::after, .hero-stripes::after, #circuits .cp, .feature .feature-art::after, .scroll-cue .sc-line i, .milestone .fill::after, .wt-holo { animation: none !important; opacity: 0; }
  .hero-stripes i { animation: none; }
  .plate, .reveal:not(.in) .plate, .plate.reveal:not(.in), .page-plate.pre { --w: 100%; transition: none; }
  .feature .medal { transition: none; }
  #pw-cursor, #pw-rail, #pw-wipe { display: none !important; }
  html.pw-covered body::after { display: none; }
  .wt-bar i { transform: scaleX(1); transition: none; }
}

/* Notices: the colour laws again ("opening soon" is a ready state). */
.nt-soon { color: #FFFFFF !important; background: linear-gradient(180deg, #5C9DE0, var(--ready)) !important; }

/* The dark bands are solid navy at their core: at 88% over the crystal
   page they read as muddy grey while the zone is still turning. */
.wanderer::before {
  background: linear-gradient(180deg, transparent 0, #0A0F1F 70px, #0A0F1F calc(100% - 70px), transparent 100%);
}
.demo-section::before {
  background: linear-gradient(180deg, transparent 0, #0D1428 40px, #0D1428 calc(100% - 40px), transparent 100%);
}
/* The Rift board's frame is dark glass on the dark board, not grey. */
.demo-section .board-shell {
  background: rgba(255, 255, 255, 0.05); border-color: rgba(143, 211, 255, 0.2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* The rail steps aside while a scene is pinned. */
body.pinning #pw-rail { opacity: 0; pointer-events: none; }

/* The demo's small card faces: each stat stays on one line. */
.mini-card .mc-stats span { white-space: nowrap; }
@media (max-width: 640px) { .mini-card .mc-stats { font-size: 0.54rem; gap: 2px; } .mini-card .mc-foot { padding: 12px 5px 5px; } }

/* ── Performance (2026-09-26 audit) ───────────────────────────────────
   No live blur behind glass while the motion layer runs: over the light
   page it was near invisible, and it re-ran every frame something moved
   behind it. A firmer fill keeps the same look. */
.fx .glass, .fx .glass-dark { backdrop-filter: none; -webkit-backdrop-filter: none; }
.fx .glass { background: rgba(255, 255, 255, 0.82); }
.fx .glass-dark { background: rgba(20, 30, 56, 0.72); }
@media (prefers-color-scheme: dark) {
  .fx .glass { background: rgba(22, 32, 60, 0.78); }
}
.fx .demo-section .board-shell { background: rgba(255, 255, 255, 0.05); }

/* ── The phone hero (Jon, 2026-09-26: "doesn't even look that good on
   mobile"): the 3D cards come straight after the headline, so the first
   screen is the logo, the promise and the cards, and the words follow. */
@media (max-width: 900px) {
  .fx .hero-copy { display: contents; }
  .fx .hero-grid { justify-items: center; text-align: center; row-gap: 0; padding-top: 18px; }
  .fx #glitch-wrap { order: 1; }
  .fx .hero .kicker { order: 2; }
  .fx .hero h1 { order: 3; margin-bottom: 0; }
  .fx .hero-fan { order: 4; justify-self: stretch; width: 100%; height: min(360px, 82vw); margin: -6px 0 10px; }
  .fx .hero .lede { order: 5; }
  .fx #hero-badges { order: 6; }
  .fx #f2p-note, .fx #store-note { order: 7; }
  .fx .hero-cue { order: 8; }
  .fx .hero-logo, .fx .glitch-wrap .hero-logo { height: 64px; margin-bottom: 10px; }
  .fx .hero-stripes { top: 30%; bottom: 30%; }
}
/* The background wings watermark sits behind the headline on a phone and
   reads as a glitch: wide screens only. */
@media (max-width: 900px) { #parallax .wings { display: none; } }
@media (hover: none), (pointer: coarse) { .fx #parallax { display: none; } }