/*
 * NIGHTWEAVE — design tokens. Every colour, font, size, duration, easing and
 * motion distance on the concept site lives here. site.css and site.js only
 * reference them (JS reads them with getComputedStyle). Prefix: --s-.
 */

/* Big Shoulders Display — SIL OFL 1.1, variable weight limited to 600–900 and
   subset to caps, digits and punctuation (the face is only ever set in caps).
   10 KB woff2; the full TTF stays in art/nightweave/art-src/ (see BRIEF.md). */
@font-face {
    font-family: "NW Display";
    src: url("fonts/BigShouldersDisplay-sub.woff2") format("woff2");
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}
/* Inter — shared, SIL OFL 1.1. */
@font-face {
    font-family: "NW Inter";
    src: url("../../../shared/fonts/inter/Inter-latin.var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "NW Inter";
    src: url("../../../shared/fonts/inter/Inter-latin-ext.var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ── Palette ─────────────────────────────────────────────── */
    --s-bg: #07080f;                 /* midnight */
    --s-bg-deep: #030409;            /* footer, page edge */
    --s-bar: #000000;                /* letterbox bars: true black, so the frame reads */
    --s-frame-edge: #5d6372;         /* hairline at the top and bottom of the frame */
    --s-surface: #0d1019;
    --s-surface-2: #121624;
    --s-text: #f3f4f8;
    --s-steel: #c9ced8;
    --s-muted: #9aa0ad;              /* 7.4:1 on --s-bg */
    --s-dim: #5d6372;                /* decorative only, never body text */
    --s-rule: #ffffff1a;
    --s-rule-strong: #ffffff33;
    --s-cyan: #3fd0ff;               /* electric cyan — the strands */
    --s-cyan-core: #e6faff;          /* white-hot strand core */
    --s-cyan-wash: #3fd0ff24;
    --s-cyan-haze: #3fd0ff12;
    --s-red: #e3263b;                /* sodium red — warnings, stamp, focus */
    --s-red-text: #ff5a6a;           /* red that passes AA as small text on midnight */
    --s-red-wash: #e3263b2e;
    --s-accent: var(--s-red);
    --s-accent-ink: #ffffff;
    --s-btn-bg: #f3f4f8;
    --s-btn-ink: #07080f;
    --s-veil: #07080fe6;             /* nav once past the hero */
    --s-veil-soft: #07080f00;
    --s-scrim: #030409d9;            /* bottom scrim on one-sheets */
    --s-scrim-clear: #03040900;

    /* Sky + skyline (canvas + CSS fallback) */
    --s-sky-top: #050b1d;            /* deep navy at the top of the frame */
    --s-sky-mid: #0a1830;
    --s-sky-low: #0f2c40;
    --s-sky-horizon: #134a58;        /* teal near the horizon */
    --s-layer-far: #141d33;
    --s-layer-mid: #0b111f;
    --s-layer-near: #04060c;
    --s-window-warm: #ffd9a0;
    --s-window-cool: #b8ecff;
    --s-aircraft: #ff3b4e;
    --s-horizon-glow: #3fd0ff38;
    --s-horizon-clear: #3fd0ff00;

    /* ── The weave (read by site.js) ─────────────────────────── */
    --s-strand: #3fd0ff;
    --s-strand-core: #e6faff;
    --s-strand-glow: 0.22;           /* alpha of the wide glow pass */
    --s-strand-width: 1.3;           /* core width, CSS px */
    --s-strand-width-mobile: 1.5;
    --s-strand-count: 260;
    --s-strand-count-mobile: 130;
    --s-strand-sag: 0.13;            /* sag as a fraction of strand length */
    --s-strand-landed-alpha: 0.13;
    --s-strand-near-anchor: 0.86;    /* share of strands that leave from a rooftop under their letter */
    --s-strand-window: 0.4;          /* progress window over which strands launch, left to right */
    --s-strand-start: 0.02;
    --s-strand-dur: 0.09;            /* flight time of one strand, in progress units */
    --s-strand-jitter: 0.03;
    --s-ghost-alpha: 0.16;           /* faint outlined title shown from the first frame */
    --s-ghost-width: 1.2;
    --s-ghost: #3fd0ff;
    --s-title-fill: #e6faff;
    --s-title-glow: #3fd0ff;
    --s-title-width: 0.86;           /* title width as a fraction of the frame */
    --s-title-width-mobile: 0.92;
    --s-title-y: 0.6;                /* title centre, fraction of frame height */
    --s-stamp: #e3263b;
    --s-title-solid-from: 0.44;      /* progress at which the glowing title fades in */
    --s-title-solid-to: 0.6;
    --s-stamp-from: 0.86;
    --s-stamp-to: 0.95;
    --s-glow-from: 0.7;
    --s-glow-to: 0.95;
    --s-window-density: 0.36;
    --s-window-from: 0.66;           /* windows switch on between these progress points */
    --s-window-spread: 0.24;
    --s-window-warm-share: 0.68;
    --s-window-w: 2.2;
    --s-window-h: 3.2;
    --s-window-w-narrow: 2;
    --s-window-h-narrow: 3;
    --s-window-gap-x: 7;
    --s-window-gap-y: 9;
    --s-window-gap-x-narrow: 6;
    --s-window-gap-y-narrow: 8;
    --s-window-cap: 1700;
    --s-window-cap-narrow: 700;
    --s-window-alpha-mid: 0.5;
    --s-window-alpha-near: 0.8;
    --s-weave-layer-share-1: 0.64;   /* skyline layer heights, fraction of the frame (CSS uses them too) */
    --s-weave-layer-share-2: 0.52;
    --s-weave-layer-share-3: 0.40;
    --s-weave-depth-1: 0.012;        /* parallax rise of each layer as the scene plays */
    --s-weave-depth-2: 0.03;
    --s-weave-depth-3: 0.06;
    --s-weave-bins-wide: 8 10 11;    /* rooftop anchors per layer: far, mid, near */
    --s-weave-bins-narrow: 4 5 5;
    --s-weave-light-bins-wide: 8;    /* aircraft lights per far/mid layer */
    --s-weave-light-bins-narrow: 4;
    --s-weave-alpha-threshold: 128;  /* alpha that counts as building when scanning a layer */
    --s-weave-narrow-px: 700;        /* frame width below which the scene uses phone counts */
    --s-weave-sparks: 8;
    --s-weave-sparks-narrow: 4;
    --s-weave-seed: 941;
    --s-dpr-cap: 2;
    --s-intro-progress: 0.5;         /* the weave plays to here on load: the word is already legible */
    --s-intro-dur: 3.2;              /* seconds */
    --s-intro-delay: 0.3;
    --s-pin-hero: 180;               /* scroll distance, % of viewport height */
    --s-pin-hero-mobile: 110;
    --s-pin-beat: 90;                /* per story beat */
    --s-pin-beat-mobile: 60;
    --s-scrub: 0.6;
    --s-ease-cut: power4.inOut;      /* GSAP ease names */
    --s-ease-out: power3.out;
    --s-ease-in: power2.in;
    --s-ease-line: power2.out;
    --s-ease-linear: none;
    --s-dur-cut: 0.3;
    --s-dur-hold: 0.7;               /* scroll held on each beat before the next cut */
    --s-dur-tail: 0.6;
    --s-dur-line: 0.22;
    --s-dur-reveal: 0.9;
    --s-dur-count: 1.6;
    --s-stagger-line: 0.06;
    --s-stagger-reveal: 0.09;
    --s-stagger-sheet: 0.12;
    --s-line-offset: 0.12;
    --s-numeral-drift: 8;            /* xPercent */
    --s-numeral-enter: 18;
    --s-line-rise: 110;              /* yPercent */
    --s-sheet-rise: 70;              /* px */
    --s-portrait-drift: 4;           /* yPercent */
    --s-reveal-start: top 70%;
    --s-sheet-start: top 82%;
    --s-count-threshold: 0.3;
    --s-bp-narrow: 767px;            /* matches the CSS breakpoint at 768px */
    --s-tc-fps: 24;                  /* hero timecode frame rate */

    /* ── Type ────────────────────────────────────────────────── */
    --s-font-display: "NW Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --s-font-body: "NW Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --s-weight-display: 860;
    --s-step-mega: clamp(8rem, 30vw, 20rem);    /* story numerals */
    --s-step-hero: clamp(3.4rem, 14vw, 13rem);
    --s-step-h2: clamp(2.6rem, 7vw, 6.5rem);
    --s-step-h3: clamp(1.9rem, 3.6vw, 3.2rem);
    --s-step-lede: clamp(1.05rem, 1.5vw, 1.3rem);
    --s-step-body: clamp(1rem, 1.15vw, 1.0625rem);
    --s-step-micro: 0.72rem;
    --s-step-billing: clamp(0.6rem, 1.1vw, 0.78rem);
    --s-track-micro: 0.2em;
    --s-track-display: 0.01em;
    --s-track-title: -0.005em;
    --s-leading-display: 0.86;

    /* ── Space + frame ───────────────────────────────────────── */
    --s-gutter: clamp(16px, 4vw, 56px);
    --s-section: clamp(88px, 12vw, 180px);
    --s-section-tight: clamp(64px, 8.4vw, 126px);
    --s-max: 1440px;
    --s-nav-h: 60px;
    --s-frame-ratio: 2.39;            /* landscape: true widescreen */
    --s-frame-ratio-flat: 1.85;       /* near-square screens */
    --s-frame-ratio-portrait: 0.9;    /* phones: a taller frame, not a postage stamp */
    --s-frame-max-vh: 0.62;           /* the frame never takes more than this share of the screen height */
    --s-bar-top-min: 108px;
    --s-bar-bottom-min: 132px;
    --s-bar-top-share: 3fr;           /* spare height split between the bars: the frame sits high, */
    --s-bar-bottom-share: 5fr;        /* so the call to action stays inside the first screen */
    --s-hairline: 1px;
    --s-focus: 2px;
    --s-radius: 0;                    /* everything is sharp-cornered */
    --s-card-ratio: 2 / 3;
    --s-grain-opacity: 0.07;

    /* ── Motion (CSS) ────────────────────────────────────────── */
    --s-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
    --s-ease-sweep: cubic-bezier(0.7, 0, 0.2, 1);
    --s-dur: 400ms;
    --s-dur-fast: 220ms;
    --s-dur-sweep: 900ms;
    --s-resize-debounce: 160ms;       /* canvas rebuild debounce on ResizeObserver */
    --s-blink: 1.8s;                 /* also the aircraft-light cycle on the canvas */
    --s-blink-on: 0.24;              /* seconds lit per cycle */
    --s-spark-dur: 5.5s;
    --s-cue-dur: 2.4s;
    --s-sheet-offset: clamp(24px, 4vw, 64px);

    /* ── Layers ──────────────────────────────────────────────── */
    --s-z-grain: 900;
    --s-z-nav: 800;
    --s-z-skip: 1100;
    --s-z-over: 2;
    --s-z-menu: 850;

    /* -- added: type scale + length tokens collected from site.css literals -- */
    --s-weight-600: 600;
    --s-leading-155: 1.55;
    --s-leading-150: 1.5;
    --s-leading-100: 1;
    --s-leading-80: 0.8;
    --s-leading-76: 0.76;
    --s-leading-160: 1.6;
    --s-weight-400: 400;
    --s-weight-500: 500;
    --s-leading-95: 0.95;
    --s-leading-120: 1.2;
    --s-leading-145: 1.45;
    --s-track-0p16: 0.16em;
    --s-measure-1p4: 1.4em;
    --s-track-0p08: 0.08em;
    --s-shift-n1p4: -1.4em;
    --s-track-0p03: 0.03em;
    --s-track-0p12: 0.12em;
    --s-track-0p14: 0.14em;
    --s-size-0p32: 0.32em;
    --s-track-0p1: 0.1em;
    --s-track-0p02: 0.02em;

    /* Story cuts: a film still in every frame, the city under every cut. */
    --s-fire: #ff7a3a;
    --s-fire-glow: #ff7a3a40;
    --s-fire-haze: #ff5a2a1f;
    --s-still-pos-1: 50% 22%;     /* the headlamp */
    --s-still-pos-2: 50% 30%;     /* the strand rising from her hand */
    --s-still-pos-3: 50% 25%;     /* the sparks */
    --s-still-w: 46%;
    --s-still-h-mobile: 54%;
    --s-burn-bg: #04060cb3;
    --s-beat-city-h: 46%;
    --s-beat-copy-lift: clamp(176px, 17vw, 240px);   /* desktop cuts 02/03: the copy clears the lit strands (final review: ~120px higher) */
    --s-card-scrim: radial-gradient(closest-side, #030409e0 0%, #030409a6 58%, #03040900 100%);   /* local shade behind a cut's words, never a box */
    --s-card-scrim-bleed: -18% -14%;
    --s-cast-sky-h: clamp(420px, 62vh, 640px);   /* the skyline the characters' title stands in */
    --s-cast-head-top: clamp(150px, 22vh, 230px);
    --s-cast-head-top-phone: 120px;
    --s-cast-overlap: clamp(24px, 3.5vh, 40px);   /* the one-sheets start under the title, never across it */
    --s-titlecard-top: clamp(84px, 13vh, 150px);
    --s-step-burn: clamp(0.8125rem, 1.05vw, 0.9375rem);
    --s-step-slate: 0.875rem;
    --s-step-cut-line: clamp(1.05rem, 1.6vw, 1.375rem);
    --s-size-small: 0.875rem;
    --s-size-legal: 0.875rem;
    --s-size-name: 0.9rem;
    --s-size-quote: 0.9375rem;
    --s-size-input: 1rem;
    --s-size-logo: 1.35rem;
}