/* Falling leaves overlay. Leaves are created by js/falling-images.js; hidden while data-images is empty.
 * Shown only in themes that set --sb-leaves:block (the burgundy theme); never blocks taps. */
#fallingImageContainer.falling-images {
    position: fixed;
    z-index: 1150;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    display: var(--sb-leaves, none);
}

#fallingImageContainer.falling-images[data-images=""] {
    display: none;
}

/* Three layers per leaf: fall (top → bottom) › sway (pendulum) › image (its own angle and side). */
#fallingImageContainer .falling-leaf {
    position: absolute;
    top: -60px;
    left: var(--leaf-left);
    width: var(--leaf-size);
    height: var(--leaf-size);
    animation: leaf-fall var(--leaf-fall) linear var(--leaf-delay) infinite;
    will-change: transform;
}

#fallingImageContainer .falling-leaf__sway {
    display: block;
    width: 100%;
    height: 100%;
    animation: leaf-sway var(--leaf-sway) ease-in-out var(--leaf-delay) infinite alternate;
    will-change: transform;
}

#fallingImageContainer .falling-leaf img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: var(--leaf-opacity);
    transform: rotate(var(--leaf-turn)) scaleX(var(--leaf-flip));
}

@keyframes leaf-fall {
    from { transform: translate3d(0, -10vh, 0); }
    to { transform: translate3d(var(--leaf-drift), 115vh, 0); }
}

@keyframes leaf-sway {
    from { transform: translateX(calc(var(--leaf-swing) * -1)) rotate(calc(var(--leaf-tilt) * -1)); }
    to { transform: translateX(var(--leaf-swing)) rotate(var(--leaf-tilt)); }
}

@media (prefers-reduced-motion: reduce) {
    #fallingImageContainer.falling-images { display: none; }
}