/* ─────────────────────────────────────────────────────────────
   new-13 · style.css
   Design system inherited from ../new-12 (eladiodieste.com language:
   one face, fluid root, class-contract reveals) and re-tuned for Halion:
   pure black/white, uppercase allowed, 12px squircle + glass chrome.
   Spec + rationale: DESIGN.md.

   Layer order, declared once. Later layers win without specificity fights;
   anything unlayered wins over everything (keep that rare: @font-face and
   the reduced-motion block only).
   ───────────────────────────────────────────────────────────── */
@layer reset, tokens, base, layout, components, motion, utilities;

/* Inter Tight 400/500 — @font-face lives in fonts/inter-tight.css. This is
   the metric-matched fallback so the page does not reflow when the font
   lands. Inter Tight vertical metrics: ascender 2728 / descender −680 / UPM 2816. */
@font-face {
  font-family: 'Inter Tight Fallback';
  src: local('Arial');
  ascent-override: 96.88%;
  descent-override: 24.15%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

@layer reset {
  *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
  html, body { width: 100%; overscroll-behavior: none; }
  img, svg, video, canvas, iframe { display: block; max-width: 100%; }
  img, video { height: auto; }
  button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; background: none; }
  button { cursor: pointer; }
  ul, ol { list-style: none; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  :focus:not(:focus-visible) { outline: none; }
}

@layer tokens {
  :root {
    /* ── colour: two values, everything else is a color-mix of them ── */
    --black: #000;
    --white: #fff;

    --bg:          var(--black);
    --ink:         var(--white);
    --display-ink: var(--ink);        /* no accent on this site: display type is white */
    --bg-footer:   var(--bg);         /* hook kept from new-12 (body.is-footer-inview); off */

    --ink-55:      color-mix(in oklab, var(--ink) 55%, transparent);   /* secondary text: lead, hint */
    --ink-40:      color-mix(in oklab, var(--ink) 40%, transparent);
    --tint-image:  color-mix(in oklab, var(--ink) 10%, transparent);   /* plate before its image loads */
    --line-faint:  color-mix(in oklab, var(--ink) 20%, transparent);
    --scrim:       color-mix(in oklab, var(--black) 50%, transparent);
    --caption-ink: color-mix(in oklab, var(--ink) 80%, transparent);

    /* ── glass + shape ── */
    --glass-bg:       color-mix(in oklab, var(--white) 10%, transparent);
    --glass-bg-hover: color-mix(in oklab, var(--white) 16%, transparent);
    --glass-blur:     12px;              /* fills only — no strokes anywhere on this site */
    --radius:         12px;            /* every button / capsule; corner-shape: squircle where supported */
    --btn-h:          2.5rem;

    /* ── type scale · rem on a fluid root (15px → 18px → 22px) ── */
    --fs-hero:       36vw;             /* md: 20vw */
    --fs-display:    3rem;             /* md: 7rem */
    --fs-statement:  1.875rem;         /* md: 3rem */
    --fs-statement-lg: 2.25rem;        /* md: 4rem — the About statement (Dmitriy: bigger, five lines) */
    --fs-sublead:    1.5rem;           /* md: 1.875rem */
    --fs-h3:         1.25rem;          /* md: 1.875rem */
    --fs-menu:       3.75rem;          /* md: 7rem */
    --fs-body-lg:    1.125rem;
    --fs-body:       1.0625rem;
    --fs-ui:         1rem;
    --fs-caption:    .875rem;
    --fs-meta:       .75rem;

    --lh-hero:       1;
    --lh-display:    1;
    --lh-display-tight: .85;
    --lh-statement:  1;
    --lh-sublead:    1;
    --lh-h3:         1.05;
    --lh-menu:       1;
    --lh-body-lg:    1.1;
    --lh-body:       1.05;
    --lh-body-loose: 1.15;
    --lh-lead:       1.3;              /* uppercase paragraph needs more air than body 1.1 */
    --lh-ui:         1.5;
    --lh-caption:    1.43;
    --lh-meta:       1.33;

    /* tracking — never positive, tighter as size grows */
    --ls-hero:       -.075em;
    --ls-display:    -.05em;
    --ls-display-tight: -.035em;
    --ls-statement:  -.04em;
    --ls-quote:      -.025em;
    --ls-sublead:    -.01em;
    --ls-h3:         -.04em;
    --ls-body-lg:    -.01em;
    --ls-body:       -.02em;
    --ls-credit:     -.025em;
    --ls-ui:         -.001em;
    --ls-note:       -.08em;

    --w-text: 400;
    --w-ui:   500;

    /* ── easing (same four curves registered in lib/gsap.js) ── */
    --ease-magic:    cubic-bezier(.33, 0, 0, 1);    /* reveals, hovers, header morph */
    --ease-out-expo: cubic-bezier(.19, 1, .22, 1);  /* word/char/divider reveals */
    --ease-quart:    cubic-bezier(.41, .35, .2, 1); /* image clip reveal, fade-in */
    --ease-base:     cubic-bezier(.46, .03, .12, 1);/* show/hide of floating chrome */
    --ease-out:      cubic-bezier(0, 0, .2, 1);

    --dur-tap:    .3s;
    --dur-mid:    .6s;
    --dur-body:   .7s;
    --dur-hover:  .75s;
    --dur-image:  1.2s;
    --dur-line:   1.4s;
    --dur-word:   1.6s;

    --step-line: 50ms;
    --step-word: 75ms;
    --step-char: 75ms;
    --step-image: .2s;

    --split-mask-pad:     .08em;
    --split-mask-bleed-y: .3em;

    /* ── spacing (Tailwind base .25rem) ── */
    --u:        .25rem;
    --pad-x:    1rem;
    --gap-grid: 1.25rem;
    --header-py: 1rem;
    --section-pt: calc(var(--u) * 6);
    --section-pb: calc(var(--u) * 40);/* md: 72 */
    --display-mb: calc(var(--u) * 32);/* md: 56 */

    --hero-pb: 1rem;
    /* scene scrim over the clip: black at these alphas, top / middle / bottom (0 = off) */
    --scene-scrim-top: .35;
    --scene-scrim-mid: .15;
    --scene-scrim-bottom: .55;
    --hold: 60svh;                     /* run past a parked statement — the reading pause; the clip holds its frame */
    --product-run: 220svh;             /* section 03: the clip 2 scrub window (10s clip) — same pace per pixel as v1 */
    --section-gap: 100px;              /* breath between the hero and the next section */
    --frame-gap: 48px;                 /* text ↔ frame hairline distance: top rule, centre rule */
    --frame-gap-bottom: 56px;          /* parked statement ↔ viewport / bottom rule: 48 + the descender, so it reads as the side gap */

    --z-header: 60;
  }

  @media (min-width: 48rem) {
    :root {
      --fs-hero:      20vw;
      --fs-display:   7rem;
      --fs-statement: 3rem;
      --fs-statement-lg: 4rem;
      --fs-sublead:   1.875rem;
      --fs-h3:        1.875rem;
      --fs-menu:      7rem;
      --section-pb:   calc(var(--u) * 72);
      --display-mb:   calc(var(--u) * 56);
    }
  }
}

@layer base {
  html { font-size: 15px; }
  @media (min-width: 640px)  { html { font-size: clamp(15px, 12.9574px + .3191vw, 18px); } }
  @media (min-width: 1580px) { html { font-size: clamp(18px, 1.1765vw - .5882px, 22px); } }

  html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    tab-size: 4;
  }
  body {
    font-family: 'Inter Tight', 'Inter Tight Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: var(--w-text);
    line-height: 1.5;
    background-color: var(--bg);
    color: var(--ink);
    transition: background-color var(--dur-body), color var(--dur-body);
  }
  body.is-footer-inview { background-color: var(--bg-footer) !important; }

  ::selection { background-color: var(--white); color: var(--black); text-shadow: none; }

  /* Lenis (lenis.css 1.3.17, inlined) */
  html.lenis, html.lenis body { height: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
  .lenis.lenis-smooth iframe { pointer-events: none; }
  .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
}

@layer layout {
  .container, .px-global { width: 100%; padding-inline: var(--pad-x); margin-inline: auto; }
  .grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-grid); }
  .grid-16 { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: var(--pad-x); }
  @media (min-width: 48rem) { .grid-16 { gap: 0; } }

  .section { padding-top: var(--section-pt); }
  .section--deep { padding-bottom: var(--section-pb); }
  .h-lvh { height: 100lvh; }
  .h-svh { height: 100svh; }
  .h-dvh { height: 100dvh; }
  .h-screen { height: 100vh; height: 100svh; }
}

@layer components {
  /* ── type roles — one class per row of DESIGN.md §2 ── */
  .t-hero      { font-size: var(--fs-hero);      line-height: var(--lh-hero);      letter-spacing: var(--ls-hero);      font-weight: var(--w-text); color: var(--display-ink); }
  .t-display   { font-size: var(--fs-display);   line-height: var(--lh-display);   letter-spacing: var(--ls-display);   font-weight: var(--w-text); color: var(--display-ink); }
  .t-display-tight { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display-tight); font-weight: var(--w-text); color: var(--display-ink); }
  @media (min-width: 48rem) { .t-display-tight { line-height: var(--lh-display-tight); } }
  .t-statement { font-size: var(--fs-statement); line-height: var(--lh-statement); letter-spacing: var(--ls-statement); font-weight: var(--w-text); }
  .t-statement-lg { font-size: var(--fs-statement-lg); line-height: var(--lh-statement); letter-spacing: var(--ls-statement); font-weight: var(--w-text); }
  .t-quote     { font-size: var(--fs-statement); line-height: var(--lh-statement); letter-spacing: var(--ls-quote);     font-weight: var(--w-text); }
  .t-sublead   { font-size: var(--fs-sublead);   line-height: var(--lh-sublead);   letter-spacing: var(--ls-sublead);   font-weight: var(--w-text); }
  .t-h3        { font-size: var(--fs-h3);        line-height: var(--lh-h3);        letter-spacing: var(--ls-h3);        font-weight: var(--w-ui); }
  .t-menu      { font-size: var(--fs-menu);      line-height: var(--lh-menu);      letter-spacing: 0;                   font-weight: var(--w-text); }
  .t-lead      { font-size: var(--fs-body-lg);   line-height: var(--lh-lead);      letter-spacing: var(--ls-body-lg);   font-weight: var(--w-text); }
  .t-body-lg   { font-size: var(--fs-body-lg);   line-height: var(--lh-body-lg);   letter-spacing: var(--ls-body-lg);   font-weight: var(--w-text); }
  .t-body      { font-size: var(--fs-body);      line-height: var(--lh-body);      letter-spacing: var(--ls-body);      font-weight: var(--w-text); }
  .t-body-loose{ font-size: var(--fs-body);      line-height: var(--lh-body-loose);letter-spacing: 0;                   font-weight: var(--w-text); }
  .t-credit    { font-size: var(--fs-body);      line-height: var(--lh-body);      letter-spacing: var(--ls-credit);    font-weight: var(--w-text); }
  .t-ui        { font-size: var(--fs-ui);        line-height: var(--lh-ui);        letter-spacing: var(--ls-ui);        font-weight: var(--w-ui); }
  .t-ui-lg     { font-size: var(--fs-body-lg);   line-height: 1.556;               letter-spacing: 0;                   font-weight: var(--w-ui); }
  .t-caption   { font-size: var(--fs-caption);   line-height: var(--lh-caption);   letter-spacing: 0;                   font-weight: var(--w-ui); }
  .t-meta      { font-size: var(--fs-meta);      line-height: var(--lh-meta);      letter-spacing: 0;                   font-weight: var(--w-text); }
  .t-note      { font-size: .5em;                line-height: 1;                   letter-spacing: var(--ls-note);      opacity: .75; display: block; margin-top: .5rem; }

  /* uppercase is part of this site's voice (screenshot); tracking stays negative */
  .upper { text-transform: uppercase; }
  .no-upper { text-transform: none; }   /* units inside a caps line: µs, not ΜS */

  /* trims the half-leading above cap height and below the baseline */
  .text-trim { text-box: trim-both cap alphabetic; }
  .balance { text-wrap: balance; }

  .divider { background-color: currentColor; width: 100%; height: 1px; }
  .divider--v { background-color: currentColor; width: 1px; height: 100%; }
  .is-dim { color: var(--ink-55); }
  .link-dim { transition: opacity var(--dur-tap); }

  /* ── pin: a 100svh sticky box a section's big statement parks in — sticks the moment the
        section's top reaches the screen's top, leaves with the section's bottom edge. The
        statement sits at its bottom, --frame-gap-bottom above the viewport / section end. ── */
  .pin {
    position: sticky; top: 0; height: 100svh; pointer-events: none;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid);
    align-content: end; padding-inline: var(--pad-x); padding-bottom: var(--frame-gap-bottom);
  }
  .pin > * { pointer-events: auto; }

  /* ── foot: the section-index row under a section's last rule ── */
  .foot { display: flex; justify-content: flex-end; padding-block: 1.25rem; }
  .foot--abs { position: absolute; bottom: 0; inset-inline: 0; }

  /* ── chip: a small glass label (section index) — same fill/blur/squircle as the buttons, no stroke ── */
  .chip {
    display: inline-flex; align-items: center; justify-content: center;
    height: 1.75rem; min-width: 1.75rem; padding-inline: .625rem;
    border-radius: var(--radius);
    background: var(--glass-bg); color: var(--ink);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
  @media (hover: hover) { .link-dim:hover { opacity: .6; } }

  /* ── buttons: 2.5rem tall, 12px squircle, fills only (no strokes). Glass =
        white 10% over blur; solid = white on black. Hover raises the fill. ── */
  .btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    height: var(--btn-h); padding-inline: 1rem;
    border-radius: var(--radius);
    font-size: var(--fs-ui); font-weight: var(--w-ui); letter-spacing: var(--ls-ui); line-height: 1;
    white-space: nowrap; color: var(--ink);
    transition: background-color var(--dur-tap) var(--ease-magic), color var(--dur-tap) var(--ease-magic), transform .15s var(--ease-out);
  }
  .btn--glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
  .btn--solid { background: var(--ink); color: var(--bg); }
  .btn--icon { width: var(--btn-h); padding: 0; }
  .btn .bi { font-size: 1.25em; line-height: 1; display: inline-flex; }   /* one size for every icon → one stroke */
  @media (hover: hover) {
    .btn--glass:hover { background: var(--glass-bg-hover); }
    .btn--solid:hover { background: color-mix(in oklab, var(--ink) 86%, transparent); }
  }
  .btn:active { transform: scale(.97); }
  /* corner smoothing (Figma 100% / iOS continuous) — native where the engine has it,
     a plain 12px round everywhere else */
  @supports (corner-shape: squircle) {
    .btn, .header__bar, .chip { corner-shape: squircle; }
  }

  /* ── header — fixed, transparent on the hero; folds into a centred glass
        capsule (logo · + · burger) once the page scrolls (H4). ── */
  .header { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-header); pointer-events: none; color: var(--ink); }
  .header__bar {
    position: relative; pointer-events: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    padding: var(--header-py) var(--pad-x);
    border-radius: var(--radius);
    background: color-mix(in oklab, var(--white) 0%, transparent);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: background-color var(--dur-mid) var(--ease-magic),
                -webkit-backdrop-filter var(--dur-mid) var(--ease-magic), backdrop-filter var(--dur-mid) var(--ease-magic);
  }
  .header__left, .header__right { display: flex; align-items: center; }
  .header__left { gap: 3rem; }
  .header__right { gap: .5rem; }
  .header__logo { display: inline-block; white-space: nowrap; line-height: 1; letter-spacing: var(--ls-sublead); }
  .header__mark { font-size: .4em; vertical-align: top; margin-left: .06em; }
  .header__nav { display: flex; gap: 2.5rem; }
  .header__clock { white-space: nowrap; margin-right: 1.5rem; }
  .header__sep { color: var(--ink-55); margin-inline: .35em; }

  .header.is-compact .header__bar {
    width: fit-content; margin: .75rem auto 0;
    padding: .25rem .25rem .25rem 1rem; gap: 1rem;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
  .header.is-compact .header__logo { font-size: 1.375rem; }
  .header.is-compact .header__nav,
  .header.is-compact .header__clock,
  .header.is-compact .header__cta .btn__label { display: none; }
  /* glass on the hero (so it does not simply duplicate the white CTA below);
     turns solid white as the header folds — colour rides the Flip's .6s */
  .header__cta {
    overflow: clip;   /* the label is clipped away while the button narrows to the "+" */
    transition: background-color var(--dur-mid) var(--ease-magic), color var(--dur-mid) var(--ease-magic), transform .15s var(--ease-out);
  }
  .header.is-compact .header__cta { width: var(--btn-h); padding: 0; background: var(--ink); color: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  @media (hover: hover) { .header.is-compact .header__cta:hover { background: color-mix(in oklab, var(--ink) 86%, transparent); } }

  /* ── stage — the sticky scene (clip + scrim) that both the hero and About scroll over.
        100lvh tall, pulled back up by its own height so the sections lay on top of it. ── */
  .stage { position: relative; }
  .stage__scene { position: sticky; top: 0; height: 100lvh; margin-bottom: -100lvh; overflow: hidden; z-index: 0; background: var(--bg); }
  .stage__par { position: absolute; inset: 0; will-change: transform; }
  .stage__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .stage__scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg,
      rgb(0 0 0 / var(--scene-scrim-top)) 0%, rgb(0 0 0 / var(--scene-scrim-mid)) 35%,
      rgb(0 0 0 / var(--scene-scrim-mid)) 65%, rgb(0 0 0 / var(--scene-scrim-bottom)) 100%);
  }
  .stage__media--2 { opacity: 0; }
  .stage.is-second .stage__media--2 { opacity: 1; }   /* no transition: the clips share the frame */
  .stage > section { position: relative; z-index: 1; }

  /* ── hero — chrome only, 100lvh, scrolls away over the scene. Composition mirrors the
        screenshot: title bottom-left in 8 columns, lead top-right in 4, hint / CTA / socials
        on the title's baseline. ── */
  .hero { position: relative; height: 100lvh; color: var(--ink); }
  .hero__chrome { position: absolute; inset-inline: 0; top: 0; height: 100svh; }
  .hero__grid {
    position: absolute; inset-inline: var(--pad-x); bottom: var(--hero-pb);
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto;
    column-gap: var(--gap-grid);
  }
  .hero__title { grid-column: 1 / 9; grid-row: 1 / 3; align-self: end; margin-left: -.03em; }
  .hero__lead  { grid-column: 9 / 13; grid-row: 1; align-self: start; max-width: 17em; color: var(--ink-55); }  /* 17em → exactly the screenshot's three lines */
  .hero__hint  { grid-column: 5 / 9; grid-row: 2; justify-self: center; align-self: center; color: var(--ink-55); white-space: nowrap; }
  .hero__cta   { grid-column: 9 / 11; grid-row: 2; justify-self: start; align-self: end; }
  .hero__social { grid-column: 11 / 13; grid-row: 2; justify-self: end; align-self: center; display: flex; gap: 1.5rem; }

  /* ── 02 · About — a hairline frame: intro + stats on top, top rule, a centre rule running the
        whole frame, bottom rule, the section chip. The statement (bottom-RIGHT; the reference has
        it on the left) sits at the bottom of a 100svh sticky pin — the section's first child, so it
        parks --frame-gap-bottom above the viewport bottom the moment the section's top reaches the
        screen's top, and stops the same gap above the bottom rule (the chip row sits outside the
        section). The section's run past the parked text (--hold) is the reading pause. ── */
  .about {
    position: relative; display: flex; flex-direction: column;
    min-height: calc(100svh + var(--hold));
    margin-top: var(--section-gap);
    padding-top: 1.25rem;
  }
  .about .divider { color: var(--line-faint); }   /* frame lines sit back: ink 20%, like the reference's hairlines */
  /* the top row is pulled back up over the pin: the pin keeps its real margin box (so the section's
     bottom edge can push it up at the end), the rows simply lay over it */
  .about__top { margin-top: -100svh; align-items: last baseline; padding-bottom: var(--frame-gap); }   /* stats sit on the caption's baseline */
  .about__intro { grid-column: 1 / 8; }
  .about__intro p + p { margin-top: .25rem; }
  .about__stats { grid-column: 9 / 13; justify-self: end; text-align: right; color: var(--ink-55); white-space: nowrap; }
  .about__dot { color: var(--ink-40); margin-inline: .6em; }
  .about__frame { position: relative; flex: 1; }
  .about__vline { position: absolute; top: 0; bottom: 0; left: 50%; color: var(--line-faint); }
  .about__statement { grid-column: 7 / 13; padding-left: var(--frame-gap); pointer-events: auto; }

  /* ── 03 · Product — the clip takes the chip apart over the whole run. The slogan behaves
        exactly like the hero title (bottom-left, rolls out on scroll); the callouts layer is a
        sticky screen that the section's bottom edge finally pushes away. ── */
  .product { position: relative; min-height: var(--product-run); margin-top: var(--section-gap); }
  .product__screen {
    position: relative; height: 100svh; margin-top: -100svh;   /* lays over the callouts' sticky run */
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid);
    align-content: end; padding-bottom: var(--hero-pb);
  }
  .product__title { grid-column: 1 / 9; margin-left: -.03em; }

  /* callouts: hard dot on the object, a hairline, and the value box in cursor gravity (H9) */
  .callouts { position: sticky; top: 0; height: 100svh; overflow: hidden; pointer-events: none; }
  .callouts__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
  .callouts__lines line { stroke: var(--ink-55); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .callouts__dot { fill: var(--ink); }
  .callouts__tip { fill: var(--ink-55); }
  .callouts__dot, .callouts__tip { transform-box: fill-box; transform-origin: center; scale: 0; }
  .callout { position: absolute; top: 0; left: 0; will-change: transform; }
  .callout__box { display: grid; gap: .4rem; opacity: 0; }
  .callout__value { font-size: var(--fs-sublead); line-height: 1; letter-spacing: var(--ls-sublead); white-space: nowrap; }
  .callout__label { color: var(--ink-55); white-space: nowrap; }

  /* hidden until lib/hero.js starts the intro (no flash of the rested state);
     without JS everything is simply visible */
  html.js .header, html.js .hero { visibility: hidden; }
}

@layer motion {
  /* A2 — lines rise 1em and fade in, 50ms apart */
  .reveal-lines:where(html.js *) { opacity: 0; }
  .reveal-lines.is-inview { opacity: 1; }
  .reveal-lines .line {
    translate: 0 1em; opacity: 0;
    transition-property: translate, transform, opacity;
    transition-duration: var(--dur-line);
    transition-timing-function: var(--ease-magic);
  }
  .reveal-lines.is-inview .line {
    translate: 0 0; opacity: 1;
    /* --line-offset (inline) queues one block after another when both are in view at once */
    transition-delay: calc((var(--line, 0) + var(--line-offset, 0)) * var(--step-line));
  }

  /* A3 — words / chars slide up out of a mask, 75ms apart */
  .reveal-words:where(html.js *), .reveal-chars:where(html.js *) { opacity: 0; }
  .reveal-words.is-inview, .reveal-chars.is-inview { opacity: 1; }
  .reveal-words .word {
    transition: var(--dur-word) var(--ease-out-expo) transform;
    transition-delay: calc(var(--step-word) * var(--word, 0));
    transform: translateY(130%);
  }
  .reveal-chars .char {
    transition: var(--dur-word) var(--ease-out-expo) transform;
    transition-delay: calc(var(--step-char) * var(--char, 0));
    transform: translateY(130%);
  }
  .reveal-words.is-inview .word, .reveal-chars.is-inview .char { transform: translateY(0%); }

  /* A4 — hairline draws from the left; A4b — the vertical one draws from the top */
  .reveal-divider { transition: transform var(--dur-line) var(--ease-out-expo); transform-origin: 0; transform: scaleX(0); }
  .reveal-divider.is-inview { transform: scaleX(1); }
  .reveal-divider--v { transition: transform var(--dur-line) var(--ease-out-expo); transform-origin: 50% 0; transform: scaleY(0); }
  .reveal-divider--v.is-inview { transform: scaleY(1); }

  /* A5 — image: tinted plate, then clip-up + settle once in view AND loaded */
  .reveal-image { background-color: var(--tint-image); overflow: hidden; }
  .reveal-image img, .reveal-image video, .reveal-image .ph { opacity: 0; }
  .reveal-image.is-inview.is-loaded img, .reveal-image.is-inview.is-loaded video, .reveal-image.is-inview.is-loaded .ph {
    opacity: 1;
    animation: reveal-clip var(--dur-image) var(--ease-quart) both;
    animation-delay: calc(var(--i, 0) * var(--step-image));
  }
  @keyframes reveal-clip {
    0%  { clip-path: inset(0 0 100%); transform: scale(1.1) translateY(-5%); }
    to  { clip-path: inset(0 0 0%);   transform: scale(1); }
  }
  @keyframes fade-in { 0% { opacity: 0; } to { opacity: 1; } }
  .animate-fade-in { animation: fade-in var(--dur-body) var(--ease-quart) forwards; }

  /* SplitText masks (also used by lib/hero.js, which drives its words with GSAP) */
  .line-mask { display: block; }
  .char-mask, .word-mask, .line, .word, .char { display: inline-block; }
  .word-mask, .char-mask { padding-right: var(--split-mask-pad); margin-right: calc(var(--split-mask-pad) * -1); }
  .line-mask, .word-mask, .char-mask {
    clip-path: inset(calc(var(--split-mask-bleed-y) * -1) 0 calc(var(--split-mask-bleed-y) * -1) 0);
    overflow: visible !important;
  }

  /* generic inview fade (credits, small labels) */
  .inview-fade { opacity: 0; transition: opacity var(--dur-tap); }
  .inview-fade.is-inview { opacity: 1; }
}

@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; }
  .invisible { visibility: hidden; }
  .hidden { display: none; }
  .relative { position: relative; }
  .overflow-clip { overflow: clip; }
  .pointer-none { pointer-events: none; }
  .pointer-auto { pointer-events: auto; }
  .md-only { display: none; }
  @media (min-width: 48rem) { .md-only { display: block; } .mobile-only { display: none; } }
  .w-full { width: 100%; }
  .object-cover { object-fit: cover; width: 100%; height: 100%; }
  .aspect-3-2 { aspect-ratio: 3 / 2; }
  .aspect-4-3 { aspect-ratio: 4 / 3; }
  .aspect-16-9 { aspect-ratio: 16 / 9; }
  .mt-2 { margin-top: calc(var(--u) * 2); }
  .mt-5 { margin-top: calc(var(--u) * 5); }
  .mt-6 { margin-top: calc(var(--u) * 6); }
  .mt-8 { margin-top: calc(var(--u) * 8); }
  .mt-24 { margin-top: calc(var(--u) * 24); }
  .mb-5 { margin-bottom: calc(var(--u) * 5); }
  .mb-6 { margin-bottom: calc(var(--u) * 6); }
  .mb-display { margin-bottom: var(--display-mb); }
  .pt-6 { padding-top: calc(var(--u) * 6); }
  .pb-6 { padding-bottom: calc(var(--u) * 6); }
  .pt-24 { padding-top: calc(var(--u) * 24); }
  .py-8 { padding-block: calc(var(--u) * 8); }
  .gap-5 { gap: calc(var(--u) * 5); }
  .col-span-4 { grid-column: span 4 / span 4; }
  .col-span-7 { grid-column: span 7 / span 7; }
  .col-span-12 { grid-column: span 12 / span 12; }
  @media (min-width: 48rem) {
    .md\:col-span-7 { grid-column: span 7 / span 7; }
    .md\:col-start-6 { grid-column-start: 6; }
    .md\:col-span-5 { grid-column: span 5 / span 5; }
    .md\:col-span-6 { grid-column: span 6 / span 6; }
    .md\:col-start-7 { grid-column-start: 7; }
    .md\:max-w-66 { max-width: 66%; }
  }
  .text-right { text-align: right; }
  .flex { display: flex; }
  .items-end { align-items: flex-end; }
  .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  .flex-col { flex-direction: column; }
  .gap-2 { gap: calc(var(--u) * 2); }
  .gap-4 { gap: calc(var(--u) * 4); }
}

/* Reduced motion: every reveal rests in its final state; lib/*.js skips the
   intro, the scrub and the Flip (the header just toggles its class). */
@media (prefers-reduced-motion: reduce) {
  .reveal-lines .line, .reveal-words .word, .reveal-chars .char { transition: none; translate: 0 0; transform: none; opacity: 1; }
  .reveal-lines:where(html.js *), .reveal-words:where(html.js *), .reveal-chars:where(html.js *) { opacity: 1; }
  .reveal-divider { transition: none; transform: scaleX(1); }
  .reveal-divider--v { transition: none; transform: scaleY(1); }
  .reveal-image img, .reveal-image video, .reveal-image .ph { opacity: 1; animation: none; }
  .header__bar, .btn, .link-dim { transition: none; }
}