/* Wereld: zonnedag — zonnetje in een boog, lucht van ochtend naar middag */
body:has(.d-world-zonnedag) { --t-orange: #FFE3CC; --t-blue: #DDEFFB; --t-green: #E2F1D9; --t-yellow: #FFF0C2; }
body:has(.d-world-zonnedag) .d-section.has-vlak-groen-background-color,
body:has(.d-world-zonnedag) .d-section.has-vlak-blauw-background-color { background: #FFF4D6 !important; }
.d-world-zonnedag { isolation: isolate; background: linear-gradient(180deg, #FFD9B6 0%, #FFEBD3 55%, #FFF7EA 100%) !important; }
.d-world-zonnedag::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #C4E3F8 0%, #E4F2FB 60%, #FFF7DE 100%); opacity: 0; pointer-events: none; }
.d-world-zonnedag .d-play-title mark { color: #D9661F !important; }
body:has(.d-world-zonnedag) main .d-section { position: relative; }
body:has(.d-world-zonnedag) 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 48 24'%3E%3Cpath d='M32.0 12.0 L35.5 12.0' stroke='%23FFC94D' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M29.7 17.7 L32.1 20.1' stroke='%23FFC94D' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M24.0 20.0 L24.0 23.5' stroke='%23FFC94D' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M18.3 17.7 L15.9 20.1' stroke='%23FFC94D' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M16.0 12.0 L12.5 12.0' stroke='%23FFC94D' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M18.3 6.3 L15.9 3.9' stroke='%23FFC94D' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M24.0 4.0 L24.0 0.5' stroke='%23FFC94D' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M29.7 6.3 L32.1 3.9' stroke='%23FFC94D' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='12' r='5' fill='%23FFC94D' stroke='%23EC8B48' stroke-width='1.5'/%3E%3C/svg%3E") left center / 48px 24px repeat-x; z-index: 2; pointer-events: none; }

/* Scène: achter de tekst en foto, zodat de zon achter de foto opkomt */
.d-scene-zonnedag { position: absolute !important; inset: 0; height: auto !important; z-index: -1 !important; }
.d-zonnedag-zon { width: 210px; height: 210px; left: 70%; top: 4%; translate: -50% 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect x='93' y='6' width='14' height='32' rx='7' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(0 100 100)'/%3E%3Crect x='93' y='6' width='14' height='32' rx='7' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(30 100 100)'/%3E%3Crect x='93' y='6' width='14' height='32' rx='7' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(60 100 100)'/%3E%3Crect x='93' y='6' width='14' height='32' rx='7' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(90 100 100)'/%3E%3Crect x='93' y='6' width='14' height='32' rx='7' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(120 100 100)'/%3E%3Crect x='93' y='6' width='14' height='32' rx='7' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(150 100 100)'/%3E%3Crect x='93' y='6' width='14' height='32' rx='7' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(180 100 100)'/%3E%3Crect x='93' y='6' width='14' height='32' rx='7' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(210 100 100)'/%3E%3Crect x='93' y='6' width='14' height='32' rx='7' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(240 100 100)'/%3E%3Crect x='93' y='6' width='14' height='32' rx='7' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(270 100 100)'/%3E%3Crect x='93' y='6' width='14' height='32' rx='7' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(300 100 100)'/%3E%3Crect x='93' y='6' width='14' height='32' rx='7' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(330 100 100)'/%3E%3Ccircle cx='100' cy='100' r='58' fill='%23FFC94D' stroke='%231E2B45' stroke-width='3'/%3E%3Cpath d='M62 84 A 42 42 0 0 1 96 54' stroke='%23FFE59A' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='87.9' cy='96' r='6.050000000000001' fill='%231E2B45'/%3E%3Ccircle cx='112.1' cy='96' r='6.050000000000001' fill='%231E2B45'/%3E%3Ccircle cx='90.1' cy='93.8' r='1.9800000000000002' fill='%23fff'/%3E%3Ccircle cx='114.3' cy='93.8' r='1.9800000000000002' fill='%23fff'/%3E%3Cpath d='M86.8 111.4 Q 100 126.80000000000001 113.2 111.4' stroke='%231E2B45' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='75.8' cy='109.2' r='7.700000000000001' fill='%23F49AB4' opacity='.65'/%3E%3Ccircle cx='124.2' cy='109.2' r='7.700000000000001' fill='%23F49AB4' opacity='.65'/%3E%3C/svg%3E") !important; }
.d-zonnedag-wolk-1 { width: 150px; height: 80px; left: 6%; top: 8%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cpath d='M22 54 C 6 54 4 34 20 32 C 20 16 40 10 50 22 C 56 6 82 6 86 24 C 100 18 116 28 108 42 C 118 46 114 58 102 56 Z' fill='%23fff' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M30 44 C 46 48 70 48 92 44' stroke='%23DCE8F6' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; }
.d-zonnedag-wolk-2 { width: 110px; height: 58px; left: 52%; top: 30%; opacity: .9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cpath d='M22 54 C 6 54 4 34 20 32 C 20 16 40 10 50 22 C 56 6 82 6 86 24 C 100 18 116 28 108 42 C 118 46 114 58 102 56 Z' fill='%23fff' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M30 44 C 46 48 70 48 92 44' stroke='%23DCE8F6' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; }
.d-zonnedag-wolk-3 { width: 90px; height: 48px; right: 4%; top: 58%; opacity: .85; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cpath d='M22 54 C 6 54 4 34 20 32 C 20 16 40 10 50 22 C 56 6 82 6 86 24 C 100 18 116 28 108 42 C 118 46 114 58 102 56 Z' fill='%23fff' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M30 44 C 46 48 70 48 92 44' stroke='%23DCE8F6' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; }
.d-zonnedag-vogels { width: 80px; height: 40px; left: 40%; top: 10%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 44'%3E%3Cpath d='M6 24 Q 15 13 24 24 Q 33 13 42 24 M52 14 Q 59 6 66 14 Q 73 6 80 14' stroke='%231E2B45' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }

.d-peek-zonnedag::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 74'%3E%3Crect x='59' y='2' width='12' height='22' rx='6' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(-72 65 74)'/%3E%3Crect x='59' y='2' width='12' height='22' rx='6' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(-36 65 74)'/%3E%3Crect x='59' y='2' width='12' height='22' rx='6' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(0 65 74)'/%3E%3Crect x='59' y='2' width='12' height='22' rx='6' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(36 65 74)'/%3E%3Crect x='59' y='2' width='12' height='22' rx='6' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' transform='rotate(72 65 74)'/%3E%3Ccircle cx='65' cy='74' r='40' fill='%23FFC94D' stroke='%231E2B45' stroke-width='3'/%3E%3Ccircle cx='56.75' cy='58' r='4.125' fill='%231E2B45'/%3E%3Ccircle cx='73.25' cy='58' r='4.125' fill='%231E2B45'/%3E%3Ccircle cx='58.25' cy='56.5' r='1.35' fill='%23fff'/%3E%3Ccircle cx='74.75' cy='56.5' r='1.35' fill='%23fff'/%3E%3Cpath d='M56.0 68.5 Q 65 79.0 74.0 68.5' stroke='%231E2B45' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='48.5' cy='67.0' r='5.25' fill='%23F49AB4' opacity='.65'/%3E%3Ccircle cx='81.5' cy='67.0' r='5.25' fill='%23F49AB4' opacity='.65'/%3E%3C/svg%3E"); width: 130px; height: 74px; top: -62px; left: 14%; }
.d-peek-zonnedag.d-peek-right::before { left: auto; right: 14%; }

@media (prefers-reduced-motion: no-preference) {
	@keyframes d-zonnedag-boog { 0% { left: 46.0%; top: 104.0%; } 10% { left: 50.6%; top: 73.1%; } 20% { left: 55.2%; top: 45.2%; } 30% { left: 59.8%; top: 23.1%; } 40% { left: 64.4%; top: 8.9%; } 50% { left: 69.0%; top: 4.0%; } 60% { left: 73.6%; top: 8.9%; } 70% { left: 78.2%; top: 23.1%; } 80% { left: 82.8%; top: 45.2%; } 90% { left: 87.4%; top: 73.1%; } 100% { left: 92.0%; top: 104.0%; } }
	.d-zonnedag-zon { animation: d-zonnedag-boog 22s linear -4s infinite, d-zonnedag-wiebel 3s ease-in-out infinite; }
	@keyframes d-zonnedag-wiebel { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
	.d-world-zonnedag::before { animation: d-zonnedag-lucht 22s ease-in-out -4s infinite; }
	@keyframes d-zonnedag-lucht { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
	.d-zonnedag-wolk-1 { animation: d-zonnedag-drijf 26s ease-in-out infinite alternate; }
	.d-zonnedag-wolk-2 { animation: d-zonnedag-drijf 20s ease-in-out -6s infinite alternate-reverse; }
	.d-zonnedag-wolk-3 { animation: d-zonnedag-drijf 18s ease-in-out -3s infinite alternate; }
	@keyframes d-zonnedag-drijf { from { transform: translateX(-30px); } to { transform: translateX(70px); } }
	.d-zonnedag-vogels { animation: d-zonnedag-vlieg 12s ease-in-out infinite; }
	@keyframes d-zonnedag-vlieg { 0%, 100% { transform: translate(0, 0) scaleY(1); } 25% { transform: translate(40px, -10px) scaleY(.7); } 50% { transform: translate(90px, 6px) scaleY(1); } 75% { transform: translate(40px, 12px) scaleY(.7); } }
}

@media (max-width: 781px) {
	.d-zonnedag-zon { width: 110px; height: 110px; left: 80%; top: 42%; }
	.d-zonnedag-wolk-1 { display: none; }
	.d-zonnedag-wolk-2, .d-zonnedag-vogels { display: none; }
	.d-zonnedag-wolk-3 { width: 70px; height: 38px; right: 6%; top: 46%; }
	.d-peek-zonnedag::before { width: 100px; height: 57px; top: -48px; }
}
@media (max-width: 781px) and (prefers-reduced-motion: no-preference) {
	@keyframes d-zonnedag-boog-m { 0% { left: 14.0%; top: 104.0%; } 10% { left: 21.2%; top: 84.8%; } 20% { left: 28.4%; top: 67.6%; } 30% { left: 35.6%; top: 53.8%; } 40% { left: 42.8%; top: 45.0%; } 50% { left: 50.0%; top: 42.0%; } 60% { left: 57.2%; top: 45.0%; } 70% { left: 64.4%; top: 53.8%; } 80% { left: 71.6%; top: 67.6%; } 90% { left: 78.8%; top: 84.8%; } 100% { left: 86.0%; top: 104.0%; } }
	.d-zonnedag-zon { animation-name: d-zonnedag-boog-m, d-zonnedag-wiebel; }
	.d-zonnedag-wolk-3 { animation-name: d-zonnedag-drijf-m; }
	@keyframes d-zonnedag-drijf-m { from { transform: translateX(-10px); } to { transform: translateX(20px); } }
}