/* =====================================================
   fx/motion-reveal.css - choreografia vstupov
   Riadkové masky nadpisov, závesy fotiek, stupňované
   sekcie a zoznamy, vstup dlaždíc a lektorov.
   Pravidlá:
   - každý skrytý štartový stav je iba pod html.motion a iba na
     prvku, ktorý core observer označí .is-in (.reveal, [data-m],
     [data-lines], [data-curtain], [data-count]) alebo na jeho potomkovi
   - animuje sa iba transform / opacity (clip-path iba pri fotke STOMA)
   - .mr-done (JS, po dobehnutí) vypne vstupné prechody a oneskorenia,
     aby hover a press stavy komponentov fungovali ako predtým
   ===================================================== */

/* ---------- riadkové masky [data-lines] ---------- */
[data-lines] .w{ display:inline-block; }
/* maska: horný presah .22em drží diakritiku (Ý Á Č Š Ľ) pri line-height .9,
   záporné okraje ruší zmenu výšky nadpisu */
.ln{
  display:block; overflow:hidden;
  padding:.22em .06em .06em; margin:-.22em -.06em -.06em;
}
.ln__in{ display:block; }
/* gradient ostáva na vnútornom spane (nie na rodičovi transformovaného prvku - Safari) */
.ln__in .lime, .lime .ln__in{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* po rozdelení nadpis sám nebledne ani nejazdí - pohyb nesú riadky */
html.motion [data-lines][data-split]{ opacity:1; transform:none; transition:none; }
.motion [data-lines][data-split]:not(.is-in) .ln__in{ transform:translateY(130%); }
.motion [data-lines][data-split].is-in .ln__in{
  transition:transform .95s var(--ease);
  transition-delay:calc(var(--mr-d, 0ms) + var(--i, 0) * 90ms);
}
/* hero: rýchlejší krok, nech 4 riadky na mobile dobehnú do 1,2 s */
.motion .hero h1[data-split].is-in .ln__in{
  transition-duration:.9s; transition-delay:calc(var(--mr-d, 0ms) + var(--i, 0) * 80ms);
}
/* nadpisy sekcií kurzu (vedľa kúpnej karty) - kratšie */
.motion .course__sec h2[data-split].is-in .ln__in{
  transition-duration:.6s; transition-delay:calc(var(--mr-d, 0ms) + var(--i, 0) * 60ms);
}
/* hero h1 pred rozdelením: neviditeľný najviac .35 s, potom sa sám (čisté CSS)
   plynulo ukáže celý - nič nečaká na JS ani na písmo (JS delí s pohybom iba
   kým táto animácia ešte nezačala, inak bez pohybu po jej dobehnutí) */
.motion .hero h1[data-lines]:not([data-split]){
  opacity:0; animation:mrShow .5s var(--ease) .35s forwards;
}
@keyframes mrShow{ to{ opacity:1; } }

/* ---------- nadpisové „eyebrow“ riadky na domove: tichšie než fade-up ---------- */
.motion .eyebrow.reveal:not(.is-in){ transform:translateY(8px); }
.motion .eyebrow.reveal:not(.is-done){ transition-duration:.5s; }

/* ---------- všeobecné vstupy [data-m] ---------- */
/* fade = iba opacita (napr. #momenty .eyebrow), up = jemný výjazd, soft = pätička */
.motion [data-m="fade"]:not(.is-in),
.motion [data-m="up"]:not(.is-in),
.motion [data-m="soft"]:not(.is-in),
.motion [data-m="scale"]:not(.is-in){ opacity:0; }
.motion [data-m="up"]:not(.is-in){ transform:translateY(16px); }
.motion [data-m="soft"]:not(.is-in){ transform:translateY(8px); }
.motion [data-m="scale"]:not(.is-in){ transform:scale(.96); }
.motion [data-m="fade"].is-in:not(.mr-done){ transition:opacity .8s var(--ease) var(--mr-d, 0ms); }
.motion [data-m="up"].is-in:not(.mr-done){
  transition:opacity .8s var(--ease) var(--mr-d, 0ms), transform .8s var(--ease) var(--mr-d, 0ms);
}
.motion [data-m="soft"].is-in:not(.mr-done){
  transition:opacity .7s var(--ease) var(--mr-d, 0ms), transform .7s var(--ease) var(--mr-d, 0ms);
}
.motion [data-m="scale"].is-in:not(.mr-done){
  transition:opacity .7s var(--ease) var(--mr-d, 0ms), transform .9s var(--ease) var(--mr-d, 0ms);
}

/* ---------- zoznamy [data-m="list"]: deti so --mr-d (krok 55-90 ms, strop 450 ms) ---------- */
.motion [data-m="list"]:not(.is-in) > *{ opacity:0; transform:translateY(18px); }
.motion [data-m="list"].is-in:not(.mr-done) > *{
  transition:opacity .7s var(--ease) var(--mr-d, 0ms), transform .8s var(--ease) var(--mr-d, 0ms);
}
/* kontrolný zoznam: riadok zľava, bodka sa nafúkne */
.motion .checklist[data-m="list"]:not(.is-in) > li{ transform:translateX(-10px); }
.motion .checklist[data-m="list"]:not(.is-in) > li::before{ transform:scale(0); }
.motion .checklist[data-m="list"].is-in:not(.mr-done) > li{
  transition:opacity .5s var(--ease) var(--mr-d, 0ms), transform .5s var(--ease) var(--mr-d, 0ms);
}
.motion .checklist[data-m="list"].is-in:not(.mr-done) > li::before{
  transition:transform .4s var(--ease) calc(var(--mr-d, 0ms) + 120ms);
}
/* program: riadok vyjde, číslica vedie o 80 ms pred textom */
.motion .program[data-m="list"]:not(.is-in) > li{ opacity:1; transform:translateY(12px); }
.motion .program[data-m="list"]:not(.is-in) > li > span{ opacity:0; }
.motion .program[data-m="list"].is-in:not(.mr-done) > li{
  transition:transform .6s var(--ease) var(--mr-d, 0ms);
}
.motion .program[data-m="list"].is-in:not(.mr-done) > li > span:first-child{
  transition:opacity .5s var(--ease) var(--mr-d, 0ms);
}
.motion .program[data-m="list"].is-in:not(.mr-done) > li > span + span{
  transition:opacity .5s var(--ease) calc(var(--mr-d, 0ms) + 80ms);
}
/* benefity: .8s, 22px */
.motion .benefits[data-m="list"]:not(.is-in) > .benefit{ transform:translateY(22px); }
/* lektori v detaile kurzu: sprava */
.motion .lecturers[data-m="list"]:not(.is-in) > .lecturer{ transform:translateX(16px); }
.motion .lecturers[data-m="list"].is-in:not(.mr-done) > .lecturer{
  transition:opacity .6s var(--ease) var(--mr-d, 0ms), transform .6s var(--ease) var(--mr-d, 0ms);
}
/* kontaktné čipy lektora */
.motion .chips[data-m="list"]:not(.is-in) > *{ transform:scale(.96); }
.motion .chips[data-m="list"].is-in:not(.mr-done) > *{
  transition:opacity .45s var(--ease) var(--mr-d, 0ms), transform .45s var(--ease) var(--mr-d, 0ms);
}
/* fakty lektora: linka sa nakreslí, dt/dd dobehnú */
.motion .facts-list[data-m="rows"] > div{ position:relative; border-bottom-color:transparent; }
.motion .facts-list[data-m="rows"] > div::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--line);
  transform-origin:0 50%;
}
.motion .facts-list[data-m="rows"]:not(.is-in) > div::after{ transform:scaleX(0); }
.motion .facts-list[data-m="rows"]:not(.is-in) > div > *{ opacity:0; transform:translateY(8px); }
.motion .facts-list[data-m="rows"].is-in:not(.mr-done) > div::after{
  transition:transform .9s var(--e-io) var(--mr-d, 0ms);
}
.motion .facts-list[data-m="rows"].is-in:not(.mr-done) > div > *{
  transition:opacity .6s var(--ease) calc(var(--mr-d, 0ms) + 120ms), transform .6s var(--ease) calc(var(--mr-d, 0ms) + 120ms);
}
/* STOMA fakty a svetlé fakty O akadémii: krátke karty */
.motion .stoma__facts[data-m="list"]:not(.is-in) > li,
.motion .facts--light[data-m="list"]:not(.is-in) > .fact{ transform:translateY(14px); }

/* ---------- sekcie detailu kurzu: horná linka sa nakreslí ---------- */
.motion .course__sec[data-m="sec"]{ position:relative; border-top-color:transparent; }
.motion .course__sec[data-m="sec"]::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--line);
  transform-origin:0 50%; pointer-events:none;
}
.motion .course__sec[data-m="sec"]:not(.is-in)::before{ transform:scaleX(0); }
.motion .course__sec[data-m="sec"].is-in:not(.mr-done)::before{ transition:transform .9s var(--e-io); }

/* ---------- dlaždice kurzov: iba .tile (nikdy .tile__media) ---------- */
.motion .tile.reveal:not(.is-in){ opacity:0; transform:translateY(24px); }
.motion .tile.reveal:not(.is-done){
  transition:opacity .9s var(--ease), transform .9s var(--ease), box-shadow .5s var(--ease);
}

/* ---------- lektori na domove: pokojné prelínanie fotky, meno dobehne ---------- */
.motion .person.reveal:not(.is-in){ opacity:1; transform:none; }
.motion .person.reveal:not(.is-in) .person__photo{ opacity:0; }
.motion .person.reveal:not(.is-in) .person__photo img{ transform:scale(1.04); }
.motion .person.reveal:not(.is-in) .person__name,
.motion .person.reveal:not(.is-in) .person__role{ opacity:0; }
.motion .person.reveal.is-in:not(.mr-done) .person__photo{
  transition:opacity .9s var(--ease) var(--mr-d, 0ms), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.motion .person.reveal.is-in:not(.mr-done) .person__photo img{
  transition:transform 1.4s var(--ease) var(--mr-d, 0ms);
}
.motion .person.reveal.is-in:not(.mr-done) .person__name,
.motion .person.reveal.is-in:not(.mr-done) .person__role{
  transition:opacity .7s var(--ease) calc(var(--mr-d, 0ms) + 250ms);
}

/* ---------- fotky [data-curtain]: iba prelínanie + jemné usadenie (žiadna posuvná doska,
   žiadny smerový pohyb - Dominik ich odmietol ako „kolotoč“) ---------- */
.motion [data-curtain]:not(img){ position:relative; }
.motion [data-curtain]:not(.is-in){ opacity:0; }
.motion [data-curtain]:not(.is-in) img{ transform:scale(1.04); }
.motion [data-curtain]:not(.is-in) figcaption{ opacity:0; }
.motion [data-curtain].is-in:not(.mr-done){ transition:opacity .9s var(--ease) var(--mr-d, 0ms); }
.motion [data-curtain].is-in:not(.mr-done) img{ transition:transform 1.4s var(--ease) var(--mr-d, 0ms); }
.motion [data-curtain].is-in:not(.mr-done) figcaption{
  transition:opacity .6s var(--ease) calc(var(--mr-d, 0ms) + 350ms);
}
/* fotka kurzu: kratšie, nech hero kurzu nestojí */
.motion .course__photo[data-curtain].is-in:not(.mr-done){ transition-duration:.6s; }
.motion .course__photo[data-curtain].is-in:not(.mr-done) img{ transition-duration:.9s; }
/* STOMA fotka je samotný <img> */
.motion img[data-curtain]:not(.is-in){ opacity:0; transform:scale(1.04); }
.motion img[data-curtain].is-in:not(.mr-done){
  transition:opacity .9s var(--ease) var(--mr-d, 0ms), transform 1.4s var(--ease) var(--mr-d, 0ms);
}

/* ---------- „Mohlo by vás zaujímať“ ---------- */
.also__item img{ transition:transform .5s var(--ease); }
.also__item b{ transition:color .2s; }
@media (hover:hover) and (pointer:fine){
  .also__item:hover img{ transform:translateY(-2px) scale(1.04); }
  .also__item:hover b{ color:var(--green-ink); }
}

/* ---------- prázdny výber: tichý vstup pri každom otvorení (čisté CSS) ---------- */
@keyframes mrUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.motion .drawer.is-on .drawer__empty > *{ animation:mrUp .6s var(--ease) .18s both; }
.motion .drawer.is-on .drawer__empty > * + *{ animation-delay:.26s; }

/* ---------- počítadlá faktov ---------- */
[data-count]{ font-variant-numeric:tabular-nums; }
/* slot čísla počas počítania: šírka zamknutá na konečnú hodnotu, číslo rastie doľava */
/* spany počítadla nesmú prebrať štýl popisu (.fact span: menšie písmo, sivá, blok na telefóne) */
[data-count] span:not(.visually-hidden){ display:inline; font:inherit; color:inherit; line-height:inherit; letter-spacing:inherit; }
[data-count] span.mr-num, .fact [data-count] span.mr-num{ display:inline-block; text-align:right; }
.fact [data-count] span:not(.visually-hidden):not(.mr-num){ display:inline; font:inherit; color:inherit; line-height:inherit; letter-spacing:inherit; }
/* štyri fakty na telefóne ako jedno gesto: mriežka 2 x 2 */
@media (max-width:460px){
  .facts{ grid-template-columns:1fr 1fr; }
  .fact{ padding:1.1rem; }
  .fact b{ font-size:2.3rem; }
  .fact span{ display:block; font-size:.78rem; line-height:1.45; }
}

/* ---------- okamžité zobrazenie (návrat na už videný kurz / lektora) ---------- */
/* iba vlastnosti tohto modulu - prechody iných modulov (video, FAQ, press) ostávajú */
.mr-instant :is(.reveal, [data-m], [data-curtain], [data-lines]),
.mr-instant .ln__in,
.mr-instant :is([data-m="list"], [data-m="rows"]) > *,
.mr-instant :is([data-m="list"], [data-m="rows"]) > *::before,
.mr-instant :is([data-m="list"], [data-m="rows"]) > *::after,
.mr-instant :is([data-m="list"], [data-m="rows"]) > * > *,
.mr-instant [data-m="sec"]::before,
.mr-instant [data-curtain] img,
.mr-instant [data-curtain] figcaption,
.mr-instant [data-curtain]::before{ transition:none !important; }

/* znížený pohyb: html.motion chýba, takže žiadny skrytý stav neplatí; toto je iba poistka
   pre prípad, že sa nastavenie zmení za behu medzi dvoma snímkami */
@media (prefers-reduced-motion: reduce){
  .ln__in{ transform:none !important; }
  [data-curtain]::before, .person__photo::before{ content:none !important; }
  img[data-curtain]{ clip-path:none !important; }
}