:root {
--motion-stap: calc(var(--duration-fast) / 5);
--motion-uitkomst: calc(var(--duration) * 1.5);
--motion-foto: calc(var(--duration) * 3);
--motion-scan: calc(var(--duration) * 5);
}
@media (prefers-reduced-motion: no-preference) {
.hero .photo-strip__card--top {
animation: kaart-van-boven var(--motion-uitkomst) var(--ease) backwards;
animation-delay: var(--duration);
}
.hero .photo-strip__card--bottom {
animation: kaart-van-onder var(--motion-uitkomst) var(--ease) backwards;
animation-delay: calc(var(--duration) * 2);
}
.hero .float-card__checks li:nth-child(2) {
--vinkje: 1;
}
.hero .float-card__check {
animation: vinkje-vak var(--duration) var(--ease) backwards;
animation-delay: calc(var(--duration) * 3 + var(--vinkje, 0) * var(--duration-fast));
}
.hero .float-card__check path {
stroke-dasharray: 23;
animation: vinkje-streep var(--duration) var(--ease) backwards;
animation-delay: calc(var(--duration) * 3 + var(--vinkje, 0) * var(--duration-fast) + var(--motion-stap) * 2);
}
}
@keyframes kaart-van-boven {
from {
opacity: 0;
translate: 0 calc(-1 * var(--space-3));
}
}
@keyframes kaart-van-onder {
from {
opacity: 0;
translate: 0 var(--space-3);
}
}
@keyframes vinkje-vak {
from {
scale: 0;
}
}
@keyframes vinkje-streep {
from {
stroke-dashoffset: -23;
}
}
.feature-list__item:nth-child(2) { --volgorde: 1; }
.feature-list__item:nth-child(3) { --volgorde: 2; }
.feature-list__item:nth-child(4) { --volgorde: 3; }
@media (prefers-reduced-motion: no-preference) {
.feature-list[data-motion="wacht"] .icon-tile {
opacity: 0;
scale: 0.6;
}
.feature-list[data-motion="wacht"] .feature-list__body {
opacity: 0;
translate: calc(-1 * var(--space-3)) 0;
}
.feature-list[data-motion="speel"] .icon-tile {
animation: stap-icoon var(--duration) var(--ease) backwards;
animation-delay: calc(var(--volgorde, 0) * var(--duration-fast));
}
.feature-list[data-motion="speel"] .feature-list__body {
animation: stap-tekst var(--motion-uitkomst) var(--ease) backwards;
animation-delay: calc(var(--volgorde, 0) * var(--duration-fast) + var(--motion-stap) * 2);
}
}
@keyframes stap-icoon {
from {
opacity: 0;
scale: 0.6;
}
}
@keyframes stap-tekst {
from {
opacity: 0;
translate: calc(-1 * var(--space-3)) 0;
}
}
.collage__photo--side  { --volgorde: 1; }
.collage__photo--small { --volgorde: 2; }
@media (prefers-reduced-motion: no-preference) {
.collage[data-motion="wacht"] .collage__photo {
clip-path: inset(100% 0 0 0);
}
.collage[data-motion="wacht"] .collage__photo img {
scale: 1.06;
}
.collage[data-motion="speel"] .collage__photo {
animation: foto-open var(--motion-foto) var(--ease) backwards;
animation-delay: calc(var(--volgorde, 0) * var(--duration-fast));
}
.collage[data-motion="speel"] .collage__photo img {
animation: foto-zakt var(--motion-foto) var(--ease) backwards;
animation-delay: calc(var(--volgorde, 0) * var(--duration-fast));
}
}
@keyframes foto-open {
from {
clip-path: inset(100% 0 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
@keyframes foto-zakt {
from {
scale: 1.06;
}
}
.media-overlay__card .float-card__step:nth-child(2)  { --stap: 1; }
.media-overlay__card .float-card__step:nth-child(3)  { --stap: 2; }
.media-overlay__card .float-card__step:nth-child(4)  { --stap: 3; }
.media-overlay__card .float-card__step:nth-child(5)  { --stap: 4; }
.media-overlay__card .float-card__step:nth-child(6)  { --stap: 5; }
.media-overlay__card .float-card__step:nth-child(7)  { --stap: 6; }
.media-overlay__card .float-card__step:nth-child(8)  { --stap: 7; }
.media-overlay__card .float-card__step:nth-child(9)  { --stap: 8; }
.media-overlay__card .float-card__step:nth-child(10) { --stap: 9; }
.media-overlay__card .float-card__step:nth-child(11) { --stap: 10; }
.media-overlay__card .float-card__step {
transform-origin: bottom;
}
@media (prefers-reduced-motion: no-preference) {
.media-overlay__card[data-motion="wacht"] .float-card__step {
scale: 1 0;
}
.media-overlay__card[data-motion="wacht"] .energy-label {
clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
}
.media-overlay__card[data-motion="speel"] .float-card__step {
animation: label-klasse var(--duration) var(--ease) backwards;
animation-delay: calc(var(--stap, 0) * var(--motion-stap));
}
.media-overlay__card[data-motion="speel"] .float-card__step--current {
animation-duration: var(--motion-uitkomst);
animation-delay: calc(10 * var(--motion-stap) + var(--duration-fast));
}
.media-overlay__card[data-motion="speel"] .energy-label {
animation: label-pijl var(--motion-uitkomst) var(--ease) backwards;
animation-delay: calc(10 * var(--motion-stap) + var(--duration));
}
}
@keyframes label-klasse {
from {
scale: 1 0;
}
}
@keyframes label-pijl {
from {
clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
}
}
@media (prefers-reduced-motion: no-preference) {
.scan-viewer__frame[data-motion] .scan-viewer__image::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to right,
transparent calc(100% - var(--space-10)),
color-mix(in srgb, var(--olijf-300) 35%, transparent) calc(100% - var(--border-width-strong) - var(--border-width)),
var(--bosgroen) calc(100% - var(--border-width-strong) - var(--border-width)),
var(--bosgroen) calc(100% - var(--border-width-strong)),
var(--wit) calc(100% - var(--border-width-strong))
);
translate: -100% 0;
}
.scan-viewer__frame[data-motion="wacht"] .scan-viewer__poster {
opacity: 0;
translate: calc(-1 * var(--space-6)) 0;
}
.scan-viewer__frame[data-motion="speel"] .scan-viewer__image::before {
animation: scan-lijn var(--motion-scan) linear backwards;
}
.scan-viewer__frame[data-motion="speel"] .scan-viewer__poster {
animation: scan-kaart var(--motion-uitkomst) var(--ease) backwards;
animation-delay: calc(var(--duration) * 2);
}
}
@keyframes scan-lijn {
from {
translate: -100% 0;
opacity: 1;
}
85% {
translate: 0 0;
opacity: 1;
}
to {
translate: 0 0;
opacity: 0;
}
}
@keyframes scan-kaart {
from {
opacity: 0;
translate: calc(-1 * var(--space-6)) 0;
}
}
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
@media (prefers-reduced-motion: no-preference) {
.faq {
interpolate-size: allow-keywords;
}
.faq__item::details-content {
block-size: 0;
overflow-y: clip;
opacity: 0;
transition:
block-size var(--duration) var(--ease),
opacity var(--duration-fast) var(--ease),
content-visibility var(--duration) allow-discrete;
}
.faq__item[open]::details-content {
block-size: auto;
opacity: 1;
transition-duration: var(--motion-uitkomst);
}
}
}
@media (width < 64rem) and (prefers-reduced-motion: no-preference) {
.mobile-nav:not([hidden]) > .container {
transition:
opacity var(--duration) var(--ease),
translate var(--duration) var(--ease);
}
@starting-style {
.mobile-nav:not([hidden]) > .container {
opacity: 0;
translate: 0 calc(-1 * var(--space-2));
}
}
}