@property --p{syntax:"<number>";inherits:true;initial-value:0}


[data-p]{transition:--p 1.6s cubic-bezier(.2,.75,.2,1) .25s}
.reveal:not(.in) [data-p]{--p:0!important}


.stg>*{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--d,0) * 90ms)}
.stg.in>*{opacity:1;transform:none}
.reveal.stg{opacity:1;transform:none}


.lesmeter i.aan{transition:background .3s ease,transform .3s ease;transition-delay:calc(var(--n,0) * 28ms + .3s)}
.reveal:not(.in) .lesmeter i.aan,.stg:not(.in) .lesmeter i.aan{background:rgba(20,32,52,.09)}
.pakket-uit .lesmeter i:not(.aan){background:rgba(255,255,255,.12)}


.hero.v3 .voor,.hero.v3 h1,.hero.v3 .v3-sub,.hero.v3 .v3-knoppen,.hero.v3 .v3-vinken li{animation:opkomst .9s cubic-bezier(.2,.75,.2,1) both}
.hero.v3 h1{animation-delay:.08s}.hero.v3 .v3-sub{animation-delay:.18s}.hero.v3 .v3-knoppen{animation-delay:.28s}
.hero.v3 .v3-vinken li:nth-child(1){animation-delay:.4s}.hero.v3 .v3-vinken li:nth-child(2){animation-delay:.48s}.hero.v3 .v3-vinken li:nth-child(3){animation-delay:.56s}.hero.v3 .v3-vinken li:nth-child(4){animation-delay:.64s}
.hero.v3 .v3-beeld img{animation:heroauto 1.4s cubic-bezier(.2,.75,.2,1) both}
@keyframes opkomst{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroauto{from{opacity:.4;transform:scale(1.035)}to{opacity:1;transform:none}}


.pk2-tekst>*{animation:opkomst .9s cubic-bezier(.2,.75,.2,1) both}
.pk2-tekst>*:nth-child(2){animation-delay:.08s}.pk2-tekst>*:nth-child(3){animation-delay:.16s}.pk2-tekst>*:nth-child(4){animation-delay:.24s}
.pk2-beeld{animation:beeldin 1.1s cubic-bezier(.2,.75,.2,1) .15s both}
@keyframes beeldin{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}


.reveal .kicker::before{transform-origin:left;transition:transform .8s cubic-bezier(.2,.75,.2,1) .2s}
.reveal:not(.in) .kicker::before{transform:scaleX(0)}
.app-sectie h2 em{transition:transform .8s cubic-bezier(.2,.75,.2,1) .35s,opacity .6s ease .35s}
.reveal:not(.in) .app-sectie h2 em,.app-sectie .reveal:not(.in) h2 em{opacity:0;transform:rotate(-6deg) translateY(10px)}


.app-waaier .ui-tel{animation:zweven 7s ease-in-out infinite}
.app-waaier .waaier-l .ui-tel{animation-delay:-2.3s}.app-waaier .waaier-r .ui-tel{animation-delay:-4.6s}
@keyframes zweven{50%{transform:translateY(-10px)}}
.band-beeld img{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08) translateX(-1.5%)}}
.kaart .gebiedvlak{animation:mieren 18s linear infinite}
@keyframes mieren{to{stroke-dashoffset:-140}}
.kg-gebied{animation:mieren 18s linear infinite}
.stip-ring{transform-origin:center;transform-box:fill-box;animation:ademen 3.2s ease-in-out infinite}
@keyframes ademen{50%{transform:scale(1.35);opacity:.5}}
.wa-les{transition:opacity .45s ease,transform .5s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--d,0) * 55ms + .3s)}
.reveal:not(.in) .wa-les{opacity:0;transform:scale(.6)}
.tel-stap .tik::after{animation:tik 2.2s ease-out infinite}
@keyframes tik{0%{box-shadow:0 0 0 0 rgba(10,17,29,.25)}70%{box-shadow:0 0 0 1.2em rgba(10,17,29,0)}100%{box-shadow:0 0 0 0 rgba(10,17,29,0)}}
.ercan2-beeld::before{animation:kantel 9s ease-in-out infinite}
@keyframes kantel{50%{transform:rotate(6deg) translateY(-6px)}}
.e2-chip,.thh-badge,.laag{animation:zweven 6.5s ease-in-out infinite}
.e2-cbr{animation-delay:-3s}
.th-home-merk,.app-merk,.pk2-merk{animation:draai 60s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}


.knop-vol,.knop-amber{position:relative;overflow:hidden}
.knop-vol::after,.knop-amber::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:glans 5.5s ease-in-out infinite}
@keyframes glans{0%,70%{left:-60%}100%{left:130%}}


.pakket,.th4-kaart,.t2-ex,.plaats4 li,.wm,.ob,.thh-keuze a,.ercan2-punten li,.app-functies li,.reis li,.route2 li,.sc-tabs button,.na-rij li,.b2,.dk-blok,.tp,.pg{transition:transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease,background .25s ease}
.pakket:hover,.th4-kaart:hover,.t2-ex:hover,.plaats4 li:hover,.wm:hover,.ob:hover,.app-functies li:hover,.route2 li:hover,.na-rij li:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(20,32,52,.55)}
.stg.in>.pakket:hover,.stg.in>.th4-kaart:hover,.stg.in>.t2-ex:hover,.stg.in>li:hover,.stg.in>.wm:hover,.stg.in>.ob:hover{transform:translateY(-6px)}


@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details.vraag::details-content{height:0;overflow:clip;transition:height .35s ease,content-visibility .35s allow-discrete}
  details.vraag[open]::details-content{height:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .stg>*{opacity:1;transform:none}
}
@media (max-width:640px){.app-sectie h2 em{transform:none!important}}