/* cine.css — design floor + engine primitives. Theme via tokens in the project :root. */
:root {
  /* 6 colour roles + 1 accent (override per project) */
  --canvas: #06070a; --surface: #10141c; --ink: #d1e2ec; --ink-soft: #8195ad;
  --accent: #5ac8f0; --accent-ink: #06070a;
  --line: color-mix(in oklab, var(--ink) 14%, transparent);
  --edge: color-mix(in oklab, var(--ink) 8%, transparent);
  --shadow-tint: 6 7 10; /* canvas rgb, for tinted shadows */
  /* type */
  --font-display: 'Chakra Petch', system-ui, sans-serif;
  --font-text: 'Montserrat', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: clamp(1.5rem, 2.2vw, 2rem);
  --t-2xl: clamp(2rem, 3.4vw, 3.25rem); --t-3xl: clamp(2.4rem, 5.4vw, 5.25rem); --t-4xl: clamp(3.5rem, 8.5vw, 7.5rem);
  --track-tight: -.015em; --track-normal: 0; --track-wide: .12em;
  --measure: 62ch;
  /* 4px spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --section: clamp(48px, 10vw, 160px); --gutter: clamp(16px, 4vw, 64px);
  /* motion */
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-reveal: cubic-bezier(.22, .8, .3, 1); --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-ui: 160ms; --dur-reveal: .7s;
  /* elevation (3 steps) */
  --e1: 0 1px 2px rgb(var(--shadow-tint) / .5), inset 0 1px 0 var(--edge);
  --e2: 0 8px 24px -8px rgb(var(--shadow-tint) / .7), inset 0 1px 0 var(--edge);
  --e3: 0 24px 60px -16px rgb(var(--shadow-tint) / .85), inset 0 1px 0 var(--edge);
  --radius: 4px;
  --vh: 100vh; --scroll: 0; --vel: 0; --mx: 0; --my: 0;
  color-scheme: dark;
}

/* ---------- minimal reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.cine-reduced { scroll-behavior: auto; }
body { background: var(--canvas); color: var(--ink); font-family: var(--font-text); font-size: var(--t-md); line-height: 1.65; letter-spacing: var(--track-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg, canvas { display: block; max-width: 100%; height: auto; }
[data-cine-parallax] img, .cine-plane { max-width: none; } /* parallax planes must never be shrunk */
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* ---------- browser surfaces are part of the design ---------- */
::selection { background: var(--accent); color: var(--accent-ink); }
html { caret-color: var(--accent); scrollbar-color: color-mix(in oklab, var(--ink) 25%, transparent) transparent; scrollbar-width: thin; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: 0; }

/* ---------- typography ---------- */
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: var(--track-tight); text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
p, li { text-wrap: pretty; max-width: var(--measure); }
.soft { color: var(--ink-soft); }
.mono, .label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-wide); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.hollow { color: transparent; -webkit-text-stroke: 1.3px var(--accent); }
@media (max-width: 700px) { h1 { font-size: var(--t-2xl); } h2 { font-size: var(--t-xl); } } /* hero steps down one rung */

/* ---------- acts ---------- */
[data-cine-act] { position: relative; z-index: 1; --p: 0; --pd: 0; }
.cine-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: clip; display: grid; }
.cine-stage > * { grid-area: 1 / 1; }
.cine-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--canvas) 55%, transparent) 55%, var(--canvas)); z-index: 5; }

/* cue: opacity + translate driven by --cue (engine). Without JS: fully visible. */
[data-cine-cue] { --cue: 1; opacity: var(--cue); transform: translate3d(0, calc((1 - var(--cue)) * 30px), 0); will-change: opacity, transform; }
.cine-js [data-cine-cue] { --cue: 0; }
[data-cine-cue]:not(.is-on) { pointer-events: none; }
[data-cine-stagger] > * { transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal); transition-delay: calc(var(--i, 0) * 70ms); opacity: 0; transform: translate3d(0, 14px, 0); }
[data-cine-stagger].is-on > * { opacity: 1; transform: none; }
.cine-reduced [data-cine-stagger] > * { transform: none; }

/* flow sections */
[data-cine-in] > * { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
[data-cine-in].is-in > *, html:not(.cine-js) [data-cine-in] > * { opacity: 1; transform: none; }

/* rail */
[data-cine-rail] { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cine-rail-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--ink-soft); opacity: .38; transition: opacity .3s; cursor: pointer; }
.cine-rail-n.is-on { opacity: 1; }
.cine-rail-bar { width: 2px; height: 110px; background: color-mix(in oklab, var(--ink-soft) 22%, transparent); position: relative; }
.cine-rail-fill { position: absolute; inset: 0; background: var(--ink-soft); transform: scaleY(0); transform-origin: top; }
@media (max-width: 700px) { [data-cine-rail] { right: 8px; gap: 8px; } .cine-rail-bar { height: 70px; } }

/* grain + halo + intro */
.cine-grain { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: calc(.05 + var(--vel) * .05); background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.cine-intro { position: fixed; inset: 0; z-index: 90; background: var(--canvas); pointer-events: none; transition: opacity 1s ease; }
.cine-ready .cine-intro { opacity: 0; }

/* scrim: a SIBLING of the text, never a child */
.cine-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.cine-scrim--lead { background: radial-gradient(60% 70% at 0% 100%, rgb(var(--shadow-tint) / .85), transparent 70%); }
.cine-scrim--trail { background: radial-gradient(60% 70% at 100% 50%, rgb(var(--shadow-tint) / .85), transparent 70%); }
.cine-scrim--band { background: linear-gradient(180deg, transparent 58%, rgb(var(--shadow-tint) / .9)); }
.cine-scrim--column { background: linear-gradient(90deg, rgb(var(--shadow-tint) / .9) 0 46%, transparent 62%); }
@media (max-width: 860px) { .cine-scrim--lead, .cine-scrim--trail, .cine-scrim--column { background: linear-gradient(180deg, transparent 50%, rgb(var(--shadow-tint) / .92)); } }

/* ---------- base components ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 17px 38px; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--accent-ink); background: var(--ink); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: background var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); transform: translate(var(--magx, 0), var(--magy, 0)); white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); clip-path: none; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: color-mix(in oklab, var(--ink) 85%, var(--accent)); } .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink-soft); background: color-mix(in oklab, var(--ink-soft) 12%, transparent); } }
.btn[disabled] { opacity: .45; pointer-events: none; }
.chip { display: inline-flex; align-items: center; min-height: 40px; font-family: var(--font-mono); font-size: 14px; letter-spacing: .12em; color: var(--accent); text-decoration: none; transition: text-shadow .25s; }
.chip::before { content: "[ "; color: var(--ink-soft); opacity: .6; } .chip::after { content: " ]"; color: var(--ink-soft); opacity: .6; }
@media (hover: hover) and (pointer: fine) { .chip:hover { text-shadow: 0 0 16px color-mix(in oklab, var(--accent) 85%, transparent); } .chip:hover::before, .chip:hover::after { color: var(--accent); opacity: 1; } }
.panel { position: relative; background: color-mix(in oklab, var(--surface) 82%, transparent); border: 1px solid var(--line); box-shadow: var(--e2); }
.panel .corner { position: absolute; width: 11px; height: 11px; border: 1.5px solid var(--accent); }
.panel .corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .panel .corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.panel .corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; } .panel .corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.nav-pill { position: fixed; top: 16px; right: 22px; z-index: 50; display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 100px; border: 1px solid var(--line); background: color-mix(in oklab, var(--canvas) 60%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.nav-pill a { color: var(--ink); text-decoration: none; padding: 7px 13px; border-radius: 100px; transition: background var(--dur-ui), color var(--dur-ui); white-space: nowrap; }
.nav-pill a.is-cta, .nav-pill a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .nav-pill a:hover { color: var(--accent-ink); background: var(--accent); } }
@media (max-width: 560px) { .nav-pill { top: 10px; right: 10px; font-size: 10px; gap: 2px; padding: 4px 5px; } .nav-pill a { padding: 0 10px; min-height: 40px; display: inline-flex; align-items: center; letter-spacing: .05em; } } /* tap target ≥ 40px */

/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
.section { padding-block: var(--section); }
.section > h2 { margin-bottom: var(--s-5); } .section > h2 + p { margin-top: 0; }
.section + .section { padding-top: 0; } /* the space belongs to the section boundary, not the heading-body pair */

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-cine-cue] { transform: none; }
  [data-cine-parallax] { transform: none !important; }
  .cine-grain { display: none; }
}