/* Christmas Theme Styles */

/* Snow Container - Fixed to cover the screen, non-intrusive */
#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Crucial: allows clicking through the snow */
    z-index: 9999;
    /* On top of everything */
    overflow: hidden;
}

/* Snowflake Style */
/*.snowflake {
    position: absolute;
    top: -10px;
    background: linear-gradient(180deg, #ffffff,*/ /* white */
    /*#eaf7ff,*/ /* whitish sky blue */
    /*#cfeeff*/ /* sky blue */
    /*);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 2px rgba(207, 238, 255, 0.9), 0 0 6px rgba(190, 230, 255, 0.8), 0 0 12px rgba(170, 220, 255, 0.7);
    filter: drop-shadow(0 0 4px rgba(200, 235, 255, 0.9));
    user-select: none;
    z-index: 9999;
    animation-name: snowfall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}*/

.snowflake {
    position: absolute;
    top: -10px;
    /* Real snow color */
    background: linear-gradient( 180deg, #ffffff 0%, /* pure white */
    #f3fbff 40%, /* very light sky blue */
    #e6f6ff 100% /* soft ice blue */
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1em;
    font-family: Arial, sans-serif;
    /* Soft icy glow (not neon) */
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.9), 0 0 4px rgba(210, 235, 255, 0.6), 0 0 8px rgba(180, 220, 255, 0.4);
    filter: drop-shadow(0 0 3px rgba(200, 230, 255, 0.6));
    user-select: none;
    z-index: 9999;
    animation-name: snowfall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Snowfall Animation */
@keyframes snowfall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Sleigh Container */
#sleigh-container {
    position: fixed;
    top: 60%;
    left: -400px;
    /* Start further off-screen */
    width: 300px;
    /* Increased size for realistic image */
    pointer-events: none;
    z-index: 10000;
    /*animation: sleigh-move 10s linear infinite;*/
    animation: sleigh-move 26s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    /* Faster animation */
    opacity: 1;
    /*animation-timing-function: linear;*/
}

#sleigh-container img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

/* Sleigh Animation - Moves across the screen */
/*@keyframes sleigh-move {
    0% {
        left: -400px;
        transform: translateY(0) rotate(0deg);
    }

    15% {
        transform: translateY(30px) rotate(5deg);
    }

    35% {
        transform: translateY(-20px) rotate(-3deg);
    }

    55% {
        transform: translateY(20px) rotate(3deg);
    }

    80% {
        transform: translateY(-10px) rotate(-2deg);
    }

    100% {
        left: 110%;
        transform: translateY(0) rotate(0deg);
    }
}*/
@keyframes sleigh-move {
    /* Enter slowly */
    0% {
        left: -400px;
        transform: translateY(0) scaleX(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }
    /* Cruise left → right */
    40% {
        left: 110%;
        transform: translateY(0) scaleX(1);
    }
    /* Pause + flip */
    50% {
        left: 110%;
        transform: scaleX(-1);
    }
    /* Cruise right → left */
    90% {
        left: -400px;
        transform: translateY(0) scaleX(-1);
        opacity: 1;
    }
    /* Exit softly */
    100% {
        opacity: 0;
    }
}



/* Thrown Snow Particle */
.thrown-snow {
    position: fixed;
    color: white;
    /* White snow for the throw effect, or match user's red if desired? sticking to white/bright for visibility against dark bg */
    font-size: 1.2em;
    pointer-events: none;
    z-index: 9998;
    animation: snow-throw 1.5s ease-out forwards;
    text-shadow: 0 0 5px blue;
}

@keyframes snow-throw {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* Responsive adjustments for sleigh */
@media (max-width: 768px) {
    #sleigh-container {
        width: 200px;
        top: 15%;
    }
}