/* Wisseleffecten voor de beelden op de voorpagina (module Voorpagina-beelden).
   Gebruikt alleen opacity, filter, clip-path en de losse eigenschappen translate en scale, zodat het geen transform van het thema overschrijft. */
@keyframes hfx-fade{from{opacity:0}to{opacity:1}}
@keyframes hfx-slide{from{opacity:0;translate:60px 0}to{opacity:1;translate:0 0}}
@keyframes hfx-zoom{from{opacity:0;scale:1.25}to{opacity:1;scale:1}}
@keyframes hfx-blur{from{opacity:0;filter:blur(22px)}to{opacity:1;filter:blur(0)}}
@keyframes hfx-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hfx-blink{0%{opacity:0}18%{opacity:1}32%{opacity:.1}50%{opacity:1}64%{opacity:.35}100%{opacity:1}}
[data-hero-fx=fade]{--hfx:hfx-fade}[data-hero-fx=slide]{--hfx:hfx-slide}[data-hero-fx=zoom]{--hfx:hfx-zoom}
[data-hero-fx=blur]{--hfx:hfx-blur}[data-hero-fx=wipe]{--hfx:hfx-wipe}[data-hero-fx=blink]{--hfx:hfx-blink;--hfx-d:.8s}
/* Beelden zijn net gewisseld: elk beeld speelt het effect af, een voor een. */
.hero-fx--play>*{animation:var(--hfx,hfx-fade) var(--hfx-d,.9s) cubic-bezier(.2,0,0,1) both;animation-delay:calc(var(--i,0)*.14s)}
/* Wisselend vlak (bijvoorbeeld de voorbeeldweergave in het beheer): beelden liggen op elkaar. */
.hero-fx--cycle{position:relative;overflow:hidden}
.hero-fx--cycle>[data-hero-slide]{position:absolute;inset:0;opacity:0;z-index:0}
.hero-fx--cycle>[data-hero-slide].is-prev{opacity:1;z-index:1}
.hero-fx--cycle>[data-hero-slide].is-on{opacity:1;z-index:2;animation:var(--hfx,hfx-fade) var(--hfx-d,.9s) cubic-bezier(.2,0,0,1) both}
[data-hero-fx=none] .is-on,[data-hero-fx=none].hero-fx--play>*{animation:none}
@media (prefers-reduced-motion:reduce){.hero-fx--play>*,.hero-fx--cycle>[data-hero-slide].is-on{animation:none!important}}