/* v232 PREVIEW — motion-ronde (2 okt 2026). Alleen beweging: geen tekst, foto's, layout of werking gewijzigd.
   Geladen als laatste stylesheet (na unslop.css). Principe: minder beweging, korter, alleen transform/opacity.
   Duurtijden: 80 ms indrukken · 150 ms hover · 200-250 ms kleine UI · 280-450 ms grotere vlakken. Ease-out voor in én uit. */
:root{--vp-ease:cubic-bezier(.23,1,.32,1)}

/* 1 Hero homepage: titel, tekst en knoppen staan er meteen (geen opbouw na .loaded van ± 1 s) */
body .hero .hero-eyebrow,body .hero h1 .w,body .hero .hero-sub,body .hero .hero-cta-row,
body .hero .hero-chips,body .hero .hero-promo{opacity:1!important;transform:translateY(0)!important;animation:none!important}
/* translateY(0) i.p.v. none: exact dezelfde eindtoestand als de oude animatie (zelfde containing block) */

/* 2 Hero-foto: zachte zoom alleen op desktop met muis, 1 -> 1,04 in 20 s, één keer (was 1 -> 1,08 in 22 s, ook op gsm) */
.hero-media img{animation:none}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) and (min-width:821px){
  .hero-media img{animation:vpHeroDrift 20s var(--vp-ease) forwards}
}
@keyframes vpHeroDrift{from{transform:scale(1)}to{transform:scale(1.04)}}

/* 3 Oneindige decoratieve lussen uit: zoom-drift in galerijfoto's en subpagina-hero's */
img.kbon{animation:none}
.sub-hero.hero-full::before,.hs-art .hs-a img,.sub-hero.hero-split .sh-media{animation:none}
/* scroll-hint en kaartpin: drie keer, daarna stil */
.scroll-hint::after,.sub-hero.hero-foto::after,.sub-hero.hero-split .sh-media::after{animation-iteration-count:3}
body .pv-pin::after{animation-iteration-count:3}

/* 4 Geen optilling van kaarten bij hover (kleur/schaduw/pijltje blijven) */
.amen:hover,.aud:hover,.todo:hover,.teaser:hover,.rating-badges a:hover,
.blog-card:hover,.wp-card:hover,.tbtn:hover{transform:none}

/* 5 Boekingspaneel nooit invliegen; een sectie waar een link naartoe springt staat er meteen */
#book .reveal,#book .stagger>*{opacity:1;transform:translateY(0);transition:none}
.reveal:target,:target .reveal,:target .stagger>*{opacity:1;transform:translateY(0);transition:none}

/* 6 Parallax uit op touchtoestellen */
@media (hover:none),(pointer:coarse){body .band-media{transform:none!important}}

/* 7 Knoppen: hover-lift enkel met muis, kort; indrukken = kleine schaal */
@media (hover:none){
  .btn:hover,.nav-cta:hover,.bar a:hover,.book .btn:hover,.vbtn:hover{transform:none}
}

@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px)}
}

@media (prefers-reduced-motion:no-preference){
  /* knoppen */
  .btn,.nav-cta,.bar a,.book .btn,.sub-nav .cta{transition:transform .15s var(--vp-ease),background .15s ease,color .15s ease,box-shadow .15s ease,border-color .15s ease}
  .btn:active,.nav-cta:active,.bar a:active,.book .btn:active{transform:scale(.98);transition-duration:.08s}
  nav a::after{transition:transform .2s var(--vp-ease)}
  header{transition:background .2s ease,box-shadow .2s ease,padding .2s ease}

  /* kaarten en kleine bediening */
  .amen,.aud,.todo,.day,.teaser,.rating-badges a,.blog-card,.wp-card,.tbtn{transition-duration:.2s}
  .faq-chip,.quick-q a,.langs a,.plan-tab,.plan-legend button,.chips button,.dots button,.dorp-chip,.galp-filter button{transition-duration:.15s}
  .faq-a{transition:max-height .25s var(--vp-ease)}
  .faq-q .plus{transition:transform .25s var(--vp-ease)}
  details.acc>summary::after{transition-duration:.25s}
  .dorp-zone{transition-duration:.25s}
  .plan-img.active{animation-duration:.25s}

  /* scroll-reveal: 12 px, 450 ms; stagger max 4 stappen van 60 ms */
  .reveal{transform:translateY(12px);transition:opacity .45s var(--vp-ease),transform .45s var(--vp-ease)}
  .stagger>*{transform:translateY(12px);transition:opacity .45s var(--vp-ease),transform .45s var(--vp-ease)}
  .stagger.in>*:nth-child(1){transition-delay:0s}
  .stagger.in>*:nth-child(2){transition-delay:.06s}
  .stagger.in>*:nth-child(3){transition-delay:.12s}
  .stagger.in>*:nth-child(n+4){transition-delay:.18s}
  .quote{transition:opacity .45s var(--vp-ease),transform .45s var(--vp-ease)}

  /* hero-video: 600 ms i.p.v. 1,4 s */
  .hero-video{transition:opacity .6s var(--vp-ease)}

  /* boekbalk: in 280 ms, uit 160 ms (transform zelf blijft ongemoeid: centrering + schaal) */
  .bar{transition:transform .16s var(--vp-ease)}
  .bar.show{transition-duration:.28s}

  /* fotoviewer en lightbox: open 200 ms, dicht 140 ms */
  .galv{transition:opacity .14s var(--vp-ease),visibility .14s}
  .galv.open{transition-duration:.2s}
  .galv-img{transition:opacity .15s ease,transform .22s var(--vp-ease)}
  .lb{transition:opacity .14s var(--vp-ease)}
  .lb.open{transition-duration:.2s}
  .lb img{transition:transform .22s var(--vp-ease)}
  .galv-thumbs button,.gal-btn,.galv-btn,.wing-row figure.ph::after,.mosaic figure::after{transition-duration:.15s}
  .galx::before,.galx::after{transition-duration:.2s}

  /* filmstage: 300 ms */
  .vframe{transition:height .3s var(--vp-ease)}
  .vslide{transition:opacity .3s ease}
}

@media (prefers-reduced-motion:reduce){
  .btn:hover,.btn:active,.nav-cta:hover,.nav-cta:active,.bar a:hover,.bar a:active,
  .book .btn:hover,.book .btn:active,.vbtn:hover{transform:none}
  body .pv-pin::after{animation:none}
}