/* ==========================================================================
   HERO — scroll-driven animace otevírání kuchyně

   JAK TO FUNGUJE
   .hero-track  má výšku 340vh a je jen "dráha" pro scrollování.
   .hero-sticky je position:sticky a drží se na obrazovce, dokud dráha neskončí.
   Rozdíl (340vh − 100vh = 240vh) je délka, po kterou se animace přehrává.

   Chceš pomalejší / rychlejší otevírání? Změň VÝŠKU .hero-track. Nic jiného.
   Logika je v js/hero-scroll.js.
   ========================================================================== */

.hero-track{ position:relative; height:220vh; }

.hero-sticky{
  position:sticky; top:0;
  height:100vh; min-height:640px;
  display:flex; align-items:center;
  overflow:hidden;
}

.hero-grid{
  width:min(1180px,92vw); margin-inline:auto;
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  gap:2.5rem;
}

.hero-copy{
  display:flex; flex-direction:column; gap:1.4rem;
  align-items:center;
}
.hero-copy .slats{ width:54px; }
.hero-sub{ color:var(--ink-2); max-width:52ch; font-size:1.05rem; }

/* --- scéna ---
   canvas má mix-blend-mode: multiply, takže bílé pozadí snímků zmizí
   a kuchyň se složí na barvu --stage. Snímky MUSÍ mít čistě bílé pozadí,
   jinak se objeví viditelný obdélník. Viz tools/prepare-frames.py */
.stage{
  order:-1;
  position:relative;
  background:var(--stage);
  border:1px solid var(--stage-line);
  border-radius:3px;
  box-shadow:var(--shadow);
  aspect-ratio:760/576;
  max-width:min(880px, 74vw);
  width:100%; overflow:hidden;
}
.stage canvas{
  position:absolute; inset:0; width:100%; height:100%;
  mix-blend-mode:multiply;
}

/* proužek načítání snímků */
.stage-load{
  position:absolute; inset:auto 0 0 0; height:2px;
  background:var(--oak); opacity:.65; width:0%;
  transition:width .18s linear;
}

.scrollcue{
  position:absolute; left:50%; transform:translateX(-50%); bottom:1.4rem;
  display:flex; align-items:center; gap:.6rem; color:var(--muted);
  font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase;
  transition:opacity .3s;
}
.scrollcue .dot{
  width:5px; height:5px; border-radius:50%; background:var(--oak);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:.25; transform:translateY(0) }
  50%    { opacity:1;   transform:translateY(3px) }
}

@media (max-width:900px){
  .hero-track{ height:200vh; }
  .hero-sticky{ min-height:0; height:100svh; }
  .hero-grid{ gap:1.6rem; }
  h1{ font-size:clamp(2.8rem,10vw,4.2rem); }
  .hero-sub{ font-size:.98rem; }
  .scrollcue{ display:none; }
}

/* uživatelé s omezením pohybu dostanou statický otevřený snímek */
@media (prefers-reduced-motion: reduce){
  .hero-track{ height:auto !important; }
  .hero-sticky{ position:static; height:auto; padding:4rem 0; }
  .scrollcue{ display:none; }
  .stage canvas{ transition:none; }
  .scrollcue .dot{ animation:none !important; }
}