/* Animace hlavní stránky, verze 2.
   Aktivní jen pod html.motion (přidá ho skript v <head>, ne při omezení pohybu).
   Animuje se jen opacity, translate/scale a krátké rozostření nadpisů, nic, co by přepočítávalo layout. */

:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-line:cubic-bezier(.65,0,.35,1)}

/* ——— plynulý scroll (Lenis, jen myš a touchpad) ——— */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ——— nadpisy po slovech: vynoří se z rozostření ———
   Hlavní nadpis rozdělí malý vložený skript hned za <h1> (nečeká na nic dalšího), nadpisy sekcí scroll-motion.js.
   color:inherit: web obarvuje magentou každý span v h1 („s AI“), slova si proto berou barvu od rodiče. */
.motion :is(.hero h1,.blog-home h2):not(.is-split){opacity:0}
@keyframes m-word{from{opacity:0;translate:0 .4em;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.m-word{display:inline-block;color:inherit;opacity:0}
.is-in .m-word{animation:m-word 1.1s var(--ease-out) var(--d,0ms) both}

/* ——— úvod po načtení ——— */
@keyframes m-fade-up{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-piece{from{opacity:0;translate:0 -10px;scale:1.03}to{opacity:1;translate:0 0;scale:1}}
.motion .header{animation:m-fade 1.2s var(--ease-out) backwards}
.motion .hero .intro{animation:m-fade-up 1.1s var(--ease-out) .3s backwards}
.motion .hero .home-button{animation:m-fade-up 1.1s var(--ease-out) .42s backwards}
/* útržky se postupně položí; fill jen backwards, aby po dopadu převzal řízení hero-crumple.js */
.motion .hero-piece{animation:m-piece 1s var(--ease-out) backwards}
.motion .hero-piece:nth-of-type(1){animation-delay:0.08s}
.motion .hero-piece:nth-of-type(2){animation-delay:0.13s}
.motion .hero-piece:nth-of-type(3){animation-delay:0.18s}
.motion .hero-piece:nth-of-type(4){animation-delay:0.23s}
.motion .hero-piece:nth-of-type(5){animation-delay:0.28s}
.motion .hero-piece:nth-of-type(6){animation-delay:0.33s}
.motion .hero-piece:nth-of-type(7){animation-delay:0.38s}

/* ——— odhalení textových bloků při scrollu ——— */
.motion :is(
  .section-label,.home-stories .section-lead,.snippet-copy,
  .help-intro,.help-grid>div,.home-help .home-button,
  .about-copy p,
  .home-contact .section-lead,.home-contact .home-button,.contact-email,
  .footer>div
){opacity:0;translate:0 22px;transition:opacity 1.1s var(--ease-out) var(--d,0ms),translate 1.4s var(--ease-out) var(--d,0ms)}

/* portrét vyplave o kus níž a lehce zmenšený (obrázek u článku zůstává bez animace) */
.motion .portrait-collage{opacity:0;translate:0 56px;scale:.96;transition:opacity 1.2s var(--ease-out) var(--d,0ms),translate 1.6s var(--ease-out) var(--d,0ms),scale 1.6s var(--ease-out) var(--d,0ms)}

/* značky v sekci pomoci jemně naskočí */
.motion .help-mark{opacity:0;scale:.5;transition:opacity .8s var(--ease-out) calc(var(--d,0ms) + .3s),scale 1.1s var(--ease-out) calc(var(--d,0ms) + .3s)}

.motion .is-in:not(.m-host){opacity:1;translate:0 0;scale:1}
.motion .is-in .help-mark{opacity:1;scale:1}
.motion .is-instant,.motion .is-instant *{transition:none!important}

/* ——— dělicí linky se dokreslí zleva doprava ——— */
.motion :is(.home-stories,.snippet-card,.blog-home .footer){position:relative;border-top-color:transparent}
.motion :is(.home-stories,.snippet-card,.blog-home .footer)::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--line);transform-origin:0 50%;scale:0 1;transition:scale 1.6s var(--ease-line) var(--d,0ms)}
.motion .home-stories::before,.motion .blog-home .footer::before{left:var(--gutter);right:var(--gutter)}
.motion :is(.home-stories,.snippet-card,.blog-home .footer).is-in::before{scale:1 1}

/* ——— efekty svázané se scrollem: řídí je prohlížeč sám (jinde se nic neděje) ——— */
@supports (animation-timeline: view()){
  /* úvodní text se při odjezdu nahoru lehce zvedne a rozplyne */
  @keyframes m-hero-out{to{opacity:.15;translate:0 -48px}}
  .motion .hero-copy{animation:m-hero-out linear both;animation-timeline:view();animation-range:exit 10% exit 90%}
  @keyframes m-tapes{from{translate:0 12px}to{translate:0 -12px}}
  .motion .portrait-tapes{animation:m-tapes linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}