/*
 * Easter Theme for play.brainfusion.games
 * Active: April (full month)
 * Features: Floating eggs and bunnies, soft pastel colors, spring atmosphere
 */

/* ===== COLOR PALETTE ===== */
body.theme-easter {
    --easter-pink: hsl(340, 75%, 75%);            /* #f2a6c4 */
    --easter-lavender: hsl(270, 50%, 75%);        /* #c4a6e6 */
    --easter-yellow: hsl(50, 85%, 70%);           /* #f5e04d */
    --easter-blue: hsl(200, 60%, 75%);            /* #a6d4f2 */
    --easter-green: hsl(110, 50%, 70%);           /* #9fdb7f */
    --easter-white: hsl(0, 0%, 98%);              /* #fafafa */

    /* Background gradient: soft pastel pink to lavender */
    background: linear-gradient(180deg, hsl(340, 50%, 92%) 0%, hsl(270, 40%, 95%) 100%);
    background-attachment: fixed;
    color: #442c52;
}

/* ===== HEADER THEMING ===== */
body.theme-easter .header-top {
    background: var(--easter-lavender);
    box-shadow: 0 2px 10px rgba(196, 166, 230, 0.3);
}

body.theme-easter .header-btm {
    background: color-mix(in srgb, #ffffff 22%, transparent);
}

/* ===== BUTTON THEMING ===== */
body.theme-easter wa-button::part(base) {
    background: var(--easter-lavender);
    border-color: var(--easter-yellow);
}

body.theme-easter wa-button::part(base):hover {
    background: var(--easter-pink);
}

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

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

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

/* ===== TEXT STYLING ===== */
body.theme-easter h2 {
    color: var(--easter-lavender);
    text-shadow: 1px 1px 2px rgba(196, 166, 230, 0.3);
}

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

/* ===== FLOATING EASTER EGGS ===== */
/* Egg 1 */
body.theme-easter .theme-decorations::before {
    content: '🥚';
    position: absolute;
    font-size: 40px;
    top: -50px;
    left: 15%;
    animation: float-egg 12s ease-in-out infinite;
    will-change: transform, opacity;
    opacity: 0.85;
}

/* Egg 2 - Hatching chick */
body.theme-easter .theme-decorations::after {
    content: '🐣';
    position: absolute;
    font-size: 38px;
    top: -70px;
    left: 72%;
    animation: float-egg 14s ease-in-out infinite 2s;
    will-change: transform, opacity;
    opacity: 0.8;
}

/* Additional decorations via container pseudo-elements */
body.theme-easter .container::before {
    content: '🥚';
    position: fixed;
    font-size: 36px;
    top: -60px;
    left: 42%;
    animation: float-egg 13s ease-in-out infinite 1s;
    will-change: transform, opacity;
    opacity: 0.75;
    z-index: 1;
    pointer-events: none;
}

body.theme-easter .container::after {
    content: '🐰';
    position: fixed;
    font-size: 40px;
    top: -80px;
    left: 85%;
    animation: hop-bunny 10s ease-in-out infinite 3s;
    will-change: transform, opacity;
    opacity: 0.9;
    z-index: 1;
    pointer-events: none;
}

/* Note: decoration pseudo-elements removed from .header-btm because
   backdrop-filter creates a containing block that breaks position: fixed.
   The remaining decorations on .theme-decorations, .container, and main
   provide sufficient coverage. */

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

/* Floating egg animation with gentle wobble */
@keyframes float-egg {
    0% {
        transform: translateY(-10vh) translateX(0) rotate(-3deg);
        opacity: 1;
    }
    25% {
        transform: translateY(25vh) translateX(10px) rotate(3deg);
    }
    50% {
        transform: translateY(50vh) translateX(-8px) rotate(-2deg);
    }
    75% {
        transform: translateY(75vh) translateX(12px) rotate(4deg);
    }
    100% {
        transform: translateY(110vh) translateX(0) rotate(-3deg);
        opacity: 0.6;
    }
}

/* Hopping bunny animation */
@keyframes hop-bunny {
    0% {
        transform: translateY(-10vh) translateX(0) scale(1);
        opacity: 1;
    }
    10% {
        transform: translateY(5vh) translateX(5px) scale(0.95);
    }
    20% {
        transform: translateY(15vh) translateX(0) scale(1);
    }
    30% {
        transform: translateY(20vh) translateX(-5px) scale(0.95);
    }
    40% {
        transform: translateY(30vh) translateX(0) scale(1);
    }
    50% {
        transform: translateY(50vh) translateX(8px) scale(0.95);
    }
    60% {
        transform: translateY(60vh) translateX(0) scale(1);
    }
    70% {
        transform: translateY(70vh) translateX(-8px) scale(0.95);
    }
    80% {
        transform: translateY(85vh) translateX(0) scale(1);
    }
    90% {
        transform: translateY(95vh) translateX(5px) scale(0.95);
    }
    100% {
        transform: translateY(110vh) translateX(0) scale(1);
        opacity: 0.6;
    }
}

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

    /* Smaller decorations on mobile */
    body.theme-easter .theme-decorations::before {
        font-size: 32px;
    }

    body.theme-easter .theme-decorations::after {
        font-size: 30px;
    }

    body.theme-easter .container::before {
        font-size: 28px;
    }
}

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

    /* Keep only 2 decorations floating */
    body.theme-easter .theme-decorations::before {
        font-size: 28px;
    }

    body.theme-easter .theme-decorations::after {
        font-size: 26px;
    }
}

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