/* fx/hero-stage.css - modul hero-stage
   .hero__stage   vstup (photoIn, fill backwards, po skončení sa animácia zruší triedou .is-entered)
   .hero__shade   tieňová doska pod fotkou (vkladá JS; tieň sa pri raste iba stmieva cez opacity)
   .hero__photo   rast na plnú šírku pri rolovaní (inline transform z JS)
   .hero__scale   paralaxa obrazu (inline transform z JS)
   img            jednorazové doznenie mierky (heroSettle), nikdy inline transform
   Bez JS a pri prefers-reduced-motion: statická zaoblená karta s pôvodným tieňom zo site.css. */

@keyframes photoIn{
  from{ opacity:0; transform:translateY(34px) scale(.985); }
  to{ opacity:1; transform:none; }
}
@keyframes heroSettle{
  from{ transform:scale(1.07); }
  to{ transform:none; }
}
@keyframes hsFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes hsRiseIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

/* ---------- vstup ---------- */
.motion #viewHome .hero__stage{ animation:photoIn 1.05s .26s var(--ease) backwards; }
.motion #viewHome .hero__stage.is-entered{ animation:none; }

/* doznenie mierky: raz, 9 s, nikdy sa neopakuje (po skončení / odchode z domovskej stránky .is-settled) */
.motion #viewHome .hero__scale img{
  transform-origin:50% 45%;
  animation:heroSettle 9s 1.3s var(--ease) both;
}
.motion #viewHome .hero__photo.is-settled .hero__scale img{ animation:none; }
/* video hrá: doznenie sa iba zastaví (žiadny skok mierky pod prelínajúcim sa videom);
   po zastavení videa pokračuje, kde prestalo, a končí .is-settled na animationend */
.motion #viewHome .hero__photo.is-playing .hero__scale img{ animation-play-state:paused; }

/* ---------- tieňová doska ---------- */
.js #viewHome .hero__stage.has-shade .hero__photo{ box-shadow:none; }
.hero__shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:var(--r); box-shadow:var(--shadow);
  transform-origin:50% 0;
}

/* ---------- rast a paralaxa (hodnoty píše JS len pri .motion) ---------- */
.motion #viewHome .hero__photo{ transform-origin:50% 0; }
/* priestor pre rast rámu nadol (.hero-band::after) vlastní core v site.css - tu ho neprepisovať */
.motion #viewHome .hero__stage.is-live .hero__scale{ height:112%; }
/* poster pod paralaxou drží rovnaký výrez ako video */
.motion #viewHome .hero__stage.is-live .hero__scale > img{ height:100%; }

/* ---------- ovládanie videa ----------
   Plné biele pozadie bez backdrop-filter: v iOS WebKit blikajú rozmazané deti vnútri
   transformovanej zaoblenej vrstvy s overflow:hidden. */
.hero__photo .media__toggle{
  position:absolute; right:12px; bottom:12px; z-index:3;
  width:32px; height:32px; padding:0; border:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.9); color:var(--ink); cursor:pointer;
  box-shadow:0 6px 18px -10px rgba(29,31,29,.35);
  -webkit-tap-highlight-color:transparent;
}
/* 44px plocha dotyku */
.hero__photo .media__toggle::after{ content:""; position:absolute; inset:-6px; border-radius:50%; }
.hero__photo .media__toggle svg{
  position:absolute; width:10px; height:12px; fill:currentColor;
  transition:opacity .18s var(--ease);
}
.hero__photo .media__toggle .ico-pause{ opacity:1; }
.hero__photo .media__toggle .ico-play{ opacity:0; margin-left:2px; }
.hero__photo .media__toggle[aria-pressed="true"] .ico-pause{ opacity:0; }
.hero__photo .media__toggle[aria-pressed="true"] .ico-play{ opacity:1; }
.hero__photo .media__toggle:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
.motion .hero__photo .media__toggle{ animation:hsFadeIn .4s .8s var(--ease) both; }

/* ---------- filmová pilulka v hero ---------- */
.hero__photo .pill-play{
  left:12px; bottom:12px; z-index:3; border:0; cursor:pointer; pointer-events:auto;
  background:rgba(255,255,255,.9);
}
.hero__photo .pill-play:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
.motion .hero__photo .pill-play{ animation:hsRiseIn .7s .5s var(--ease) both; }
.motion .hero__photo .pill-play.is-shown{ animation:none; }
@media (hover:hover) and (pointer:fine){
  .hero__photo .pill-play{ transition:background-color .25s var(--ease); }
  .hero__photo .pill-play:hover{ background:#fff; }
}
@media (max-width:760px){
  .hero__photo .pill-play{ height:40px; padding:0 .95rem; font-size:.85rem; }
}