/* Falling Leaves Container */
#leavesContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;  /* Full viewport width */
    height: 100vh; /* Full viewport height */
    pointer-events: none;
    z-index: 2000;
}

/* Individual leaf — translucent glass-tinted fill (not flat primary) */
.leaf {
    position: absolute;
    width: var(--leaf-size, 26px);
    height: var(--leaf-size, 26px);
    background: linear-gradient(
        122deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(var(--primary-color-rgb), 0.12) 28%,
        rgba(var(--primary-color-rgb), 0.42) 52%,
        rgba(var(--primary-color-rgb), 0.2) 78%,
        rgba(255, 255, 255, 0.22) 100%
    );
    mask-image: url('assets/leaf.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('assets/leaf.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    transform-origin: center;
    will-change: transform, opacity;
    filter: drop-shadow(0 1px 3px rgba(var(--primary-color-rgb), 0.22))
        drop-shadow(0 4px 14px rgba(var(--primary-color-rgb), 0.18));
}

/* Logged-out: same translucent treatment with fixed blue */
body.logged-out .leaf {
    background: linear-gradient(
        122deg,
        rgba(255, 255, 255, 0.48) 0%,
        rgba(91, 143, 255, 0.1) 28%,
        rgba(91, 143, 255, 0.38) 52%,
        rgba(91, 143, 255, 0.16) 78%,
        rgba(255, 255, 255, 0.2) 100%
    ) !important;
    filter: drop-shadow(0 1px 3px rgba(91, 143, 255, 0.22))
        drop-shadow(0 4px 14px rgba(91, 143, 255, 0.16));
}

/* Falling animation — opacity driven by --leaf-opacity-* for per-leaf variety */
@keyframes leaf-falling {
    0% {
        transform: translate(var(--start-x), -20px) rotate(0deg);
        opacity: 0;
    }
    12% {
        opacity: var(--leaf-opacity-mid, 0.52);
    }
    50% {
        opacity: var(--leaf-opacity-peak, 0.62);
    }
    88% {
        opacity: var(--leaf-opacity-mid, 0.52);
    }
    100% {
        transform: translate(var(--end-x), calc(100vh + 20px)) rotate(720deg);
        opacity: 0;
    }
}

/* Leaf animations */
.leaf {
    animation:
        leaf-falling var(--fall-duration, 10s) linear infinite,
        leaf-sway 3.2s ease-in-out infinite alternate;
}

@keyframes leaf-sway {
    from {
        margin-left: 0;
    }
    to {
        margin-left: 28px;
    }
}