/* ============================================================
   The quiz landing (index-quiz.html = /en /ru /lv and the root) — the 4:5 «How HIDE works» film.
   Desktop (≥1100 px): text and quiz on the left, the film on the right, top-aligned with the
   h1 so the whole film is in the first screen. Below that: one column — text, film, quiz —
   (it began 07.10.2026 as an A/B copy, index-quiz-motion.html, and became the page the same day).
   The film carries its own copy, so it never sits UNDER the page's text: a background
   video would put two layers of words on top of each other.
   ============================================================ */
.hero-film{ position:relative; margin:0; width:100%; max-width:520px; }
.hf-frame{ position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; background:#0b0a09;
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px var(--line); }
.hf-frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* the caption row is the pause control (WCAG 2.2.2): a 44 px button + a short label */
.hf-cap{ display:flex; align-items:center; gap:12px; margin-top:12px; font-size:13px; color:var(--ink-soft); }
.hf-btn{ flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:rgba(245,240,232,.04);
  color:var(--ink); display:grid; place-items:center; transition:background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.hf-btn:hover{ background:rgba(245,240,232,.1); }
.hf-btn:active{ transform:scale(.95); }
.hf-btn svg{ width:16px; height:16px; grid-area:1/1; }
.hf-btn .i-play{ display:none; }
.hf-btn.is-paused .i-play{ display:block; }
.hf-btn.is-paused .i-pause{ display:none; }
.hf-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (min-width:1100px){
  .hero-motion .hero-grid{ max-width:none; grid-template-columns:minmax(0,1fr) minmax(380px,460px);
    grid-template-areas:"txt film" "quiz film"; column-gap:64px; align-items:start; }
  .hero-motion .hero-txt{ grid-area:txt; }
  .hero-motion .quiz{ grid-area:quiz; }
  .hero-motion .hero-film{ grid-area:film; }
  .hero-motion h1{ font-size:clamp(40px,4.7vw,66px); }
  /* the background photo stays (the quiz still swaps it per step) but turns to texture: the film
     is the picture on this page, and two photos side by side fight */
  .hero-motion .hero-scrim{ background:
    linear-gradient(to top, var(--bg) 2%, rgba(11,10,9,.55) 44%, rgba(11,10,9,.72) 100%),
    linear-gradient(to right, rgba(11,10,9,.8), rgba(11,10,9,.6)); }
}
@media (max-width:1099px){
  .hero-film{ max-width:480px; }
}