/* ============================================================================
   seasonal.css - the 'fun' theme: monthly page backgrounds and emoji decoration.

   Reachable ONLY via themeMode === 'fun' (applyThemeState() in script.js adds
   body.theme-<monthname> and injects the decoration elements). Lifted verbatim
   out of style.css so the dashboard's own styles stay legible; the rules below
   are unchanged.

   MUST be linked AFTER style.css - body.christmas-theme::before and
   body.christmas-level-5 rely on winning against same-specificity core rules.
   ============================================================================ */

/* ===== MONTHLY THEME BACKGROUNDS ===== */
body.theme-january { background: linear-gradient(135deg, #a8d8ea 0%, #4a6fa5 100%); }
body.theme-february { background: linear-gradient(135deg, #b8c5d6 0%, #8a95a5 100%); } /* Soft gray-blue for general Feb */
body.theme-february.valentines-day { background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%); } /* Pink/red for Valentine's */
body.theme-february.february-general { background: linear-gradient(135deg, #b8c5d6 0%, #8a95a5 100%); } /* Soft gray-blue */
body.theme-march { background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%); }
body.theme-april { background: linear-gradient(135deg, #ffb3ba 0%, #ffdfba 100%); }
body.theme-may { background: linear-gradient(135deg, #ffee93 0%, #fbc02d 100%); }
body.theme-june { background: linear-gradient(135deg, #81d4fa 0%, #039be5 100%); }
body.theme-july { background: linear-gradient(135deg, #ff9f43 0%, #ee5a6f 100%); }
body.theme-august { background: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%); }
body.theme-september { background: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%); }
body.theme-october { background: linear-gradient(135deg, #ff6348 0%, #be2edd 100%); }
/* end-stop lightened from #8b4513: at that value NO text colour passed 3:1
   for the slide heading (dark ink 2.51:1, white 2.26:1). Same colour family. */
body.theme-november { background: linear-gradient(135deg, #d4a373 0%, #c0874f 100%); }
/* end-stop lightened from #764ba2: dark ink measured 2.80:1, white 3.66:1 --
   neither safe for the slide heading. Same colour family. */
body.theme-december { background: linear-gradient(135deg, #667eea 0%, #9a86c9 100%); }

/* ===== CHRISTMAS THEME STYLES ===== */

/* Snowflake Container */
.snowflakes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    top: -10px;
    color: white;
    font-size: 1em;
    user-select: none;
    animation: fall linear infinite;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

@keyframes fall {
    to {
        transform: translateY(100vh) rotate(360deg);
    }
}

/* Fairy Lights */
.fairy-lights {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    pointer-events: none;
    z-index: 999;
    display: flex;
    justify-content: space-around;
}

.fairy-light {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: relative;
    animation: twinkle 2s infinite;
}

.fairy-light::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.3);
}

.fairy-light::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 20px currentColor;
}

@keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* Christmas Trees */
.christmas-trees {
    position: fixed;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 120px;
    pointer-events: none;
    z-index: 998;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding-bottom: 0;
    opacity: 0.9;
}

.christmas-tree {
    font-size: 5rem;
    line-height: 1;
    animation: sway 4s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(0, 255, 0, 0.3));
}

@keyframes sway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

/* Santa Sleigh */
.santa-sleigh {
    position: fixed;
    top: 20%;
    right: -300px;
    font-size: 3rem;
    pointer-events: none;
    z-index: 1001;
    animation: flySanta 30s linear infinite;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5));
}

@keyframes flySanta {
    0% {
        right: -300px;
        top: 20%;
    }
    50% {
        right: 110%;
        top: 40%;
    }
    100% {
        right: -300px;
        top: 20%;
    }
}

/* Elves */
.elves-container {
    position: fixed;
    bottom: 15px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 997;
    opacity: 0.85;
}

.elf {
    position: absolute;
    font-size: 2rem;
    animation: walkElf 20s linear infinite;
}

@keyframes walkElf {
    0% {
        left: -50px;
        transform: scaleX(1);
    }
    48% {
        left: 100%;
        transform: scaleX(1);
    }
    50% {
        left: 100%;
        transform: scaleX(-1);
    }
    98% {
        left: -50px;
        transform: scaleX(-1);
    }
    100% {
        left: -50px;
        transform: scaleX(1);
    }
}

/* Christmas Lights Border */
body.christmas-theme::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 5px solid transparent;
    border-image: repeating-linear-gradient(
        45deg,
        #ff0000 0px,
        #ff0000 20px,
        #00ff00 20px,
        #00ff00 40px,
        #ffff00 40px,
        #ffff00 60px,
        #0000ff 60px,
        #0000ff 80px
    ) 1;
    animation: borderGlow 3s linear infinite;
    pointer-events: none;
    z-index: 9999;
}

@keyframes borderGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}

/* Festive Background Overlay */
.christmas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at 50% 50%,
        rgba(139, 0, 0, 0.05) 0%,
        rgba(0, 100, 0, 0.05) 50%,
        transparent 100%);
}

/* Wreath Decorations */
.wreath {
    position: fixed;
    font-size: 4rem;
    pointer-events: none;
    z-index: 996;
    animation: wreathRotate 20s linear infinite;
}

.wreath.top-left {
    top: 80px;
    left: 20px;
}

.wreath.top-right {
    top: 80px;
    right: 20px;
}

@keyframes wreathRotate {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(5deg) scale(1.05); }
}

/* Snowman */
.snowman {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 4rem;
    pointer-events: none;
    z-index: 996;
    animation: snowmanWave 3s ease-in-out infinite;
    opacity: 0.85;
}

@keyframes snowmanWave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Candy Canes */
.candy-canes {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: 100px;
    pointer-events: none;
    z-index: 995;
    display: flex;
    justify-content: space-around;
}

.candy-cane {
    font-size: 2.5rem;
    animation: candySwing 2s ease-in-out infinite;
}

@keyframes candySwing {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

/* Gift Boxes */
.gift-boxes {
    position: fixed;
    bottom: 135px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 994;
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
    opacity: 0.8;
}

.gift-box {
    font-size: 2rem;
    animation: giftBounce 2s ease-in-out infinite;
}

@keyframes giftBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Reindeer */
.reindeer {
    position: fixed;
    top: 15%;
    left: -100px;
    font-size: 2.5rem;
    pointer-events: none;
    z-index: 1000;
    animation: reindeerJump 25s linear infinite;
}

@keyframes reindeerJump {
    0% {
        left: -100px;
        top: 15%;
    }
    25% {
        top: 10%;
    }
    50% {
        left: 110%;
        top: 25%;
    }
    75% {
        top: 20%;
    }
    100% {
        left: -100px;
        top: 15%;
    }
}

/* Star Ornaments */
.star-ornaments {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 993;
}

.star-ornament {
    position: absolute;
    font-size: 1.5rem;
    animation: starTwinkle 3s ease-in-out infinite;
}

@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.6;
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 5px gold);
    }
    50% {
        opacity: 1;
        transform: rotate(180deg) scale(1.2);
        filter: drop-shadow(0 0 15px gold);
    }
}

/* Gingerbread Men */
.gingerbread-men {
    position: fixed;
    bottom: 150px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 992;
    opacity: 0.75;
}

.gingerbread-man {
    position: absolute;
    font-size: 1.5rem;
    animation: gingerbreadDance 3s ease-in-out infinite;
}

@keyframes gingerbreadDance {
    0%, 100% { transform: rotate(-5deg); }
    25% { transform: rotate(5deg) translateY(-5px); }
    50% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg) translateY(-5px); }
}

/* Christmas Bells */
.christmas-bells {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    pointer-events: none;
    z-index: 991;
    animation: bellRing 2s ease-in-out infinite;
}

@keyframes bellRing {
    0%, 100% { transform: translateX(-50%) rotate(-10deg); }
    25% { transform: translateX(-50%) rotate(10deg); }
    50% { transform: translateX(-50%) rotate(-10deg); }
    75% { transform: translateX(-50%) rotate(10deg); }
}

/* Holly Decorations */
.holly-decorations {
    position: fixed;
    top: 100px;
    width: 100%;
    pointer-events: none;
    z-index: 990;
    display: flex;
    justify-content: space-evenly;
}

.holly {
    font-size: 2rem;
    animation: hollyBob 3s ease-in-out infinite;
}

@keyframes hollyBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(5deg); }
}

/* Progressive intensity classes */
.christmas-level-1 .snowflake { animation-duration: 15s; }
.christmas-level-2 .snowflake { animation-duration: 12s; }
.christmas-level-3 .snowflake { animation-duration: 10s; }
.christmas-level-4 .snowflake { animation-duration: 8s; }
.christmas-level-5 .snowflake { animation-duration: 6s; }

/* Hide decorations based on intensity level */
.christmas-level-1 .candy-canes,
.christmas-level-1 .gift-boxes,
.christmas-level-1 .reindeer,
.christmas-level-1 .star-ornaments,
.christmas-level-1 .gingerbread-men,
.christmas-level-1 .christmas-bells,
.christmas-level-1 .holly-decorations,
.christmas-level-1 .snowman { display: none; }

.christmas-level-2 .gift-boxes,
.christmas-level-2 .reindeer,
.christmas-level-2 .star-ornaments,
.christmas-level-2 .gingerbread-men,
.christmas-level-2 .christmas-bells,
.christmas-level-2 .holly-decorations { display: none; }

.christmas-level-3 .reindeer,
.christmas-level-3 .star-ornaments,
.christmas-level-3 .gingerbread-men,
.christmas-level-3 .christmas-bells { display: none; }

.christmas-level-4 .star-ornaments,
.christmas-level-4 .gingerbread-men { display: none; }

/* Christmas Eve & Christmas Day - MAXIMUM FESTIVITY */
body.christmas-level-5 {
    animation: christmasJoy 5s ease-in-out infinite;
}

@keyframes christmasJoy {
    0%, 100% { filter: hue-rotate(0deg); }
    33% { filter: hue-rotate(10deg); }
    66% { filter: hue-rotate(-10deg); }
}

/* ===== MONTHLY THEME DECORATIONS ===== */

/* January - Winter Wonderland */
.polar-bears {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 996;
}

.polar-bear {
    position: absolute;
    font-size: 3rem;
    animation: bearWalk 20s linear infinite;
}

@keyframes bearWalk {
    0% { left: -100px; transform: scaleX(1); }
    48% { left: 100%; transform: scaleX(1); }
    50% { left: 100%; transform: scaleX(-1); }
    98% { left: -100px; transform: scaleX(-1); }
    100% { left: -100px; transform: scaleX(1); }
}

.ice-crystals {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.ice-crystal {
    position: absolute;
    color: #b3e5fc;
    font-size: 1.5rem;
    animation: crystalShine 3s ease-in-out infinite;
}

@keyframes crystalShine {
    0%, 100% { opacity: 0.4; transform: rotate(0deg) scale(1); }
    50% { opacity: 1; transform: rotate(180deg) scale(1.3); }
}

/* February - Valentine's Day */
.floating-hearts {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.floating-heart {
    position: absolute;
    bottom: -50px;
    color: #ff1744;
    font-size: 2rem;
    animation: heartFloat linear infinite;
}

@keyframes heartFloat {
    to {
        transform: translateY(-100vh) rotate(360deg) scale(1.5);
        opacity: 0;
    }
}

.cupids {
    position: fixed;
    top: 20%;
    left: -100px;
    font-size: 3rem;
    pointer-events: none;
    z-index: 998;
    animation: cupidFly 25s linear infinite;
}

@keyframes cupidFly {
    0% { left: -100px; transform: scaleX(1); }
    100% { left: 110%; transform: scaleX(1); }
}

.roses {
    position: fixed;
    bottom: 15px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 995;
    display: flex;
    justify-content: space-around;
}

.rose {
    font-size: 2.5rem;
    animation: roseGrow 3s ease-in-out infinite;
}

@keyframes roseGrow {
    0%, 100% { transform: scale(1) rotate(-5deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

/* February - General Celebrations (Feb 1-12, 15-28/29) */
/* Celebrates: Black History Month, Presidents, Groundhog Day, Inventions, Library Lovers */
.winter-hearts {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.winter-heart {
    position: absolute;
    font-size: 2rem;
    animation: winterHeartPulse 4s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

@keyframes winterHeartPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.february-celebrations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
}

/* Black History Month decorations */
.bhm-decorations {
    position: absolute;
    top: 10%;
    left: 5%;
    font-size: 2.5rem;
    animation: bhmFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
}

@keyframes bhmFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Presidents decorations */
.presidents-decorations {
    position: absolute;
    top: 15%;
    right: 8%;
    font-size: 2.5rem;
    animation: presidentsWave 5s ease-in-out infinite;
}

@keyframes presidentsWave {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* Groundhog decoration */
.groundhog-decoration {
    position: absolute;
    bottom: 10%;
    left: 10%;
    font-size: 3rem;
    animation: groundhogPeek 8s ease-in-out infinite;
}

@keyframes groundhogPeek {
    0%, 80%, 100% { transform: translateY(80px); }
    10%, 70% { transform: translateY(0); }
}

/* Science/Inventions decorations (Edison, Darwin) */
.science-decorations {
    position: absolute;
    top: 50%;
    right: 5%;
    font-size: 2.5rem;
    animation: scienceSpark 4s ease-in-out infinite;
}

@keyframes scienceSpark {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.15);
        filter: brightness(1.3) drop-shadow(0 0 20px rgba(255, 255, 0, 0.8));
    }
}

/* Books decorations (Library Lovers Month) */
.books-decorations {
    position: absolute;
    bottom: 20%;
    right: 12%;
    font-size: 2.5rem;
    animation: booksStack 5s ease-in-out infinite;
}

@keyframes booksStack {
    0%, 100% { transform: translateX(0) rotate(-3deg); }
    50% { transform: translateX(-10px) rotate(3deg); }
}

/* March - Spring Awakening */
.flying-birds {
    position: fixed;
    top: 15%;
    left: -100px;
    pointer-events: none;
    z-index: 999;
}

.bird {
    position: absolute;
    font-size: 2rem;
    animation: birdFly 18s linear infinite;
}

@keyframes birdFly {
    0% { left: -100px; top: 0; }
    50% { left: 50vw; top: -50px; }
    100% { left: 110vw; top: 0; }
}

.rainbows {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6rem;
    pointer-events: none;
    z-index: 990;
    animation: rainbowPulse 4s ease-in-out infinite;
}

@keyframes rainbowPulse {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

.budding-flowers {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 994;
    display: flex;
    justify-content: space-around;
}

.budding-flower {
    font-size: 2rem;
    animation: flowerBud 4s ease-in-out infinite;
}

@keyframes flowerBud {
    0%, 100% { transform: scale(0.8) rotate(0deg); }
    50% { transform: scale(1.2) rotate(10deg); }
}

/* April - Spring Bloom (Bunnies!) */
.hopping-bunnies {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 997;
}

.bunny {
    position: absolute;
    font-size: 2.5rem;
    animation: bunnyHop 15s linear infinite;
}

@keyframes bunnyHop {
    0%, 100% { left: -100px; bottom: 20px; transform: scaleX(1); }
    10%, 30%, 50%, 70%, 90% { bottom: 80px; }
    20%, 40%, 60%, 80% { bottom: 20px; }
    48% { left: 100%; transform: scaleX(1); }
    50% { left: 100%; transform: scaleX(-1); }
    98% { left: -100px; transform: scaleX(-1); }
}

.easter-eggs {
    position: fixed;
    bottom: 15px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 994;
    display: flex;
    justify-content: space-around;
}

.easter-egg {
    font-size: 2rem;
    animation: eggWiggle 2s ease-in-out infinite;
}

@keyframes eggWiggle {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.butterflies {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 998;
}

.butterfly {
    position: absolute;
    font-size: 1.8rem;
    animation: butterflyFly 12s ease-in-out infinite;
}

@keyframes butterflyFly {
    0% { left: 0; top: 50%; transform: rotate(0deg); }
    25% { left: 25%; top: 20%; transform: rotate(45deg); }
    50% { left: 50%; top: 60%; transform: rotate(-45deg); }
    75% { left: 75%; top: 30%; transform: rotate(45deg); }
    100% { left: 100%; top: 50%; transform: rotate(0deg); }
}

/* May - Flowers in Bloom */
.bees {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 998;
}

.bee {
    position: absolute;
    font-size: 1.5rem;
    animation: beeFly 10s linear infinite;
}

@keyframes beeFly {
    0% { left: 0; top: 20%; }
    25% { left: 30%; top: 60%; }
    50% { left: 70%; top: 30%; }
    75% { left: 40%; top: 70%; }
    100% { left: 100%; top: 40%; }
}

.blooming-flowers {
    position: fixed;
    bottom: 15px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 995;
    display: flex;
    justify-content: space-around;
}

.blooming-flower {
    font-size: 3rem;
    animation: flowerBloom 5s ease-in-out infinite;
}

@keyframes flowerBloom {
    0%, 100% { transform: scale(0.9) rotate(-10deg); }
    50% { transform: scale(1.3) rotate(10deg); }
}

/* June - Early Summer */
.kites {
    position: fixed;
    top: 10%;
    left: 0;
    width: 100%;
    height: 50%;
    pointer-events: none;
    z-index: 997;
}

.kite {
    position: absolute;
    font-size: 2.5rem;
    animation: kiteFloat 8s ease-in-out infinite;
}

@keyframes kiteFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-30px) rotate(5deg); }
}

.beach-balls {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 994;
    display: flex;
    justify-content: space-around;
}

.beach-ball {
    font-size: 2.5rem;
    animation: ballBounce 2s ease-in-out infinite;
}

@keyframes ballBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
}

.sun {
    position: fixed;
    top: 50px;
    right: 50px;
    font-size: 5rem;
    pointer-events: none;
    z-index: 991;
    animation: sunShine 3s ease-in-out infinite;
}

@keyframes sunShine {
    0%, 100% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 20px yellow); }
    50% { transform: rotate(180deg) scale(1.1); filter: drop-shadow(0 0 40px yellow); }
}

/* July - Summer Heat (Palm Trees!) */
.palm-trees {
    position: fixed;
    bottom: 15px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 996;
    display: flex;
    justify-content: space-around;
}

.palm-tree {
    font-size: 5rem;
    animation: palmSway 4s ease-in-out infinite;
}

@keyframes palmSway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

.surfboards {
    position: fixed;
    bottom: 120px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 993;
    display: flex;
    justify-content: space-evenly;
}

.surfboard {
    font-size: 2rem;
    animation: surfboardFloat 3s ease-in-out infinite;
}

@keyframes surfboardFloat {
    0%, 100% { transform: rotate(-15deg) translateY(0); }
    50% { transform: rotate(15deg) translateY(-10px); }
}

.sunglasses-decoration {
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4rem;
    pointer-events: none;
    z-index: 992;
    animation: sunglassesBob 3s ease-in-out infinite;
}

@keyframes sunglassesBob {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
    50% { transform: translateX(-50%) translateY(-15px) rotate(5deg); }
}

/* August - Beach Vibes */
.waves {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    pointer-events: none;
    z-index: 994;
    display: flex;
    justify-content: space-around;
}

.wave {
    font-size: 3rem;
    animation: waveMotion 3s ease-in-out infinite;
}

@keyframes waveMotion {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.seashells {
    position: fixed;
    bottom: 110px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 993;
    display: flex;
    justify-content: space-evenly;
}

.seashell {
    font-size: 2rem;
    animation: shellSpin 6s linear infinite;
}

@keyframes shellSpin {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
}

.tropical-fish {
    position: fixed;
    top: 30%;
    left: -100px;
    pointer-events: none;
    z-index: 997;
}

.fish {
    position: absolute;
    font-size: 2rem;
    animation: fishSwim 20s linear infinite;
}

@keyframes fishSwim {
    0% { left: -100px; top: 0; transform: scaleX(1); }
    48% { left: 110vw; top: 0; transform: scaleX(1); }
    50% { left: 110vw; top: 100px; transform: scaleX(-1); }
    98% { left: -100px; top: 100px; transform: scaleX(-1); }
    100% { left: -100px; top: 0; transform: scaleX(1); }
}

/* September - Autumn Begins */
.falling-leaves {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.falling-leaf {
    position: absolute;
    top: -50px;
    font-size: 2rem;
    animation: leafFall linear infinite;
}

@keyframes leafFall {
    to {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0.5;
    }
}

.acorns {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 993;
    display: flex;
    justify-content: space-around;
}

.acorn {
    font-size: 2rem;
    animation: acornDrop 4s ease-in-out infinite;
}

@keyframes acornDrop {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

.squirrels {
    position: fixed;
    bottom: 15px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 996;
}

.squirrel {
    position: absolute;
    font-size: 2.5rem;
    animation: squirrelRun 18s linear infinite;
}

@keyframes squirrelRun {
    0%, 100% { left: -100px; transform: scaleX(1); }
    10%, 30%, 50%, 70%, 90% { transform: translateY(-30px) scaleX(1); }
    48% { left: 100%; transform: scaleX(1); }
    50% { left: 100%; transform: scaleX(-1); }
    98% { left: -100px; transform: scaleX(-1); }
}

/* October - Halloween */
.pumpkins {
    position: fixed;
    bottom: 15px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 995;
    display: flex;
    justify-content: space-around;
}

.pumpkin {
    font-size: 3.5rem;
    animation: pumpkinGlow 2s ease-in-out infinite;
}

@keyframes pumpkinGlow {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px orange); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 30px orange); }
}

.bats {
    position: fixed;
    top: 10%;
    left: 0;
    width: 100%;
    height: 50%;
    pointer-events: none;
    z-index: 998;
}

.bat {
    position: absolute;
    font-size: 2rem;
    animation: batFly 8s ease-in-out infinite;
}

@keyframes batFly {
    0%, 100% { left: 0; top: 0; transform: scaleX(1); }
    50% { left: 90%; top: 40%; transform: scaleX(-1); }
}

.ghosts {
    position: fixed;
    top: 20%;
    left: 0;
    width: 100%;
    height: 60%;
    pointer-events: none;
    z-index: 997;
}

.ghost {
    position: absolute;
    font-size: 2.5rem;
    animation: ghostFloat 6s ease-in-out infinite;
}

@keyframes ghostFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
    50% { transform: translateY(-30px) rotate(10deg); opacity: 1; }
}

/* November - Thanksgiving */
.turkeys {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 996;
}

.turkey {
    position: absolute;
    font-size: 3rem;
    animation: turkeyWalk 22s linear infinite;
}

@keyframes turkeyWalk {
    0%, 100% { left: -100px; transform: scaleX(1) rotate(0deg); }
    48% { left: 100%; transform: scaleX(1) rotate(-5deg); }
    50% { left: 100%; transform: scaleX(-1) rotate(0deg); }
    98% { left: -100px; transform: scaleX(-1) rotate(5deg); }
}

.autumn-leaves {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.autumn-leaf {
    position: absolute;
    top: -50px;
    font-size: 2.5rem;
    animation: autumnLeafFall linear infinite;
}

@keyframes autumnLeafFall {
    to {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0.6;
    }
}

.harvest-items {
    position: fixed;
    bottom: 15px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 993;
    display: flex;
    justify-content: space-around;
}

.harvest-item {
    font-size: 2.5rem;
    animation: harvestBounce 3s ease-in-out infinite;
}

@keyframes harvestBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.1); }
}