.falling-leaves{position:fixed;inset:0;z-index:12;pointer-events:none;overflow:hidden;contain:strict;opacity:0;transition:opacity .8s ease}
.falling-leaves.leaves-active{opacity:1}
.falling-leaf{position:absolute;top:-80px;width:var(--size);height:calc(var(--size)*1.5);opacity:0;animation:leaf-fall var(--duration) var(--delay) linear infinite;animation-play-state:paused;will-change:transform}
.leaf-left{left:var(--edge)}.leaf-right{right:var(--edge)}
.falling-leaf img{display:block;width:100%;height:100%;filter:drop-shadow(1px 3px 3px #0007);animation:leaf-sway 3.8s var(--delay) ease-in-out infinite alternate;animation-play-state:paused}
.leaves-active .falling-leaf,.leaves-active .falling-leaf img{animation-play-state:running}
.falling-leaf:nth-child(3n){filter:brightness(.75) sepia(.2)}
.falling-leaf:nth-child(4n){filter:brightness(1.2)}
@keyframes leaf-fall{0%{transform:translate3d(0,-30px,0) rotate(-30deg);opacity:0}8%{opacity:.7}40%{transform:translate3d(calc(var(--drift)*var(--drift-factor,1)),42svh,0) rotate(85deg);opacity:.6}75%{opacity:.65}100%{transform:translate3d(0,calc(100svh + 160px),0) rotate(var(--turn));opacity:0}}
@keyframes leaf-sway{from{transform:translateX(calc(-1*var(--sway,9px))) rotateY(-35deg) rotateZ(-14deg)}to{transform:translateX(var(--sway,9px)) rotateY(45deg) rotateZ(20deg)}}
@media(max-width:650px){.falling-leaf{width:calc(var(--size)*.72);height:calc(var(--size)*1.08);--drift-factor:.15;--sway:4px}.leaf-left{left:0}.leaf-right{right:0}.falling-leaf:nth-child(n+13){display:none}}
@media(prefers-reduced-motion:reduce){.falling-leaves{display:none}}