/* Wereld: spaarvarken — roze spaarvarken wiebelt, muntjes vallen erin, rekenknopjes zweven */
body:has(.d-world-spaarvarken) { --t-orange: #FFE4D4; --t-blue: #E3ECF8; --t-green: #E4F1DE; --t-yellow: #FFF1C7; }
body:has(.d-world-spaarvarken) .d-section.has-vlak-groen-background-color,
body:has(.d-world-spaarvarken) .d-section.has-vlak-blauw-background-color { background: #FFF3F5 !important; }
.d-world-spaarvarken { background: radial-gradient(circle at 85% 70%, #FFE1EA 0, rgba(255,225,234,0) 40%), linear-gradient(180deg, #FFEFF3 0%, #FFF8E6 100%) !important; }
.d-world-spaarvarken .d-play-title mark { color: #D0567B !important; }
body:has(.d-world-spaarvarken) main .d-section { position: relative; }
body:has(.d-world-spaarvarken) 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 36 24'%3E%3Ccircle cx='18' cy='12' r='8.5' fill='%23FFC94D' stroke='%23E0A52A' stroke-width='1.8'/%3E%3Ccircle cx='18' cy='12' r='4.8' fill='none' stroke='%23F2BE45' stroke-width='1.5'/%3E%3Cpath d='M13 9 A 6 6 0 0 1 16 6' stroke='%23FFE59A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left center / 36px 24px repeat-x; z-index: 2; pointer-events: none; }

.d-scene-spaarvarken { position: absolute !important; inset: 0; height: auto !important; }
.d-spaarvarken-varken { width: 240px; height: 180px; right: 3%; bottom: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'%3E%3Crect x='54' y='136' width='24' height='38' rx='9' fill='%23F49AB4' stroke='%231E2B45' stroke-width='3'/%3E%3Crect x='86' y='136' width='24' height='38' rx='9' fill='%23F49AB4' stroke='%231E2B45' stroke-width='3'/%3E%3Crect x='140' y='136' width='24' height='38' rx='9' fill='%23F49AB4' stroke='%231E2B45' stroke-width='3'/%3E%3Crect x='170' y='136' width='24' height='38' rx='9' fill='%23F49AB4' stroke='%231E2B45' stroke-width='3'/%3E%3Cpath d='M28 96 C 10 90 12 72 22 76 C 30 80 22 92 13 86' stroke='%231E2B45' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M118 44 L122 14 L146 40 Z' fill='%23F49AB4' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E%3Cellipse cx='120' cy='100' rx='95' ry='62' fill='%23F49AB4' stroke='%231E2B45' stroke-width='3'/%3E%3Cpath d='M150 46 L158 16 L178 46 Z' fill='%23F49AB4' stroke='%231E2B45' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M156 40 L160 26 L168 40 Z' fill='%23E8789A' opacity='.6'/%3E%3Cpath d='M52 76 C 64 56 86 48 104 48' stroke='%23F7AFC4' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3Crect x='70' y='37' width='40' height='8' rx='4' fill='%231E2B45'/%3E%3Cellipse cx='212' cy='106' rx='22' ry='18' fill='%23F7AFC4' stroke='%231E2B45' stroke-width='3'/%3E%3Cellipse cx='206' cy='106' rx='3' ry='5' fill='%231E2B45'/%3E%3Cellipse cx='218' cy='106' rx='3' ry='5' fill='%231E2B45'/%3E%3Ccircle cx='165.9' cy='80' r='3.9600000000000004' fill='%231E2B45'/%3E%3Ccircle cx='190.1' cy='80' r='3.9600000000000004' fill='%231E2B45'/%3E%3Ccircle cx='167.22' cy='78.68' r='1.4300000000000002' fill='%23fff'/%3E%3Ccircle cx='191.42' cy='78.68' r='1.4300000000000002' fill='%23fff'/%3E%3Ccircle cx='162' cy='104' r='7' fill='%23E8789A' opacity='.6'/%3E%3Cpath d='M176 128 Q 188 136 200 128' stroke='%231E2B45' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; z-index: 3; transform-origin: 50% 100%; }
.d-spaarvarken-munt { width: 34px; height: 34px; right: calc(3% + 133px); bottom: 150px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' fill='%23FFC94D' stroke='%231E2B45' stroke-width='2.5'/%3E%3Ccircle cx='20' cy='20' r='11' fill='none' stroke='%23E0A52A' stroke-width='2'/%3E%3Cpath d='M12 13 A 10 10 0 0 1 18 9' stroke='%23FFE59A' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; z-index: 2; opacity: 0; }
.d-spaarvarken-knop { width: 44px; height: 44px; }
.d-spaarvarken-plus { left: 46%; top: 12%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='3' y='3' width='38' height='38' rx='10' fill='%238EAAD5' stroke='%231E2B45' stroke-width='2.5'/%3E%3Cpath d='M8 34 H36' stroke='%231E2B45' stroke-opacity='.18' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M22 13 V31 M13 22 H31' stroke='%23fff' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") !important; }
.d-spaarvarken-is { right: 5%; top: 8%; width: 38px; height: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='3' y='3' width='38' height='38' rx='10' fill='%23729A47' stroke='%231E2B45' stroke-width='2.5'/%3E%3Cpath d='M8 34 H36' stroke='%231E2B45' stroke-opacity='.18' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M13 17 H31 M13 27 H31' stroke='%23fff' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") !important; }
.d-spaarvarken-min { right: calc(3% + 290px); bottom: 70px; width: 36px; height: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='3' y='3' width='38' height='38' rx='10' fill='%23EC8B48' stroke='%231E2B45' stroke-width='2.5'/%3E%3Cpath d='M8 34 H36' stroke='%231E2B45' stroke-opacity='.18' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M13 22 H31' stroke='%23fff' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") !important; }
.d-peek-spaarvarken::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 62'%3E%3Ccircle cx='31' cy='32' r='27' fill='%23FFC94D' stroke='%231E2B45' stroke-width='3'/%3E%3Ccircle cx='31' cy='32' r='21' fill='none' stroke='%23E0A52A' stroke-width='2'/%3E%3Ccircle cx='24.2' cy='30' r='3.06' fill='%231E2B45'/%3E%3Ccircle cx='37.8' cy='30' r='3.06' fill='%231E2B45'/%3E%3Ccircle cx='25.22' cy='28.98' r='1.105' fill='%23fff'/%3E%3Ccircle cx='38.82' cy='28.98' r='1.105' fill='%23fff'/%3E%3Cpath d='M25.9 36.8 Q 31 41.05 36.1 36.8' stroke='%231E2B45' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='18.25' cy='35.95' r='3.4' fill='%23F49AB4' opacity='.7'/%3E%3Ccircle cx='43.75' cy='35.95' r='3.4' fill='%23F49AB4' opacity='.7'/%3E%3C/svg%3E"); width: 58px; height: 58px; top: -46px; left: 15%; }
.d-peek-spaarvarken.d-peek-right::before { left: auto; right: 15%; }

@media (prefers-reduced-motion: no-preference) {
  .d-spaarvarken-varken { animation: d-spaarvarken-in .8s cubic-bezier(.3,1.5,.5,1) .2s both, d-spaarvarken-wiebel 1.5s ease-in-out 1s infinite; }
  .d-spaarvarken-munt { animation: d-spaarvarken-val 4.5s cubic-bezier(.5,0,.8,.6) 1s infinite; }
  .d-spaarvarken-munt-2 { animation-delay: 2.5s; }
  .d-spaarvarken-munt-3 { animation-delay: 4s; }
  .d-spaarvarken-knop { animation: d-spaarvarken-zweef 5s ease-in-out infinite; }
  .d-spaarvarken-is { animation-delay: -1.6s; animation-duration: 6s; }
  .d-spaarvarken-min { animation-delay: -3.2s; animation-duration: 5.5s; }
}
@keyframes d-spaarvarken-in { from { transform: translateX(60px) scale(.7); opacity: 0; } }
@keyframes d-spaarvarken-wiebel { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-3.5deg); } 45% { transform: rotate(3deg); } 65% { transform: rotate(-1.5deg); } 80% { transform: rotate(0); } }
@keyframes d-spaarvarken-val {
  0% { transform: translateY(-260px) rotateY(0); opacity: 0; }
  8% { opacity: 1; }
  26% { transform: translateY(0) rotateY(540deg); opacity: 1; }
  32% { transform: translateY(26px) rotateY(720deg); opacity: 0; }
  100% { transform: translateY(26px); opacity: 0; }
}
@keyframes d-spaarvarken-zweef { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }

@media (max-width: 781px) {
  .d-scene-spaarvarken { transform: scale(.6); transform-origin: right bottom; }
  .d-spaarvarken-plus, .d-spaarvarken-is { display: none; }
}