/* Seasonal Effects Styles */

/* Common Particle Container */
.season-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    /* Top layer but non-interactive */
    overflow: hidden;
}

/* 1. Winter / Christmas (Snow) */
.snowflake {
    position: absolute;
    top: -10px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.8;
    animation: fall linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(100vh);
    }
}

/* 2. Valentine's (Hearts) */
.heart-particle {
    position: absolute;
    bottom: -20px;
    color: #e91e63;
    font-size: 20px;
    opacity: 0.6;
    animation: floatUp linear infinite;
}

@keyframes floatUp {
    to {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

/* 3. Spring (Flowers/Petals) */
.petal-particle {
    position: absolute;
    top: -10px;
    width: 15px;
    height: 15px;
    background: #ffc107;
    /* Yellow/Pink petals */
    border-radius: 15px 0 15px 0;
    opacity: 0.7;
    animation: fallRotate linear infinite;
}

@keyframes fallRotate {
    to {
        transform: translateY(100vh) rotate(720deg);
    }
}

/* 4. Autumn (Leaves) */
.leaf-particle {
    position: absolute;
    top: -20px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d35400'%3E%3Cpath d='M17,8C8,10,5.9,16.17,3.82,21.34L5.71,22l1-2.3A4.49,4.49,0,0,0,8,20C19,20,22,3,22,3,21,5,14,5.25,9,6.25S2,11.5,2,13.5a6.22,6.22,0,0,0,1.75,3.75C7,8,17,8,17,8Z'/%3E%3C/svg%3E");
    background-size: contain;
    opacity: 0.7;
    animation: fallSway linear infinite;
}

@keyframes fallSway {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(20px, 25vh) rotate(45deg);
    }

    50% {
        transform: translate(-20px, 50vh) rotate(90deg);
    }

    75% {
        transform: translate(20px, 75vh) rotate(135deg);
    }

    100% {
        transform: translate(0, 100vh) rotate(180deg);
    }
}

/* 5. Halloween (Bats/Webs) - Subtle */
.bat-particle {
    position: absolute;
    top: 10px;
    width: 30px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' fill='%23333'%3E%3Cpath d='M50,20 Q70,5 90,20 Q100,0 80,30 Q60,50 50,30 Q40,50 20,30 Q0,0 10,20 Q30,5 50,20 z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.3;
    animation: batFly linear infinite;
}

@keyframes batFly {
    0% {
        transform: translateX(-10vw) translateY(0) scale(0.5);
    }

    25% {
        transform: translateX(20vw) translateY(10px) scale(0.6);
    }

    50% {
        transform: translateX(50vw) translateY(-10px) scale(0.5);
    }

    75% {
        transform: translateX(80vw) translateY(10px) scale(0.6);
    }

    100% {
        transform: translateX(110vw) translateY(0) scale(0.5);
    }
}

@keyframes fallTumble {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
    }
}

/* 6. Mexico Independence (Confetti) */
.confetti-mx,
.confetti-brand {
    position: absolute;
    top: -10px;
    width: 10px;
    height: 20px;
    opacity: 0.8;
    animation: fallTumble linear infinite;
}

.confetti-green {
    background: #00933C;
}

.confetti-white {
    background: #FFFFFF;
}

.confetti-red {
    background: #CE1126;
}

/* 9. Ctrl-X Anniversary (Brand Colors) */
.confetti-purple {
    background: #753488;
}

.confetti-pink {
    background: #B83996;
}

.confetti-blue {
    background: #007bff;
}

/* 7. Pride Month (June) - Rainbow Top Border */
body.season-pride::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #E81416, #FFA500, #FAEB36, #79C314, #487DE7, #4B369D, #70369D);
    z-index: 10000;
}

/* 8. Day of the Dead (Marigolds) */
.marigold {
    background: #ff9800;
    /* Vivid orange */
    box-shadow: 0 0 5px #e65100;
}