/*
 * Christmas Theme for play.brainfusion.games
 * Active: December (full month)
 * Features: Falling snowflakes, winter gradient, festive red/green/gold
 */

/* ===== COLOR PALETTE ===== */
body.theme-christmas {
    --christmas-red: hsl(355, 75%, 50%);          /* #df1f2d */
    --christmas-green: hsl(140, 60%, 35%);        /* #246b3a */
    --christmas-white: hsl(0, 0%, 98%);           /* #fafafa */
    --christmas-gold: hsl(45, 80%, 55%);          /* #e6b422 */
    --christmas-blue: hsl(200, 70%, 85%);         /* #c2e0f5 - icy blue */
    --christmas-silver: hsl(0, 0%, 75%);          /* #bfbfbf */

    /* Background gradient: winter sky (light blue to white) */
    background: linear-gradient(180deg, hsl(200, 70%, 90%) 0%, hsl(0, 0%, 98%) 100%);
    background-attachment: fixed;
    color: #333;
}

/* ===== HEADER THEMING ===== */
body.theme-christmas .header-top {
    background: var(--christmas-red);
    box-shadow: 0 2px 10px rgba(223, 31, 45, 0.3);
}

body.theme-christmas .header-btm {
    background: #ffffff;
    border-bottom: 3px solid var(--christmas-gold);
}

/* ===== BUTTON THEMING ===== */
body.theme-christmas wa-button::part(base) {
    background: var(--christmas-red);
    border-color: var(--christmas-green);
}

body.theme-christmas wa-button::part(base):hover {
    background: var(--christmas-green);
    border-color: var(--christmas-gold);
}

/* ===== INPUT FOCUS THEMING ===== */
body.theme-christmas {
    --wa-color-focus: var(--christmas-red);
}

/* Direct styling of Web Awesome input focus border using CSS parts */
body.theme-christmas wa-input:focus-within::part(base) {
    border-color: var(--christmas-red);
    outline: 3px solid var(--christmas-red);
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(223, 31, 45, 0.2);
}

/* Also style the input part directly for better browser support */
body.theme-christmas wa-input:focus-within::part(input) {
    border-color: var(--christmas-red);
}

/* ===== TEXT STYLING ===== */
body.theme-christmas h2 {
    color: var(--christmas-red);
    text-shadow: 1px 1px 2px rgba(36, 107, 58, 0.2);
}

/* ===== DECORATIONS CONTAINER ===== */
body.theme-christmas .theme-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* ===== FALLING SNOWFLAKES ===== */
/* Snowflake 1 */
body.theme-christmas .theme-decorations::before {
    content: '❄';
    position: absolute;
    font-size: 30px;
    color: var(--christmas-blue);
    top: -50px;
    left: 15%;
    animation: fall-snow 10s linear infinite;
    will-change: transform, opacity;
    opacity: 0.9;
}

/* Snowflake 2 */
body.theme-christmas .theme-decorations::after {
    content: '❄';
    position: absolute;
    font-size: 25px;
    color: #fff;
    top: -80px;
    left: 75%;
    animation: fall-snow 12s linear infinite 2s;
    will-change: transform, opacity;
    opacity: 0.8;
}

/* Additional snowflakes via container pseudo-elements */
body.theme-christmas .container::before {
    content: '❄';
    position: fixed;
    font-size: 35px;
    color: var(--christmas-blue);
    top: -60px;
    left: 45%;
    animation: fall-snow 11s linear infinite 1s;
    will-change: transform, opacity;
    opacity: 0.85;
    z-index: 1;
    pointer-events: none;
}

body.theme-christmas .container::after {
    content: '❄';
    position: fixed;
    font-size: 20px;
    color: #fff;
    top: -40px;
    left: 85%;
    animation: fall-snow 13s linear infinite 3s;
    will-change: transform, opacity;
    opacity: 0.75;
    z-index: 1;
    pointer-events: none;
}

/* Additional snowflakes on header */
body.theme-christmas .header-btm::before {
    content: '❄';
    position: fixed;
    font-size: 28px;
    color: var(--christmas-blue);
    top: -45px;
    left: 30%;
    animation: fall-snow 14s linear infinite 4s;
    will-change: transform, opacity;
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
}

body.theme-christmas .header-btm::after {
    content: '❄';
    position: fixed;
    font-size: 22px;
    color: #fff;
    top: -35px;
    left: 60%;
    animation: fall-snow 9s linear infinite 5s;
    will-change: transform, opacity;
    opacity: 0.9;
    z-index: 1;
    pointer-events: none;
}

/* Extra snowflakes for desktop */
@media (min-width: 769px) {
    body.theme-christmas main::before {
        content: '❄';
        position: fixed;
        font-size: 32px;
        color: var(--christmas-blue);
        top: -55px;
        left: 5%;
        animation: fall-snow 15s linear infinite 6s;
        will-change: transform, opacity;
        opacity: 0.7;
        z-index: 1;
        pointer-events: none;
    }

    body.theme-christmas main::after {
        content: '❄';
        position: fixed;
        font-size: 26px;
        color: #fff;
        top: -65px;
        left: 92%;
        animation: fall-snow 10.5s linear infinite 7s;
        will-change: transform, opacity;
        opacity: 0.85;
        z-index: 1;
        pointer-events: none;
    }
}

/* ===== ANIMATIONS ===== */

/* Falling snow animation with gentle drift */
@keyframes fall-snow {
    0% {
        transform: translateY(-10vh) translateX(0) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: translateY(25vh) translateX(20px) rotate(90deg);
    }
    50% {
        transform: translateY(50vh) translateX(50px) rotate(180deg);
    }
    75% {
        transform: translateY(75vh) translateX(30px) rotate(270deg);
    }
    100% {
        transform: translateY(110vh) translateX(50px) rotate(360deg);
        opacity: 0.8;
    }
}

/* Twinkle animation for festive sparkle */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* Snow accumulation effect at bottom (subtle) */
@keyframes snow-accumulate {
    0% {
        height: 0;
    }
    100% {
        height: 20px;
    }
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    /* Reduce number of snowflakes on tablet */
    body.theme-christmas .header-btm::after {
        display: none;
    }

    body.theme-christmas .container::after {
        display: none;
    }

    /* Smaller snowflakes on mobile */
    body.theme-christmas .theme-decorations::before {
        font-size: 24px;
    }

    body.theme-christmas .theme-decorations::after {
        font-size: 20px;
    }

    body.theme-christmas .container::before {
        font-size: 26px;
    }

    body.theme-christmas .header-btm::before {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    /* Minimal snowflakes on very small screens */
    body.theme-christmas .container::before {
        display: none;
    }

    body.theme-christmas .header-btm::before {
        display: none;
    }

    /* Keep only 2 snowflakes falling */
    body.theme-christmas .theme-decorations::before {
        font-size: 20px;
    }

    body.theme-christmas .theme-decorations::after {
        font-size: 18px;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    body.theme-christmas .theme-decorations::before,
    body.theme-christmas .theme-decorations::after,
    body.theme-christmas .container::before,
    body.theme-christmas .container::after,
    body.theme-christmas .header-btm::before,
    body.theme-christmas .header-btm::after,
    body.theme-christmas main::before,
    body.theme-christmas main::after {
        animation: none;
        position: static;
        display: none;
    }
}