.life { pointer-events: none; transition: filter 1s; }
.life__walk, .life__graze, .life__awake, .life__asleep { transition: opacity 1s, visibility 1s; }
.life__graze, .life__asleep { opacity: 0; visibility: hidden; }
.top:is(.phase-dawn, .phase-dusk, .phase-night) .life__walk,
.top:is(.phase-dawn, .phase-dusk, .phase-night) .life__awake { opacity: 0; visibility: hidden; }
.top.phase-dawn .life__graze,
.top:is(.phase-dawn, .phase-dusk, .phase-night) .life__asleep { opacity: 1; visibility: visible; }
.top.phase-dawn .life { filter: brightness(.96) sepia(.08); }
.top.phase-dusk .life { filter: brightness(.8) saturate(.85); }
.top.phase-night .life { filter: brightness(.45) saturate(.6); }
.top.phase-night .life__trough { opacity: .8; }

.life__pony { --swish-anim: lifeSwish; --coat: #c46a32; --far: #a5552a; --mane: #6b3518; --muzzle: #e8a77a; --patch: none; }
.life__pony--pinto { --coat: #fbf6ee; --far: #e2d9ca; --mane: #5a3418; --muzzle: #f0c9a0; --patch: #a8622f; }
.life__pony--dark { --coat: #4f382b; --far: #3a281e; --mane: #231711; --muzzle: #7a5a48; }
.life__coat { fill: var(--coat); }
.life__far { fill: var(--far); }
.life__mane { fill: var(--mane); }
.life__muzzle { fill: var(--muzzle); }
.life__patch { fill: var(--patch); }
.life__hoof { fill: #4a3426; }

.life__leg, .life__fleg { transform-box: fill-box; transform-origin: 50% 0; }
.life__leg { animation: var(--gait, none) .8s ease-in-out infinite alternate; animation-delay: var(--step, 0s); }
.life__leg--b { animation-delay: calc(var(--step, 0s) - .8s); }
.life__neck { transform: rotate(var(--pose, 0deg)); transform-box: view-box; transform-origin: 20px -42px; animation: var(--nod, none) var(--nod-time, 1.6s) ease-in-out infinite alternate; animation-delay: var(--step, 0s); }
/* The swish only runs on drawn ponies (<use> copies); the template in <defs> is never visible. */
.life__tail { transform-box: fill-box; transform-origin: 90% 5%; animation: var(--swish-anim, none) 3.2s ease-in-out infinite; animation-delay: var(--swish, 0s); }

.life__pony--go { --gait: lifeStep; --nod: lifeBob; --nod-time: .8s; }
.life__pony--eat { --nod: lifeChew; --nod-time: 1.1s; --pose: 52deg; }
.life__pony--eat2 { --nod: lifeGraze; --nod-time: 1.4s; --pose: 62deg; }
.life__pony--pinto { --step: -.3s; --swish: -1.4s; }
.life__pony--dark { --step: -.55s; --swish: -2.3s; }

.life__walker { animation: lifeWalk var(--dur, 40s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.life__turn { animation: lifeTurn var(--dur, 40s) linear infinite; animation-delay: var(--delay, 0s); }
.life__walker--chestnut { --d: 380px; --dur: 46s; --delay: -6s; }
.life__walker--pinto { --d: 340px; --dur: 40s; --delay: -24s; }
.life__walker--dark { --d: 300px; --dur: 52s; --delay: -36s; }
.life__walker--farmer { --d: 250px; --dur: 34s; --delay: -3s; }

.life__fleg { animation: lifeStride .8s ease-in-out infinite alternate; }
.life__fleg--b { animation-delay: -.8s; }
.life__bob { animation: lifeHop .8s ease-in-out infinite alternate; }
.life__wheel { transform-box: fill-box; transform-origin: 50% 50%; animation: lifeRoll 1.6s linear infinite; }

.life__ctail { transform-box: fill-box; transform-origin: 0% 90%; animation: lifeCatTail 2.6s ease-in-out infinite alternate; }
.life__ears { transform-box: fill-box; transform-origin: 50% 100%; animation: lifeEar 7s ease-in-out infinite; }
.life__lids { transform-box: fill-box; transform-origin: 50% 0; transform: scale(1, 0); animation: lifeBlink 5s linear infinite; }
.life__cat--ginger .life__ctail { animation-duration: 3.4s; }
.life__cat--ginger .life__ears { animation-delay: -3s; }
.life__cat--ginger .life__lids { animation-delay: -2.2s; animation-duration: 6.5s; }
.life__breathe { transform-box: fill-box; transform-origin: 50% 100%; animation: lifeBreathe 3.6s ease-in-out infinite; }
.life__z { transform-box: fill-box; transform-origin: 50% 50%; animation: lifeZ 3.6s ease-out infinite; }
.life__cat--ginger .life__z, .life__cat--ginger .life__breathe { animation-delay: -1.7s; }

@keyframes lifeStep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes lifeStride { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes lifeBob { from { transform: rotate(-3deg); } to { transform: rotate(2deg); } }
@keyframes lifeChew { from { transform: rotate(50deg); } to { transform: rotate(56deg); } }
@keyframes lifeGraze { from { transform: rotate(60deg); } to { transform: rotate(64deg); } }
@keyframes lifeHop { from { transform: translate(0, 0); } to { transform: translate(0, -1.2px); } }
@keyframes lifeSwish { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(14deg); } 60% { transform: rotate(-6deg); } }
@keyframes lifeRoll { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes lifeWalk {
  0% { transform: translate(0, 0); }
  46% { transform: translate(var(--d), 0); }
  50% { transform: translate(var(--d), 0); }
  96% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes lifeTurn {
  0%, 46% { transform: scale(1, 1); }
  49%, 96% { transform: scale(-1, 1); }
  99%, 100% { transform: scale(1, 1); }
}
@keyframes lifeCatTail { from { transform: rotate(-10deg); } to { transform: rotate(18deg); } }
@keyframes lifeEar { 0%, 88%, 100% { transform: rotate(0deg); } 91% { transform: rotate(-14deg); } 94% { transform: rotate(6deg); } }
@keyframes lifeBlink { 0%, 93%, 100% { transform: scale(1, 0); } 95.5% { transform: scale(1, 1); } }
@keyframes lifeBreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, 1.08); } }
@keyframes lifeZ { 0% { opacity: 0; transform: translate(0, 2px) scale(.6); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -10px) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  .life *, .life__walker, .life__turn { animation: none !important; }
  .life__z { opacity: .8; }
}

/* Night easter egg: a thief sneaks to the door and gets chased off with a broom by someone in a nightgown. */
.egg { pointer-events: none; filter: brightness(.85) saturate(.9); }
.egg[hidden] { display: none; }
.egg__actor { opacity: 0; }
.egg__leg { transform-box: fill-box; transform-origin: 50% 0; }
.egg__bob, .egg__sack, .egg__body { transform-box: view-box; }
.egg__swing { transform-box: view-box; transform-origin: 0 0; rotate: 32deg; }
/* Sneaking: crouched and leaning forward, knees lifted high, a pause after every step (synced with the JS stride). */
.egg__thief.is-sneak .egg__body { rotate: 7deg; }
.egg__actor.is-sneak .egg__leg { animation: eggSneakLeg var(--sneak, 1.5s) ease-in-out infinite; }
.egg__actor.is-sneak .egg__leg--b { animation-delay: calc(var(--sneak, 1.5s) / -2); }
.egg__actor.is-sneak .egg__bob { animation: eggSneakBob calc(var(--sneak, 1.5s) / 2) ease-in-out infinite; }
.egg__thief.is-sneak .egg__arm { rotate: -38deg; }
/* On tiptoe: the heel lifts and the boot stands on its toe. */
.egg__boot { transform-box: view-box; transition: rotate .25s; }
.egg__thief.is-sneak .egg__boot { rotate: 16deg; }
/* Knees slightly bent while sneaking (more when the foot is lifted), so he stands on the ground instead of dangling. */
.egg__shin { transform-box: view-box; transition: rotate .25s; }
.egg__thief.is-sneak .egg__shin { animation: eggSneakShin var(--sneak, 1.5s) ease-in-out infinite; }
.egg__thief.is-sneak .egg__leg--b .egg__shin { animation-delay: calc(var(--sneak, 1.5s) / -2); }
.egg__thief.is-sneak .egg__body { translate: 0 1.5px; }
.egg__arm { transform-box: view-box; transform-origin: 5px -42px; transition: rotate .3s; }
.egg__actor.is-run .egg__leg { animation: eggRun .17s ease-in-out infinite alternate; }
.egg__actor.is-run .egg__leg--b { animation-delay: -.17s; }
.egg__actor.is-run .egg__bob { animation: eggHop .17s ease-in-out infinite alternate; }
.egg__thief.is-run .egg__sack { animation: eggSack .17s ease-in-out infinite alternate; }
.egg__thief.is-look .egg__eyes { animation: eggLook 1.2s ease-in-out; }
.egg__sleeper.is-swing .egg__swing { animation: eggSwing .42s ease-in-out 2; }
.egg__sleeper.is-run .egg__swing { animation: eggWave .26s ease-in-out infinite alternate; }
.egg__alert text { font: 900 24px 'Baloo 2', 'Trebuchet MS', sans-serif; fill: #ffd166; stroke: #3d2b1f; stroke-width: 3; paint-order: stroke; }
.egg__alert { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.egg__actor.is-alert .egg__alert { animation: eggAlert 1.1s ease-out forwards; }
.egg__mouth { transform-box: fill-box; transform-origin: 50% 50%; transition: scale .15s; }
.egg__sleeper.is-alert .egg__mouth, .egg__sleeper.is-run .egg__mouth { scale: 1.6 2.2; }
.scene__door.is-ajar .scene__door-leaf { transform: scaleX(.28) skewY(-6deg); }
.scene__door.is-ajar .scene__door-inside { fill: #ffd27a; }
.scene__door.is-ajar .scene__door-inside-shade { opacity: 0; }
/* Clicking the door during the thief scene still opens it fully. */
.scene__door.is-entering .scene__door-leaf { transform: scaleX(.12) skewY(-8deg); }

@keyframes eggSneakLeg {
  0% { rotate: 0deg; translate: 0 0; }
  9% { rotate: -50deg; translate: 0 -7px; }
  20% { rotate: -30deg; translate: 0 -4px; }
  28% { rotate: -6deg; translate: 0 -1px; }
  32%, 50% { rotate: -14deg; translate: 0 0; }
  78% { rotate: 2deg; translate: 0 0; }
  82%, 100% { rotate: 0deg; translate: 0 0; }
}
@keyframes eggSneakShin { 0% { rotate: 22deg; } 9% { rotate: 62deg; } 20% { rotate: 45deg; } 30%, 100% { rotate: 22deg; } }
@keyframes eggSneakBob { 0% { translate: 0 1px; } 18% { translate: 0 -3.5px; } 56%, 100% { translate: 0 1px; } }
@keyframes eggRun { from { rotate: -38deg; } to { rotate: 38deg; } }
@keyframes eggHop { from { translate: 0 0; } to { translate: 0 -3px; } }
@keyframes eggSack { from { rotate: -4deg; } to { rotate: 5deg; } }
@keyframes eggLook { 0%, 100% { translate: 0 0; } 25%, 40% { translate: -1.6px 0; } 60%, 80% { translate: 1px 0; } }
@keyframes eggSwing { 0% { rotate: 32deg; } 40% { rotate: -125deg; } 75% { rotate: 40deg; } 100% { rotate: 32deg; } }
@keyframes eggWave { from { rotate: -140deg; } to { rotate: -70deg; } }
@keyframes eggAlert { 0% { opacity: 0; scale: .4; translate: 0 6px; } 20% { opacity: 1; scale: 1.2; translate: 0 0; } 35% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: 0 -6px; } }

@media (max-width: 700px) {
  .egg { display: none; }
}

/* Animations use `transform` (not the separate rotate/translate/scale properties): only then can Chrome hand
   SVG animations to the GPU instead of repainting the whole scene on the main thread every frame. */

/* Header scrolled out of view: everything in it stands still until it comes back. */
.top.is-offscreen *, .top.is-offscreen *::before, .top.is-offscreen *::after { animation-play-state: paused !important; }

/* ===== Seasons ===== */
.season { display: none; pointer-events: none; }
.top.season-winter .season--winter, .top.season-spring .season--spring, .top.is-xmas .season--xmas { display: inline; }
.season__snow { fill: #f5f9ff; stroke: #dbe6f5; stroke-width: 1; }
.season__snow--ground { fill: #f0f6ff; opacity: .9; }
.top.phase-dusk .season--winter, .top.phase-dusk .season--spring { filter: brightness(.8) saturate(.85); }
.top.phase-night .season--winter { filter: brightness(.62) saturate(.8); }
.top.phase-night .season--spring { filter: brightness(.45) saturate(.6); }
.top.phase-dawn .season--spring { filter: brightness(.96) sepia(.08); }

.flower__sway { transform-box: view-box; transform-origin: 0 0; animation: flowerSway 3.2s ease-in-out infinite alternate; animation-delay: var(--sway-delay, 0s); }
.top:is(.phase-dusk, .phase-night) .flower__sway { animation: none; }
@keyframes flowerSway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

.xmas__wire { fill: none; stroke: #2e4630; stroke-width: 1.4; }
.xmas__glass { fill: var(--bulb); }
.xmas__halo { fill: var(--bulb); opacity: 0; transition: opacity 1s; }
.top:is(.phase-dusk, .phase-night) .xmas__halo { opacity: .28; }
.xmas__bulb { animation: bulbBlink 2.4s steps(2, jump-none) infinite; animation-delay: var(--blink-delay, 0s); }
@keyframes bulbBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .45; } }

/* Snow and leaves: HTML particles over the scene, moved only with compositor-friendly translate/rotate. */
.particles { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.particles i { position: absolute; top: -40px; width: var(--size); height: var(--size); animation: particleFall var(--dur) linear infinite; animation-delay: var(--delay); will-change: translate; }
.particles--winter i { border-radius: 50%; background: #fff; }
.particles--autumn i { background: var(--leaf); border-radius: 0 70% 0 70%; animation-name: leafFall; }
@keyframes particleFall { from { translate: 0 0; } to { translate: var(--drift) calc(min(42vw, 600px) + 80px); } }
@keyframes leafFall {
  0% { translate: 0 0; rotate: 0deg; }
  25% { translate: calc(var(--drift) * .6) calc((min(42vw, 600px) + 80px) * .25); }
  50% { translate: calc(var(--drift) * -.4) calc((min(42vw, 600px) + 80px) * .5); }
  75% { translate: calc(var(--drift) * .8) calc((min(42vw, 600px) + 80px) * .75); }
  100% { translate: var(--drift) calc(min(42vw, 600px) + 80px); rotate: var(--spin); }
}

/* ===== Surprises ===== */
.surprise { pointer-events: none; }
.surprise[hidden] { display: none; }
.top.phase-dawn .surprise { filter: brightness(.96) sepia(.08); }
.top.phase-dusk .surprise { filter: brightness(.8) saturate(.85); }
.top.phase-night .surprise:not(.surprise--fireflies) { filter: brightness(.7) saturate(.8); }

.rooster { opacity: 0; }
.rooster__head, .rooster__beak-top, .rooster__beak-low, .rooster__wing, .rooster__tail { transform-box: view-box; transition: rotate .25s; }
.rooster__head { transform-origin: 6px -26px; }
.rooster__beak-top { transform-origin: 15px -31px; }
.rooster__beak-low { transform-origin: 15px -30px; }
.rooster__wing { transform-origin: -6px -20px; }
.rooster__tail { transform-origin: -9px -22px; }
.surprise--rooster.is-crow .rooster__head { rotate: -28deg; }
.surprise--rooster.is-crow .rooster__beak-top { rotate: -18deg; }
.surprise--rooster.is-crow .rooster__beak-low { rotate: 24deg; }
.surprise--rooster.is-crow .rooster__wing { animation: roosterFlap .18s ease-in-out infinite alternate; }
.surprise--rooster.is-crow .rooster__tail { rotate: 8deg; }
.surprise__bubble { opacity: 0; transform-box: fill-box; transform-origin: 0% 100%; }
.surprise__bubble text { font: 800 13px 'Baloo 2', 'Trebuchet MS', sans-serif; fill: #3d2b1f; }
.surprise--rooster.is-crow .surprise__bubble { animation: bubblePop 1.5s ease-out forwards; }
@keyframes roosterFlap { from { rotate: 0deg; } to { rotate: -38deg; } }
@keyframes bubblePop { 0% { opacity: 0; scale: .3; } 15% { opacity: 1; scale: 1.1; } 25% { scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

.runner.is-run .leg-a { animation: legSwap .22s steps(1) infinite; }
.runner.is-run .leg-b { animation: legSwap .22s steps(1) infinite reverse; }
.runner.is-run .runner__flip > *:not(.runner__legs) { animation: runBounce .22s ease-in-out infinite alternate; }
.runner__tail, .dog__ear { transform-box: fill-box; transform-origin: 100% 100%; }
.runner--dog.is-run .dog__ear { animation: earFlap .22s ease-in-out infinite alternate; }
@keyframes legSwap { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes runBounce { from { translate: 0 0; } to { translate: 0 -3px; } }
@keyframes earFlap { from { rotate: -10deg; } to { rotate: 25deg; } }

.sbird__wing { transform-box: view-box; transform-origin: 0 -6px; }
.surprise--bird.is-flying .sbird__wing { animation: wingFlap .14s ease-in-out infinite alternate; }
.sbird__body { transform-box: view-box; transform-origin: 0 4px; transition: rotate .15s; }
.surprise--bird.is-peck .sbird__body { animation: peck .35s ease-in-out 2; }
@keyframes wingFlap { from { transform: scale(1, 1); } to { transform: scale(1, -1); } }
@keyframes peck { 50% { rotate: 32deg; } }

.foal__buck { transform-box: view-box; transform-origin: 0 0; }
.surprise--foal .life__pony { --gait: none; }
.surprise--foal.is-run .life__pony { --gait: lifeStep; }

.bat { opacity: 0; }
.bat__wings { transform-box: view-box; transform-origin: 0 0; animation: batFlap .16s ease-in-out infinite alternate; }
@keyframes batFlap { from { transform: scale(1, 1); } to { transform: scale(1, -.6); } }

.owl { opacity: 1; }
.owl__lids { transform-box: fill-box; transform-origin: 50% 0; scale: 1 0; transition: scale .1s; }
.surprise--owl.is-blink .owl__lids { scale: 1 1; }
.owl__head { transform-box: view-box; transform-origin: 0 -18px; transition: rotate .5s ease-in-out, translate .5s; }
.surprise--owl.is-turned .owl__head { rotate: -16deg; translate: -2px 0; }

.firefly__glow { animation: fireflyGlow var(--fly-dur, 6s) ease-in-out infinite; animation-delay: var(--fly-delay, 0s); }
.firefly circle:first-child { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes fireflyGlow {
  0%, 100% { transform: translate(0, 0); opacity: .2; }
  25% { transform: translate(14px, -10px); opacity: 1; }
  50% { transform: translate(24px, 4px); opacity: .35; }
  75% { transform: translate(8px, 12px); opacity: .95; }
}

.shooting-star { position: absolute; width: 190px; height: 3px; border-radius: 3px; rotate: 25deg; transform-origin: 100% 50%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25) 40%, #fff); box-shadow: 0 0 8px rgba(255, 255, 255, .8); pointer-events: none; }
.shooting-star::after { content: ""; position: absolute; right: -4px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(255, 250, 210, .9); }

/* Phones: no moving extras (static seasonal decorations stay). */
@media (max-width: 700px) {
  .particles, .surprise, .shooting-star { display: none !important; }
  .flower__sway, .xmas__bulb { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .particles { display: none; }
  .flower__sway, .xmas__bulb { animation: none; }
}


/* Per-item timing (the site's security policy forbids style attributes in the markup). */
.season--spring .flower:nth-child(1) { --sway-delay: 0.00s; }
.season--spring .flower:nth-child(2) { --sway-delay: -0.37s; }
.season--spring .flower:nth-child(3) { --sway-delay: -0.74s; }
.season--spring .flower:nth-child(4) { --sway-delay: -1.11s; }
.season--spring .flower:nth-child(5) { --sway-delay: -1.48s; }
.season--spring .flower:nth-child(6) { --sway-delay: -1.85s; }
.season--spring .flower:nth-child(7) { --sway-delay: -2.22s; }
.season--spring .flower:nth-child(8) { --sway-delay: -2.59s; }
.season--spring .flower:nth-child(9) { --sway-delay: -2.96s; }
.season--spring .flower:nth-child(10) { --sway-delay: -3.33s; }
.season--spring .flower:nth-child(11) { --sway-delay: -3.70s; }
.season--spring .flower:nth-child(12) { --sway-delay: -4.07s; }
.season--spring .flower:nth-child(13) { --sway-delay: -4.44s; }
.season--spring .flower:nth-child(14) { --sway-delay: -4.81s; }
.surprise--fireflies .firefly:nth-of-type(1) .firefly__glow { --fly-delay: 0.00s; --fly-dur: 5s; }
.surprise--fireflies .firefly:nth-of-type(2) .firefly__glow { --fly-delay: -0.53s; --fly-dur: 6s; }
.surprise--fireflies .firefly:nth-of-type(3) .firefly__glow { --fly-delay: -1.06s; --fly-dur: 7s; }
.surprise--fireflies .firefly:nth-of-type(4) .firefly__glow { --fly-delay: -1.59s; --fly-dur: 8s; }
.surprise--fireflies .firefly:nth-of-type(5) .firefly__glow { --fly-delay: -2.12s; --fly-dur: 5s; }
.surprise--fireflies .firefly:nth-of-type(6) .firefly__glow { --fly-delay: -2.65s; --fly-dur: 6s; }
.surprise--fireflies .firefly:nth-of-type(7) .firefly__glow { --fly-delay: -3.18s; --fly-dur: 7s; }
.surprise--fireflies .firefly:nth-of-type(8) .firefly__glow { --fly-delay: -3.71s; --fly-dur: 8s; }
.surprise--fireflies .firefly:nth-of-type(9) .firefly__glow { --fly-delay: -4.24s; --fly-dur: 5s; }
.surprise--fireflies .firefly:nth-of-type(10) .firefly__glow { --fly-delay: -4.77s; --fly-dur: 6s; }
.surprise--fireflies .firefly:nth-of-type(11) .firefly__glow { --fly-delay: -5.30s; --fly-dur: 7s; }
.surprise--fireflies .firefly:nth-of-type(12) .firefly__glow { --fly-delay: -5.83s; --fly-dur: 8s; }
.surprise--fireflies .firefly:nth-of-type(13) .firefly__glow { --fly-delay: -6.36s; --fly-dur: 5s; }
.surprise--fireflies .firefly:nth-of-type(14) .firefly__glow { --fly-delay: -6.89s; --fly-dur: 6s; }
.surprise--fireflies .firefly:nth-of-type(15) .firefly__glow { --fly-delay: -7.42s; --fly-dur: 7s; }
.surprise--fireflies .firefly:nth-of-type(16) .firefly__glow { --fly-delay: -7.95s; --fly-dur: 8s; }

/* Animations nobody can see are paused: groups faded out for the current time of day (marked data-idle by JS once
   the fade has finished), hidden surprises, flowers out of spring and the whole header when scrolled away.
   A custom property is used because selectors cannot reach the parts inside <use> copies, but inherited values do. */
.life__leg, .life__neck, .life__tail, .life__walker, .life__turn, .life__fleg, .life__bob, .life__wheel,
.life__ctail, .life__ears, .life__lids, .life__breathe, .life__z { animation-play-state: var(--life-play, running); }
.top.is-offscreen, .life [data-idle], .surprise[hidden] { --life-play: paused; }
.surprise[hidden] *, .top:not(.season-spring) .flower__sway { animation-play-state: paused; }