/* Background Animations Stylesheet */

/* Container para o fundo animado */
#animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* Partículas */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Ondas */
.wave {
    position: absolute;
    border: 2px solid;
    border-radius: 50%;
    opacity: 0.5;
    pointer-events: none;
}

/* Elementos de brilho */
.glow-element {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}

/* Neon lines */
.neon-line {
    position: absolute;
    pointer-events: none;
}

/* Elementos flutuantes */
.float-element {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: float-animation 6s ease-in-out infinite;
}

/* Luz se movendo */
.moving-light {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

/* Aurora effect */
.aurora-element {
    position: absolute;
    pointer-events: none;
}

/* Rain drops */
.rain-drop {
    position: absolute;
    pointer-events: none;
}

/* Sparkles */
.sparkle {
    position: absolute;
    pointer-events: none;
}

/* Bubbles */
.bubble {
    position: absolute;
    pointer-events: none;
}

/* Animações de movimento */
@keyframes particle-move {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty));
        opacity: 0;
    }
}

@keyframes wave-expand {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

@keyframes neon-glow {
    0%, 100% {
        text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
        opacity: 1;
    }
    50% {
        text-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
        opacity: 0.8;
    }
}

@keyframes light-move {
    0% {
        transform: translate(-100px, -100px);
    }
    25% {
        transform: translate(100%, -100px);
    }
    50% {
        transform: translate(100%, 100%);
    }
    75% {
        transform: translate(-100px, 100%);
    }
    100% {
        transform: translate(-100px, -100px);
    }
}

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

@keyframes aurora-move {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes rain-fall {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

@keyframes sparkle-twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

@keyframes bubble-rise {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
    }
}

/* Responsivo */
@media (max-width: 768px) {
    #animated-background {
        z-index: -1;
    }
    
    .particle {
        width: 2px !important;
        height: 2px !important;
    }
}

/* --- NOVAS ANIMAÇÕES --- */

/* Vórtice / Fumaça dinâmica */
.vortex-element {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
@keyframes vortex-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes vortex-scale {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.2); }
}

/* Chamas estilizadas animadas */
.flame-element {
    position: absolute;
    border-radius: 50% 50% 0 0;
    filter: blur(10px);
    transform: translateX(-50%);
    pointer-events: none;
}
@keyframes flame-rise {
    0% { transform: translateX(-50%) translateY(0) scaleY(1); opacity: 0.2; }
    50% { opacity: 0.8; }
    100% { transform: translateX(-50%) translateY(-100vh) scaleY(0.5); opacity: 0; }
}

/* Espiral de energia */
.spiral-element {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
@keyframes spiral-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Neve caindo */
.snow-flake {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
}
@keyframes snow-fall {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(100vh) translateX(50px); }
}

/* Fundo arco-íris animado */
.rainbow-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
@keyframes rainbow-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Nuvens passando */
.cloud-element {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    pointer-events: none;
}
@keyframes cloud-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(150vw); }
}

/* Explosões suaves de luz */
.explosion-element {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    filter: blur(30px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
@keyframes soft-explosion {
    0% { width: 0; height: 0; opacity: 0.3; }
    50% { width: 300px; height: 300px; opacity: 0.8; }
    100% { width: 0; height: 0; opacity: 0; }
}

/* Fogos de artifício minimalistas */
.firework-element {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
@keyframes firework-burst {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}

/* Estrelas se movendo estilo "space travel" */
.star-element {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
@keyframes space-travel {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0) translateY(-100vh); opacity: 0; }
}

/* Cascata de quadrados */
.square-element {
    position: absolute;
    pointer-events: none;
}
@keyframes square-fall {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(100vh) rotate(360deg); }
}

/* Bokeh animado */
.bokeh-element {
    position: absolute;
    border-radius: 50%;
    filter: blur(15px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
@keyframes bokeh-float {
    0% { transform: translate(-50%, -50%) translateY(0) translateX(0); }
    50% { transform: translate(-50%, -50%) translateY(-50px) translateX(50px); }
    100% { transform: translate(-50%, -50%) translateY(0) translateX(0); }
}

/* Pulsação no ritmo (leve) */
.pulse-element {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 5px solid;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
@keyframes rhythm-pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.1; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
}

/* Animação geométrica contínua */
.geometric-element {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
@keyframes geometric-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes geometric-move {
    0% { transform: translate(-50%, -50%) translateX(0) translateY(0); }
    100% { transform: translate(-50%, -50%) translateX(50px) translateY(50px); }
}

/* Espuma/bolhas subindo (versão avançada) */
.advanced-bubble {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}
@keyframes advanced-bubble-rise {
    0% { transform: translateY(0) translateX(0); opacity: 0.8; }
    50% { transform: translateY(-50vh) translateX(10px); opacity: 0.5; }
    100% { transform: translateY(-100vh) translateX(0); opacity: 0; }
}