.csw-autumn {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2147483000;
}

.csw-autumn .csw-sunset-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 42vh;
    background:
        radial-gradient(120% 90% at 78% -18%, rgba(255, 179, 71, 0.30), rgba(255, 120, 60, 0.16) 42%, transparent 70%),
        radial-gradient(90% 70% at 18% -26%, rgba(255, 120, 80, 0.14), transparent 62%);
    filter: blur(6px);
    animation: cswGlowPulse 14s ease-in-out infinite alternate;
}

@keyframes cswGlowPulse {
    from { opacity: 0.75; }
    to   { opacity: 1; }
}


.csw-leaf {
    position: absolute;
    top: -8vh;
    left: var(--x);
    will-change: transform;
    animation: cswLeafFall var(--dur) cubic-bezier(0.45, 0.03, 0.62, 0.96) var(--delay) forwards;
}

.csw-leaf .csw-leaf-body {
    display: block;
    width: var(--size);
    height: var(--size);
    will-change: transform;
    transform-style: preserve-3d;
    animation: cswLeafSway calc(var(--dur) / 7) ease-in-out calc(var(--delay) - 1.7s) infinite;
}

.csw-leaf i {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(var(--tilt));
    background: linear-gradient(135deg, var(--c1), var(--c2) 62%, var(--c3));
    box-shadow: 0 2px 5px rgba(80, 40, 0, 0.18);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}


.csw-leaf-shape-maple i {
    clip-path: polygon(50% 0%, 61% 28%, 84% 21%, 76% 44%, 100% 50%, 76% 58%, 88% 82%, 62% 74%, 54% 100%, 50% 78%, 46% 100%, 38% 74%, 12% 82%, 24% 58%, 0% 50%, 24% 44%, 16% 21%, 39% 28%);
}

.csw-leaf-shape-oak i {
    clip-path: polygon(50% 0%, 66% 16%, 60% 26%, 78% 36%, 68% 46%, 86% 58%, 72% 66%, 80% 82%, 60% 80%, 54% 100%, 46% 100%, 40% 80%, 20% 82%, 28% 66%, 14% 58%, 32% 46%, 22% 36%, 40% 26%, 34% 16%);
}

.csw-leaf-shape-ginkgo i {
    clip-path: polygon(50% 100%, 18% 44%, 2% 26%, 12% 14%, 30% 20%, 50% 8%, 70% 20%, 88% 14%, 98% 26%, 82% 44%);
    border-radius: 12%;
}

.csw-leaf-shape-willow i {
    clip-path: ellipse(28% 50% at 50% 48%);
}

@keyframes cswLeafFall {
    0% {
        transform: translate3d(0, -8vh, 0) rotate(0deg);
        opacity: 0;
    }
    6% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--drift), 108vh, 0) rotate(var(--spin));
        opacity: 0.85;
    }
}

@keyframes cswLeafSway {
    0%, 100% {
        transform: translateX(calc(var(--swing) * -1)) rotateY(0deg) rotateZ(-6deg);
    }
    50% {
        transform: translateX(var(--swing)) rotateY(155deg) rotateZ(8deg);
    }
}


.csw-music {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(30, 24, 16, 0.72);
    color: #ffe9c9;
    font: 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(6px);
    z-index: 2147483001;
}

.csw-music button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, #ff9d4d, #e8632a);
    color: #fff;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.csw-music .csw-music-title {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csw-music input[type="range"] {
    width: 64px;
    accent-color: #ff9d4d;
}

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