/* Christmas Theme Enhancements - Performance Optimized */

/* Container for all christmas effects */
.christmas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
    /* CSS Containment for better rendering performance */
    contain: layout style paint;
}

/* --- Snowfall Animation (Reduced from 10 to 6) --- */
.snowflake {
    position: absolute;
    top: -10px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.8;
    animation: snowfall linear infinite;
    /* GPU acceleration */
    will-change: transform, opacity;
    transform: translateZ(0);
}

@keyframes snowfall {
    0% {
        transform: translate3d(0, -10px, 0) rotate(0deg);
        opacity: 0.8;
    }

    100% {
        transform: translate3d(20px, 100vh, 0) rotate(360deg);
        opacity: 0;
    }
}

/* Randomize snowflakes - Reduced to 6 */
.snowflake:nth-child(1) {
    left: 10%;
    width: 5px;
    height: 5px;
    animation-duration: 10s;
    animation-delay: 0s;
}

.snowflake:nth-child(2) {
    left: 25%;
    width: 8px;
    height: 8px;
    animation-duration: 12s;
    animation-delay: 2s;
}

.snowflake:nth-child(3) {
    left: 45%;
    width: 6px;
    height: 6px;
    animation-duration: 11s;
    animation-delay: 1s;
}

.snowflake:nth-child(4) {
    left: 65%;
    width: 7px;
    height: 7px;
    animation-duration: 13s;
    animation-delay: 3s;
}

.snowflake:nth-child(5) {
    left: 80%;
    width: 5px;
    height: 5px;
    animation-duration: 9s;
    animation-delay: 4s;
}

.snowflake:nth-child(6) {
    left: 90%;
    width: 4px;
    height: 4px;
    animation-duration: 10s;
    animation-delay: 2s;
}

/* --- Fireworks Animation (Reduced from 5 to 3) --- */
.firework {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: explode 3s ease-out infinite;
    /* Increased from 2.5s to 3s */
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Simplified explosion with fewer shadows */
@keyframes explode {
    0% {
        transform: scale(1);
        opacity: 1;
        background-color: white;
        box-shadow:
            0 0 0 0 #ff0040,
            0 0 0 0 #00ff80,
            0 0 0 0 #4000ff;
    }

    30% {
        opacity: 1;
        background-color: transparent;
    }

    100% {
        transform: scale(1);
        opacity: 0;
        box-shadow:
            -50px -50px 0 -1px #ff0040,
            50px -50px 0 -1px #00ff80,
            50px 50px 0 -1px #4000ff,
            -50px 50px 0 -1px #ffff00,
            0px -80px 0 -1px #ff00ff;
    }
}

.firework:nth-child(7) {
    top: 20%;
    left: 30%;
    animation-delay: 0s;
    animation-duration: 3.5s;
}

.firework:nth-child(8) {
    top: 30%;
    left: 70%;
    animation-delay: 1.5s;
    animation-duration: 4s;
}

.firework:nth-child(9) {
    top: 50%;
    left: 50%;
    animation-delay: 0.8s;
    animation-duration: 3s;
}

/* --- Festive Icons in Header --- */
.christmas-icon {
    margin-right: 5px;
    color: #e63946;
    animation: tinkle 2s infinite ease-in-out;
}

.christmas-icon-green {
    color: #2a9d8f;
}

@keyframes tinkle {

    0%,
    100% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(10deg);
    }
}

/* --- Optimized Flying Santa Animation --- */
.flying-santa {
    position: fixed;
    top: 15%;
    left: -300px;
    z-index: 9999;
    animation: flyAcrossScreen 25s linear infinite;
    pointer-events: none;
    /* GPU acceleration */
    will-change: transform;
    transform: translateZ(0);
    contain: layout style paint;
}

.santa-group {
    display: flex;
    align-items: center;
    position: relative;
    animation: sleighBob 3s ease-in-out infinite;
    transform: translateZ(0);
}

.reindeers {
    display: flex;
    margin-right: -10px;
}

.deer {
    font-size: 35px;
    display: inline-block;
    margin-right: 5px;
    transform-origin: bottom center;
    animation: gallop 0.8s ease-in-out infinite alternate;
}

.deer:nth-child(2) {
    animation-delay: 0.2s;
}

.deer:nth-child(3) {
    animation-delay: 0.4s;
}

.sleigh-section {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-left: 15px;
}

.sleigh-icon {
    font-size: 40px;
    color: #e63946;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
    transform: scaleX(-1);
}

.santa-face {
    font-size: 30px;
    position: absolute;
    top: -15px;
    left: 10px;
    animation: hohoho 2s ease-in-out infinite;
}

/* Magic Dust Trail */
.magic-dust {
    position: absolute;
    top: 20px;
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    box-shadow:
        -20px 0 10px #fff,
        -40px 10px 15px #ffd700,
        -60px -10px 10px #fff;
    animation: starDust 2s linear infinite;
}

/* --- Keyframes --- */

@keyframes flyAcrossScreen {
    0% {
        left: -300px;
        transform: scale(0.8) translateY(0) translateZ(0);
    }

    25% {
        transform: scale(0.9) translateY(20px) translateZ(0);
    }

    50% {
        transform: scale(1) translateY(-10px) translateZ(0);
    }

    75% {
        transform: scale(0.9) translateY(10px) translateZ(0);
    }

    100% {
        left: 110vw;
        transform: scale(0.8) translateY(0) translateZ(0);
    }
}

@keyframes sleighBob {

    0%,
    100% {
        transform: translateY(0) rotate(0deg) translateZ(0);
    }

    50% {
        transform: translateY(-15px) rotate(-2deg) translateZ(0);
    }
}

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

    100% {
        transform: translateY(-5px) rotate(5deg);
    }
}

@keyframes hohoho {

    0%,
    100% {
        transform: rotate(0deg) translateY(0);
    }

    50% {
        transform: rotate(5deg) translateY(-2px);
    }
}

@keyframes starDust {
    0% {
        transform: translateX(0) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translateX(-100px) scale(0);
        opacity: 0;
    }
}

/* Pause class for scrolling - Enhanced */
.christmas-overlay.paused *,
.flying-santa.paused * {
    animation-play-state: paused !important;
    opacity: 0.2;
    transition: opacity 0.5s ease;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {

    .snowflake,
    .firework,
    .flying-santa,
    .christmas-icon {
        animation: none !important;
        opacity: 0.5;
    }

    .santa-group,
    .deer,
    .santa-face,
    .magic-dust {
        animation: none !important;
    }
}

/* Performance optimization for low-end devices */
@media (max-width: 768px) {

    /* Reduce snowflakes on mobile */
    .snowflake:nth-child(n+5) {
        display: none;
    }

    /* Disable fireworks on mobile */
    .firework {
        display: none;
    }

    /* Simplify Santa animation on mobile */
    .flying-santa {
        animation-duration: 30s;
        /* Slower = less CPU */
    }
}