.autumn-leaves {
	--autumn-z-index: 9999;
	position: fixed;
	inset: 0;
	z-index: var(--autumn-z-index);
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}

.autumn-leaves__fall {
	position: absolute;
	inset: 0;
}

.autumn-leaves__leaf {
	position: absolute;
	top: -8vh;
	left: var(--x);
	perspective: 480px;
	width: var(--size);
	height: calc(var(--size) * 1.2);
	opacity: var(--leaf-opacity);
	filter: drop-shadow(1px 2px 1px rgba(48, 27, 13, .18));
	transform-style: preserve-3d;
	animation: autumn-leaf-fall var(--duration) linear var(--delay) infinite,
		autumn-leaf-breeze var(--sway) ease-in-out var(--sway-delay) infinite alternate;
	will-change: transform;
}

.autumn-leaves__leaf svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.autumn-leaves__spin {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: 50% 50%;
	transform-style: preserve-3d;
	backface-visibility: visible;
	animation: autumn-leaf-tumble var(--flip) linear var(--flip-delay) infinite;
}

@keyframes autumn-leaf-fall {
	0% { transform: translate3d(0, -8vh, 0); }
	20% { transform: translate3d(calc(var(--drift) * .5), 17vh, 0); }
	42% { transform: translate3d(calc(var(--drift) * -.15), 39vh, 0); }
	63% { transform: translate3d(calc(var(--drift) * .75), 63vh, 0); }
	82% { transform: translate3d(calc(var(--drift) * .3), 86vh, 0); }
	100% { transform: translate3d(var(--drift), 112vh, 0); }
}

@keyframes autumn-leaf-breeze {
from { translate: -20px 0; }
to { translate: 22px 0; }
}

@keyframes autumn-leaf-tumble {
0% { transform: rotateZ(-42deg) rotateY(0deg); }
25% { transform: rotateZ(-12deg) rotateY(90deg); }
50% { transform: rotateZ(26deg) rotateY(180deg); }
75% { transform: rotateZ(52deg) rotateY(270deg); }
100% { transform: rotateZ(-42deg) rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.autumn-leaves { display: none !important; }
}