/* ===== wereld: kompas ===== */
body:has(.d-world-kompas) { --t-orange: #FBE6CC; --t-blue: #D7E6F6; --t-green: #E0ECD6; --t-yellow: #FFF0C6; }
body:has(.d-world-kompas) .d-section.has-vlak-groen-background-color,
body:has(.d-world-kompas) .d-section.has-vlak-blauw-background-color { background: #F6EEDC !important; }
.d-world-kompas { background: linear-gradient(180deg, #DCEBF8, #F7F1E3) !important; }
.d-world-kompas .d-play-title mark { color: #3B6AA0 !important; }
body:has(.d-world-kompas) main .d-section { position: relative; }
body:has(.d-world-kompas) 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 120 24'%3E %3Cpath d='M0 12 C 20 4 40 20 60 12 C 80 4 100 20 120 12' stroke='%231E2B45' stroke-width='3' stroke-dasharray='2 7' stroke-linecap='round' fill='none' opacity='.75'/%3E %3Cpath d='M84 6 L 94 16 M94 6 L 84 16' stroke='%23F07A2B' stroke-width='3.5' stroke-linecap='round'/%3E %3C/svg%3E") left center / 120px 24px repeat-x; z-index: 2; pointer-events: none; }
.d-scene-kompas { position: absolute !important; inset: 0; height: auto !important; }
.d-peek-kompas::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 80'%3E %3Cpath d='M45 6 C 72 6 84 28 84 48 C 84 70 64 86 54 94 L 36 94 C 26 86 6 70 6 48 C 6 28 18 6 45 6 Z' fill='%23F07A2B' stroke='%231E2B45' stroke-width='3'/%3E %3Cpath d='M45 6 C 29 22 26 66 36 94 L 54 94 C 64 66 61 22 45 6 Z' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5'/%3E %3Ccircle cx='37' cy='46' r='3.8' fill='%231E2B45'/%3E%3Ccircle cx='53' cy='46' r='3.8' fill='%231E2B45'/%3E %3Ccircle cx='38.2' cy='44.8' r='1.3' fill='%23fff'/%3E%3Ccircle cx='54.2' cy='44.8' r='1.3' fill='%23fff'/%3E %3Cpath d='M40 56 Q 45 61 50 56' stroke='%231E2B45' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E %3Ccircle cx='28' cy='56' r='4.5' fill='%23F49AB4' opacity='.7'/%3E%3Ccircle cx='62' cy='56' r='4.5' fill='%23F49AB4' opacity='.7'/%3E %3C/svg%3E"); width: 80px; height: 72px; top: -60px; left: 12%; }
.d-peek-right.d-peek-kompas::before { left: auto; right: 12%; }
@media (prefers-reduced-motion: reduce) { .d-scene-kompas > * { animation: none !important; } }

.d-kompas-hoofd, .d-kompas-naald { width: 220px; height: 240px; right: 3%; bottom: 20px; }
.d-kompas-hoofd { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 240'%3E %3Ccircle cx='110' cy='22' r='13' fill='%23FFC94D' stroke='%231E2B45' stroke-width='3'/%3E%3Ccircle cx='110' cy='22' r='5' fill='%23FFF6E6' stroke='%231E2B45' stroke-width='2'/%3E %3Ccircle cx='110' cy='130' r='100' fill='%23EC8B48' stroke='%231E2B45' stroke-width='3'/%3E %3Ccircle cx='110' cy='130' r='86' fill='%23FFF6E6' stroke='%231E2B45' stroke-width='3'/%3E %3Cpath d='M110.0 64.0L110.0 52.0M136.8 65.3L139.8 57.9M156.7 83.3L165.2 74.8M174.7 103.2L182.1 100.2M176.0 130.0L188.0 130.0M174.7 156.8L182.1 159.8M156.7 176.7L165.2 185.2M136.8 194.7L139.8 202.1M110.0 196.0L110.0 208.0M83.2 194.7L80.2 202.1M63.3 176.7L54.8 185.2M45.3 156.8L37.9 159.8M44.0 130.0L32.0 130.0M45.3 103.2L37.9 100.2M63.3 83.3L54.8 74.8M83.2 65.3L80.2 57.9' stroke='%231E2B45' stroke-width='2.5' stroke-linecap='round'/%3E %3Ccircle cx='110' cy='130' r='50' fill='none' stroke='%238EAAD5' stroke-width='3' stroke-dasharray='3 7' stroke-linecap='round'/%3E %3Cpath d='M110 50 L119 68 L101 68 Z' fill='%238EAAD5' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round' transform='rotate(0 110 130)'/%3E%3Cpath d='M110 50 L119 68 L101 68 Z' fill='%23729A47' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round' transform='rotate(90 110 130)'/%3E%3Cpath d='M110 50 L119 68 L101 68 Z' fill='%23EC8B48' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round' transform='rotate(180 110 130)'/%3E%3Cpath d='M110 50 L119 68 L101 68 Z' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round' transform='rotate(270 110 130)'/%3E %3Cpath d='M40 84 Q 60 60 84 50' stroke='%23fff' stroke-width='6' fill='none' stroke-linecap='round' opacity='.8'/%3E %3C/svg%3E") !important; z-index: 3; animation: d-kompas-in .8s cubic-bezier(.3,1.5,.5,1) .2s both; }
.d-kompas-naald { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 240'%3E %3Cpath d='M110 60 L123 130 L97 130 Z' fill='%23F07A2B' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E %3Cpath d='M110 200 L123 130 L97 130 Z' fill='%238EAAD5' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E %3Ccircle cx='110' cy='130' r='10' fill='%23FFC94D' stroke='%231E2B45' stroke-width='3'/%3E %3C/svg%3E") !important; z-index: 4; transform-origin: 50% 54.17%;
  animation: d-kompas-zoek 4.6s cubic-bezier(.45,.05,.35,1) .2s both, d-kompas-tril 3.2s ease-in-out 4.8s infinite; }
.d-kompas-kaart { width: 220px; height: 140px; right: calc(3% + 170px); bottom: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 140'%3E %3Cpath d='M8 14 Q 30 4 60 12 T 120 10 T 180 12 T 212 10 L 208 70 L 214 128 Q 180 138 150 128 T 90 130 T 30 128 T 6 130 L 12 70 Z' fill='%23FCEBC8' stroke='%23B07A50' stroke-width='3' stroke-linejoin='round'/%3E %3Cpath d='M30 40 C 50 22 90 30 100 50 C 110 72 80 90 60 86 C 36 82 18 60 30 40 Z' fill='%23B9D69A'/%3E %3Cpath d='M140 30 C 170 24 196 40 190 64 C 184 86 150 80 142 64 C 136 52 128 34 140 30 Z' fill='%23BFD6EE'/%3E %3Cpath d='M52 52 L 58 40 L 64 52 Z M66 60 L 72 48 L 78 60 Z' fill='%23729A47'/%3E %3Ccircle cx='28' cy='112' r='4.5' fill='%231E2B45'/%3E %3Cpath d='M28 112 C 60 100 70 70 100 74 S 150 110 172 94' stroke='%231E2B45' stroke-width='3' stroke-dasharray='2 8' stroke-linecap='round' fill='none'/%3E %3Cpath d='M170 82 L 186 98 M186 82 L 170 98' stroke='%23F07A2B' stroke-width='5' stroke-linecap='round'/%3E %3C/svg%3E") !important; z-index: 2; transform: rotate(-5deg);
  animation: d-kompas-ontrol 1.6s ease-out 1s both; }
.d-kompas-ballon { width: 90px; height: 135px; left: 48%; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E %3Cpath d='M50 6 C 80 6 94 30 94 52 C 94 78 70 96 58 104 L 42 104 C 30 96 6 78 6 52 C 6 30 20 6 50 6 Z' fill='%23F07A2B' stroke='%231E2B45' stroke-width='3'/%3E %3Cpath d='M50 6 C 32 22 28 70 42 104 L 58 104 C 72 70 68 22 50 6 Z' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E %3Cpath d='M42 104 L 39 121 M58 104 L 61 121' stroke='%231E2B45' stroke-width='2.5' stroke-linecap='round'/%3E %3Crect x='34' y='120' width='32' height='24' rx='5' fill='%23B07A50' stroke='%231E2B45' stroke-width='2.5'/%3E %3Cpath d='M34 130 H 66 M45 120 V 144 M55 120 V 144' stroke='%231E2B45' stroke-width='1.5' opacity='.5'/%3E %3Ccircle cx='41' cy='52' r='4' fill='%231E2B45'/%3E%3Ccircle cx='59' cy='52' r='4' fill='%231E2B45'/%3E %3Ccircle cx='42.3' cy='50.7' r='1.4' fill='%23fff'/%3E%3Ccircle cx='60.3' cy='50.7' r='1.4' fill='%23fff'/%3E %3Cpath d='M44 62 Q 50 68 56 62' stroke='%231E2B45' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E %3Ccircle cx='33' cy='62' r='5' fill='%23F49AB4' opacity='.7'/%3E%3Ccircle cx='67' cy='62' r='5' fill='%23F49AB4' opacity='.7'/%3E %3C/svg%3E") !important; z-index: 1;
  animation: d-kompas-stijg 18s linear .6s infinite both; }
.d-kompas-wolk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M22 52 C 6 52 6 30 22 30 C 24 14 46 10 54 22 C 62 8 90 10 92 28 C 110 26 116 52 98 52 Z' fill='%23fff' stroke='%231E2B45' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") !important; z-index: 1; animation: d-kompas-drijf 14s ease-in-out infinite; }
.d-kompas-wolk-1 { width: 100px; height: 50px; left: 52%; top: 7%; }
.d-kompas-wolk-2 { width: 76px; height: 38px; right: 28%; top: 3%; animation-duration: 18s; animation-delay: -6s; }

@keyframes d-kompas-in { from { transform: scale(.5) rotate(-25deg); opacity: 0; } }
@keyframes d-kompas-zoek {
  0% { transform: scale(.5) rotate(0); opacity: 0; }
  12% { transform: scale(1) rotate(70deg); opacity: 1; }
  28% { transform: rotate(170deg); }
  44% { transform: rotate(-70deg); }
  58% { transform: rotate(50deg); }
  70% { transform: rotate(-24deg); }
  82% { transform: rotate(10deg); }
  92% { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}
@keyframes d-kompas-tril { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(4deg); } 65% { transform: rotate(-3deg); } }
@keyframes d-kompas-ontrol { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes d-kompas-stijg {
  0% { transform: translate(0, 160px) rotate(-3deg); opacity: 0; }
  8% { opacity: 1; }
  30% { transform: translate(-30px, -80px) rotate(4deg); }
  60% { transform: translate(16px, -340px) rotate(-4deg); }
  90% { opacity: 1; }
  100% { transform: translate(-10px, -680px) rotate(3deg); opacity: 0; }
}
@keyframes d-kompas-drijf { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(40px); } }

@media (max-width: 781px) {
  .d-kompas-hoofd, .d-kompas-naald { width: 140px; height: 153px; right: 3%; bottom: 14px; }
  .d-kompas-kaart, .d-kompas-wolk-1 { display: none; }
  .d-kompas-ballon { width: 56px; height: 84px; left: auto; right: 8%; }
  .d-kompas-wolk-2 { right: 4%; }
}