/* Animaties: alleen op de voorkant geladen. Alles is zichtbaar in rust; beweging is een extra. */

/* Hero: koptekst regel voor regel omhoog (regels worden door animaties.js in spans gezet) */
.d-hero-title .d-line { display: block; overflow: hidden; padding-bottom: .06em; }
.d-hero-title .d-line > span { display: inline-block; animation: d-lineUp 1s var(--d-ease) both; }
.d-hero-title .d-line:nth-child(2) > span { animation-delay: .15s; }
@keyframes d-lineUp { from { transform: translateY(105%); } }

.d-hero .d-eyebrow { animation: d-fadeUp .9s var(--d-ease) both; }
.d-hero .d-lead { animation: d-fadeUp .9s var(--d-ease) .35s both; }
.d-hero .wp-block-buttons { animation: d-fadeUp .9s var(--d-ease) .5s both; }
@keyframes d-fadeUp { from { opacity: 0; transform: translateY(18px); } }

/* Boogfoto: van onder in beeld, daarna langzaam inzoomen */
.d-arch-img { animation: d-archIn 1.3s var(--d-ease) .1s both; }
.d-arch-img img { animation: d-kenburns 18s ease-in-out infinite alternate; }
@keyframes d-archIn { from { clip-path: inset(100% 0 0 0 round 200px 200px 22px 22px); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes d-kenburns { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-2%, 1%); } }
.d-arch-card { animation: d-fadeUp .9s var(--d-ease) 1s both, d-float 6s ease-in-out 2s infinite; }
@keyframes d-float { 50% { transform: translateY(-6px); } }
.d-arch::before, .d-arch::after { content: ""; position: absolute; z-index: 2; border-radius: 0 60% 0 60%; transform-origin: bottom left; animation: d-sway 5s ease-in-out infinite; }
.d-arch::before { width: 46px; height: 46px; background: var(--wp--preset--color--groen); right: -12px; top: 18%; }
.d-arch::after { width: 26px; height: 26px; background: var(--wp--preset--color--oranje); right: 18px; top: 8%; animation-delay: -2s; }
@keyframes d-sway { 50% { transform: rotate(14deg) translateY(-4px); } }

/* Kompas */
@keyframes d-wheelIn { from { transform: rotate(-40deg) scale(.9); opacity: .3; } }
@keyframes d-orbit { to { transform: rotate(360deg); } }

/* Vinkjes ploppen één voor één */
.d-checks.in li::before { animation: d-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 90ms + .15s); }
@keyframes d-pop { from { transform: scale(0); } }
.d-pill::before { animation: d-ping 2s ease-out infinite; }
@keyframes d-ping { 0% { box-shadow: 0 0 0 0 rgba(236, 139, 72, .6); } 100% { box-shadow: 0 0 0 12px rgba(236, 139, 72, 0); } }

/* Afsluiter: zachte gloed */
.d-closer::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(114, 154, 71, .22), transparent 70%); left: 40%; top: -80px; animation: d-drift 12s ease-in-out infinite alternate; pointer-events: none; }
@keyframes d-drift { to { transform: translate(120px, 60px); } }

/* Vragen klappen soepel open (nieuwere browsers) */
.d-faq::details-content { height: 0; overflow: clip; transition: height .45s var(--d-ease), content-visibility .45s allow-discrete; }
.d-faq[open]::details-content { height: auto; }

/* Secties schuiven zacht mee bij scrollen, waar de browser dat ondersteunt */
@supports (animation-timeline: view()) {
	.d-section .wp-block-column, .d-grid > *, .d-expert, .d-closer, .d-whw {
		animation: d-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
	}
	.d-grid > :nth-child(2), .d-section .wp-block-column:nth-child(2) { animation-range: entry 5% entry 42%; }
	.d-grid > :nth-child(3), .d-grid > :nth-child(4) { animation-range: entry 10% entry 50%; }
	@keyframes d-reveal { from { opacity: .3; transform: translateY(36px); } }
	.d-whw-item::before { animation: d-bar linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
	@keyframes d-bar { from { transform: scaleX(0); } }
	.d-hero .wp-block-column { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Subpagina's ===== */

/* Leesvoortgang bovenaan */
@supports (animation-timeline: scroll()) {
	body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; background: linear-gradient(90deg, var(--wp--preset--color--groen), var(--wp--preset--color--logoblauw), var(--wp--preset--color--oranje)); transform-origin: left; animation: d-progress linear both; animation-timeline: scroll(root); }
	.admin-bar::before { top: 32px; }
	@keyframes d-progress { from { transform: scaleX(0); } }
}

/* Paginatitel: woord voor woord omhoog */
.d-page-title .d-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.d-page-title .d-w > span { display: inline-block; animation: d-lineUp .9s var(--d-ease) both; animation-delay: calc(var(--i) * 70ms + .1s); }
.d-page-hero .d-crumbs { animation: d-fadeUp .7s var(--d-ease) both; }
.d-page-hero .d-lead { animation: d-fadeUp .9s var(--d-ease) .35s both; }
.d-page-hero::before { animation: d-drift 14s ease-in-out infinite alternate; }
.d-page-hero::after { animation: d-bob 4s ease-in-out infinite; }
@keyframes d-bob { 50% { transform: translateY(-14px) scale(1.2); } }
.d-arch-small .d-arch-img { animation-duration: 1.1s; }

/* Foto's openen als een gordijn en zoomen mee */
@supports (animation-timeline: view()) {
	.d-media-img { animation: d-curtain linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
	.d-zigzag.is-flipped .d-media-img { animation-name: d-curtain-r; }
	@keyframes d-curtain { from { clip-path: inset(0 100% 0 0 round 120px 120px 18px 18px); } to { clip-path: inset(0 0 0 0 round 0); } }
	@keyframes d-curtain-r { from { clip-path: inset(0 0 0 100% round 18px); } to { clip-path: inset(0 0 0 0 round 0); } }
	.d-media-img img { animation: d-zoomout linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
	@keyframes d-zoomout { from { transform: scale(1.25); } to { transform: scale(1); } }
	.d-media::after { animation: d-spinleaf linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
	@keyframes d-spinleaf { from { transform: rotate(-60deg) scale(.4); } to { transform: rotate(20deg) scale(1); } }

	/* Citaat kleurt in tijdens het scrollen */
	.d-statement { background: linear-gradient(90deg, var(--wp--preset--color--tekst) 0 50%, #C9CED8 50% 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: d-ink linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
	@keyframes d-ink { from { background-position: 100% 0; } to { background-position: 0 0; } }

	/* Tijdlijn: lijn groeit, bolletjes ploppen */
	.d-timeline { border-left-color: transparent !important; position: relative; }
	.d-timeline::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--wp--preset--color--logoblauw); transform-origin: top; animation: d-grow linear both; animation-timeline: view(); animation-range: entry 10% cover 70%; }
	@keyframes d-grow { from { transform: scaleY(0); } }
	.d-timeline li { animation: d-slideIn linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
	@keyframes d-slideIn { from { opacity: 0; transform: translateX(24px); } }
	.d-timeline li::before { animation: d-dot linear both; animation-timeline: view(); animation-range: entry 40% entry 100%; }
	@keyframes d-dot { from { transform: scale(0); background: var(--wp--preset--color--logoblauw); } }

	/* Uitgelichte zin schuift in */
	.d-pull { animation: d-slideIn linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }

	/* Galerij en documenten: verspringend in beeld */
	.d-gallery > *, .d-doc { animation: d-pop-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
	@keyframes d-pop-in { from { opacity: 0; transform: scale(.85) translateY(30px); } }
	.d-infostrip { animation: d-fadeUp-v linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
	@keyframes d-fadeUp-v { from { opacity: 0; transform: translateY(30px); } }
}

/* Kaartjes: bolletje met nummer draait in bij hover */
.d-card-anim .d-card-num { transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.d-card-anim:hover .d-card-num { transform: rotate(-12deg) scale(1.12); }
.d-card-anim::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; right: -50px; bottom: -50px; background: rgba(255,255,255,.55); transition: transform .6s var(--d-ease); }
.d-card-anim:hover::after { transform: scale(1.6); }
.d-tilt { transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.d-tilt:hover { transform: rotate(2deg) scale(1.03); }

/* ===== Speelse locatiepagina ===== */
/* Trein rijdt binnen, deint en dampt */
.d-train { animation: d-trainIn 2.6s cubic-bezier(.2,.8,.2,1) .3s both; }
@keyframes d-trainIn { from { transform: translateX(-110vw); } }
@media (max-width: 781px) { @keyframes d-trainIn { from { transform: translateX(-110vw) scale(.62); } to { transform: scale(.62); } } }
.d-loco, .d-wagon { animation: d-chug .5s ease-in-out infinite alternate; }
.d-wagon:nth-child(2) { animation-delay: .1s; } .d-wagon:nth-child(3) { animation-delay: .2s; } .d-wagon:nth-child(4) { animation-delay: .3s; }
@keyframes d-chug { to { transform: translateY(-3px); } }
.d-loco-name::after { content: ""; position: absolute; left: 10px; top: -86px; width: 24px; height: 24px; border-radius: 50%; background: #fff; opacity: 0; animation: d-steam 2.2s ease-out infinite; box-shadow: 18px -10px 0 4px #fff, 36px -24px 0 8px #fff; }
@keyframes d-steam { 0% { opacity: 0; transform: translate(0, 10px) scale(.4); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(40px, -40px) scale(1.4); } }
.d-bubble { animation: d-popIn .6s cubic-bezier(.3,1.6,.5,1) 2.6s both, d-bob 3s ease-in-out 3.2s infinite; }
@keyframes d-popIn { from { opacity: 0; transform: scale(.3) rotate(-10deg); } }
.d-hero-blob { animation: d-blob 12s ease-in-out infinite alternate; }
@keyframes d-blob { 50% { border-radius: 44% 56% 58% 42% / 56% 44% 56% 44%; } 100% { border-radius: 52% 48% 40% 60% / 40% 60% 50% 50%; } }
.d-play-title mark::after { animation: d-draw 1s ease-out 1s both; clip-path: inset(0 0 0 0); }
@keyframes d-draw { from { clip-path: inset(0 100% 0 0); } }
.d-ticket-label { animation: d-swing 3s ease-in-out infinite; transform-origin: top center; }
@keyframes d-swing { 50% { transform: rotate(2deg); } }

/* Vertrekbord: letters klappen om (JS zet .flip) */
.d-board-row .d-ch { animation: d-flip .5s ease-out both; animation-delay: calc(var(--i) * 30ms + var(--row) * 120ms); transform-origin: center 60%; }
@keyframes d-flip { 0% { transform: rotateX(90deg); opacity: .2; } 60% { transform: rotateX(-20deg); } 100% { transform: rotateX(0); } }
.d-board:not(.in) .d-ch { animation-play-state: paused; }

@supports (animation-timeline: view()) {
	/* Stickers vallen erin */
	.d-sticker { animation: d-stick linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
	@keyframes d-stick { from { opacity: 0; transform: translateY(60px) rotate(-12deg) scale(.8); } }
	/* Route tekent zich, bolderkar rijdt mee */
	.d-route-map::before { animation: d-routeDraw linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
	@keyframes d-routeDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
	.d-route-map { view-timeline: --route block; }
	.d-cart { animation: d-cartRide linear both; animation-timeline: --route; animation-range: entry 20% exit 60%; }
	@keyframes d-cartRide { from { offset-distance: 0%; } to { offset-distance: 100%; } }
	.d-stops li { animation: d-popStop linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
	@keyframes d-popStop { from { opacity: 0; transform: translateY(40px) scale(.9); } }
	/* Treintje rijdt over de dienstregeling */
	.d-track { view-timeline: --track block; }
	.d-track::after { animation: d-ride linear both; animation-timeline: --track; animation-range: entry 30% exit 70%; }
	@keyframes d-ride { from { left: 0; } to { left: calc(100% - 64px); } }
	.d-track li { animation: d-popStop linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
	/* Polaroids vallen op tafel */
	.d-polaroid { animation: d-drop linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
	.d-tilt-r { animation-range: entry 20% cover 45%; } .d-tilt-l2 { animation-range: entry 30% cover 50%; }
	@keyframes d-drop { from { opacity: 0; translate: 0 -80px; scale: 1.2; } }
	/* Kaartje wordt afgestempeld */
	.d-stamp { animation: d-stampIt linear both; animation-timeline: view(); animation-range: entry 40% cover 50%; }
	@keyframes d-stampIt { 0% { opacity: 0; transform: rotate(40deg) scale(2.2); } 70% { opacity: 1; transform: rotate(10deg) scale(.9); } 100% { transform: rotate(14deg) scale(1); } }
	.d-friend { animation: d-popStop linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
	.d-friend-link { animation: d-linkGrow linear both; animation-timeline: view(); animation-range: entry 20% entry 90%; transform-origin: left; }
	@keyframes d-linkGrow { from { transform: scaleX(0); } }
}


/* ===== Bouwstenen (speels.css) ===== */
.d-parade { animation: d-trainIn 2.4s cubic-bezier(.2,.8,.2,1) .3s both; }
.d-parade-item { animation: d-hop .6s ease-in-out infinite alternate; }
.d-parade-item:nth-child(2) { animation-delay: .15s; } .d-parade-item:nth-child(3) { animation-delay: .3s; } .d-parade-item:nth-child(4) { animation-delay: .45s; } .d-parade-item:nth-child(5) { animation-delay: .6s; } .d-parade-item:nth-child(6) { animation-delay: .75s; }
@keyframes d-hop { to { transform: translateY(-6px) rotate(-2deg); } }
@media (max-width: 781px) { .d-parade { animation-name: d-trainInM; } @keyframes d-trainInM { from { transform: translateX(-110vw) scale(.7); } to { transform: scale(.7); } } }
.d-hero-img { animation: d-popIn .9s cubic-bezier(.3,1.4,.5,1) .2s both; }
.d-shape-blob { animation: d-popIn .9s cubic-bezier(.3,1.4,.5,1) .2s both, d-blob 12s ease-in-out 1.2s infinite alternate; }
.d-sticker-icon { animation: none; }
.d-sticker:hover .d-sticker-icon { animation: wiggle .5s ease-in-out; }
@keyframes wiggle { 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }
.d-banner .d-icon { animation: wiggle 2.4s ease-in-out infinite; }
.d-stone-num { transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.d-stone:hover .d-stone-num { transform: rotate(-14deg) scale(1.1); }
.d-tag::before { transition: box-shadow .3s; }
@supports (animation-timeline: view()) {
	.d-clock { view-timeline: --clock block; }
	.d-clock-m { animation: d-spinM linear both; animation-timeline: --clock; animation-range: entry 0% exit 100%; }
	.d-clock-h { animation: d-spinH linear both; animation-timeline: --clock; animation-range: entry 0% exit 100%; }
	@keyframes d-spinM { from { transform: rotate(0deg); } to { transform: rotate(1440deg); } }
	@keyframes d-spinH { from { transform: rotate(210deg); } to { transform: rotate(330deg); } }
	.d-clocklist li { animation: d-slideIn linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
	.d-stone, .d-flip, .d-stat, .d-tag { animation: d-stick linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
	.d-speech { animation: d-popIn-v linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
	@keyframes d-popIn-v { from { opacity: 0; transform: scale(.7) rotate(-3deg); } }
	.d-story-img { animation: d-popIn-v linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
	.d-pack { animation: d-packIn linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
	@keyframes d-packIn { from { opacity: 0; transform: translateY(80px) rotate(-8deg); } }
	.d-pack-list li::after { animation: d-tickIn linear both; animation-timeline: view(); animation-range: entry 60% entry 100%; }
	@keyframes d-tickIn { from { opacity: 0; transform: rotate(45deg) scale(0); } }
	.d-banner { animation: d-stick linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}


/* ===== Werelden: animaties ===== */
/* Salamander kruipt binnen (pootjes wisselen) en kijkt rond */
@keyframes d-salWalk { 0%, 100% { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 122'%3E%3Cpath d='M168 46 L180 20' stroke='%23F07A2B' stroke-width='9' stroke-linecap='round'/%3E%3Ccircle cx='180' cy='20' r='6' fill='%23F07A2B'/%3E%3Ccircle cx='184' cy='17' r='3' fill='%23F07A2B'/%3E%3Ccircle cx='176' cy='17' r='3' fill='%23F07A2B'/%3E%3Cpath d='M168 76 L156 102' stroke='%23F07A2B' stroke-width='9' stroke-linecap='round'/%3E%3Ccircle cx='156' cy='102' r='6' fill='%23F07A2B'/%3E%3Ccircle cx='160' cy='105' r='3' fill='%23F07A2B'/%3E%3Ccircle cx='152' cy='105' r='3' fill='%23F07A2B'/%3E%3Cpath d='M108 46 L96 20' stroke='%23F07A2B' stroke-width='9' stroke-linecap='round'/%3E%3Ccircle cx='96' cy='20' r='6' fill='%23F07A2B'/%3E%3Ccircle cx='100' cy='17' r='3' fill='%23F07A2B'/%3E%3Ccircle cx='92' cy='17' r='3' fill='%23F07A2B'/%3E%3Cpath d='M108 76 L120 102' stroke='%23F07A2B' stroke-width='9' stroke-linecap='round'/%3E%3Ccircle cx='120' cy='102' r='6' fill='%23F07A2B'/%3E%3Ccircle cx='124' cy='105' r='3' fill='%23F07A2B'/%3E%3Ccircle cx='116' cy='105' r='3' fill='%23F07A2B'/%3E %3Cpath d='M98 52 C 70 46 52 26 30 36 C 10 45 8 70 22 77 C 31 81 37 71 30 66 C 25 62 24 55 32 51 C 48 43 66 62 98 70 Z' fill='%23F07A2B'/%3E %3Cellipse cx='138' cy='61' rx='48' ry='21' fill='%23F07A2B'/%3E %3Cellipse cx='138' cy='61' rx='34' ry='10' fill='%23FFA463'/%3E %3Cellipse cx='194' cy='61' rx='26' ry='22' fill='%23F07A2B'/%3E %3Ccircle cx='124' cy='50' r='4' fill='%233B2A1E'/%3E%3Ccircle cx='148' cy='72' r='5' fill='%233B2A1E'/%3E%3Ccircle cx='160' cy='52' r='3.5' fill='%233B2A1E'/%3E%3Ccircle cx='112' cy='68' r='3' fill='%233B2A1E'/%3E%3Ccircle cx='60' cy='46' r='3' fill='%233B2A1E'/%3E%3Ccircle cx='186' cy='76' r='3' fill='%233B2A1E'/%3E %3Ccircle cx='203' cy='46' r='8' fill='%23fff'/%3E%3Ccircle cx='203' cy='76' r='8' fill='%23fff'/%3E %3Ccircle cx='206' cy='46' r='4' fill='%231E2B45'/%3E%3Ccircle cx='206' cy='76' r='4' fill='%231E2B45'/%3E %3Ccircle cx='207.5' cy='44.5' r='1.4' fill='%23fff'/%3E%3Ccircle cx='207.5' cy='74.5' r='1.4' fill='%23fff'/%3E %3Cpath d='M214 56 Q 220 61 214 66' stroke='%233B2A1E' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E %3Ccircle cx='196' cy='54' r='3' fill='%23FF8FA3' opacity='.7'/%3E%3Ccircle cx='196' cy='68' r='3' fill='%23FF8FA3' opacity='.7'/%3E %3C/svg%3E"); } 50% { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 122'%3E%3Cpath d='M168 46 L156 20' stroke='%23F07A2B' stroke-width='9' stroke-linecap='round'/%3E%3Ccircle cx='156' cy='20' r='6' fill='%23F07A2B'/%3E%3Ccircle cx='160' cy='17' r='3' fill='%23F07A2B'/%3E%3Ccircle cx='152' cy='17' r='3' fill='%23F07A2B'/%3E%3Cpath d='M168 76 L180 102' stroke='%23F07A2B' stroke-width='9' stroke-linecap='round'/%3E%3Ccircle cx='180' cy='102' r='6' fill='%23F07A2B'/%3E%3Ccircle cx='184' cy='105' r='3' fill='%23F07A2B'/%3E%3Ccircle cx='176' cy='105' r='3' fill='%23F07A2B'/%3E%3Cpath d='M108 46 L120 20' stroke='%23F07A2B' stroke-width='9' stroke-linecap='round'/%3E%3Ccircle cx='120' cy='20' r='6' fill='%23F07A2B'/%3E%3Ccircle cx='124' cy='17' r='3' fill='%23F07A2B'/%3E%3Ccircle cx='116' cy='17' r='3' fill='%23F07A2B'/%3E%3Cpath d='M108 76 L96 102' stroke='%23F07A2B' stroke-width='9' stroke-linecap='round'/%3E%3Ccircle cx='96' cy='102' r='6' fill='%23F07A2B'/%3E%3Ccircle cx='100' cy='105' r='3' fill='%23F07A2B'/%3E%3Ccircle cx='92' cy='105' r='3' fill='%23F07A2B'/%3E %3Cpath d='M98 52 C 70 46 52 26 30 36 C 10 45 8 70 22 77 C 31 81 37 71 30 66 C 25 62 24 55 32 51 C 48 43 66 62 98 70 Z' fill='%23F07A2B'/%3E %3Cellipse cx='138' cy='61' rx='48' ry='21' fill='%23F07A2B'/%3E %3Cellipse cx='138' cy='61' rx='34' ry='10' fill='%23FFA463'/%3E %3Cellipse cx='194' cy='61' rx='26' ry='22' fill='%23F07A2B'/%3E %3Ccircle cx='124' cy='50' r='4' fill='%233B2A1E'/%3E%3Ccircle cx='148' cy='72' r='5' fill='%233B2A1E'/%3E%3Ccircle cx='160' cy='52' r='3.5' fill='%233B2A1E'/%3E%3Ccircle cx='112' cy='68' r='3' fill='%233B2A1E'/%3E%3Ccircle cx='60' cy='46' r='3' fill='%233B2A1E'/%3E%3Ccircle cx='186' cy='76' r='3' fill='%233B2A1E'/%3E %3Ccircle cx='203' cy='46' r='8' fill='%23fff'/%3E%3Ccircle cx='203' cy='76' r='8' fill='%23fff'/%3E %3Ccircle cx='206' cy='46' r='4' fill='%231E2B45'/%3E%3Ccircle cx='206' cy='76' r='4' fill='%231E2B45'/%3E %3Ccircle cx='207.5' cy='44.5' r='1.4' fill='%23fff'/%3E%3Ccircle cx='207.5' cy='74.5' r='1.4' fill='%23fff'/%3E %3Cpath d='M214 56 Q 220 61 214 66' stroke='%233B2A1E' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E %3Ccircle cx='196' cy='54' r='3' fill='%23FF8FA3' opacity='.7'/%3E%3Ccircle cx='196' cy='68' r='3' fill='%23FF8FA3' opacity='.7'/%3E %3C/svg%3E"); } }
.d-sal { animation: d-salIn 4s cubic-bezier(.3,.7,.3,1) .4s both, d-salWalk .35s steps(1) 0s 12, d-salIdle 3s ease-in-out 4.6s infinite; }
@keyframes d-salIn { from { transform: translateX(80vw) rotate(-6deg); } 60% { transform: translateX(-10px) rotate(3deg); } to { transform: translateX(0) rotate(0); } }
@keyframes d-salIdle { 50% { transform: rotate(-3deg) translateY(-3px); } }
.d-vine { animation: d-swayVine 5s ease-in-out infinite; }
.d-vine-2 { animation-delay: -1.5s; } .d-vine-3 { animation-delay: -3s; }
@keyframes d-swayVine { 50% { transform: rotate(4deg); } }
.d-bfly-1 { animation: d-flutter 7s ease-in-out infinite; } .d-bfly-2 { animation: d-flutter 9s ease-in-out -3s infinite reverse; }
@keyframes d-flutter { 0% { translate: 0 0; } 25% { translate: 60px -40px; } 50% { translate: 120px 10px; } 75% { translate: 40px 30px; } 100% { translate: 0 0; } }
.d-bfly { --flap: 1; }
.d-group-bfly::before { animation: d-flapY .3s ease-in-out infinite alternate; }
@keyframes d-flapY { to { transform: translateX(-50%) scaleX(.6); } }
@supports (animation-timeline: view()) {
	.d-peek::before { animation: d-peekUp linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
	@keyframes d-peekUp { from { transform: translateY(60px); opacity: 0; } }
	.d-group-rainbow::before { animation: d-rainbow linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
	@keyframes d-rainbow { from { clip-path: inset(0 100% 0 0); } }
	.d-prints { animation: d-printsWalk linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
	@keyframes d-printsWalk { from { clip-path: inset(0 100% 0 0); } }
	.d-plants > *::before { animation: d-grow2 linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
	@keyframes d-grow2 { from { transform: scaleY(0); } }
	.d-animals > *::before { animation: d-hatch linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
	@keyframes d-hatch { from { transform: translateX(-50%) translateY(60px) scale(.5); opacity: 0; } }
}

/* Nest: eieren wiebelen, breken open, dieren piepen eruit */
.d-egg { animation: d-eggWobble .25s ease-in-out .6s 6 alternate, d-eggCrack .3s ease-in 2.2s forwards; }
.d-egg-2 { animation-delay: 1s, 2.8s; } .d-egg-3 { animation-delay: 1.4s, 3.4s; }
@keyframes d-eggWobble { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes d-eggCrack { to { transform: scale(1.2); opacity: 0; } }
.d-baby { animation: d-popUp .7s cubic-bezier(.3,1.6,.5,1) 2.3s both, d-bobble 2.6s ease-in-out 3.2s infinite; }
.d-baby-olifant { animation-delay: 2.9s, 3.8s; } .d-baby-flamingo { animation-delay: 3.5s, 4.4s; }
@keyframes d-popUp { from { transform: translateY(90px) scale(.6); opacity: 0; } }
@keyframes d-bobble { 50% { transform: translateY(-6px) rotate(-3deg); } }
.d-nest { animation: d-popIn .8s cubic-bezier(.3,1.4,.5,1) .2s both; }
.d-feather { animation: d-featherFall 9s linear infinite; } .d-feather-2 { animation-delay: -4s; }
@keyframes d-featherFall { from { transform: translate(0, -40px) rotate(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(40px, 120px) rotate(40deg); } to { transform: translate(-20px, 300px) rotate(-30deg); opacity: 0; } }

/* Tuin: bloemen groeien, zon draait, bij zoemt */
.d-flower { animation: d-sprout 1.2s cubic-bezier(.3,1.5,.5,1) both, d-swayFlower 4s ease-in-out infinite; }
.d-f1 { animation-delay: .3s, 1.5s; } .d-f2 { animation-delay: .5s, 1.7s; } .d-f3 { animation-delay: .7s, 1.9s; } .d-f4 { animation-delay: .9s, 2.1s; } .d-f5 { animation-delay: 1.1s, 2.3s; } .d-f6 { animation-delay: 1.3s, 2.5s; } .d-f7 { animation-delay: 1.5s, 2.7s; }
@keyframes d-sprout { from { transform: scaleY(0); } }
@keyframes d-swayFlower { 50% { transform: rotate(3deg); } }
.d-sun { animation: d-spinSun 30s linear infinite; }
@keyframes d-spinSun { to { transform: rotate(360deg); } }
.d-bee { animation: d-buzz 8s ease-in-out 1.5s infinite; }
@keyframes d-buzz { 0% { translate: 0 0; } 20% { translate: 180px -60px; scale: -1 1; } 40% { translate: 320px -10px; scale: -1 1; } 60% { translate: 140px -90px; scale: 1 1; } 80% { translate: -120px -40px; scale: 1 1; } 100% { translate: 0 0; } }
.d-peek-ladybug::before { animation: d-crawl 14s linear infinite; }
@keyframes d-crawl { from { left: -50px; } to { left: 100%; } }