/* ════════════════════════════════════════════════════════════════════
   HERO — 3-line asymmetric staircase with animated word swap
   BEM block: .hero
   Structure: .section.hero > .container > h1 > 3 lines

   Layout: Each line indented progressively right.
   Text fills viewport — nothing below the fold.
   Video hidden initially, reveals after GSAP sequence.

   Expanded state: BRAND left + FIRST orange right,
   both at display size, edge-to-edge within gutters.
   Video below at full content width.
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  .hero {
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--surface-page);
    padding-block: var(--space-m);
    padding-block-start: calc(var(--header-height) + var(--space-m));
    overflow: hidden;
  }

  .hero > .container {
    inline-size: 100%;
  }


  /* ── Heading — 3-line staircase ──────────────────────────────── */

  .hero__heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
  }

  .hero__line {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--heading-hero);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-crushed);
    letter-spacing: var(--tracking-tight);
    color: var(--black);
    text-transform: uppercase;
  }


  /* ── Asymmetric indentation — staircase right ────────────────── */

  .hero__line--2 {
    padding-inline-start: var(--hero-indent-1);
  }

  .hero__line--3 {
    padding-inline-start: var(--hero-indent-2);
  }


  /* ── Indent tokens — scale with viewport ─────────────────────── */

  .hero {
    --hero-indent-1: var(--space-m);
    --hero-indent-2: calc(var(--space-m) * 2);
  }

  @media (min-width: 48em) {
    .hero {
      --hero-indent-1: var(--space-xl);
      --hero-indent-2: calc(var(--space-xl) * 2);
    }
  }

  @media (min-width: 64em) {
    .hero {
      --hero-indent-1: var(--space-3xl);
      --hero-indent-2: calc(var(--space-3xl) * 2);
    }
  }


  /* ── Brand word spacing ──────────────────────────────────────── */

  .hero__brand-word {
    margin-inline-end: var(--space-3xs);
  }


  /* ── Swap container — holds BE SEEN / FELT / FIRST ──────────── */

  .hero__swap {
    position: relative;
    display: inline-block;
  }

  .hero__swap-word {
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--black);
  }

  .hero__swap-word--seen {
    position: relative;
  }

  .hero__swap-word--felt,
  .hero__swap-word--first {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    opacity: 0;
    white-space: nowrap;
  }

  .hero__swap-word--first {
    display: inline-flex;
    color: var(--secondary);
  }


  /* ── Strikethrough SVG ───────────────────────────────────────── */

  .hero__strike {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--space-3xs) * -1);
    inline-size: calc(100% + var(--space-2xs));
    block-size: var(--space-xs);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .hero__strike line {
    stroke: var(--secondary);
    stroke-width: var(--line-heavy);
    stroke-linecap: round;
  }


  /* ── Post-expansion — BRAND FIRST stretches edge-to-edge ─────── */

  .hero__heading--expanded .hero__line--1,
  .hero__heading--expanded .hero__line--2 {
    display: none;
  }

  .hero__heading--expanded {
    gap: 0;
  }

  .hero__heading--expanded .hero__line--3 {
    padding-inline-start: 0;
    font-size: var(--heading-hero-expanded);
    white-space: nowrap;
    max-inline-size: 100%;
    overflow: hidden;
  }


  /* ── Video container ─────────────────────────────────────────── */

  .hero__video {
    margin-block-start: var(--space-m);
    inline-size: 100%;
    aspect-ratio: var(--ratio-landscape);
    border-radius: var(--radius-l);
    overflow: hidden;
    background-color: var(--black);
    opacity: 0;
  }

  .hero__video video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }


  /* ── Reduced motion — show final state immediately ─────────── */

  @media (prefers-reduced-motion: reduce) {
    .hero__video {
      opacity: 1;
    }

    .hero__swap-word--first {
      opacity: 1;
    }

    .hero__swap-word--seen {
      opacity: 0;
    }
  }

}