/* scenes — the story scenes (js/scenes/*.js) and the story map.
   Every scene draws inside <g class="scn">; transform/opacity only. Ambient
   life and reactions stop under .reduce (state changes then happen at once). */

/* ------------------------------------------------------------ the picture */
.scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.scn .prop, .scn .map-node { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.scn .hit { stroke: none; }
.scn .prop:focus-visible .hit, .scn .map-node:focus-visible .hit { stroke: #ff7a9a; stroke-width: 3; stroke-dasharray: 7 6; }
.scene-svg .chr { cursor: pointer; }

/* the bench preview (dev only) */
.sc-stage { position: absolute; inset: 0; overflow: hidden; }
.sc-map-stage { background: var(--bg2); }
.sc-bench { position: absolute; z-index: 40; left: 8px; top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.sc-bench select, .sc-bench button { min-height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 0 8px; font: 13px/1 var(--font); opacity: 0.9; }
.sc-map-label { position: absolute; z-index: 5; transform: translate(-50%, 0); padding: 2px 8px; border-radius: 10px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: var(--shadow-sm); pointer-events: none; }

/* ------------------------------------------------------------ ambient life */
.sc-drift { animation: sc-drift 19s ease-in-out infinite; }
.sc-drift2 { animation: sc-drift 24s ease-in-out infinite reverse; }
.sc-spin-slow { animation: rt 40s linear infinite; transform-box: fill-box; transform-origin: center; }
.sc-wing { animation: sc-wing 0.32s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sc-buzz { animation: sc-buzz 0.12s linear infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.sc-flap { animation: sc-flap 0.7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sc-flut { animation: sc-flut 9s ease-in-out infinite; }
.sc-flut2 { animation: sc-flut2 11s ease-in-out infinite; }
.sc-sway { animation: sc-sway 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.sc-bob { animation: sc-bob 3.2s ease-in-out infinite; }
.sc-rise { animation: sc-rise 3.6s ease-in infinite; transform-box: fill-box; transform-origin: center; opacity: 0; }
.sc-flick { animation: sc-flick 2.8s ease-in-out infinite; }
.sc-spin { animation: rt 12s linear infinite; transform-box: fill-box; transform-origin: center; }
.sc-spin-r { animation: rt 12s linear infinite reverse; transform-box: fill-box; transform-origin: center; }
.sc-blink { animation: an 1.6s steps(1) infinite; }
.sc-tick { animation: sc-tick 2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }

@keyframes sc-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(22px); } }
@keyframes sc-wing { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.35); } }
@keyframes sc-buzz { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.7); } }
@keyframes sc-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-0.6); } }
@keyframes sc-flut { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 25% { transform: translate(26px, -16px) rotate(8deg); } 50% { transform: translate(48px, 2px) rotate(-4deg); } 75% { transform: translate(22px, 14px) rotate(6deg); } }
@keyframes sc-flut2 { 0%, 100% { transform: translate(0, 0) rotate(4deg); } 30% { transform: translate(-30px, -12px) rotate(-8deg); } 60% { transform: translate(-10px, 16px) rotate(6deg); } }
@keyframes sc-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes sc-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(3px) rotate(1.5deg); } }
@keyframes sc-rise { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 20% { opacity: 0.9; } 100% { transform: translateY(-46px) scale(1.15); opacity: 0; } }
@keyframes sc-flick { 0%, 100% { opacity: 0.25; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(5px, -7px); } }
@keyframes sc-tick { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }

/* ------------------------------------------------------------ reactions (one-shot) */
.sc-wob { animation: sc-wob 0.8s ease-in-out; transform-box: fill-box; transform-origin: 50% 100%; }
.sc-shake { animation: sc-shake 0.5s ease-in-out; }
.sc-boing { animation: sc-boing 0.65s ease-out; transform-box: fill-box; transform-origin: 50% 100%; }
.sc-pop { animation: sc-pop 0.45s ease-out; transform-box: fill-box; transform-origin: center; }
.sc-hop { animation: sc-hop 0.6s cubic-bezier(.3,.6,.4,1); }
.sc-jelly { animation: sc-jelly 1s ease-out; transform-box: fill-box; transform-origin: 50% 100%; }
.sc-swing { animation: sc-swing 1.3s ease-out; transform-box: fill-box; transform-origin: 50% 0; }
.sc-twirl { animation: sc-twirl 0.9s cubic-bezier(.3,.7,.3,1); transform-box: fill-box; transform-origin: center; }
.sc-grow { animation: sc-grow 0.55s cubic-bezier(.3,1.5,.5,1); transform-box: fill-box; transform-origin: center; }

@keyframes sc-wob { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 45% { transform: rotate(5deg); } 70% { transform: rotate(-3deg); } 85% { transform: rotate(1.5deg); } }
@keyframes sc-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes sc-boing { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.12, 0.84); } 50% { transform: scale(0.9, 1.14); } 75% { transform: scale(1.04, 0.97); } }
@keyframes sc-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.2); } 75% { transform: scale(0.95); } }
@keyframes sc-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 75% { transform: translateY(0); } 88% { transform: translateY(-4px); } }
@keyframes sc-jelly { 0%, 100% { transform: scale(1, 1); } 15% { transform: scale(1.12, 0.86); } 32% { transform: scale(0.9, 1.1); } 50% { transform: scale(1.06, 0.95); } 68% { transform: scale(0.97, 1.03); } 84% { transform: scale(1.01, 0.99); } }
@keyframes sc-swing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(12deg); } 35% { transform: rotate(-9deg); } 55% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes sc-twirl { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes sc-grow { from { transform: scale(0); } to { transform: scale(1); } }

/* ------------------------------------------------------------ meadow */
.md-hover { animation: md-hover 3.4s ease-in-out infinite; }
.md-bee.loop { animation: md-loop 1.1s ease-in-out; }
.md-canopy { transform-box: fill-box; transform-origin: 50% 100%; }
.md-apple { transform-box: fill-box; transform-origin: center; }
.md-apple.fall { animation: md-fall 2.4s linear both; }
.md-shades { opacity: 0; transform: translateY(-18px); transition: transform 0.35s cubic-bezier(.3,1.4,.5,1), opacity 0.2s; }
.cool .md-shades { opacity: 1; transform: none; }
.md-head { transform-box: fill-box; transform-origin: 50% 80%; }
.md-achoo, .md-pollen { opacity: 0; }
.sneeze .md-head { animation: md-sneeze 1s ease-in-out; }
.sneeze .md-calm { animation: md-face-a 1s steps(1); }
.sneeze .md-achoo { animation: md-face-b 1s steps(1); }
.sneeze .md-pollen { animation: md-pollen 1s ease-out; transform-box: fill-box; transform-origin: center; }
.md-mole { transform: translateY(34px); transition: transform 0.34s cubic-bezier(.3,1.5,.5,1); }
.up .md-mole { transform: none; }
.md-sbody { transform-box: fill-box; transform-origin: 100% 100%; transition: transform 0.35s ease, opacity 0.3s; }
.hid .md-sbody { transform: scaleX(0.2); opacity: 0; }

@keyframes md-hover { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(9px, -6px); } 50% { transform: translate(0, -2px); } 75% { transform: translate(-9px, -6px); } }
@keyframes md-loop {
  0% { transform: translate(0, 0) rotate(0); } 12.5% { transform: translate(20px, -8px) rotate(-45deg); } 25% { transform: translate(28px, -28px) rotate(-90deg); }
  37.5% { transform: translate(20px, -48px) rotate(-135deg); } 50% { transform: translate(0, -56px) rotate(-180deg); } 62.5% { transform: translate(-20px, -48px) rotate(-225deg); }
  75% { transform: translate(-28px, -28px) rotate(-270deg); } 87.5% { transform: translate(-20px, -8px) rotate(-315deg); } 100% { transform: translate(0, 0) rotate(-360deg); }
}
@keyframes md-fall {
  0% { transform: none; animation-timing-function: cubic-bezier(.5,0,1,1); }
  28% { transform: translate(0, 200px); animation-timing-function: cubic-bezier(0,0,.5,1); }
  40% { transform: translate(-10px, 172px) rotate(-70deg); animation-timing-function: cubic-bezier(.5,0,1,1); }
  52% { transform: translate(-20px, 200px) rotate(-140deg); animation-timing-function: cubic-bezier(0,0,.5,1); }
  59% { transform: translate(-26px, 191px) rotate(-180deg); animation-timing-function: cubic-bezier(.5,0,1,1); }
  66% { transform: translate(-32px, 200px) rotate(-220deg); animation-timing-function: ease-out; }
  80%, 90% { transform: translate(-46px, 200px) rotate(-290deg); opacity: 1; }
  100% { transform: translate(-46px, 200px) rotate(-290deg); opacity: 0; }
}
@keyframes md-sneeze { 0%, 100% { transform: none; } 30% { transform: scale(1.06, 0.9) rotate(-8deg); } 46% { transform: scale(0.88, 1.16) rotate(10deg); } 62% { transform: scale(1.04, 0.97) rotate(-3deg); } 80% { transform: rotate(1deg); } }
@keyframes md-face-a { 0%, 100% { opacity: 1; } 40% { opacity: 0; } 85% { opacity: 1; } }
@keyframes md-face-b { 0%, 100% { opacity: 0; } 40% { opacity: 1; } 85% { opacity: 0; } }
@keyframes md-pollen { 0%, 40% { opacity: 0; transform: scale(0.4); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px) scale(2.8); } }

/* ------------------------------------------------------------ pudding */
.pd-cherry { transform-box: fill-box; transform-origin: center; }
.pd-cherry.jump { animation: pd-jump 1s cubic-bezier(.3,.6,.4,1); }
.pd-swirl { transform-box: fill-box; transform-origin: center; }
.pd-rain { opacity: 0; }
.rain .pd-rain { animation: pd-rain 1.6s ease-in; }
.pd-flame, .pd-smoke { opacity: 0; transition: opacity 0.25s; }
.lit .pd-flame { opacity: 1; }
.pd-flick { transform-box: fill-box; transform-origin: 50% 100%; }
.lit .pd-flick { animation: pd-flick 0.5s ease-in-out infinite alternate; }
.puff .pd-smoke { animation: pd-smoke 1.2s ease-out; }

@keyframes pd-jump { 0%, 100% { transform: none; } 12% { transform: scale(1.15, 0.8); } 45% { transform: translateY(-70px) rotate(180deg); } 72% { transform: translateY(0) rotate(360deg) scale(1.12, 0.85); } 86% { transform: rotate(360deg) scale(0.95, 1.08); } }
@keyframes pd-rain { 0% { opacity: 0; transform: translateY(-6px); } 15%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(92px); } }
@keyframes pd-flick { from { transform: scale(1, 1) rotate(-4deg); } to { transform: scale(0.9, 1.12) rotate(4deg); } }
@keyframes pd-smoke { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-24px); } }

/* ------------------------------------------------------------ laundry */
.ly-cloth, .ly-wave { transform-box: fill-box; transform-origin: 50% 0; }
.ly-cloth.flap { animation: ly-flap 1.1s ease-in-out; }
.ly-wave.wave { animation: ly-wave 1.3s ease-in-out; }
.ly-towel { transform-box: fill-box; transform-origin: 87.5% 0; transition: transform 0.6s cubic-bezier(.3,1.5,.5,1); }
.loose .ly-towel { transform: rotate(-30deg); }
.ly-peg { transform-box: fill-box; transform-origin: center; transition: transform 0.5s cubic-bezier(.5,0,.9,.6), opacity 0.5s; }
.loose .ly-peg { transform: translate(-8px, 60px) rotate(120deg); opacity: 0; }
.ly-sway { animation: ly-sway 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
.ly-bird.hop { animation: ly-hop 1.7s ease-in-out; }
.ly-bub { animation: ly-bob 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ly-bub.b2 { animation-delay: -1s; } .ly-bub.b3 { animation-delay: -0.5s; } .ly-bub.b4 { animation-delay: -1.6s; }
.blow .ly-bub { animation: ly-blow 1.4s ease-out both; }
.blow .ly-bub.b2 { animation-delay: 0.12s; } .blow .ly-bub.b3 { animation-delay: 0.24s; } .blow .ly-bub.b4 { animation-delay: 0.06s; }
.ly-hopsock { transform: translateY(24px); }
.ly-hopsock.peek { animation: ly-peek 0.9s ease-out; }

@keyframes ly-flap { 0%, 100% { transform: none; } 20% { transform: rotate(9deg) scaleX(0.9); } 40% { transform: rotate(-7deg) scaleX(1.05); } 60% { transform: rotate(5deg) scaleX(0.95); } 80% { transform: rotate(-2deg); } }
@keyframes ly-wave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-22deg); } 30% { transform: rotate(14deg); } 45% { transform: rotate(-20deg); } 60% { transform: rotate(12deg); } 80% { transform: rotate(-6deg); } }
@keyframes ly-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes ly-hop { 0%, 100% { transform: translate(0, 0); } 12% { transform: translate(-10px, -14px); } 24% { transform: translate(-20px, 4px); } 36% { transform: translate(-30px, -12px); } 48% { transform: translate(-40px, 8px); } 60% { transform: translate(-30px, -10px); } 72% { transform: translate(-20px, 4px); } 84% { transform: translate(-10px, -10px); } }
@keyframes ly-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ly-blow { 0% { transform: none; opacity: 1; } 70% { transform: translateY(-70px) scale(1.4); opacity: 1; } 80% { transform: translateY(-74px) scale(1.9); opacity: 0; } 100% { transform: translateY(-74px); opacity: 0; } }
@keyframes ly-peek { 0%, 100% { transform: translateY(24px); } 40% { transform: translateY(-30px) rotate(-12deg); } 70% { transform: translateY(-12px) rotate(8deg); } }

/* ------------------------------------------------------------ pond */
.po-wa { animation: po-wave 3.4s ease-in-out infinite; }
.po-wb { animation: po-wave 3.4s ease-in-out infinite; animation-delay: -1.7s; }
.po-fish { transform-box: fill-box; transform-origin: center; }
.leap .po-fish { animation: po-leap 1.5s ease-in-out; }
.po-splash { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.leap .po-splash { animation: po-splash 1.5s ease-out; }
.po-sac { transform-box: fill-box; transform-origin: 50% 0; transform: scale(0.25); }
.croak .po-sac { animation: po-sac 1.1s ease-in-out; }
.croak .po-frog { animation: sc-hop 0.6s 0.5s cubic-bezier(.3,.6,.4,1); }
.po-petals { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.45s cubic-bezier(.3,1.4,.5,1); }
.shut .po-petals { transform: scale(0.5, 0.8); }
.po-duckbob { animation: sc-bob 3s ease-in-out infinite; }
.dive .po-duck { animation: po-dive 1.8s ease-in-out; }
.po-quack { opacity: 0; transform-box: fill-box; transform-origin: 100% 50%; }
.dive .po-quack { animation: po-quack 0.5s ease-out; }
.po-dhover { animation: md-hover 4s ease-in-out infinite; }
.po-dfly.zip { animation: po-zip 1.3s ease-in-out; }
.po-ring { transform-box: fill-box; transform-origin: center; animation: po-ring 1.2s ease-out both; }
.po-ring.r2 { animation-delay: 0.25s; }

@keyframes po-wave { 0%, 100% { opacity: 1; } 50% { opacity: 0.1; } }
@keyframes po-leap { 0% { transform: none; } 10% { transform: translate(4px, 4px); } 30% { transform: translate(-22px, -58px) rotate(30deg); } 42% { transform: translate(-40px, -76px) rotate(0); } 56% { transform: translate(-60px, -52px) rotate(-35deg); } 66% { transform: translate(-80px, 0) rotate(-50deg); opacity: 1; } 70% { transform: translate(-82px, 6px) rotate(-50deg); opacity: 0; } 88% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes po-splash { 0%, 64% { opacity: 0; transform: scale(0.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes po-sac { 0%, 100% { transform: scale(0.25); } 20% { transform: scale(1.25); } 40% { transform: scale(0.4); } 60% { transform: scale(1.35); } 80% { transform: scale(0.3); } }
@keyframes po-dive { 0%, 100% { transform: none; } 18% { transform: rotate(-105deg); } 30% { transform: rotate(-98deg); } 42% { transform: rotate(-108deg); } 54% { transform: rotate(-100deg); } 72% { transform: rotate(-104deg); } 88% { transform: rotate(8deg); } }
@keyframes po-quack { 0% { opacity: 0; transform: scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes po-zip { 0%, 100% { transform: none; } 15% { transform: translate(40px, -24px); } 30% { transform: translate(70px, 6px); } 45% { transform: translate(30px, 28px); } 60% { transform: translate(-30px, 10px); } 75% { transform: translate(-50px, -20px); } 90% { transform: translate(-10px, -6px); } }
@keyframes po-ring { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }

/* ------------------------------------------------------------ attic */
.at-star, .at-eyec { opacity: 0; }
.wink .at-star { animation: at-shoot 1.2s ease-out; }
.wink .at-eyeo { animation: at-eyeo 1.2s steps(1); }
.wink .at-eyec { animation: at-eyec 1.2s steps(1); }
.at-frame { transform-box: fill-box; transform-origin: 50% 0; transition: transform 0.5s cubic-bezier(.3,1.6,.5,1); }
.crooked .at-frame { transform: rotate(14deg); }
.at-thread { transform-box: fill-box; transform-origin: 50% 0; }
.drop .at-thread { animation: at-thread 2.3s ease-in-out; }
.drop .at-spider { animation: at-spider 2.3s ease-in-out; }
.at-legs { transform-box: fill-box; transform-origin: center; }
.drop .at-legs { animation: at-legs 0.3s ease-in-out 3 0.7s; }
.at-lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.45s cubic-bezier(.3,1.4,.5,1); }
.open .at-lid { transform: translateY(-9px) scaleY(0.5); }
.at-inside { opacity: 0; transition: opacity 0.2s; }
.open .at-inside { opacity: 1; }
.at-bat { opacity: 0; }
.batty .at-bat { animation: at-bat 2.2s ease-in-out; }
.at-twirl { transform-box: fill-box; transform-origin: center; }
.playing .at-twirl { animation: sc-twirl 1.2s linear 2; }
.at-note { opacity: 0; }
.playing .at-note { animation: at-note 2.2s ease-out both; }
.playing .n2 { animation-delay: 0.4s; } .playing .n3 { animation-delay: 0.8s; }
.at-rock { transform-box: fill-box; transform-origin: 50% 100%; }
.at-rock.rock { animation: at-rock 1.6s ease-in-out; }
.at-sheet { transform-box: fill-box; transform-origin: 50% 100%; }
.achoo .at-sheet { animation: sc-boing 0.7s ease-out; }
.at-dust { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.achoo .at-dust { animation: at-dust 1.2s ease-out; }

@keyframes at-shoot { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-40px, 26px); } }
@keyframes at-eyeo { 0%, 100% { opacity: 1; } 20% { opacity: 0; } 70% { opacity: 1; } }
@keyframes at-eyec { 0%, 100% { opacity: 0; } 20% { opacity: 1; } 70% { opacity: 0; } }
@keyframes at-thread { 0%, 100% { transform: scaleY(1); } 30%, 70% { transform: scaleY(1.85); } }
@keyframes at-spider { 0%, 100% { transform: translateY(0); } 30%, 70% { transform: translateY(100px); } }
@keyframes at-legs { 50% { transform: scaleX(1.25); } }
@keyframes at-bat { 0% { opacity: 0; transform: translate(0, -40px) scale(0.4); } 12% { opacity: 1; transform: translate(0, -86px) scale(1); } 30% { transform: translate(40px, -98px); } 48% { transform: translate(-40px, -90px); } 66% { transform: translate(30px, -100px); } 84% { opacity: 1; transform: translate(0, -80px) scale(0.9); } 100% { opacity: 0; transform: translate(0, -40px) scale(0.4); } }
@keyframes at-note { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -50px) rotate(12deg); } }
@keyframes at-rock { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 45% { transform: rotate(9deg); } 70% { transform: rotate(-6deg); } 88% { transform: rotate(3deg); } }
@keyframes at-dust { 0% { opacity: 0; transform: scale(0.5); } 25% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-20px) scale(1.4); } }

/* ------------------------------------------------------------ living room */
.lr-cl, .lr-cr { transform-box: fill-box; transition: transform 0.5s cubic-bezier(.3,1.2,.5,1); }
.lr-cl { transform-origin: 0 50%; } .lr-cr { transform-origin: 100% 50%; }
.shut .lr-cl, .shut .lr-cr { transform: scaleX(1.6); }
.lr-door { transform-box: fill-box; transform-origin: 0 50%; }
.cuckoo .lr-door { animation: lr-door 1.8s ease-in-out; }
.lr-bird { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0.7); }
.cuckoo .lr-bird { animation: lr-cuckoo 1.8s ease-in-out; }
.lr-dim { opacity: 0; transition: opacity 0.5s; }
.lr-dim.on { opacity: 0.3; }
.lr-glow { opacity: 0.5; transition: opacity 0.4s; }
.lr-glow.off { opacity: 0; }
.off .lr-ray { opacity: 0; }
.off .lr-shade { fill: #e9dcc8; }
.lr-fire { animation: lr-fire 0.9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.roll .lr-roll { animation: lr-roll 2.6s ease-in-out; }
.lr-ball { transform-box: fill-box; transform-origin: center; }
.roll .lr-ball { animation: lr-spin 2.6s ease-in-out; }
.lr-thread { transform-box: fill-box; transform-origin: 0% 50%; }
.roll .lr-thread { animation: lr-thread 2.6s ease-in-out; }
.hop .lr-kib { animation: lr-kib 0.8s cubic-bezier(.3,.6,.4,1); }
.hop .k1 { animation-delay: 0.05s; } .hop .k2 { animation-delay: 0.1s; } .hop .k3 { animation-delay: 0.15s; } .hop .k4 { animation-delay: 0.08s; }
.lr-squish { transform-box: fill-box; transform-origin: 50% 100%; }
.squash .lr-squish { animation: lr-squash 0.7s ease-out; }
.lr-puff { opacity: 0; }
.squash .lr-puff { animation: lr-puff 0.7s ease-out; }

@keyframes lr-door { 0%, 100% { transform: none; } 8%, 88% { transform: scaleX(0.12); } }
@keyframes lr-cuckoo { 0%, 100% { transform: scale(0.7); } 15% { transform: translate(-6px, -3px) scale(1.25); } 30% { transform: scale(0.8); } 48% { transform: translate(-6px, -3px) scale(1.25); } 64% { transform: scale(0.8); } }
@keyframes lr-fire { from { transform: scale(1, 1) skewX(-2deg); } to { transform: scale(1.06, 0.9) skewX(3deg); } }
@keyframes lr-roll { 0%, 100% { transform: translateX(0); } 40%, 60% { transform: translateX(70px); } }
@keyframes lr-spin { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(268deg); } }
@keyframes lr-thread { 0%, 100% { transform: scaleX(1); } 40%, 60% { transform: scaleX(3.05); } }
@keyframes lr-kib { 0%, 100% { transform: none; } 40% { transform: translateY(-22px); } }
@keyframes lr-squash { 0%, 100% { transform: none; } 25% { transform: scale(1.25, 0.6); } 55% { transform: scale(0.92, 1.1); } 80% { transform: scale(1.03, 0.97); } }
@keyframes lr-puff { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

/* ------------------------------------------------------------ pantry */
.pa-lid { transform-box: fill-box; transform-origin: center; }
.pop .pa-lid { animation: pa-lid 1s cubic-bezier(.3,.6,.4,1); }
.glug .pa-drip { animation: pa-drip 1.2s ease-in; }
.glug .pa-bubbles .sc-rise { animation-duration: 0.9s; }
.pa-wheel { animation: rt 16s linear infinite; transform-box: fill-box; transform-origin: center; }
.pa-wheel-in { transform-box: fill-box; transform-origin: center; }
.fast .pa-wheel-in { animation: rt 0.8s linear 3; }
.pa-out { opacity: 0; }
.spill .pa-out { animation: pa-out 1.2s ease-out both; }
.spill .o2 { animation-delay: 0.1s; } .spill .o3 { animation-delay: 0.2s; }
.pa-head { transform-box: fill-box; transform-origin: center; }
.turn .pa-head { animation: pa-turn 1.2s ease-in-out; }
.pa-fall { opacity: 0; }
.turn .pa-fall { animation: pa-fall 1.2s ease-in; }
.pa-nut { opacity: 0; }
.peek .pa-nut { animation: pa-nut 1.8s ease-in-out; }
.pa-nutr { transform-box: fill-box; transform-origin: center; }
.peek .pa-nutr { animation: pa-roll 1.8s ease-in-out; }
.pa-tube { transform-box: fill-box; transform-origin: 50% 100%; }
.peek .pa-tube { animation: sc-wob 0.8s ease-in-out; }

@keyframes pa-lid { 0%, 100% { transform: none; } 40% { transform: translateY(-46px) rotate(200deg); } 70% { transform: translateY(0) rotate(360deg); } 82% { transform: translateY(-6px) rotate(360deg); } }
@keyframes pa-drip { 0% { transform: none; opacity: 1; } 50% { transform: translateY(40px); opacity: 0; } 51% { transform: none; opacity: 0; } 100% { opacity: 1; } }
@keyframes pa-out { 0% { opacity: 0; transform: translate(-14px, -50px); } 15% { opacity: 1; transform: translate(-6px, -64px); } 50% { transform: translate(14px, 4px); } 65% { transform: translate(18px, -6px); } 80% { opacity: 1; transform: translate(22px, 4px); } 100% { opacity: 0; transform: translate(22px, 4px); } }
@keyframes pa-turn { 0%, 100% { transform: none; } 30% { transform: rotate(-30deg) scale(1.1); } 60% { transform: rotate(20deg) scale(1.05); } }
@keyframes pa-fall { 0%, 30% { opacity: 0; transform: none; } 40% { opacity: 1; } 85% { opacity: 1; transform: translate(10px, 60px) rotate(90deg); } 100% { opacity: 0; transform: translate(10px, 60px); } }
@keyframes pa-nut { 0%, 100% { opacity: 0; transform: translateX(14px); } 15% { opacity: 1; } 40%, 60% { opacity: 1; transform: translateX(-26px); } 85% { opacity: 1; transform: translateX(14px); } }
@keyframes pa-roll { 0%, 100% { transform: none; } 40%, 60% { transform: rotate(-200deg); } }

/* ------------------------------------------------------------ volcano */
.vo-puff { animation: vo-puff 4.5s ease-out infinite; opacity: 0; transform-box: fill-box; transform-origin: center; }
.vo-puff.p2 { animation-delay: -1.5s; } .vo-puff.p3 { animation-delay: -3s; }
.vo-heart { opacity: 0; transform-box: fill-box; transform-origin: center; }
.love .vo-heart { animation: vo-heart 2.2s ease-out; }
.vo-nut { transform-box: fill-box; transform-origin: center; }
.vo-nut.fall { animation: vo-fall 2.3s linear both; }
.vo-glide { animation: vo-glide 9s ease-in-out infinite; }
.vo-wings { animation: vo-flap 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 70%; }
.vo-ptero.loop { animation: md-loop 1.3s ease-in-out; }
.vo-top { transform-box: fill-box; transform-origin: 0% 100%; transition: transform 0.45s cubic-bezier(.3,1.5,.5,1); }
.hatched .vo-top { transform: translate(-6px, -14px) rotate(-35deg); }
.vo-baby { opacity: 0; transition: opacity 0.3s; }
.hatched .vo-baby { opacity: 1; }
.vo-blorp { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.blorp .vo-blorp { animation: vo-blorp 1.3s ease-out; }
.vo-steam { opacity: 0; }
.blorp .vo-steam { animation: vo-steam 1.3s ease-out 0.4s; }
.vo-bug { transform: translateY(20px); opacity: 0; }
.peek .vo-bug { animation: vo-bug 1.4s ease-out; }

@keyframes vo-puff { 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -110px) scale(1.5); } }
@keyframes vo-heart { 0% { opacity: 0; transform: translateY(10px) scale(0.3); } 20% { opacity: 1; transform: translateY(-30px) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-100px) scale(1.3); } }
@keyframes vo-fall {
  0% { transform: none; animation-timing-function: cubic-bezier(.5,0,1,1); }
  28% { transform: translate(0, 222px); animation-timing-function: cubic-bezier(0,0,.5,1); }
  40% { transform: translate(-10px, 194px) rotate(-70deg); animation-timing-function: cubic-bezier(.5,0,1,1); }
  52% { transform: translate(-20px, 222px) rotate(-140deg); animation-timing-function: cubic-bezier(0,0,.5,1); }
  59% { transform: translate(-26px, 213px) rotate(-180deg); animation-timing-function: cubic-bezier(.5,0,1,1); }
  66% { transform: translate(-32px, 222px) rotate(-220deg); animation-timing-function: ease-out; }
  80%, 90% { transform: translate(-46px, 222px) rotate(-290deg); opacity: 1; }
  100% { transform: translate(-46px, 222px) rotate(-290deg); opacity: 0; }
}
@keyframes vo-glide { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(40px, -10px); } 50% { transform: translate(70px, 6px); } 75% { transform: translate(30px, 10px); } }
@keyframes vo-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }
@keyframes vo-blorp { 0% { opacity: 0; transform: scale(0.2); } 20% { opacity: 1; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.3); } 56% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; } }
@keyframes vo-steam { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes vo-bug { 0%, 100% { transform: translateY(20px); opacity: 0; } 25% { transform: translateY(-24px); opacity: 1; } 70% { transform: translateY(-20px); opacity: 1; } }

/* ------------------------------------------------------------ workshop */
.ws-g1, .ws-g2, .ws-g3, .ws-f1, .ws-f2, .ws-f3 { transform-box: fill-box; transform-origin: center; }
.ws-g1 { animation: ws-r1 16s linear infinite; } .ws-g2 { animation: ws-r2 16s linear infinite; } .ws-g3 { animation: ws-r3 16s linear infinite; }
.fast .ws-f1 { animation: ws-r1 1.2s linear 2; } .fast .ws-f2 { animation: ws-r2 1.2s linear 2; } .fast .ws-f3 { animation: ws-r3 1.2s linear 2; }
.wave .ws-a1 { animation: ws-a1 1.6s ease-in-out; }
.wave .ws-a2 { animation: ws-a2 1.6s ease-in-out; }
.wave .ws-claw { animation: ws-claw 0.4s ease-in-out 4; }
.ws-swing { animation: ws-swing 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
.ws-sparks { opacity: 0; }
.spark .ws-sparks { animation: ws-sparks 1.1s steps(1); }
.ws-glow { opacity: 0.5; transform-box: fill-box; transform-origin: center; }
.spark .ws-glow { animation: ws-glow 1.1s ease-out; }
.ws-l1 { animation: an 1.4s steps(1) infinite; } .ws-l2 { animation: an 1.4s steps(1) infinite; animation-delay: -0.7s; }
.ws-screen { transform-box: fill-box; transform-origin: center; }
.beep .ws-screen { animation: pl 0.5s ease-in-out 2; }
.beep .ws-btns { animation: ws-btns 1s steps(1); }
.ws-can { transform-box: fill-box; transform-origin: 50% 100%; }
.squirt .ws-can { animation: ws-squeeze 0.9s ease-out; }
.ws-drop { opacity: 0; }
.squirt .ws-drop { animation: ws-drop 0.9s ease-in; }
.ws-toast { transform-box: fill-box; transform-origin: center; }
.pop .ws-toast { animation: ws-toast 1.3s cubic-bezier(.3,.6,.4,1); }
.pop .ws-lever { animation: ws-lever 1.3s ease-out; }

@keyframes ws-r1 { to { transform: rotate(360deg); } }
@keyframes ws-r2 { to { transform: rotate(-560deg); } }
@keyframes ws-r3 { to { transform: rotate(-720deg); } }
@keyframes ws-a1 { 0%, 100% { transform: none; } 50% { transform: rotate(6deg); } }
@keyframes ws-a2 { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-25deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-25deg); } 80% { transform: rotate(8deg); } }
@keyframes ws-claw { 50% { transform: rotate(-30deg); } }
@keyframes ws-swing { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes ws-sparks { 0%, 100% { opacity: 0; } 10%, 30% { opacity: 1; } 20% { opacity: 0.2; } 45%, 60% { opacity: 1; } 75% { opacity: 0; } }
@keyframes ws-glow { 0%, 100% { opacity: 0.5; transform: scale(1); } 15% { opacity: 0.1; } 30% { opacity: 1; transform: scale(1.5); } 45% { opacity: 0.2; } 60% { opacity: 1; transform: scale(1.4); } }
@keyframes ws-btns { 0%, 100% { opacity: 1; } 15%, 45%, 75% { opacity: 0.3; } 30%, 60% { opacity: 1; } }
@keyframes ws-squeeze { 0%, 100% { transform: none; } 25% { transform: scale(1.08, 0.88) rotate(-6deg); } 55% { transform: scale(0.96, 1.05); } }
@keyframes ws-drop { 0%, 20% { opacity: 0; transform: none; } 30% { opacity: 1; transform: translate(6px, -8px); } 100% { opacity: 0; transform: translate(26px, 40px); } }
@keyframes ws-toast { 0%, 100% { transform: none; } 12% { transform: translateY(6px); } 50% { transform: translateY(-58px) rotate(180deg); } 82% { transform: translateY(0) rotate(360deg); } 90% { transform: translateY(-5px) rotate(360deg); } }
@keyframes ws-lever { 0%, 100% { transform: none; } 10%, 70% { transform: translateY(10px); } }

/* ------------------------------------------------------------ Heart Hill */
.hl-fall { opacity: 0; }
.shed .hl-fall { animation: hl-fall 1.6s ease-in; }
.hl-oshut { opacity: 0; }
.hoot .hl-oeyes { animation: at-eyeo 1s steps(1); }
.hoot .hl-oshut { animation: at-eyec 1s steps(1); }
.hl-owl { transform-box: fill-box; transform-origin: 50% 100%; }
.hoot .hl-owl { animation: sc-boing 0.6s ease-out; }
.hl-mbody { transform-box: fill-box; transform-origin: center; }
.wink .hl-mbody { animation: sc-pop 0.6s ease-out; }
.hl-flag { transform-box: fill-box; transform-origin: 50% 0; }
.hl-flag.f0 { animation: hl-flag 2.6s ease-in-out infinite; }
.flutter .hl-flag { animation: hl-flag 0.4s ease-in-out 3; }
.hl-ff { transition: transform 1.1s cubic-bezier(.4,0,.2,1); }
.heart .hl-ff { transform: translate(var(--tx), var(--ty)); }
.hl-cake { transform-box: fill-box; transform-origin: 50% 100%; }
.yum .hl-cake { animation: sc-boing 0.6s ease-out; }
.hl-cakeheart { opacity: 0; transform-box: fill-box; transform-origin: center; }
.yum .hl-cakeheart { animation: hl-cakeheart 1.3s ease-out; }
.hl-trail { animation: hl-trail 0.55s ease-out forwards; }
.hl-burst { transform-box: fill-box; transform-origin: center; animation: hl-burst 1.6s cubic-bezier(.2,.8,.3,1) forwards; }

@keyframes hl-fall { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-14px, 64px) rotate(-30deg); } }
@keyframes hl-flag { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes hl-cakeheart { 0% { opacity: 0; transform: translateY(10px) scale(0.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50px) scale(1.2); } }
@keyframes hl-trail { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0.3; transform: translateY(var(--dy, -150px)); } }
@keyframes hl-burst { 0% { opacity: 1; transform: scale(0.1); } 55% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(10px) scale(1.12); } }

/* ------------------------------------------------------------ the story map */
.mp .map-node.later { opacity: 0.58; }
.mp .mp-marker, .mp .mp-ring { opacity: 0; }
.mp .map-node.next .mp-marker { opacity: 1; animation: rt 16s linear infinite; transform-box: fill-box; transform-origin: center; }
.mp .map-node.current .mp-ring { opacity: 1; }
.mp .map-node.next .mp-vig { animation: mp-pulse 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mp .mp-pin { animation: mp-pin 1.4s ease-in-out infinite; }
.mp .map-node:hover .mp-vig { transform: scale(1.04); transform-box: fill-box; transform-origin: center; transition: transform 0.2s; }
.mp-num { font: 800 13px/1 var(--font); fill: #fff; }

@keyframes mp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes mp-pin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ------------------------------------------------------------ less motion */
.reduce .scn, .reduce .scn * { animation: none !important; transition: none !important; }