/* WHY: bez JS je VŠETKO viditeľné. Trieda `js` na sa pridá až keď JS nabehne — až vtedy sa prvky schovajú a IntersectionObserver ich odkrýva. Keby to bolo naopak, pri chybe JS by sa nasadila prázdna stránka. IO je hlavná cesta (Safari), animation-timeline je len bonus nižšie. */ @media (prefers-reduced-motion: no-preference) { .js .odkryt { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--von), transform 0.7s var(--von); } .js .odkryt.je-vidno { opacity: 1; transform: none; } /* Súrodenci v mriežke sa odkrývajú s malým odstupom. */ .js .karta:nth-child(2) { transition-delay: 0.08s; } .js .karta:nth-child(3) { transition-delay: 0.16s; } .js .karta:nth-child(4) { transition-delay: 0.24s; } .js .preco__polozka:nth-child(2) { transition-delay: 0.07s; } .js .preco__polozka:nth-child(3) { transition-delay: 0.14s; } .js .preco__polozka:nth-child(4) { transition-delay: 0.21s; } .js .kontakt__blok:nth-child(2) { transition-delay: 0.07s; } .js .kontakt__blok:nth-child(3) { transition-delay: 0.14s; } .js .kontakt__blok:nth-child(4) { transition-delay: 0.21s; } } /* Jemný zoom hero fotky. Progressive enhancement — kde to nie je, nič sa nedeje. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .zhluk__kus--hlavny img { animation: hero-zoom linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } @keyframes hero-zoom { from { transform: scale(1.06) translateY(1.5%); } to { transform: scale(1.06) translateY(-1.5%); } } } }