/* ==========================================================================
   OpenVids landing — core.
   Tokens, type, motion primitives (reveal, playhead sweep, split text), chrome
   (intro gate, nav, chapter HUD), hero, marquee, footer, shared UI mock bits.
   Scene sheets (story / agents / finale) consume these; they never redefine them.
   ========================================================================== */

@property --ph { syntax: '<percentage>'; inherits: true; initial-value: 0%; }

:root {
  color-scheme: dark;

  /* ---- Six brand tokens (from openvids.css: neutral hue 260 + single orange) ---- */
  --bg:      oklch(10% 0.003 260);
  --surface: oklch(15.5% 0.004 260);
  --fg:      oklch(94% 0.004 260);
  --muted:   oklch(68% 0.006 260);
  --border:  oklch(28% 0.006 260);
  --accent:  oklch(74% 0.155 55);

  /* ---- Derived (oklch only) ---- */
  --surface-2:     oklch(19.5% 0.005 260);
  --surface-3:     oklch(24% 0.006 260);
  --fg-2:          oklch(82% 0.005 260);
  --border-strong: oklch(40% 0.008 260);
  --accent-hover:  oklch(80% 0.145 55);
  --accent-ink:    oklch(17% 0.03 55);
  --rec:           oklch(68% 0.2 22);
  --ok:            oklch(76% 0.15 155);
  --warn:          oklch(84% 0.14 95);
  --glass:         color-mix(in oklab, var(--bg) 74%, transparent);
  --hair:          color-mix(in oklab, var(--fg) 9%, transparent);

  /* ---- Media type hues (identity only, never selection) — openvids.css dark values ---- */
  --k-video-h: oklch(37% 0.045 250);  --k-video-b: oklch(21.5% 0.02 250);  --k-video-l: oklch(47% 0.05 250);
  --k-audio-h: oklch(35% 0.06 165);   --k-audio-b: oklch(20.5% 0.03 165);  --k-audio-l: oklch(45% 0.07 165);
  --k-motion-h: oklch(38% 0.06 305);  --k-motion-b: oklch(22.5% 0.025 305); --k-motion-l: oklch(48% 0.065 305);
  --k-caption-h: oklch(38% 0.055 85); --k-caption-b: oklch(38% 0.055 85);  --k-caption-l: oklch(48% 0.06 85);
  --k-image-h: oklch(37% 0.05 215);   --k-image-b: oklch(21.5% 0.02 215);  --k-image-l: oklch(47% 0.055 215);
  --wave: oklch(80% 0.1 165);

  /* ---- Type ---- */
  --font-display: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --fs-display: clamp(50px, 9vw, 142px);
  --fs-h2:      clamp(40px, 6vw, 92px);
  --fs-h3:      clamp(24px, 2.4vw, 36px);
  --fs-lead:    clamp(17px, 1.3vw, 20px);
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-mono:    12px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-ph:     cubic-bezier(.55, 0, .12, 1.14); /* playhead: accelerates, overshoots, settles — the logo's inertia */

  /* ---- Layout ---- */
  --wrap:   1320px;
  --gutter: clamp(20px, 4.2vw, 64px);
  --nav-h:  64px;
  --hud-h:  52px;
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --shadow: 0 30px 80px oklch(0% 0 0 / .55), 0 2px 8px oklch(0% 0 0 / .4);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; background: var(--bg); color: var(--fg); overflow-x: clip;
  font: 400 var(--fs-body)/1.55 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.is-loading { overflow: hidden; }
img, video, canvas { display: block; max-width: 100%; }
svg { display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
p, h1, h2, h3, h4 { text-wrap: pretty; }
::selection { background: color-mix(in oklab, var(--fg) 26%, transparent); color: var(--fg); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: var(--r-xs); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: var(--r-sm); background: var(--fg); color: var(--bg); text-decoration: none; font-weight: 600; transition: top .2s; }
.skip:focus-visible { top: 16px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.block { position: relative; padding-block: clamp(96px, 15vh, 184px); }
.scene { position: relative; height: var(--len, 300vh); }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* ---- Type ---- */
.display, .h2, .h3 { margin: 0; font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
.display { font-size: var(--fs-display); line-height: .92; letter-spacing: -0.045em; }
.h2 { font-size: var(--fs-h2); line-height: .96; letter-spacing: -0.04em; }
.h3 { font-size: var(--fs-h3); line-height: 1.06; letter-spacing: -0.02em; }
.display em, .h2 em, .h3 em { font-style: italic; letter-spacing: -0.03em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0;
  font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.eyebrow .tc { color: var(--fg); letter-spacing: .02em; }
.eyebrow .tc::after { content: ''; display: inline-block; width: 28px; height: 1px; margin-left: 14px; vertical-align: middle; background: var(--border-strong); }
.lead { margin: 0; max-width: 50ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); }
.tc, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.sec-head { display: grid; gap: 24px; max-width: 1000px; }

/* ---- Buttons ---- */
.btn {
  --bh: 52px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--bh); padding: 0 24px; border: 1px solid transparent; border-radius: var(--r-sm); background: none;
  font: 600 15px/1 var(--font-body); letter-spacing: -.005em; color: var(--fg); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s, transform .6s var(--ease-spring);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border-color: var(--border-strong); }
.btn-ghost:hover { background: color-mix(in oklab, var(--fg) 9%, transparent); border-color: color-mix(in oklab, var(--fg) 45%, transparent); }
.btn-sm { --bh: 44px; padding: 0 16px; font-size: 14px; }
.btn .arr { display: inline-block; transition: transform .5s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
.btn .gh { width: 18px; height: 18px; flex: none; fill: currentColor; }
.btn-sm .gh { width: 16px; height: 16px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.btn:focus-visible { outline-offset: 4px; }

/* ---- Reveal system (armed only with JS; .in added by OVL on enter) ---- */
.js [data-reveal] {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity .9s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease-in-out) calc(var(--d, 0) * 1ms); }
.js [data-reveal="mask"].in { clip-path: inset(0 0 -2% 0); }

/* split text: words rise out of their own masks, chars stagger */
.split { display: inline; }
.split .w { display: inline-block; white-space: nowrap; }
.js [data-reveal="words"], .js [data-reveal="chars"] { opacity: 1; transform: none; }
.js [data-reveal="words"] .w { overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.js [data-reveal="words"] .wi { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1.15s var(--ease-out) calc((var(--d, 0) + var(--wi) * 48) * 1ms); }
.js [data-reveal="words"].in .wi { transform: none; }
.js [data-reveal="chars"] .c { display: inline-block; opacity: 0; transform: translate3d(0, .35em, 0) rotate(6deg); filter: blur(6px);
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .7s var(--ease-out); transition-delay: calc((var(--d, 0) + var(--ci) * 22) * 1ms); }
.js [data-reveal="chars"].in .c { opacity: 1; transform: none; filter: none; }

/* playhead sweep: the brand's one flourish — an orange playhead scrubs across and prints the line */
.ph { position: relative; display: inline-block; max-width: 100%; }
.js [data-reveal="ph"] { opacity: 1; transform: none; }
.js [data-reveal="ph"] .ph-in { display: inline-block; clip-path: inset(-.3em calc(100% - var(--ph)) -.35em -.2em); }
.js [data-reveal="ph"].in { animation: ph-sweep var(--ph-dur, 1.25s) var(--ease-ph) calc(var(--d, 0) * 1ms) both; }
.ph-line { position: absolute; top: .02em; bottom: -.04em; left: var(--ph); width: 2px; margin-left: -1px; background: var(--accent); opacity: 0; pointer-events: none; transform-origin: 50% 100%; }
.ph-line::before { content: ''; position: absolute; top: -11px; left: 50%; width: 14px; height: 12px; transform: translateX(-50%); background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.js [data-reveal="ph"].in .ph-line { animation: ph-line var(--ph-dur, 1.25s) linear calc(var(--d, 0) * 1ms) both; }
@keyframes ph-sweep { from { --ph: 0%; } to { --ph: 103%; } }
@keyframes ph-line {
  0% { opacity: 0; transform: skewX(0); }
  6% { opacity: 1; }
  38% { transform: skewX(-9deg); }
  80% { opacity: 1; transform: skewX(5deg); }
  100% { opacity: 0; transform: skewX(0); }
}

/* ---- REC dot ---- */
.rec-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 0 color-mix(in oklab, var(--rec) 60%, transparent); animation: rec 1.6s var(--ease-out) infinite; }
@keyframes rec { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--rec) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px color-mix(in oklab, var(--rec) 0%, transparent); } }

/* ---- Film grain (one fixed layer, stepped) ---- */
.grain {
  position: fixed; inset: -60%; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.5'/></filter><rect width='100%' height='100%' filter='url%28%23n%29'/></svg>");
  animation: grain .8s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-4%, 3%, 0); } 40% { transform: translate3d(3%, -5%, 0); }
  60% { transform: translate3d(-6%, -2%, 0); } 80% { transform: translate3d(5%, 4%, 0); } 100% { transform: translate3d(-2%, 6%, 0); }
}

/* ==========================================================================
   Intro gate — the logo records itself, then the frame splits open
   ========================================================================== */
.intro { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; animation: intro-failsafe 0s linear 9s forwards; }
.js .intro { display: grid; }
.intro-half { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--bg); transition: transform 1.05s var(--ease-in-out); }
.intro-half.top { top: 0; }
.intro-half.bot { bottom: 0; }
.intro-seam { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--fg); transform: scaleX(0); transition: transform .38s var(--ease-in-out), opacity .5s .5s; }
.intro-core { position: relative; display: grid; justify-items: center; gap: 30px; transition: opacity .45s, transform 1s var(--ease-in-out), filter .5s; }
.intro-core img { width: min(540px, 72vw); height: auto; }
.intro-meta { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--muted); }
.intro-meta .tc { color: var(--fg); }
.intro-skip { position: absolute; right: var(--gutter); bottom: 24px; transition: opacity .3s; }
.intro.cut .intro-seam { transform: scaleX(1); }
.intro.cut .intro-core { opacity: 0; transform: scale(1.04); filter: blur(8px); }
.intro.cut .intro-skip { opacity: 0; }
.intro.out { pointer-events: none; }
.intro.out .intro-half.top { transform: translate3d(0, -100%, 0); }
.intro.out .intro-half.bot { transform: translate3d(0, 100%, 0); }
.intro.out .intro-seam { opacity: 0; }
@keyframes intro-failsafe { to { visibility: hidden; } }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition: transform .6s var(--ease-out), background-color .4s, border-color .4s, backdrop-filter .4s;
}
.nav.solid { background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-bottom-color: color-mix(in oklab, var(--border) 70%, transparent); }
.nav.hide { transform: translate3d(0, -100%, 0); }
.nav-logo { display: block; padding: 8px 0; border-radius: var(--r-xs); }
.nav-logo img { height: 24px; width: auto; }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a {
  position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border-radius: var(--r-sm);
  color: var(--fg-2); font-size: 14px; text-decoration: none; transition: color .2s, background-color .2s;
}
.nav-links a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 9px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.nav-links a:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 7%, transparent); }
.nav-links a.cur { color: var(--fg); }
.nav-links a.cur::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 8px; }

/* ==========================================================================
   Chapter HUD — page scroll is the trailer's playhead (6 chapters, 01:48)
   ========================================================================== */
.hud {
  position: fixed; left: 50%; bottom: 16px; z-index: 40; width: min(980px, calc(100% - 32px)); height: var(--hud-h);
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent); border-radius: 12px;
  background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow);
  transform: translate3d(-50%, calc(100% + 32px), 0); transition: transform .9s var(--ease-out);
}
.hud.show { transform: translate3d(-50%, 0, 0); }
.hud-rec { display: flex; align-items: center; gap: 9px; flex: none; font: 500 12px/1 var(--font-mono); color: var(--fg); }
.hud-rail { position: relative; flex: 1; min-width: 0; height: 100%; }
.hud-track { position: relative; display: flex; gap: 3px; height: 100%; margin: 0; padding: 0; list-style: none; }
.hud-track li { flex: var(--w) 1 0; min-width: 0; }
.hud-track button {
  width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 0;
  border: 0; background: none; color: var(--muted); font: 500 11px/1 var(--font-body); text-align: left; cursor: pointer; transition: color .2s;
}
.hud-track button span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 1px; }
.hud-track button i { position: relative; display: block; height: 4px; border-radius: 2px; overflow: hidden; background: color-mix(in oklab, var(--fg) 14%, transparent); transition: background-color .2s; }
.hud-track button i::after { content: ''; position: absolute; inset: 0; background: color-mix(in oklab, var(--fg) 58%, transparent); transform-origin: left; transform: scaleX(var(--f, 0)); }
.hud-track button:hover, .hud-track button.cur { color: var(--fg); }
.hud-track button:hover i { background: color-mix(in oklab, var(--fg) 24%, transparent); }
.hud-track button:focus-visible { outline-offset: -2px; }
.hud-ph { position: absolute; top: 8px; bottom: 8px; left: 0; width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; transform: translate3d(var(--x, 0px), 0, 0); }
.hud-ph::before { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 8px; transform: translateX(-50%); background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.hud-dur { flex: none; font: 500 12px/1 var(--font-mono); color: var(--muted); }

/* ==========================================================================
   Hero — Cold open
   ========================================================================== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: calc(var(--nav-h) + clamp(28px, 6vh, 80px)) 0 clamp(96px, 13vh, 150px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow eyebrow" "title title" "copy reel"; gap: 28px clamp(32px, 5vw, 96px); align-items: end; }
.hero .eyebrow { grid-area: eyebrow; }
.hero-title { grid-area: title; }
.hero-title .line { display: block; will-change: transform; transition: none; }
.hero-title .line:nth-child(1) { transform: translate3d(calc(var(--hp, 0) * -7vw), 0, 0); }
.hero-title .line:nth-child(2) { padding-left: .9em; transform: translate3d(calc(var(--hp, 0) * 9vw), 0, 0); }
.hero-copy { grid-area: copy; display: grid; gap: 32px; align-content: end; padding-bottom: 12px; opacity: calc(1 - var(--hp, 0) * 1.6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.reel { --rs: clamp(220px, 23vw, 340px); grid-area: reel; position: relative; width: var(--rs); justify-self: end; perspective: 900px; }
.reel-body { position: relative; width: 100%; aspect-ratio: 1; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(calc(1 - var(--hp, 0) * .18)); transition: transform .8s var(--ease-out); }
.reel svg { position: absolute; inset: -12%; width: 124%; height: 124%; overflow: visible; }
.reel-ring { fill: none; stroke: var(--fg); stroke-width: 30; stroke-dasharray: 943; stroke-dashoffset: 943; transform: rotate(-90deg); transform-origin: 248px 248px; }
.reel.in .reel-ring { stroke-dashoffset: 0; transition: stroke-dashoffset 1.7s var(--ease-in-out) .15s; }
.reel-orbit { font: 500 12.5px var(--font-mono); letter-spacing: .2em; fill: var(--muted); opacity: 0; transition: opacity 1.2s .9s; }
.reel.in .reel-orbit { opacity: 1; }
.reel-lens { position: absolute; inset: 20.5%; border-radius: 50%; overflow: hidden; background: var(--surface); clip-path: circle(0% at 50% 50%); transition: clip-path 1.3s var(--ease-out) .75s; }
.reel.in .reel-lens { clip-path: circle(50% at 50% 50%); }
.reel-lens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.18); }
.reel-lens img.on { opacity: 1; transform: scale(1.02); transition: transform 1.6s linear; }
.reel-lens::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 40px oklch(0% 0 0 / .65); }
.reel-tag { position: absolute; top: 2%; left: -4%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--border); font: 600 11px/1 var(--font-mono); letter-spacing: .12em; color: var(--fg); opacity: 0; transform: translateY(8px); transition: opacity .6s 1.4s, transform .8s var(--ease-out) 1.4s; }
.reel.in .reel-tag { opacity: 1; transform: none; }
.reel-cap { margin-top: 26px; display: flex; justify-content: center; gap: 10px; min-height: 16px; font: 500 11.5px/16px var(--font-mono); color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity .6s 1.5s; }
.reel.in .reel-cap { opacity: 1; }
.reel-cap b { color: var(--fg); font-weight: 500; }
.reel-cap .tc { color: var(--fg-2); }

.cue { position: absolute; left: var(--gutter); bottom: 30px; display: flex; align-items: center; gap: 14px; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: calc(1 - var(--hp, 0) * 4); }
.cue i { position: relative; width: 1px; height: 44px; overflow: hidden; background: color-mix(in oklab, var(--fg) 18%, transparent); }
.cue i::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--fg); animation: cue 2s var(--ease-in-out) infinite; }
@keyframes cue { to { transform: translate3d(0, 350%, 0); } }

/* ==========================================================================
   Marquee — workspaces, pushed by scroll velocity
   ========================================================================== */
.marquee { position: relative; overflow: hidden; padding-block: clamp(26px, 5vh, 54px); border-block: 1px solid var(--border); }
.marquee-track {
  display: flex; align-items: center; gap: .42em; width: max-content; white-space: nowrap;
  font: 400 clamp(54px, 8.6vw, 140px)/1.02 var(--font-display); letter-spacing: -0.04em;
  transform: translate3d(var(--mx, 0px), 0, 0) skewX(var(--msk, 0deg)); will-change: transform;
}
.marquee-track .o { font-style: italic; color: transparent; -webkit-text-stroke: 1px color-mix(in oklab, var(--fg) 60%, transparent); }
.marquee-track .ring { position: relative; flex: none; width: .4em; height: .4em; border: .075em solid var(--fg); border-radius: 50%; }
.marquee-track .ring::after { content: ''; position: absolute; inset: 31%; border-radius: 50%; background: var(--fg); }

/* ==========================================================================
   Shared UI-mock primitives for scenes (product fragments, not screenshots)
   ========================================================================== */
.ui { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.ui-bar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); font: 600 12px/1 var(--font-body); color: var(--fg-2); }
.ui-lights { display: flex; gap: 6px; flex: none; }
.ui-lights i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in oklab, var(--fg) 18%, transparent); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-sm); font: 500 11.5px/1 var(--font-mono); color: var(--fg-2); white-space: nowrap; background: color-mix(in oklab, var(--fg) 7%, transparent); border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent); }
.chip.ok { color: var(--ok); }
.chip.warn { color: var(--warn); }
.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { position: relative; padding: 72px 0 140px; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.foot-grid { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 40px 64px; }
.foot-brand { display: grid; gap: 16px; align-content: start; }
.foot-brand img { height: 22px; width: auto; }
.foot-repo { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font: 500 12px/1.2 var(--font-mono); color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.foot-repo .gh { width: 16px; height: 16px; flex: none; fill: currentColor; }
.foot-repo:hover { color: var(--fg); text-decoration-color: var(--fg); }
.foot-repo + .foot-repo { margin-top: -8px; }
.foot h2 { margin: 0 0 12px; font: 600 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.credits { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.foot-by { margin: 0; }
.credits a, .foot-by a { color: var(--fg-2); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; border-radius: 2px; transition: color .2s, text-decoration-color .2s; }
.credits a:hover, .foot-by a:hover { color: var(--fg); text-decoration-color: var(--fg); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "reel" "copy"; }
  .reel { justify-self: center; --rs: min(64vw, 300px); margin-block: 24px 8px; }
  .hero-title .line:nth-child(2) { padding-left: 0; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .nav-discord { width: var(--bh); padding: 0; }
  .nav-discord-l { display: none; }
  .hud { gap: 12px; padding: 0 12px; }
  .hud-track button span { display: none; }
  .hud-dur { display: none; }
  .cue { display: none; }
}

/* ==========================================================================
   Reduced motion: final states, no loops
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal] .wi, .js [data-reveal] .c { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; animation: none !important; }
  .js [data-reveal="ph"] .ph-in { clip-path: none; }
  .ph-line, .cue i::after { display: none; }
  .grain, .rec-dot { animation: none; }
  .reel-ring { stroke-dashoffset: 0; }
  .reel-lens { clip-path: none; }
  .reel-orbit, .reel-tag, .reel-cap { opacity: 1; transform: none; transition: none; }
  .hero-title .line, .hero-copy, .reel-body { transform: none !important; opacity: 1 !important; }
}