/* Wereld: familiehuis (Dagopvang) */
body:has(.d-world-familiehuis) { --t-orange: #FFE1CC; --t-yellow: #FFF0CC; --t-blue: #DDE6F4; --t-green: #E4EEDA; }
body:has(.d-world-familiehuis) .d-section.has-vlak-groen-background-color,
body:has(.d-world-familiehuis) .d-section.has-vlak-blauw-background-color { background: #FFF1E4 !important; }
.d-world-familiehuis { background: radial-gradient(circle at 85% 85%, #FFE3C4 0, transparent 40%), linear-gradient(180deg, #FFE7D3, #FFF8F0) !important; }
.d-world-familiehuis .d-play-title mark { color: #C2562A !important; }
body:has(.d-world-familiehuis) main .d-section { position: relative; }
body:has(.d-world-familiehuis) 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 32 24'%3E%3Cpath d='M0 4 H 32 V 10 Q 24 22 16 10 Q 8 22 0 10 Z' fill='%23F07A2B'/%3E%3Cpath d='M0 10 Q 8 22 16 10 Q 24 22 32 10' stroke='%231E2B45' stroke-width='2.2' fill='none'/%3E%3Cpath d='M8 8 q 0 4 3 6' stroke='%23FFC08F' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left center / 32px 24px repeat-x; z-index: 2; pointer-events: none; }

.d-scene-familiehuis { position: absolute !important; inset: 0; height: auto !important; }
.d-familiehuis-huis { width: 240px; height: 220px; right: 4%; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 220'%3E %3Crect x='158' y='26' width='26' height='50' fill='%23D9694A' stroke='%231E2B45' stroke-width='3'/%3E%3Crect x='154' y='20' width='34' height='10' rx='3' fill='%23B8513A' stroke='%231E2B45' stroke-width='3'/%3E %3Crect x='30' y='90' width='180' height='126' rx='6' fill='%23FFF6E6' stroke='%231E2B45' stroke-width='3'/%3E %3Cpath d='M10 100 L 120 18 L 230 100 Z' fill='%23F07A2B' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E %3Cpath d='M98 52 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M112 52 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M126 52 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M74 68 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M88 68 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M102 68 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M116 68 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M130 68 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M144 68 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M158 68 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M50 84 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M64 84 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M78 84 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M92 84 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M106 84 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M120 84 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M134 84 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M148 84 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M162 84 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M176 84 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E%3Cpath d='M190 84 q 7 8 14 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E %3Crect x='104' y='52' width='32' height='28' rx='14' fill='%2346557A' stroke='%231E2B45' stroke-width='3'/%3E %3Crect x='50' y='112' width='36' height='36' rx='4' fill='%2346557A' stroke='%231E2B45' stroke-width='3'/%3E %3Crect x='154' y='112' width='36' height='36' rx='4' fill='%2346557A' stroke='%231E2B45' stroke-width='3'/%3E %3Cpath d='M44 152 H 92 M148 152 H 196' stroke='%231E2B45' stroke-width='4' stroke-linecap='round'/%3E %3Cpath d='M104 216 V 172 C 104 156 136 156 136 172 V 216 Z' fill='%238EAAD5' stroke='%231E2B45' stroke-width='3'/%3E %3Ccircle cx='129' cy='190' r='2.6' fill='%231E2B45'/%3E %3Cpath d='M120 120 C 110 110 108 100 116 98 C 119 97 120 100 120 102 C 120 100 121 97 124 98 C 132 100 130 110 120 120 Z' fill='%23F49AB4' stroke='%231E2B45' stroke-width='2.2' stroke-linejoin='round'/%3E %3Cg fill='%23729A47' stroke='%231E2B45' stroke-width='2.5'%3E%3Ccircle cx='40' cy='206' r='12'/%3E%3Ccircle cx='200' cy='206' r='12'/%3E%3Ccircle cx='56' cy='210' r='8'/%3E%3Ccircle cx='184' cy='210' r='8'/%3E%3C/g%3E %3Cg fill='%23FFC94D'%3E%3Ccircle cx='38' cy='202' r='2.5'/%3E%3Ccircle cx='202' cy='202' r='2.5'/%3E%3C/g%3E %3C/svg%3E") !important; transform-origin: bottom center; }
.d-familiehuis-raam-1, .d-familiehuis-raam-2, .d-familiehuis-raam-3 { z-index: 1; opacity: 0; }
.d-familiehuis-raam-1 { width: 36px; height: 36px; right: calc(4% + 154px); bottom: 72px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E %3Crect x='1.5' y='1.5' width='33' height='33' rx='4' fill='%23FFD66B'/%3E %3Ccircle cx='27.0' cy='10.1' r='7.9' fill='%23FFE9A8'/%3E %3Cpath d='M7.0 36 C 7.0 23.1 23.0 23.1 23.0 36 Z' fill='%23B4652A'/%3E%3Ccircle cx='15' cy='15.1' r='4.6' fill='%23B4652A'/%3E %3Cg%3E%3Cpath d='M21.0 24.1 L 26.0 14.1' stroke='%23B4652A' stroke-width='3.4' stroke-linecap='round'/%3E %3CanimateTransform attributeName='transform' type='rotate' values='-18 21.0 24.1;22 21.0 24.1;-18 21.0 24.1' dur='.9s' begin='0s' repeatCount='indefinite'/%3E%3C/g%3E %3Crect x='1.5' y='1.5' width='33' height='33' rx='4' fill='none' stroke='%231E2B45' stroke-width='3'/%3E %3C/svg%3E") !important; }
.d-familiehuis-raam-2 { width: 36px; height: 36px; right: calc(4% + 50px); bottom: 72px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E %3Crect x='1.5' y='1.5' width='33' height='33' rx='4' fill='%23FFD66B'/%3E %3Ccircle cx='27.0' cy='10.1' r='7.9' fill='%23FFE9A8'/%3E %3Cpath d='M13.6 36 C 13.6 21.5 26.4 21.5 26.4 36 Z' fill='%23B4652A'/%3E%3Ccircle cx='20' cy='15.1' r='3.7' fill='%23B4652A'/%3E %3Cg%3E%3Cpath d='M24.8 22.3 L 28.8 14.3' stroke='%23B4652A' stroke-width='2.7' stroke-linecap='round'/%3E %3CanimateTransform attributeName='transform' type='rotate' values='-18 24.8 22.3;22 24.8 22.3;-18 24.8 22.3' dur='.9s' begin='.3s' repeatCount='indefinite'/%3E%3C/g%3E %3Crect x='1.5' y='1.5' width='33' height='33' rx='4' fill='none' stroke='%231E2B45' stroke-width='3'/%3E %3C/svg%3E") !important; }
.d-familiehuis-raam-3 { width: 32px; height: 28px; right: calc(4% + 104px); bottom: 140px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E %3Crect x='1.5' y='1.5' width='29' height='25' rx='14' fill='%23FFD66B'/%3E %3Ccircle cx='24.0' cy='7.8' r='6.2' fill='%23FFE9A8'/%3E %3Cpath d='M11.2 28 C 11.2 16.6 20.8 16.6 20.8 28 Z' fill='%23B4652A'/%3E%3Ccircle cx='16' cy='11.8' r='2.8' fill='%23B4652A'/%3E %3Cg%3E%3Cpath d='M19.6 17.2 L 22.6 11.2' stroke='%23B4652A' stroke-width='2.0' stroke-linecap='round'/%3E %3CanimateTransform attributeName='transform' type='rotate' values='-18 19.6 17.2;22 19.6 17.2;-18 19.6 17.2' dur='.9s' begin='.5s' repeatCount='indefinite'/%3E%3C/g%3E %3Crect x='1.5' y='1.5' width='29' height='25' rx='14' fill='none' stroke='%231E2B45' stroke-width='3'/%3E %3C/svg%3E") !important; }
.d-familiehuis-rook-1, .d-familiehuis-rook-2 { width: 40px; height: 31px; right: calc(4% + 49px); bottom: 188px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E%3Cpath d='M10 30 C 2 30 0 20 8 17 C 6 8 18 4 22 11 C 26 2 40 4 38 15 C 46 17 44 30 36 30 Z' fill='%23fff' stroke='%23C9CED8' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") !important; opacity: 0; }
.d-peek-familiehuis::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 76'%3E %3Cpath d='M0 76 L 0 58 L 110 58 L 110 76 Z' fill='%23F07A2B' stroke='%231E2B45' stroke-width='2.5'/%3E %3Cpath d='M8 58 q 8 9 16 0 q 8 9 16 0 q 8 9 16 0 q 8 9 16 0 q 8 9 16 0 q 8 9 16 0' stroke='%23C95A1E' stroke-width='2' fill='none'/%3E %3Cpath d='M30 58 C 28 34 36 22 55 22 C 74 22 82 34 80 58 Z' fill='%23F2A65A' stroke='%231E2B45' stroke-width='3'/%3E %3Cpath d='M34 32 L 32 8 L 50 22 Z M76 32 L 78 8 L 60 22 Z' fill='%23F2A65A' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E %3Cpath d='M37 26 L 36 15 L 45 22 Z M73 26 L 74 15 L 65 22 Z' fill='%23F49AB4'/%3E %3Cpath d='M48 26 L 50 34 M55 24 V 33 M62 26 L 60 34' stroke='%23D9822F' stroke-width='3' stroke-linecap='round'/%3E %3Ccircle cx='45' cy='40' r='4.5' fill='%231E2B45'/%3E%3Ccircle cx='65' cy='40' r='4.5' fill='%231E2B45'/%3E%3Ccircle cx='46.5' cy='38.5' r='1.5' fill='%23fff'/%3E%3Ccircle cx='66.5' cy='38.5' r='1.5' fill='%23fff'/%3E %3Cpath d='M52 45 L 58 45 L 55 48 Z' fill='%23F49AB4'/%3E%3Cpath d='M49 50 Q 52 53 55 50 Q 58 53 61 50' stroke='%231E2B45' stroke-width='2' fill='none' stroke-linecap='round'/%3E %3Ccircle cx='39' cy='49' r='4' fill='%23F49AB4' opacity='.65'/%3E%3Ccircle cx='71' cy='49' r='4' fill='%23F49AB4' opacity='.65'/%3E %3Cpath d='M30 47 H 18 M30 52 H 20 M80 47 H 92 M80 52 H 90' stroke='%231E2B45' stroke-width='1.6' stroke-linecap='round'/%3E %3Cg fill='%23F2A65A' stroke='%231E2B45' stroke-width='2.5'%3E%3Cellipse cx='40' cy='59' rx='9' ry='6'/%3E%3Cellipse cx='70' cy='59' rx='9' ry='6'/%3E%3C/g%3E %3C/svg%3E"); width: 100px; height: 70px; top: -62px; left: 14%; }

/* Animaties: huis springt op zijn plek, ramen gaan om beurten aan, rookwolkjes stijgen op */
.d-familiehuis-huis { animation: d-familiehuis-in .9s cubic-bezier(.3,1.5,.5,1) .1s both; }
@keyframes d-familiehuis-in { from { transform: scale(.4, .2); opacity: 0; } }
.d-familiehuis-raam-1, .d-familiehuis-raam-2, .d-familiehuis-raam-3 { animation: d-familiehuis-licht 9s ease-in-out infinite both; }
.d-familiehuis-raam-1 { animation-delay: 1s; } .d-familiehuis-raam-2 { animation-delay: 4s; } .d-familiehuis-raam-3 { animation-delay: 7s; }
@keyframes d-familiehuis-licht { 0% { opacity: 0; } 4%, 46% { opacity: 1; } 52%, 100% { opacity: 0; } }
.d-familiehuis-rook-1, .d-familiehuis-rook-2 { animation: d-familiehuis-rook 5s ease-out infinite; }
.d-familiehuis-rook-2 { animation-delay: 2.5s; }
@keyframes d-familiehuis-rook { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: .95; } 100% { transform: translate(-30px, -90px) scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .d-scene-familiehuis > * { animation: none !important; } .d-familiehuis-raam-1 { opacity: 1; } }

@media (max-width: 781px) {
	.d-scene-familiehuis { transform: scale(.55); transform-origin: right bottom; }
	.d-familiehuis-rook-2 { display: none; }
	.d-peek-familiehuis::before { width: 80px; height: 56px; top: -50px; }
}
