/* moments-strip - dvojradový pás fotiek „Z našich kurzov", pohyb viazaný iba na scroll.
   Geometriu (px) počíta js/fx/moments-strip.js a zapisuje do CSS premenných na každom rade:
     --ms-from / --ms-to  = posun radu na začiatku / konci prechodu sekcie viewportom (p = 0 / 1)
     --ms-rest            = pokojová poloha (reduced motion, pred výpočtom)
     --ms-k               = dočasný posun pre klávesnicu (fokus na snímke mimo obrazovky)
   Cesta A: scroll-driven animácia (view-timeline sekcie) - len keď ju prehliadač vie (.ms-sda).
   Cesta B: IA.scroll -> inline transform na rade (lineárne, bez zotrvačnosti). */

.moments{ contain:paint; }
.moments__rows{ touch-action:pan-y; }
.moments__row{
  transform:translate3d(var(--ms-rest, 0px), 0, 0);
  translate:var(--ms-k, 0px) 0;
  backface-visibility:hidden;
}
.motion .moments__row{ transition:translate .7s var(--ease); }

/* rámik = rovnaký radius a tieň ako dlaždice kurzov */
.moments .moment{
  border-radius:var(--r);
  box-shadow:0 0 0 1px rgba(29,31,29,.05), 0 18px 40px -30px rgba(29,31,29,.35);
  transform-origin:50% 60%;
  -webkit-tap-highlight-color:transparent;
}
.moments .moment[role="button"]{ cursor:zoom-in; }
.moments .moment img{ display:block; }

/* hover len na jemných ukazovateľoch */
@media (hover:hover) and (pointer:fine){
  .motion .moments .moment img{ transition:transform 1s var(--ease); }
  .motion .moments .moment:hover img{ transform:scale(1.04); }
}

/* Cesta A - scroll-driven (Safari 26+, Chrome 115+). Sekcia samotná sa nehýbe, je to subjekt timeline. */
@supports (view-timeline-name: --ms) and (animation-timeline: --ms){
  .motion .moments.ms-sda{ view-timeline:--ms-view block; }
  .motion .moments.ms-sda .moments__row{
    animation:ms-drift 1s linear both;
    animation-timeline:--ms-view;
    animation-range:cover 0% cover 100%;
  }
}
@keyframes ms-drift{
  from{ transform:translate3d(var(--ms-from, 0px), 0, 0); }
  to{ transform:translate3d(var(--ms-to, 0px), 0, 0); }
}