/* ==========================================================================
   HERO — desktop only (Figma «Section hero», 1920 × 1080)
   --------------------------------------------------------------------------
   The manifesto in three words, «Контент або нічого», cut through by a
   strip of three of Alina's own clips. Phones skip it: there About is the
   first screen, and a 240-px slogan has nowhere to live.

   The Hero is one screen, drawn in the Figma frame's own coordinates.
   Every size and gap below is the Figma number divided by 1920 (so it is
   the same picture on any desktop width, only smaller):

     kicker  (text box 228–244)
       ↓ 80    4.167vw
     title   (324–756): row 1 is 212 + 7, row 2 is 212 — 12.5vw type
       ↓ 100   5.208vw
     tagline (856–872)

   The block sits 10 px below the screen's centre, as in the frame
   (228 above it, 208 under it).
     strip   145 below the title's top (7.552vw), 142 tall (7.396vw),
             three segments 637 / 638 / 637 with 4-px gaps
     «або»   starts at 1221 of the 1762 field; «нічого» at 335

   The Hero is the one place Cormorant is Bold (agreed exception), and the
   one place the label role is tracked wide, as drawn: kicker 8 / 12,
   tagline 6 / 12.
   ========================================================================== */

.hero {
  display: none;
}

@media (min-width: 64em) {
  .hero {
    position: relative;
    z-index: 1;                                 /* over the About ring */
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: center;
    justify-items: center;
    /* One screen of composition + a hidden bleed below it. The picture
       is centred in the first 100svh (the bleed is padding, so it never
       shifts the content); the extra black under the fold means a few
       pixels of accidental scroll — a trackpad nudge, the browser
       restoring a position on reload — never show a cream seam at the
       bottom of the first screen. The docked bar still starts 56 below
       the black (js/menu.js measures the real height). */
    --hero-bleed: var(--dock-gap);
    min-height: calc(100vh + var(--hero-bleed));
    min-height: calc(100svh + var(--hero-bleed));
    padding-top: 1.042vw;                       /* 20: 10 below centre */
    padding-bottom: var(--hero-bleed);
    overflow: clip;
    background: var(--color-ink);
    color: var(--color-bg);
  }

  .hero__kicker,
  .hero__tagline {
    color: var(--color-bg-soft);
    text-transform: uppercase;
  }

  .hero__kicker {
    margin-bottom: 4.167vw;                     /* 80 */
    letter-spacing: 0.667em;                    /* 8 at 12 */
  }

  .hero__tagline {
    margin-top: 5.208vw;                        /* 100 */
    letter-spacing: 0.5em;                      /* 6 at 12 */
  }

  /* Title and strip share one grid cell: the strip is laid over the
     title, across the lower half of «контент або» and the top of
     «нічого» — the letters show above and below it. */
  .hero__title,
  .hero__strip {
    grid-row: 2;
    grid-column: 1;
  }

  .hero__title {
    width: var(--content);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--hero-size);                /* 240 */
    line-height: 0.8833;                        /* 212 */
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }

  .hero__row {
    position: relative;
    display: block;
  }

  .hero__row:first-child {
    margin-bottom: 0.365vw;                     /* 7 */
  }

  .hero__abo {
    position: absolute;
    top: 0;
    left: calc(var(--content) * 1221 / 1762);
  }

  .hero__row--2 {
    padding-left: calc(var(--content) * 335 / 1762);
  }

  /* --- Strip ---------------------------------------------------------------
     At rest: three bands, 142 tall, each showing the middle of its clip's
     first frame. On hover a band opens to 640 from its own centre (the
     row keeps its height, so the neighbours never move) and the clip
     plays from the start; leaving pauses and rewinds it. */
  .hero__strip {
    align-self: start;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100vw;
    height: 7.396vw;                            /* 142 */
    margin-top: 7.552vw;                        /* 145 below the title top */
  }

  .hero__seg {
    position: relative;
    flex: 1 1 0;
    height: 7.396vw;
    overflow: hidden;
    background: #1c1c1c;                        /* before the poster arrives */
    transition: height 400ms ease;
  }

  .hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The first clip rests on the studio's neon sign: the thin band shows
     the pink line «…STUDIO-SCHOOL» instead of the middle of the frame
     (Vadim, 5 Nov). Opened, the band is about square — the whole frame
     fits and this offset changes nothing. */
  .hero__seg:first-child .hero__video {
    object-position: 50% 7.5%;
  }

  /* Touch screens with the desktop layout (a tablet held landscape) have
     no hover: the bands open one at a time on their own, and a tap opens
     the tapped one (js/hero.js, .is-open). Vadim, 5 Nov. */
  .hero__seg.is-open {
    z-index: 2;
    height: 33.333vw;                           /* 640 */
  }

  @media (hover: hover) {
    .hero__seg:hover {
      z-index: 2;
      height: 33.333vw;                         /* 640 */
    }
  }
}