/*
 * Website Seasonal Effect -- animated overlay layer (falling leaves, snow,
 * etc.) driven entirely by CSS keyframes, one <link> for every effect so a
 * future addition only needs a new "variant" block + a matching entry in
 * static/js/seasonal-effects.js's SEASONAL_EFFECTS map.
 *
 * Each particle is two nested elements:
 *   .seasonal-particle  -- handles the vertical fall (translateY + fade)
 *   .seasonal-sway       -- handles horizontal drift + rotation
 * Splitting the two lets both animate independently via plain CSS
 * transforms without fighting over a single `transform` property.
 */

#seasonal-effects-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none; /* never blocks clicks/scroll/forms underneath */
    z-index: 1035; /* above the fixed header (1030), below modal-backdrop (1040) */
}

.seasonal-particle {
    position: absolute;
    top: -10%;
    left: var(--sk-left, 50%);
    animation-name: seasonal-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--sk-fall-duration, 10s);
    animation-delay: var(--sk-fall-delay, 0s);
    will-change: transform, opacity;
}

.seasonal-sway {
    display: inline-block;
    font-size: var(--sk-size, 18px);
    opacity: var(--sk-opacity, 0.85);
    line-height: 1;
    user-select: none;
    animation-name: seasonal-sway;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: var(--sk-sway-duration, 3s);
    will-change: transform;
}

@keyframes seasonal-fall {
    0%   { transform: translateY(0); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateY(120vh); opacity: 0; }
}

@keyframes seasonal-sway {
    from { transform: translateX(calc(var(--sk-drift, 24px) * -1)) rotate(var(--sk-rotate-from, -15deg)); }
    to   { transform: translateX(var(--sk-drift, 24px)) rotate(var(--sk-rotate-to, 15deg)); }
}

/* Rain drops don't sway or rotate like leaves/petals -- straight, fast,
   thin streaks instead of a glyph. */
.seasonal-raindrop {
    display: inline-block;
    width: 2px;
    height: var(--sk-size, 18px);
    background: linear-gradient(to bottom, rgba(174, 210, 255, 0), rgba(174, 210, 255, 0.75));
    opacity: var(--sk-opacity, 0.6);
    animation: none !important; /* overrides .seasonal-sway's sway/rotate */
}

@media (prefers-reduced-motion: reduce) {
    /* Belt-and-suspenders: seasonal-effects.js already skips creating any
       particles at all when reduced motion is on, but this ensures nothing
       animates even if the layer somehow still has content in it. */
    #seasonal-effects-layer {
        display: none;
    }
}