/* ============================================
   ANIMAÇÕES DOS TEMAS FLUTUANTES
   Escola Place - Arquivo separado para temas
   ============================================ */

/* ============================================
   ANIMAÇÕES DOS BOTÕES DE TEMA
   ============================================ */
@keyframes pulse-santa {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes spin-christmas {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(10deg) scale(1.05); }
    50% { transform: rotate(0deg) scale(1); }
    75% { transform: rotate(-10deg) scale(1.05); }
    100% { transform: rotate(0deg) scale(1); }
}

@keyframes pulse-carnival {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(10deg); }
}

/* ============ FLOCOS DE NEVE (NATAL) ============ */
.snowflake {
    position: absolute;
    top: -10%;
    color: white;
    text-shadow: 0 0 5px rgba(255,255,255,0.8);
    animation: fall linear infinite;
    pointer-events: none;
}

@keyframes fall {
    to { transform: translateY(110vh); }
}

/* ============ LUZES PISCANTES (NATAL) ============ */
.light-string {
    position: absolute;
    display: flex;
    pointer-events: none;
}

.light {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
    animation: blink 1s infinite alternate;
}

@keyframes blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.9); }
}

/* ============ TRENÓ PAPAI NOEL (NATAL) ============ */
.santa-sleigh-big {
    position: fixed;
    top: 15%;
    left: -450px;
    z-index: 10000;
    animation: fly-across 12s linear;
    pointer-events: none;
}

@keyframes fly-across {
    to { left: 110%; }
}

.reindeer-jump {
    animation: jump 0.6s ease-in-out infinite;
}

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

/* ============ MORCEGOS VOANDO ALEATORIAMENTE (HALLOWEEN) ============ */
.bat-flying {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    font-size: 35px;
    animation: bat-random-fly linear;
}

@keyframes bat-random-fly {
    0% { transform: translate(0, 0) scaleX(1); }
    25% { transform: translate(var(--x1), var(--y1)) scaleX(-1); }
    50% { transform: translate(var(--x2), var(--y2)) scaleX(1); }
    75% { transform: translate(var(--x3), var(--y3)) scaleX(-1); }
    100% { transform: translate(var(--x4), var(--y4)) scaleX(1); }
}

/* ============ VAMPIRO APARECENDO (HALLOWEEN) ============ */
.vampire-appear {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
}

.vampire-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: vampire-jump-scare 3s ease-out;
}

@keyframes vampire-jump-scare {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    10% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    20% { transform: translate(-50%, -50%) scale(1.1); }
    30% { transform: translate(-50%, -50%) scale(1.2); }
    80% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

/* ============ BOLA INDO PARA O GOL (COPA DO MUNDO) ============ */
.soccer-ball {
    position: fixed;
    font-size: 60px;
    z-index: 10000;
    pointer-events: none;
}

.ball-shoot {
    bottom: 10%;
    left: 10%;
    animation: ball-to-goal 2s ease-in;
}

@keyframes ball-to-goal {
    0% {
        bottom: 10%;
        left: 10%;
        transform: rotate(0deg) scale(1);
    }
    100% {
        bottom: 50%;
        left: 80%;
        transform: rotate(720deg) scale(0.5);
    }
}

/* ============ GOL APARECENDO (COPA DO MUNDO) ============ */
.goal-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 10001;
    pointer-events: none;
    font-size: 120px;
    font-weight: bold;
    text-shadow: 
        0 0 20px rgba(255,255,255,0.8),
        0 0 40px rgba(255,223,0,0.6),
        5px 5px 10px rgba(0,0,0,0.5);
    animation: goal-appear 3s ease-out;
}

@keyframes goal-appear {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.4) rotate(5deg); opacity: 1; }
    40% { transform: translate(-50%, -50%) scale(1.2) rotate(-3deg); }
    60% { transform: translate(-50%, -50%) scale(1.3) rotate(2deg); }
    80% { transform: translate(-50%, -50%) scale(1.25) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0) rotate(10deg); opacity: 0; }
}

/* ============ FOGOS DE ARTIFÍCIO ============ */
.firework {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
}

.firework-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

@keyframes explode {
    0% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}

/* ============ CONFETES CARNAVAL ============ */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -10%;
    opacity: 0.8;
    animation: confetti-fall linear infinite;
}

@keyframes confetti-fall {
    to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ============ CONFETES BRASIL (FESTA JUNINA) ============ */
.confetti-brasil {
    position: absolute;
    width: 12px;
    height: 12px;
    top: -5%;
    opacity: 0.9;
    animation: confetti-brasil-fall linear infinite;
    pointer-events: none;
}

@keyframes confetti-brasil-fall {
    to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ============ CÍRCULOS VERDE E AMARELO (COPA DO MUNDO) ============ */
.circle-particle {
    position: absolute;
    border-radius: 50%;
    top: -5%;
    opacity: 0.7;
    animation: circle-fall linear infinite;
    pointer-events: none;
}

@keyframes circle-fall {
    to { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

/* ============ FOGUEIRA JUNINA ============ */
.bonfire {
    position: fixed;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    animation: flameFlicker 1.2s infinite ease-in-out;
    pointer-events: none;
}

@keyframes flameFlicker {
    0%, 100% { transform: translateX(-50%) scale(1) translateY(0); filter: brightness(1); }
    25% { transform: translateX(-50%) scale(1.05) translateY(-3px); filter: brightness(1.1); }
    50% { transform: translateX(-50%) scale(1.1) translateY(-6px); filter: brightness(1.2); }
    75% { transform: translateX(-50%) scale(1.05) translateY(-3px); filter: brightness(1.1); }
}

/* ============ CONTROLE DE ÁUDIO ============ */
.audio-control {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 15px;
    border-radius: 25px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
    display: none;
}

.audio-control:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

/* ============================================
   RESPONSIVIDADE MOBILE
   ============================================ */
@media (max-width: 768px) {
    .santa-sleigh-big svg { width: 300px; height: 150px; }
    .vampire-appear svg { width: 280px; height: 320px; }
    .soccer-ball { font-size: 40px; }
    .goal-text { font-size: 80px; }
    .bat-flying { font-size: 25px; }

    .bonfire { font-size: 100px !important; bottom: 15%; }

    #themeButtons {
        bottom: 80px !important;
        right: 10px !important;
        gap: 8px !important;
    }

    .theme-button {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
    }

    .audio-control {
        top: 10px;
        right: 10px;
        font-size: 20px;
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .santa-sleigh-big svg { width: 200px; height: 100px; }
    .vampire-appear svg { width: 200px; height: 240px; }
    .soccer-ball { font-size: 35px; }
    .goal-text { font-size: 60px; }
    .bat-flying { font-size: 20px; }
    .bonfire { font-size: 70px !important; }
}