.csa-layer {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint;
    isolation: isolate;
    width: 100vw;
    height: 100vh;
}

.csa-layer::before,
.csa-layer::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.csa-orb {
    position: absolute;
    pointer-events: none;
    transform: translateZ(0);
}

.csa-season-summer .csa-sun {
    top: clamp(24px, 7vh, 80px);
    right: clamp(22px, 7vw, 110px);
    width: clamp(126px, 16vw, 230px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff8b7 0 16%, #ffd05f 17% 47%, #ffa43d 48% 62%, rgba(255,164,61,.16) 63% 100%);
    box-shadow: 0 0 48px rgba(255,190,71,.34), 0 0 120px rgba(255,164,61,.24);
    animation: csa-sun-pulse 8s ease-in-out infinite;
}

.csa-season-summer .csa-sun::before,
.csa-season-summer .csa-sun::after {
    position: absolute;
    inset: -42%;
    content: "";
    border-radius: inherit;
    background: conic-gradient(from 0deg, rgba(255,202,75,.0) 0 8deg, rgba(255,202,75,.34) 9deg 14deg, rgba(255,202,75,0) 15deg 30deg);
    animation: csa-rays-spin 28s linear infinite;
}

.csa-season-summer .csa-sun::after {
    inset: -28%;
    opacity: .48;
    animation-duration: 18s;
    animation-direction: reverse;
}

.csa-season-summer .csa-wave {
    left: -8vw;
    right: -8vw;
    bottom: 7vh;
    height: 82px;
    opacity: .38;
    background:
        radial-gradient(80px 28px at 50px 44px, rgba(61,184,203,.20), transparent 72%),
        radial-gradient(120px 34px at 160px 48px, rgba(255,213,99,.18), transparent 72%);
    background-size: 220px 82px;
    animation: csa-wave-drift 16s linear infinite;
    filter: blur(.2px);
}

.csa-season-summer .csa-layer::after {
    inset: 0;
    background: radial-gradient(circle at 86% 10%, rgba(255,198,72,.13), transparent 30%), linear-gradient(180deg, rgba(255,237,180,.08), transparent 36%);
}

.csa-season-autumn .csa-layer::before {
    inset: 0;
    background: radial-gradient(circle at 12% 8%, rgba(211,91,38,.16), transparent 30%), radial-gradient(circle at 88% 16%, rgba(145,70,29,.14), transparent 28%), linear-gradient(180deg, rgba(255,238,213,.10), transparent 42%);
}

.csa-season-autumn .csa-gust {
    left: -8vw;
    right: -8vw;
    top: 18vh;
    height: 120px;
    opacity: .30;
    background: repeating-linear-gradient(-8deg, transparent 0 34px, rgba(179,93,43,.18) 35px 37px, transparent 38px 80px);
    animation: csa-gust 18s ease-in-out infinite;
}

.csa-season-winter .csa-layer::before {
    inset: 0;
    background: radial-gradient(circle at 80% 8%, rgba(164,215,237,.22), transparent 30%), linear-gradient(180deg, rgba(222,244,255,.18), transparent 45%);
}

.csa-season-winter .csa-frost {
    inset: auto -4vw 0 -4vw;
    height: 120px;
    opacity: .34;
    background: linear-gradient(0deg, rgba(224,247,255,.36), transparent), repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.32) 19px 20px, transparent 21px 42px);
    filter: blur(.3px);
}

.csa-season-spring .csa-layer::before {
    inset: 0;
    background: radial-gradient(circle at 12% 18%, rgba(128,207,120,.16), transparent 28%), radial-gradient(circle at 82% 12%, rgba(255,169,202,.18), transparent 28%), linear-gradient(180deg, rgba(244,255,234,.12), transparent 38%);
}

.csa-season-spring .csa-bloom {
    left: 7vw;
    bottom: 8vh;
    width: 110px;
    height: 110px;
    opacity: .55;
    background: radial-gradient(circle at 50% 50%, rgba(255,177,211,.55) 0 9%, transparent 10%), radial-gradient(circle at 50% 18%, rgba(255,177,211,.38) 0 15%, transparent 16%), radial-gradient(circle at 82% 50%, rgba(255,177,211,.35) 0 15%, transparent 16%), radial-gradient(circle at 50% 82%, rgba(255,177,211,.35) 0 15%, transparent 16%), radial-gradient(circle at 18% 50%, rgba(255,177,211,.35) 0 15%, transparent 16%);
    animation: csa-bloom 7s ease-in-out infinite;
}

.csa-particle {
    position: fixed;
    top: var(--y, -8vh);
    left: var(--x, 50vw);
    color: var(--c, currentColor);
    font-size: var(--s, 18px);
    line-height: 1;
    opacity: var(--o, .8);
    transform: translate3d(0, -10vh, 0) rotate(0deg);
    animation: csa-fall var(--d, 16s) linear var(--delay, 0s) infinite;
    text-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.csa-particle.is-spark {
    width: var(--s, 8px);
    height: var(--s, 8px);
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 18px currentColor;
    animation-name: csa-spark;
}

.csa-particle.is-bee {
    animation-name: csa-bee;
}

.csa-particle.is-flower-pop {
    top: auto;
    bottom: 4vh;
    animation-name: csa-flower-pop;
    transform-origin: center bottom;
}

@keyframes csa-sun-pulse { 0%,100%{transform:scale(.96);filter:saturate(1)} 50%{transform:scale(1.04);filter:saturate(1.16)} }
@keyframes csa-rays-spin { to { transform: rotate(360deg); } }
@keyframes csa-wave-drift { to { background-position: 220px 0; } }
@keyframes csa-gust { 0%,100%{transform:translateX(-3vw);opacity:.18} 50%{transform:translateX(5vw);opacity:.36} }
@keyframes csa-bloom { 0%,100%{transform:scale(.92) rotate(-2deg);opacity:.42} 50%{transform:scale(1.06) rotate(2deg);opacity:.72} }
@keyframes csa-fall { 0%{transform:translate3d(0,-12vh,0) rotate(0deg)} 100%{transform:translate3d(var(--drift,36px),112vh,0) rotate(var(--r,260deg))} }
@keyframes csa-spark { 0%,100%{transform:translate3d(0,0,0) scale(.48);opacity:.14} 35%{transform:translate3d(calc(var(--drift,20px) * .35), -10px,0) scale(1);opacity:.78} 70%{transform:translate3d(calc(var(--drift,20px) * -.25), 12px,0) scale(.72);opacity:.36} }
@keyframes csa-bee { 0%{transform:translate3d(-10vw,18vh,0) rotate(-8deg)} 45%{transform:translate3d(42vw,7vh,0) rotate(9deg)} 100%{transform:translate3d(108vw,24vh,0) rotate(-5deg)} }
@keyframes csa-flower-pop { 0%,100%{transform:scale(.72);opacity:.16} 40%,70%{transform:scale(1);opacity:.65} }

@media (prefers-reduced-motion: reduce) {
    .csa-layer *, .csa-layer::before, .csa-layer::after { animation: none !important; }
    .csa-particle { display: none; }
}

@media (max-width: 700px) {
    .csa-particle:nth-child(n+20) { display: none; }
    .csa-season-summer .csa-sun { width: 128px; }
}