/* ════════════════════════════════════════════════════════════
   /test — a proposed motion layer for the homepage (HomePage motion="next").
   Everything is scoped under .home-next, so `/` is untouched. This file is either
   merged into hero.css / styles.css when the owner promotes it, or deleted —
   never kept alongside the default.

   Rhythm: PEAK 1 the hero (load: camera push, beats on the full stops, players run
   onto the formation; the slogan's paint-on is `/`'s too and lives in hero.css;
   scroll: the slogan tears apart in depth) → THREAD the numerals 01–08 light up
   as the reader passes them, and nothing else moves → PEAK 2 the closing line
   closes in from both sides under floodlights. Load moments are WAAPI (home.jsx
   useHomeMotion); everything tied to the scroll is a CSS scroll-driven animation,
   which runs off the main thread and leaves the finished layout in place wherever
   it is not supported.

   Two constructions matter more than the keyframes:
   - Scroll animations use the individual `translate` / `scale` properties. The
     WAAPI entrances own `transform`; the two then compose instead of
     overwriting each other.
   - Every view() timeline is NAMED on an element whose scroller is the page.
     An anonymous view() inside .h-body / .ln / .included-card (all overflow
     containers) binds to that box and silently never moves
     (e2e/tests/home-motion-next.spec.ts checks every timeline's source).
   ════════════════════════════════════════════════════════════ */

/* At scale > 1 the video would paint past the hero, over the next section. */
.home-next .hero { overflow: clip; }

/* Inline boxes ignore transform: the full stops must be boxes to land as a beat. */
.home-next .claim .dot { display: inline-block; }

/* The formation's lit dots become nine players on the 20px grid step (14px cell + 6px
   gap). A formation change moves them; unused players wait on the touchline below. */
.home-next .grid-players {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.home-next .grid-players i {
  --x: 5;
  --y: 12;
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  background: var(--accent);
  transform: translate(calc(var(--x) * 20px), calc(var(--y) * 20px));
  transition: none;
}
.home-next .grid-players i.off { opacity: 0; }
/* The 11×11 grid itself flips with the document direction; mirror the players with it. */
:root[dir="rtl"] .home-next .grid-players { transform: scaleX(-1); }

@media (prefers-reduced-motion: no-preference) {
  /* Moving between two on-screen states: a symmetric curve. */
  .home-next .grid-players i {
    transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1), opacity 400ms ease;
  }

  @supports (animation-timeline: view()) {
    /* ── PEAK 1, on scroll: the first screen of scroll takes the hero apart in depth.
       Ranges are in --vhu (not vh: the phone toolbar), measured from the top. */
    .home-next .hero-video,
    .home-next .claim .ln-1,
    .home-next .claim .ln-2 {
      animation: linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 calc(var(--vhu) * 100);
    }
    /* The footage sinks at two thirds of the page's speed and pushes in: the far layer. */
    .home-next .hero-video { animation-name: nx-sink; }
    /* The slogan tears apart: the two imperatives leave in opposite directions, faster
       than the page, while WIN rides with it — the payoff is the last thing to go. The
       split happens in the first 70% of a screen, while the lines are still in view
       (vertical-only travel read as nothing: they slid under the header first). The
       .ln wrappers move; the spans inside them belong to the entrance. */
    .home-next .claim .ln-1,
    .home-next .claim .ln-2 { animation-range: 0 calc(var(--vhu) * 70); }
    .home-next .claim .ln-1 { animation-name: nx-tear-start; }
    .home-next .claim .ln-2 { animation-name: nx-tear-end; }
    :root[dir="rtl"] .home-next .claim .ln-1 { animation-name: nx-tear-end; }
    :root[dir="rtl"] .home-next .claim .ln-2 { animation-name: nx-tear-start; }

    /* ── THREAD: the numerals are this brand's iconography, so they carry the middle.
       Each outline numeral lights while its card crosses the middle of the screen, a
       little later column by column, and goes back to a hairline after. `none` fill:
       outside that band the hover fill still works. */
    .home-next .included-card { view-timeline: --nx-card block; }
    .home-next .included-card-num {
      animation: nx-lit linear none;
      animation-timeline: --nx-card;
      animation-range: cover 28% cover 68%;
    }
    .home-next .included-card:nth-child(4n+2) .included-card-num { animation-range: cover 31% cover 71%; }
    .home-next .included-card:nth-child(4n+3) .included-card-num { animation-range: cover 34% cover 74%; }
    .home-next .included-card:nth-child(4n+4) .included-card-num { animation-range: cover 37% cover 77%; }

    /* ── PEAK 2: the closing line closes in from both sides while the heading itself
       enters, and the floodlight behind it comes on while the banner does. Each range ends
       when its box is fully on screen — a point every window reaches, however tall
       (mid-screen is not). Tied to the heading, not the banner: on a phone the lines fill
       the width, and a reader who stopped mid-banner saw "УВИДИМСЯ" cut at the edge. Now
       a line is only ever displaced while it is still crossing the bottom edge. */
    .home-next .cta-banner {
      view-timeline: --nx-cta block;
      overflow-x: clip;
    }
    .home-next .cta-banner h2 { view-timeline: --nx-cta-head block; }
    .home-next .cta-banner h2 .ln,
    .home-next .cta-banner::before {
      animation: linear both;
      animation-timeline: --nx-cta;
      animation-range: entry 0% entry 100%;
    }
    .home-next .cta-banner h2 .ln { animation-timeline: --nx-cta-head; }
    .home-next .cta-banner h2 .ln:first-child { animation-name: nx-from-start; }
    .home-next .cta-banner h2 .ln:last-child { animation-name: nx-from-end; }
    :root[dir="rtl"] .home-next .cta-banner h2 .ln:first-child { animation-name: nx-from-end; }
    :root[dir="rtl"] .home-next .cta-banner h2 .ln:last-child { animation-name: nx-from-start; }
    .home-next .cta-banner::before { animation-name: nx-floodlight; }
  }
}

@keyframes nx-sink { to { translate: 0 33%; scale: 1.1; } }
@keyframes nx-tear-start { to { translate: -24% calc(var(--vhu) * -20); } }
@keyframes nx-tear-end { to { translate: 16% calc(var(--vhu) * -8); } }
@keyframes nx-lit {
  50% {
    -webkit-text-stroke-color: var(--accent);
    color: color-mix(in srgb, var(--accent) 16%, transparent);
  }
}
@keyframes nx-from-start { from { translate: -20% 0; } }
@keyframes nx-from-end { from { translate: 20% 0; } }
@keyframes nx-floodlight { from { opacity: 0.15; scale: 0.55; } }