/* Container to hold particles, ensures they don't block clicks */
#seasonal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows user to click links behind snow */
    z-index: 9999;
    overflow: hidden;
}

.seasonal-particle {
    position: absolute;
    top: -50px; /* Start above screen */
    user-select: none;
}

/* --- ANIMATIONS --- */

/* 1. Standard Fall (Snow, Rain) */
@keyframes fallLinear {
    0% { transform: translateY(0); }
    100% { transform: translateY(110vh); }
}

/* 2. Swaying Fall (Leaves, Feathers, Clovers) */
@keyframes fallSway {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, 25vh) rotate(45deg); }
    50% { transform: translate(-20px, 50vh) rotate(0deg); }
    75% { transform: translate(20px, 75vh) rotate(-45deg); }
    100% { transform: translate(0, 110vh) rotate(0deg); }
}

/* 3. Float Up (Ghosts, Fireworks) */
@keyframes floatUp {
    0% { transform: translateY(110vh); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-10vh); opacity: 0; }
}

/* --- THEME MAPPINGS --- */

/* Winter / Rain */
.snow, .rain {
    animation-name: fallLinear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Leaves / Hearts / Clovers / Sun */
.autumn, .clover, .hearts, .flower, .thanksgiving, .summer, .sun {
    animation-name: fallSway;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* Special: Halloween / Fireworks */
.halloween, .firework {
    animation-name: floatUp; /* These float up instead of down */
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

/* Custom Tweaks */
.rain { color: #a4d3ee; text-shadow: 0 0 5px blue; }
.snow { text-shadow: 0 0 5px white; }
.halloween { opacity: 0.7; }