/* transzorg.nl — beweging, bewust weinig: alleen opacity en verplaatsing (soepel op elke telefoon).
   Bij "minder beweging" staat alles meteen stil en zichtbaar (regel in stijl.css). */

/* datum van de laatste controle, klein onder de kicker */
.vers{display:block;font-size:.8rem;color:var(--zacht);margin:-.2rem 0 .9rem}
.hero.home .vers{margin-bottom:1.1rem}

/* binnenkomst van de hero */
.hero-tekst>*{animation:op .9s var(--ease) both}
.hero-tekst>:nth-child(2){animation-delay:.05s}
.hero-tekst>:nth-child(3){animation-delay:.1s}
.hero-tekst>:nth-child(4){animation-delay:.18s}
.hero-tekst>:nth-child(5){animation-delay:.26s}
.hero-art{animation:op 1.1s var(--ease) .2s both}
@keyframes op{from{opacity:0;transform:translateY(18px)}}

/* dunne voortgangsbalk in de vlagkleuren onder de kop */
.kop::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--vlag);transform-origin:left;transform:scaleX(0)}
@supports (animation-timeline:scroll()){.kop::after{animation:voortgang linear both;animation-timeline:scroll(root)}}
@keyframes voortgang{to{transform:scaleX(1)}}

/* blokken schuiven rustig in beeld bij scrollen */
@supports (animation-timeline:view()){
  .tegel,.sec,.ervaring{animation:komt linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}
@keyframes komt{from{opacity:0;translate:0 40px}}

/* vloeiend tussen pagina's */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .kop{view-transition-name:kop}
  ::view-transition-old(root){animation:.18s var(--ease) both vt-uit}
  ::view-transition-new(root){animation:.32s var(--ease) both vt-in}
}
@keyframes vt-uit{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}