:root { color-scheme: light; font-family: ui-rounded, 'Avenir Next', system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #d5e5df; }
.scene { --sky:#bedde2; --sand:#d8c7a6; --sand-deep:#b6a27e; --tree:#49745a; --tree-light:#7b9c67; --tree-distant:#98afa0; --ivy:#516f49; --ivy-light:#8a9e61; --water:#4f8176; --elephant:#879991; --elephant-light:#b3bfb1; --elephant-dark:#586e65; width:100%; height:100%; }
.scene svg { display:block; width:100%; height:100%; }
.scene[data-season=spring] { --tree:#557f51; --tree-light:#a1b975; --tree-distant:#adc19e; --ivy:#5b804c; --ivy-light:#a0b46e; --sand:#dfcfac; }
.scene[data-season=autumn] { --tree:#817c47; --tree-light:#c5a45e; --tree-distant:#94a18a; --ivy:#5f754c; --ivy-light:#a4a365; --sand:#d8c5a4; --water:#567b6b; }
.scene[data-season=winter] { --tree:#67766a; --tree-light:#939b85; --tree-distant:#a4b0a5; --ivy:#637564; --ivy-light:#97a28a; --sand:#c5c1af; --sand-deep:#a5a48e; --sky:#cfdee3; --water:#688a8b; }
.sky { fill:var(--sky); } .sand { fill:var(--sand); } .sand-deep { fill:var(--sand-deep); }
.foliage { fill:var(--tree); } .foliage-light { fill:var(--tree-light); } .water { fill:var(--water); }
.distant-foliage { fill:var(--tree-distant); }
.roof-green { fill:var(--ivy); } .roof-green-light { fill:var(--ivy-light); }
.roof-grass,.ivy-trail { fill:none; stroke:var(--ivy); stroke-width:2; stroke-linecap:round; }
.sparse-grass { stroke:var(--ivy); opacity:.65; }
.skin { fill:var(--elephant); } .skin-light { fill:var(--elephant-light); } .skin-dark { fill:var(--elephant-dark); }
.skin-line { fill:none; stroke:var(--elephant-dark); stroke-width:2; stroke-linecap:round; opacity:.6; }
.sky,.sand,.sand-deep,.foliage,.foliage-light,.water,.distant-foliage,.roof-green,.roof-green-light { transition:fill 1.2s ease-in-out; }
#indoor { display:none; }
[data-mode=night] #outdoor { display:none; } [data-mode=night] #indoor { display:block; }
[data-mode=loading] .elephants, [data-presence=empty] .elephants, [data-presence=no-data] .elephants { display:none; }
.no-data-sign { display:none; }
[data-presence=no-data]:not([data-mode=loading]) .no-data-sign { display:block; }
.no-data-question { transform-box:fill-box; transform-origin:center; animation:question-bob 6.3s -1.9s ease-in-out infinite; }
.uncertain-sign,.curious-brow { display:none; }
[data-presence=uncertain] .uncertain-sign,[data-presence=uncertain] .curious-brow { display:block; }
[data-presence=uncertain] .relaxed-brow { display:none; }
.curious-brow { fill:none; stroke:#40594f; stroke-width:3.3; stroke-linecap:round; }
[data-presence=uncertain] .curious-glance { animation:curious-glance 9.3s -2.1s ease-in-out infinite; }
[data-presence=uncertain] .calf .curious-glance { animation-duration:7.7s; animation-delay:-4.6s; }
[data-presence=uncertain] .adult .trunk { animation:curious-trunk 8.1s -3.4s ease-in-out infinite; }
[data-presence=uncertain] .calf .trunk { animation:curious-trunk 6.7s -1.2s ease-in-out infinite; }
.question-bubble { animation:question-bob 6.3s -1.9s ease-in-out infinite; }
.spring-only,.autumn-only,.snow-cover { display:none; }
[data-season=spring] .spring-only,[data-season=autumn] .autumn-only,[data-weather=snow] .snow-cover { display:block; }
.scene-target { cursor:pointer; touch-action:pan-y; -webkit-tap-highlight-color:transparent; outline:none; }
.scene-target:focus-visible .focus-ring { stroke:#fff4b8; stroke-width:4; }
.focus-ring { fill:transparent; stroke:transparent; pointer-events:all; }
.cloud { animation:cloud 39s -13s ease-in-out infinite alternate; }
.cloud.two { animation-duration:53s; animation-delay:-31s; }
.cloud.three { animation-duration:47s; animation-delay:-5s; }
.sun-halo { animation:halo 12.3s -4.1s ease-in-out infinite; }
[data-weather=cloudy] .sun,[data-weather=rain] .sun,[data-weather=snow] .sun,[data-weather=fog] .sun { opacity:0; }
.sun { transition:opacity 1.5s ease-in-out; }
.tree-top { transform-box:fill-box; transform-origin:center bottom; animation:tree 9.7s -3s ease-in-out infinite; }
.tree-top.second { animation-duration:12.1s; animation-delay:-7s; }
.reeds { transform-box:fill-box; transform-origin:center bottom; animation:reed 6.9s -2s ease-in-out infinite; }
.reeds.right { animation-duration:8.3s; animation-delay:-5s; }
[data-wind=breezy] .reeds { animation-duration:3.4s; }
[data-wind=storm] .reeds { animation:wind-reed 2.3s -.5s ease-in-out infinite; }
[data-wind=storm] .tree-top { animation:wind-tree 4.7s -1.8s ease-in-out infinite; }
.water-line { animation:water 7.3s -2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.water-line:nth-child(2n) { animation-duration:9.1s; animation-delay:-5s; }
.duck-drift { animation:duck-drift 29s -8s ease-in-out infinite alternate; }
.second .duck-drift { animation-duration:37s; animation-delay:-23s; }
.third .duck-drift { animation-duration:43s; animation-delay:-12s; }
.duck-bob { animation:duck-bob 3.7s -.9s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.second .duck-bob { animation-duration:4.3s; animation-delay:-2.3s; }
.third .duck-bob { animation-duration:3.1s; animation-delay:-1.7s; }
.duck-wake { animation:water 5.9s -1.3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.adult-breathe { animation:elephant-breathe 6.7s -2.1s ease-in-out infinite; transform-origin:160px 197px; }
.calf-breathe { animation:elephant-breathe 5.3s -3.4s ease-in-out infinite; transform-origin:160px 197px; }
.ear { animation:ear 3.63s -.61s ease-in-out infinite; transform-origin:94px 74px; }
.calf .ear { animation-duration:2.87s; animation-delay:-1.93s; }
.trunk { animation:trunk 4.37s -2.9s ease-in-out infinite; transform-origin:36px 84px; }
.calf .trunk { animation-duration:3.47s; animation-delay:-.7s; }
.tail { animation:tail 3.21s -1.7s ease-in-out infinite; transform-origin:249px 77px; }
.calf .tail { animation-duration:2.69s; animation-delay:-.4s; }
.eye { animation:blink 12.7s -3.3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.calf .eye { animation-duration:10.1s; animation-delay:-7.2s; }
.sleep-breathe { transform-box:fill-box; transform-origin:center bottom; animation:sleep 8.7s -2.4s ease-in-out infinite; }
.sleeping-calf .sleep-breathe { animation-duration:6.9s; animation-delay:-4.6s; }
.night-elephants-awake { display:none; }
[data-mode=night][data-night-phase=evening] .night-elephants-awake,
[data-mode=night][data-night-phase=mischief] .night-elephants-awake,
[data-mode=night][data-night-phase=morning] .night-elephants-awake { display:block; }
[data-mode=night][data-night-phase=evening] .sleeping-adult,
[data-mode=night][data-night-phase=evening] .sleeping-calf,
[data-mode=night][data-night-phase=mischief] .sleeping-adult,
[data-mode=night][data-night-phase=mischief] .sleeping-calf,
[data-mode=night][data-night-phase=morning] .sleeping-adult,
[data-mode=night][data-night-phase=morning] .sleeping-calf { display:none; }
.night-adult-breathe { animation:elephant-breathe 8.9s -3.1s ease-in-out infinite; transform-origin:160px 197px; }
.night-calf-breathe { animation:elephant-breathe 6.7s -1.6s ease-in-out infinite; transform-origin:160px 197px; }
.sleep-eye-open { display:none; }
.sleep-ear { transform-origin:122px 91px; }
.lamp-glow { animation:halo 13.7s -3s ease-in-out infinite; }
.roof-star { transform-box:fill-box; transform-origin:center; animation:twinkle 7.9s -2s ease-in-out infinite; }
.roof-star.second { animation-duration:11.3s; animation-delay:-6s; }
.keeper-sway { display:none; transform-origin:659px 457px; animation:keeper 10.3s -4.2s ease-in-out infinite; }
[data-mode=night][data-night-phase=bedtime] .keeper-sway { display:block; }
.keeper-head { transform-origin:661px 292px; animation:keeper-head 8.1s -3s ease-in-out infinite; }
.reading .keeper-head { animation-duration:3.9s; }
.reading-note { opacity:0; } .reading .reading-note { animation:note 5.7s ease-in-out infinite; }
.reading .reading-note.second { animation-delay:2.1s; }
.sleep-z { display:none; animation:zzz 8.3s -1.4s ease-in-out infinite; }
[data-mode=night][data-night-phase=sleep] .sleep-z { display:block; }
.sleep-z.second { animation-duration:9.9s; animation-delay:-6.1s; }
.roof-dust { animation:dust 13.1s -5s ease-in-out infinite; }
.weather-rain,.weather-snow,.weather-fog,.wind-strokes,.rain-pools,.weather-shade { display:none; pointer-events:none; }
[data-weather=rain] .weather-rain,[data-weather=rain] .rain-pools,[data-weather=snow] .weather-snow,[data-weather=fog] .weather-fog,[data-wind=storm] .wind-strokes { display:block; }
[data-weather=rain] .weather-shade,[data-weather=snow] .weather-shade,[data-weather=cloudy] .weather-shade { display:block; opacity:.07; }
[data-weather=rain] .weather-shade { opacity:.14; }
.rain-streak { animation:rain 1.9s -.8s ease-in-out infinite; }
.rain-streak:nth-child(3n) { animation-duration:1.43s; animation-delay:-.3s; }
.rain-streak:nth-child(3n+1) { animation-duration:2.27s; animation-delay:-1.2s; }
[data-wind=storm] .rain-streak { animation-name:wind-rain; }
.snow-flake { animation:snow 12.3s -5.1s ease-in-out infinite; }
.snow-flake:nth-child(3n) { animation-duration:16.7s; animation-delay:-11s; }
.snow-flake:nth-child(3n+1) { animation-duration:9.1s; animation-delay:-2.3s; }
.fog-bank { animation:cloud 28.7s -12s ease-in-out infinite alternate; }
.rain-pool { animation:pool 3.7s -1.1s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.rain-pool:nth-child(2n) { animation-duration:4.9s; animation-delay:-3s; }
.wind-stroke { animation:wind-line 5.3s -1s ease-in-out infinite; }
.event { display:none; pointer-events:none; }
[data-event=duck-dive] .duck-first .duck-action { animation:duck-dive 5.6s ease-in-out both; transform-origin:0 0; }
[data-event=duck-parade] .event-duck-parade { display:block; animation:parade 13s ease-in-out both; }
[data-event=duck-meeting] .second .duck-drift { animation:meeting-left 10s ease-in-out both; }
[data-event=duck-meeting] .third .duck-drift { animation:meeting-right 10s ease-in-out both; }
[data-event=duck-meeting] .event-quack { display:block; animation:appear 10s ease-in-out both; }
[data-event=bird-visit] .event-bird { display:block; animation:bird-visit 10s ease-in-out both; }
.bird-wing { transform-origin:0 0; animation:wing .73s ease-in-out infinite alternate; }
[data-event=butterfly] .event-butterfly { display:block; animation:butterfly 12s ease-in-out both; }
.butterfly-wing { transform-origin:center; transform-box:fill-box; animation:butterfly-wing .81s ease-in-out infinite alternate; }
[data-event=dragonfly] .event-dragonfly { display:block; animation:dragonfly 9s ease-in-out both; }
[data-event=leaf-boat] .event-leaf { display:block; animation:leaf-boat 13s ease-in-out both; }
[data-event=feather] .event-feather { display:block; animation:feather 12s ease-in-out both; }
[data-event=snail] .event-snail { display:block; animation:snail 16s ease-in-out both; }
[data-event=frog-splash] .event-frog { display:block; animation:appear 8s ease-in-out both; }
[data-event=frog-splash] .frog-hop { animation:frog-hop 2.4s .8s ease-in-out 3; transform-origin:690px 450px; }
[data-event=cloud-elephant] .event-cloud-elephant { display:block; animation:cloud-elephant 12s ease-in-out both; }
[data-event=snow-shake] .event-snow-shake { display:block; animation:snow-shake 6s ease-in-out both; }
[data-event=snow-shake] .duck-first .duck-action { animation:duck-shake .65s 1s ease-in-out 4; }
[data-event=water] .adult .trunk { animation:trunk-spray 6s ease-in-out both; }
[data-event=water] .event-water { display:block; }
[data-event=water] .spray-drop { animation:spray 2.3s 1.3s ease-in-out both; }
[data-event=water] .spray-drop:nth-child(2n) { animation-delay:1.7s; }
[data-event=calf-greeting] .calf .ear { animation:ear 1s ease-in-out 5; }
[data-event=calf-greeting] .calf .trunk { animation:trunk-hello 6s ease-in-out both; }
[data-event=dust-bath] .event-dust { display:block; animation:appear 7s ease-in-out both; }
[data-event=dust-bath] .dust-puff { animation:dust-puff 3.4s 1s ease-in-out both; transform-box:fill-box; transform-origin:center bottom; }
[data-event=shooting-star] .event-shooting-star { display:block; animation:shooting-star 4.7s ease-in-out both; }
[data-event=apple-dream] .event-dream { display:block; animation:dream 11s ease-in-out both; }
[data-event=page-turn] .turning-page { animation:page-turn 7s ease-in-out both; transform-origin:660px 379px; }
[data-event=owl] .event-owl { display:block; animation:owl 12s ease-in-out both; }
[data-event=owl] .owl-eyes { animation:blink 5.3s -1s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
[data-event=mouse] .event-mouse { display:block; }
[data-event=mouse] .mouse-run { animation:mouse-run 9s ease-in-out both; }
[data-event=apple-balance] .event-apple-balance { display:block; animation:apple-balance 8.5s ease-in-out both; transform-origin:474px 319px; }
[data-event=apple-balance] .night-awake-calf .trunk { animation:trunk-hello 8.5s ease-in-out both; }
.scene.is-paused *, .scene.is-paused *::before { animation-play-state:paused !important; }
@keyframes cloud { from {transform:translateX(-18px)} to {transform:translateX(34px)} }
@keyframes halo { 0%,100% {opacity:.55} 50% {opacity:.9} }
@keyframes tree { 0%,100%{transform:rotate(-.5deg)} 50%{transform:rotate(.7deg)} }
@keyframes reed { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(3deg)} }
@keyframes wind-reed { 0%,100%{transform:rotate(-9deg)} 50%{transform:rotate(8deg)} }
@keyframes wind-tree { 0%,100%{transform:skewX(-2deg)} 50%{transform:skewX(3deg)} }
@keyframes water { 0%,100%{opacity:.3;transform:scaleX(.93)} 50%{opacity:.65;transform:scaleX(1.05)} }
@keyframes duck-drift { from{transform:translateX(-15px)} to{transform:translateX(32px)} }
@keyframes duck-bob { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(1.8px) rotate(1deg)} }
@keyframes elephant-breathe { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.012)} }
@keyframes ear { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-5deg) scaleX(.97)} }
@keyframes trunk { 0%,100%{transform:rotate(-1deg)} 50%{transform:rotate(4deg)} }
@keyframes tail { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(7deg)} }
@keyframes blink { 0%,43%,46%,100%{transform:scaleY(1)} 44.5%{transform:scaleY(.08)} }
@keyframes sleep { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.018)} }
@keyframes twinkle { 0%,100%{opacity:.45;transform:scale(.95)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes keeper { 0%,100%{transform:rotate(-.6deg)} 50%{transform:rotate(.6deg)} }
@keyframes keeper-head { 0%,100%{transform:rotate(1deg)} 55%{transform:rotate(-2deg)} }
@keyframes note { 0%,100%{opacity:0;transform:translate(0,8px)} 30%{opacity:.7} 85%{opacity:0;transform:translate(-15px,-38px)} }
@keyframes zzz { 0%,100%{opacity:0;transform:translateY(8px)} 20%{opacity:.55} 90%{opacity:0;transform:translate(12px,-30px)} }
@keyframes dust { 0%,100%{opacity:.2;transform:translateY(0)} 50%{opacity:.5;transform:translateY(-8px)} }
@keyframes rain { from{transform:translate(0,-80px);opacity:0} 20%,80%{opacity:.7} to{transform:translate(-14px,190px);opacity:0} }
@keyframes wind-rain { from{transform:translate(65px,-80px);opacity:0} 20%,80%{opacity:.7} to{transform:translate(-75px,190px);opacity:0} }
@keyframes snow { from{transform:translate(0,-40px);opacity:0} 15%,85%{opacity:.9} 50%{transform:translate(15px,140px)} to{transform:translate(-12px,320px);opacity:0} }
@keyframes pool { 0%,100%{transform:scale(.65);opacity:0} 35%{opacity:.6} 90%{transform:scale(1.4);opacity:0} }
@keyframes wind-line { 0%,100%{opacity:0;transform:translateX(-30px)} 40%{opacity:.45} 90%{opacity:0;transform:translateX(85px)} }
@keyframes appear { 0%,100%{opacity:0} 18%,80%{opacity:1} }
@keyframes duck-dive { 0%,100%{transform:rotate(0)} 25%,65%{transform:rotate(66deg) translate(3px,2px)} }
@keyframes parade { 0%{transform:translate(-150px,451px);opacity:0} 10%,85%{opacity:1} 100%{transform:translate(890px,451px);opacity:0} }
@keyframes meeting-left { 0%,100%{transform:translateX(0)} 35%,70%{transform:translateX(76px)} }
@keyframes meeting-right { 0%,100%{transform:translateX(0)} 35%,70%{transform:translateX(-181px)} }
@keyframes bird-visit { 0%{transform:translate(-40px,130px);opacity:0} 12%{opacity:1} 35%,70%{transform:translate(451px,123px)} 100%{transform:translate(850px,-40px);opacity:0} }
@keyframes wing { from{transform:scaleY(.45)} to{transform:scaleY(1)} }
@keyframes butterfly-wing { from{transform:scaleX(.35)} to{transform:scaleX(1)} }
@keyframes butterfly { 0%{transform:translate(-30px,280px);opacity:0} 15%{opacity:1;transform:translate(145px,246px)} 38%{transform:translate(260px,180px)} 58%{transform:translate(325px,225px)} 78%{transform:translate(505px,167px)} 100%{transform:translate(840px,215px);opacity:0} }
@keyframes dragonfly { 0%{transform:translate(840px,414px);opacity:0} 20%{opacity:1;transform:translate(480px,397px)} 35%,55%{transform:translate(340px,410px)} 80%{transform:translate(115px,397px);opacity:1} 100%{transform:translate(-50px,370px);opacity:0} }
@keyframes leaf-boat { 0%{transform:translate(-40px,461px);opacity:0} 15%,85%{opacity:1} 50%{transform:translate(310px,449px) rotate(-4deg)} 100%{transform:translate(840px,459px);opacity:0} }
@keyframes feather { 0%{transform:translate(485px,130px) rotate(-30deg);opacity:0} 15%{opacity:1} 40%{transform:translate(380px,221px) rotate(25deg)} 70%{transform:translate(465px,295px) rotate(-25deg)} 100%{transform:translate(400px,385px) rotate(70deg);opacity:0} }
@keyframes snail { 0%,100%{opacity:0} 12%,88%{opacity:1} from{transform:translate(665px,346px)} to{transform:translate(721px,346px)} }
@keyframes frog-hop { 0%,100%{transform:translateY(0) scaleY(1)} 45%{transform:translateY(-38px) scaleY(1.08)} 70%{transform:translateY(2px) scaleY(.9)} }
@keyframes cloud-elephant { 0%,100%{opacity:0;transform:translateX(-35px)} 20%,80%{opacity:.8} 50%{transform:translateX(30px)} }
@keyframes snow-shake { 0%,100%{opacity:0;transform:translateY(0)} 30%{opacity:1} 85%{opacity:0;transform:translateY(13px)} }
@keyframes duck-shake { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
@keyframes trunk-spray { 0%,100%{transform:rotate(0)} 25%,70%{transform:rotate(45deg)} }
@keyframes spray { 0%{transform:translate(0,0);opacity:0} 15%{opacity:1} 48%{transform:translate(var(--dx,-25px),-65px)} 100%{transform:translate(var(--end,-80px),35px);opacity:0} }
@keyframes trunk-hello { 0%,100%{transform:rotate(0)} 30%,70%{transform:rotate(35deg)} 50%{transform:rotate(28deg)} }
@keyframes dust-puff { 0%{opacity:0;transform:translateY(0) scale(.4)} 35%{opacity:.55} 100%{opacity:0;transform:translateY(-38px) scale(1.5)} }
@keyframes shooting-star { 0%,15%{opacity:0;transform:translate(0,0)} 35%{opacity:.9} 80%,100%{opacity:0;transform:translate(-230px,55px)} }
@keyframes dream { 0%,100%{opacity:0;transform:translateY(8px)} 22%,78%{opacity:.95;transform:translateY(0)} }
@keyframes page-turn { 0%,20%,100%{transform:scaleX(1);opacity:0} 25%{opacity:1;transform:scaleX(1)} 65%{opacity:.85;transform:scaleX(-.9)} 80%{opacity:0;transform:scaleX(-1)} }
@keyframes owl { 0%,100%{opacity:0;transform:translateY(-12px)} 20%,85%{opacity:1;transform:translateY(0)} }
@keyframes mouse-run { 0%{opacity:0;transform:translate(810px,455px) scaleX(-1)} 12%,88%{opacity:1} 45%{transform:translate(590px,446px) scaleX(-1)} 58%{transform:translate(560px,446px) scaleX(1)} 100%{opacity:0;transform:translate(810px,455px) scaleX(1)} }
@keyframes apple-balance { 0%,100%{opacity:0;transform:translateY(18px) rotate(-20deg)} 25%,75%{opacity:1;transform:translateY(0) rotate(0)} 55%{transform:translateY(-2px) rotate(8deg)} }
@keyframes curious-glance { 0%,20%,100%{transform:translateX(0)} 35%,52%{transform:translateX(-2px)} 67%,84%{transform:translateX(1.5px)} }
@keyframes curious-trunk { 0%,19%,100%{transform:rotate(0)} 41%,58%{transform:rotate(10deg)} 77%{transform:rotate(-3deg)} }
@keyframes question-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@media (max-width:520px) { .scene-target .focus-ring { stroke-width:3; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } .event { display:none !important; } }

/* Seasonal movement stays independent of observation and director events.
   The narrow edge lanes leave the elephants and question marks unobscured. */
.falling-leaves { pointer-events: none; }
.falling-leaf { animation: autumn-fall 19s -7s linear infinite; }
.falling-leaf.leaf-second { animation-duration: 23s; animation-delay: -16s; }
.falling-leaf.leaf-third { animation-duration: 27s; animation-delay: -2s; }
@keyframes autumn-fall {
  0% { transform: translate(0px, 20px) rotate(-18deg); opacity: 0; }
  12% { transform: translate(9px, 65px) rotate(9deg); opacity: .75; }
  35% { transform: translate(-8px, 170px) rotate(-25deg); opacity: .75; }
  60% { transform: translate(10px, 280px) rotate(22deg); opacity: .75; }
  85% { transform: translate(-6px, 390px) rotate(-12deg); opacity: .75; }
  100% { transform: translate(0px, 455px) rotate(15deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .falling-leaves { display: none !important; }
}