/* Wereld: stapjes — voetstapjes verschijnen, moedereend en kuikens waggelen erachteraan */
body:has(.d-world-stapjes) { --t-orange: #FFE4D1; --t-blue: #DCEBF7; --t-green: #E3F0D8; --t-yellow: #FFF2C4; }
body:has(.d-world-stapjes) .d-section.has-vlak-groen-background-color,
body:has(.d-world-stapjes) .d-section.has-vlak-blauw-background-color { background: #FFF1E3 !important; }
.d-world-stapjes { background: linear-gradient(180deg, #FFE7D3 0%, #FFF3E6 70%, #F3F0DC 100%) !important; }
.d-world-stapjes .d-play-title mark { color: #D9661F !important; }
body:has(.d-world-stapjes) main .d-section { position: relative; }
body:has(.d-world-stapjes) main .d-section + .d-section::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24'%3E%3Cg fill='%23EC8B48' opacity='.5'%3E%3Cg transform='rotate(80 16 15)'%3E%3Cellipse cx='14.5' cy='15' rx='5' ry='8'/%3E%3Ccircle cx='21' cy='4' r='2.4'/%3E%3Ccircle cx='17' cy='2' r='2.2'/%3E%3Ccircle cx='13' cy='2.5' r='2'/%3E%3Ccircle cx='10' cy='4' r='1.8'/%3E%3Ccircle cx='7.5' cy='6.5' r='1.6'/%3E%3C/g%3E%3Cg transform='rotate(80 46 11)'%3E%3Cellipse cx='47.5' cy='11' rx='5' ry='8'/%3E%3Ccircle cx='41' cy='0' r='2.4'/%3E%3Ccircle cx='45' cy='-2' r='2.2'/%3E%3Ccircle cx='49' cy='-1.5' r='2'/%3E%3Ccircle cx='52' cy='0' r='1.8'/%3E%3Ccircle cx='54.5' cy='2.5' r='1.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") left center / 64px 24px repeat-x; z-index: 2; pointer-events: none; }

.d-scene-stapjes { position: absolute !important; inset: 0; height: auto !important; }
.d-stapjes-spoor { width: 200px; height: 25px; right: 1%; bottom: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 40'%3E%3Cg fill='%23EC8B48' opacity='.75'%3E%3Cg transform='rotate(80 20 28)'%3E%3Cellipse cx='18.5' cy='28' rx='5' ry='8'/%3E%3Ccircle cx='25' cy='17' r='2.4'/%3E%3Ccircle cx='21' cy='15' r='2.2'/%3E%3Ccircle cx='17' cy='15.5' r='2'/%3E%3Ccircle cx='14' cy='17' r='1.8'/%3E%3Ccircle cx='11.5' cy='19.5' r='1.6'/%3E%3C/g%3E%3Cg transform='rotate(80 60 20)'%3E%3Cellipse cx='61.5' cy='20' rx='5' ry='8'/%3E%3Ccircle cx='55' cy='9' r='2.4'/%3E%3Ccircle cx='59' cy='7' r='2.2'/%3E%3Ccircle cx='63' cy='7.5' r='2'/%3E%3Ccircle cx='66' cy='9' r='1.8'/%3E%3Ccircle cx='68.5' cy='11.5' r='1.6'/%3E%3C/g%3E%3Cg transform='rotate(80 100 28)'%3E%3Cellipse cx='98.5' cy='28' rx='5' ry='8'/%3E%3Ccircle cx='105' cy='17' r='2.4'/%3E%3Ccircle cx='101' cy='15' r='2.2'/%3E%3Ccircle cx='97' cy='15.5' r='2'/%3E%3Ccircle cx='94' cy='17' r='1.8'/%3E%3Ccircle cx='91.5' cy='19.5' r='1.6'/%3E%3C/g%3E%3Cg transform='rotate(80 140 20)'%3E%3Cellipse cx='141.5' cy='20' rx='5' ry='8'/%3E%3Ccircle cx='135' cy='9' r='2.4'/%3E%3Ccircle cx='139' cy='7' r='2.2'/%3E%3Ccircle cx='143' cy='7.5' r='2'/%3E%3Ccircle cx='146' cy='9' r='1.8'/%3E%3Ccircle cx='148.5' cy='11.5' r='1.6'/%3E%3C/g%3E%3Cg transform='rotate(80 180 28)'%3E%3Cellipse cx='178.5' cy='28' rx='5' ry='8'/%3E%3Ccircle cx='185' cy='17' r='2.4'/%3E%3Ccircle cx='181' cy='15' r='2.2'/%3E%3Ccircle cx='177' cy='15.5' r='2'/%3E%3Ccircle cx='174' cy='17' r='1.8'/%3E%3Ccircle cx='171.5' cy='19.5' r='1.6'/%3E%3C/g%3E%3Cg transform='rotate(80 220 20)'%3E%3Cellipse cx='221.5' cy='20' rx='5' ry='8'/%3E%3Ccircle cx='215' cy='9' r='2.4'/%3E%3Ccircle cx='219' cy='7' r='2.2'/%3E%3Ccircle cx='223' cy='7.5' r='2'/%3E%3Ccircle cx='226' cy='9' r='1.8'/%3E%3Ccircle cx='228.5' cy='11.5' r='1.6'/%3E%3C/g%3E%3Cg transform='rotate(80 260 28)'%3E%3Cellipse cx='258.5' cy='28' rx='5' ry='8'/%3E%3Ccircle cx='265' cy='17' r='2.4'/%3E%3Ccircle cx='261' cy='15' r='2.2'/%3E%3Ccircle cx='257' cy='15.5' r='2'/%3E%3Ccircle cx='254' cy='17' r='1.8'/%3E%3Ccircle cx='251.5' cy='19.5' r='1.6'/%3E%3C/g%3E%3Cg transform='rotate(80 300 20)'%3E%3Cellipse cx='301.5' cy='20' rx='5' ry='8'/%3E%3Ccircle cx='295' cy='9' r='2.4'/%3E%3Ccircle cx='299' cy='7' r='2.2'/%3E%3Ccircle cx='303' cy='7.5' r='2'/%3E%3Ccircle cx='306' cy='9' r='1.8'/%3E%3Ccircle cx='308.5' cy='11.5' r='1.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; }
.d-stapjes-mama { width: 184px; height: 159px; right: calc(1% + 196px); bottom: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 190'%3E %3Cpath d='M84 160 L 80 182 L 66 184 M120 160 L 124 182 L 138 184' stroke='%23F07A2B' stroke-width='6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M20 104 C 6 92 10 72 24 80 C 30 60 56 70 70 82 C 90 70 120 74 140 92 C 170 92 186 112 180 136 C 172 166 130 172 96 168 C 52 166 22 146 20 104 Z' fill='%23fff' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E %3Cpath d='M56 112 C 76 100 108 104 122 124 C 104 140 74 140 56 112 Z' fill='%23E7EEF7' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E %3Cpath d='M134 96 C 132 72 136 48 150 36 C 166 22 196 30 198 56 C 200 78 182 90 166 96 Z' fill='%23fff' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E %3Cpath d='M190 54 C 206 52 218 58 216 66 C 212 74 198 74 188 70 Z' fill='%23F07A2B' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E %3Ccircle cx='176' cy='50' r='5' fill='%231E2B45'/%3E%3Ccircle cx='177.75' cy='48.0' r='1.75' fill='%23fff'/%3E %3Ccircle cx='182' cy='70' r='6' fill='%23F49AB4' opacity='.65'/%3E %3Cpath d='M140 98 C 150 104 166 102 172 96' stroke='%238EAAD5' stroke-width='6' fill='none' stroke-linecap='round'/%3E %3C/svg%3E") !important; transform-origin: 50% 95%; }
.d-stapjes-kuiken-1, .d-stapjes-kuiken-2, .d-stapjes-kuiken-3 { width: 58px; height: 55px; bottom: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 76'%3E %3Cpath d='M30 66 L 28 74 M44 66 L 46 74' stroke='%23F07A2B' stroke-width='4' stroke-linecap='round'/%3E %3Cellipse cx='36' cy='48' rx='26' ry='20' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5'/%3E %3Cpath d='M24 46 C 30 40 40 42 42 50' stroke='%231E2B45' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E %3Ccircle cx='54' cy='26' r='17' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5'/%3E %3Cpath d='M50 10 C 50 4 56 4 56 9' stroke='%231E2B45' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E %3Cpath d='M68 24 L 78 28 L 68 32 Z' fill='%23F07A2B' stroke='%231E2B45' stroke-width='2' stroke-linejoin='round'/%3E %3Ccircle cx='60' cy='22' r='3.2' fill='%231E2B45'/%3E%3Ccircle cx='61.12' cy='20.72' r='1.1199999999999999' fill='%23fff'/%3E %3Ccircle cx='60' cy='33' r='3.5' fill='%23F49AB4' opacity='.7'/%3E %3C/svg%3E") !important; transform-origin: 50% 95%; }
.d-stapjes-kuiken-1 { right: calc(1% + 384px); }
.d-stapjes-kuiken-2 { right: calc(1% + 446px); }
.d-stapjes-kuiken-3 { right: calc(1% + 506px); width: 50px; height: 47px; }
.d-stapjes-hart { width: 32px; height: 29px; right: calc(1% + 226px); bottom: 168px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M20 34 C 4 22 0 14 4 8 C 8 2 16 2 20 10 C 24 2 32 2 36 8 C 40 14 36 22 20 34 Z' fill='%23F49AB4' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") !important; opacity: 0; }

.d-peek-stapjes::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 72'%3E %3Ccircle cx='45' cy='50' r='30' fill='%23FFC94D' stroke='%231E2B45' stroke-width='3'/%3E %3Cpath d='M40 20 C 40 10 48 10 48 18 M48 18 C 50 12 56 14 54 20' stroke='%231E2B45' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E %3Cpath d='M38 52 L 45 60 L 52 52 Z' fill='%23F07A2B' stroke='%231E2B45' stroke-width='2' stroke-linejoin='round'/%3E %3Ccircle cx='34' cy='42' r='4' fill='%231E2B45'/%3E%3Ccircle cx='35.4' cy='40.4' r='1.4' fill='%23fff'/%3E%3Ccircle cx='56' cy='42' r='4' fill='%231E2B45'/%3E%3Ccircle cx='57.4' cy='40.4' r='1.4' fill='%23fff'/%3E %3Ccircle cx='26' cy='54' r='5' fill='%23F49AB4' opacity='.7'/%3E%3Ccircle cx='64' cy='54' r='5' fill='%23F49AB4' opacity='.7'/%3E %3Cpath d='M15 56 C 6 50 4 60 10 64 M75 56 C 84 50 86 60 80 64' stroke='%231E2B45' stroke-width='2.5' fill='%23FFC94D' stroke-linecap='round'/%3E %3C/svg%3E"); width: 90px; height: 72px; top: -60px; left: 14%; }
.d-peek-stapjes.d-peek-right::before { left: auto; right: 14%; }

@media (prefers-reduced-motion: no-preference) {
	.d-stapjes-spoor { animation: d-stapjes-stap 12s steps(8, end) infinite; }
	@keyframes d-stapjes-stap {
		0% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(8, end); }
		40% { clip-path: inset(0 0 0 0); opacity: 1; animation-timing-function: linear; }
		85% { clip-path: inset(0 0 0 0); opacity: 1; }
		95%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
	}
	.d-stapjes-mama, .d-stapjes-kuiken-1, .d-stapjes-kuiken-2, .d-stapjes-kuiken-3 { animation: d-stapjes-loop 4.5s cubic-bezier(.25,.6,.35,1) both, d-stapjes-waggel .5s ease-in-out 9 alternate, d-stapjes-rust 3.2s ease-in-out 5s infinite; }
	.d-stapjes-mama { animation-delay: .3s, .3s, 5s; }
	.d-stapjes-kuiken-1 { animation-delay: .6s, .6s, 5.4s; }
	.d-stapjes-kuiken-2 { animation-delay: .9s, .9s, 5.8s; }
	.d-stapjes-kuiken-3 { animation-delay: 1.2s, 1.2s, 6.2s; }
	@keyframes d-stapjes-loop { from { translate: -75vw 0; } to { translate: 0 0; } }
	@keyframes d-stapjes-waggel { from { rotate: -7deg; } to { rotate: 7deg; } }
	@keyframes d-stapjes-rust { 0%, 100% { transform: rotate(0) translateY(0); } 20% { transform: rotate(-4deg) translateY(-3px); } 40% { transform: rotate(4deg) translateY(0); } 60% { transform: rotate(0); } }
	.d-stapjes-hart { animation: d-stapjes-hart 6s ease-out 5.5s infinite; }
	@keyframes d-stapjes-hart { 0% { opacity: 0; transform: translateY(10px) scale(.4); } 15% { opacity: 1; transform: translateY(0) scale(1); } 55% { opacity: 1; transform: translateY(-26px) scale(1); } 70%, 100% { opacity: 0; transform: translateY(-40px) scale(.8); } }
}
@media (prefers-reduced-motion: reduce) { .d-stapjes-hart { opacity: 1; } }

@media (max-width: 781px) {
	.d-stapjes-spoor { width: 104px; height: 13px; right: 2%; bottom: 8px; }
	.d-stapjes-mama { width: 110px; height: 95px; right: calc(2% + 100px); bottom: 4px; }
	.d-stapjes-kuiken-1, .d-stapjes-kuiken-2 { width: 40px; height: 38px; bottom: 5px; }
	.d-stapjes-kuiken-1 { right: calc(2% + 212px); }
	.d-stapjes-kuiken-2 { right: calc(2% + 254px); }
	.d-stapjes-kuiken-3, .d-stapjes-hart { display: none; }
}