/**
 * Seasonal Theme Effects - CSS
 *
 * Styles for festive background effects:
 * - Snow: Falling snowflakes with parallax depth (December)
 * - Fireworks: Subtle bursts with sparkles (New Year's)
 */

/* ============================================
   REALISTIC SNOWFALL - December Theme
   Physics-based particle system
   ============================================ */

.snowfall-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

/* Individual snow particle - simple circles for realism */
.snow {
    position: absolute;
    background: radial-gradient(
        circle at 40% 40%,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.8) 40%,
        rgba(240, 248, 255, 0.6) 60%,
        rgba(220, 240, 255, 0.2) 100%
    );
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;

    /* Per-particle custom properties set by JS */
    --fall-duration: 10s;
    --fall-delay: 0s;
    --drift-range: 100px;
    --drift-duration: 3s;
    --start-x: 50%;
    --size: 4px;

    width: var(--size);
    height: var(--size);
    left: var(--start-x);
    top: -20px;
    /* filter is set inline by JS for blur + opacity */
    animation:
        snowFall var(--fall-duration) linear var(--fall-delay) infinite,
        snowDrift var(--drift-duration) ease-in-out var(--fall-delay) infinite;
}

/* Larger flakes get subtle inner glow */
.snow.large {
    box-shadow:
        inset 0 0 2px rgba(255, 255, 255, 0.9),
        0 0 4px rgba(255, 255, 255, 0.3);
}

/* Occasional glinting flake */
.snow.glint {
    animation:
        snowFall var(--fall-duration) linear var(--fall-delay) infinite,
        snowDrift var(--drift-duration) ease-in-out var(--fall-delay) infinite,
        snowGlint 2s ease-in-out var(--fall-delay) infinite;
}

/* Main falling animation - vertical descent */
@keyframes snowFall {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    3% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* Horizontal drift - sinusoidal wind movement */
@keyframes snowDrift {
    0%, 100% {
        margin-left: 0;
    }
    25% {
        margin-left: var(--drift-amount-1, 30px);
    }
    50% {
        margin-left: var(--drift-amount-2, -15px);
    }
    75% {
        margin-left: var(--drift-amount-3, 20px);
    }
}


/* Occasional sparkle/glint effect */
@keyframes snowGlint {
    0%, 40%, 60%, 100% {
        box-shadow:
            inset 0 0 2px rgba(255, 255, 255, 0.9),
            0 0 4px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow:
            inset 0 0 4px rgba(255, 255, 255, 1),
            0 0 12px rgba(255, 255, 255, 0.8),
            0 0 20px rgba(200, 230, 255, 0.4);
    }
}

/* Wind gust effect - shifts all particles */
.snowfall-container.wind-gust {
    animation: windGustContainer 3s ease-in-out;
}

@keyframes windGustContainer {
    0%, 100% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(40px);
    }
    60% {
        transform: translateX(25px);
    }
}

/* Depth layers for parallax - set via data attributes */
.snow[data-depth="far"] {
    z-index: 1;
}

.snow[data-depth="mid"] {
    z-index: 2;
}

.snow[data-depth="near"] {
    z-index: 3;
}

/* Very close particles - rare, large, blurred */
.snow[data-depth="close"] {
    z-index: 4;
}

/* Ground snow accumulation - softer, more realistic */
.snow-ground {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background:
        linear-gradient(
            to top,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.06) 30%,
            rgba(255, 255, 255, 0.02) 60%,
            transparent 100%
        );
    pointer-events: none;
    z-index: 6;
}

/* Subtle snow dust particles floating near ground */
.snow-ground::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.4) 50%, transparent 50%),
        radial-gradient(1px 1px at 25% 90%, rgba(255,255,255,0.3) 50%, transparent 50%),
        radial-gradient(2px 2px at 40% 85%, rgba(255,255,255,0.2) 50%, transparent 50%),
        radial-gradient(1px 1px at 55% 95%, rgba(255,255,255,0.4) 50%, transparent 50%),
        radial-gradient(1px 1px at 70% 88%, rgba(255,255,255,0.3) 50%, transparent 50%),
        radial-gradient(2px 2px at 85% 92%, rgba(255,255,255,0.2) 50%, transparent 50%),
        radial-gradient(1px 1px at 95% 85%, rgba(255,255,255,0.3) 50%, transparent 50%);
    animation: groundDust 8s ease-in-out infinite;
}

@keyframes groundDust {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(0);
    }
    50% {
        opacity: 0.8;
        transform: translateX(5px);
    }
}

/* Frost effect on auth box (when snow is active) */
.snowfall-container:not(:empty) ~ .auth-container .auth-box {
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 80px rgba(180, 220, 255, 0.04);
}

/* Subtle frost shimmer overlay */
.snowfall-container:not(:empty) ~ .auth-container .auth-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 40%,
        transparent 60%,
        rgba(200, 230, 255, 0.03) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Snow - Accessibility - respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .snow {
        animation: none !important;
        opacity: 0.15;
    }

    .snow:nth-child(3n) {
        opacity: 0.1;
    }

    .snow:nth-child(5n) {
        opacity: 0.2;
    }

    .snow-ground::before {
        animation: none;
    }
}


/* ============================================
   NEW YEAR'S FIREWORKS THEME
   Subtle, distant bursts with parallax depth
   ============================================ */

.fireworks-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

/* Launch trail - ascending line before burst */
.firework-trail {
    position: absolute;
    width: 2px;
    height: 0;
    background: linear-gradient(
        to top,
        transparent 0%,
        currentColor 40%,
        currentColor 100%
    );
    border-radius: 1px;
    pointer-events: none;
    will-change: height, bottom, opacity;
    animation: fireworkLaunch var(--launch-duration, 1s) ease-out forwards;
}

/* Burst particle - radiating dots */
.firework-particle {
    position: absolute;
    width: var(--size, 3px);
    height: var(--size, 3px);
    border-radius: 50%;
    background: radial-gradient(
        circle at 30% 30%,
        currentColor 0%,
        currentColor 40%,
        transparent 100%
    );
    pointer-events: none;
    will-change: transform, opacity;
    animation: fireworkBurst var(--burst-duration, 1s) ease-out forwards;
}

/* Falling sparkle - tiny drifting particles after burst */
.firework-sparkle {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: currentColor;
    pointer-events: none;
    will-change: transform, opacity;
    animation:
        sparkleFall var(--fall-duration, 3s) linear forwards,
        sparkleTwinkle 0.6s ease-in-out infinite;
}

/* Depth layers for parallax effect */
.firework-trail[data-depth="far"],
.firework-particle[data-depth="far"],
.firework-sparkle[data-depth="far"] {
    z-index: 1;
}

.firework-trail[data-depth="mid"],
.firework-particle[data-depth="mid"],
.firework-sparkle[data-depth="mid"] {
    z-index: 2;
}

.firework-trail[data-depth="near"],
.firework-particle[data-depth="near"],
.firework-sparkle[data-depth="near"] {
    z-index: 3;
}

/* Launch animation - trail rises from bottom */
@keyframes fireworkLaunch {
    0% {
        height: 0;
        bottom: 0;
        opacity: 0.8;
    }
    60% {
        opacity: 1;
    }
    100% {
        height: var(--trail-height, 100px);
        bottom: var(--burst-height, 50%);
        opacity: 0;
    }
}

/* Burst animation - particles radiate outward */
@keyframes fireworkBurst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: var(--start-opacity, 0.7);
    }
    20% {
        opacity: var(--start-opacity, 0.7);
    }
    100% {
        transform: translate(var(--travel-x, 50px), var(--travel-y, 50px)) scale(0.2);
        opacity: 0;
    }
}

/* Sparkle fall animation - gentle drift downward */
@keyframes sparkleFall {
    0% {
        transform: translate(0, 0);
        opacity: 0.7;
    }
    100% {
        transform: translate(var(--drift-x, 0), var(--fall-distance, 100px));
        opacity: 0;
    }
}

/* Sparkle twinkle - subtle brightness variation */
@keyframes sparkleTwinkle {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.5);
    }
}

/* Subtle glow effect on auth box for New Year's theme */
.fireworks-container:not(:empty) ~ .auth-container .auth-box {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 60px rgba(255, 215, 0, 0.03);
}

/* Fireworks - Accessibility - respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .firework-trail,
    .firework-particle,
    .firework-sparkle {
        animation: none !important;
    }

    .fireworks-container {
        display: none;
    }
}