/* Bounded DOM; leaves animate transform/opacity. Fox frames change a small background rectangle. Decorative and click-through. */
.autumn-leaf-fall { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none !important; contain: layout style paint; }
.autumn-leaf-fall *, .autumn-leaf-fall *::before, .autumn-leaf-fall *::after { pointer-events: none !important; }
.autumn-leaf-fall__track { position: absolute; top: var(--leaf-top); width: var(--leaf-size); height: var(--leaf-size); animation: autumn-leaf-fall-drop var(--leaf-duration) cubic-bezier(.35, .3, .65, .7) both; will-change: transform; }
.autumn-leaf-fall__leaf { display: block; width: 100%; height: 100%; animation: autumn-leaf-fall-flutter var(--leaf-sway-duration) cubic-bezier(.45, 0, .55, 1) var(--leaf-phase) infinite; animation-direction: var(--leaf-flutter-direction); transform-origin: 50% 50%; }
.autumn-leaf-fall svg { display: block; width: 100%; height: 100%; }
.autumn-leaf-fall__pile { position: absolute; width: var(--leaf-size); height: var(--leaf-size); opacity: var(--leaf-opacity); transform: rotate(var(--leaf-angle)); }
.autumn-leaf-fall__pile--scatter { animation: autumn-leaf-fall-scatter var(--scatter-duration) ease-out both; will-change: transform; }
.autumn-leaf-fall--paused * { animation-play-state: paused !important; }
@keyframes autumn-leaf-fall-drop {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8%, 92% { opacity: var(--leaf-opacity); }
  18% { transform: translate3d(var(--leaf-x18), var(--leaf-y18), 0); }
  38% { transform: translate3d(var(--leaf-x38), var(--leaf-y38), 0); }
  60% { transform: translate3d(var(--leaf-x60), var(--leaf-y60), 0); }
  82% { transform: translate3d(var(--leaf-x82), var(--leaf-y82), 0); }
  100% { transform: translate3d(var(--leaf-dx), var(--leaf-distance), 0); opacity: 0; }
}
@keyframes autumn-leaf-fall-flutter {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--leaf-angle)) scaleX(1); }
  24% { transform: translate3d(var(--leaf-sway-left), -3px, 0) rotate(var(--leaf-roll-left)) scaleX(var(--leaf-edge-left)); }
  52% { transform: translate3d(0, 2px, 0) rotate(var(--leaf-angle)) scaleX(.95); }
  78% { transform: translate3d(var(--leaf-sway-right), -2px, 0) rotate(var(--leaf-roll-right)) scaleX(var(--leaf-edge-right)); }
}
@keyframes autumn-leaf-fall-scatter {
  from { transform: translate3d(0, 0, 0) rotate(var(--leaf-angle)); opacity: var(--leaf-opacity); }
  to { transform: translate3d(var(--scatter-x), -100px, 0) rotate(calc(var(--leaf-angle) + 110deg)); opacity: 0; }
}
@media (max-width: 1199px), (pointer: coarse), (prefers-reduced-motion: reduce) { .autumn-leaf-fall { display: none !important; } }
/* One lazily loaded atlas, six walk frames and three tail frames. No frame-by-frame JS. */
.autumn-leaf-fall__fox { position:absolute; left:0; bottom:-6px; width:var(--fox-size,180px); height:calc(var(--fox-size,180px) * 2 / 3); z-index:1; pointer-events:none; }
.autumn-leaf-fall__fox-facing,.autumn-leaf-fall__fox-sprite { display:block; width:100%; height:100%; }
.autumn-leaf-fall__fox-sprite { background-image:var(--fox-atlas); background-size:300% 300%; background-repeat:no-repeat; background-position:0 0; animation:autumn-fox-walk .75s steps(1,end) infinite; }
.autumn-leaf-fall__fox[data-phase=enter] { animation:autumn-fox-enter var(--fox-travel) linear both; }
.autumn-leaf-fall__fox[data-phase=sweep] .autumn-leaf-fall__fox-sprite { animation:autumn-fox-sweep 1.2s steps(1,end) 2 both; }
.autumn-leaf-fall__fox[data-phase=exit] { animation:autumn-fox-exit var(--fox-travel) linear both; }
.autumn-leaf-fall__fox[data-phase=exit] .autumn-leaf-fall__fox-sprite { animation-duration:.5s; }
@keyframes autumn-fox-walk { 0%,100% { background-position:0 0; } 16.667% { background-position:50% 0; } 33.334% { background-position:100% 0; } 50% { background-position:0 50%; } 66.667% { background-position:50% 50%; } 83.334% { background-position:100% 50%; } }
@keyframes autumn-fox-sweep { 0%,100% { background-position:0 100%; } 33% { background-position:50% 100%; } 66% { background-position:100% 100%; } }
@keyframes autumn-fox-enter { 0% { transform:translate3d(var(--fox-from),0,0); } 14%,26% { transform:translate3d(var(--fox-peek),0,0); } 100% { transform:translate3d(var(--fox-to),0,0); } }
@keyframes autumn-fox-exit { from { transform:translate3d(var(--fox-from),0,0); } to { transform:translate3d(var(--fox-to),0,0); } }