/**
 * Plugin Aniversário - Estilos CSS
 * Efeitos animados para celebração de aniversário
 */

/* Container principal para os efeitos */
.aniversario-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Elemento base para todos os efeitos */
.aniversario-efeito {
    position: fixed;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
    z-index: 999999;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ========== EFEITO CONFETES ========== */
.aniversario-confete {
    width: 10px;
    height: 10px;
    background: #ff6b6b;
    border-radius: 2px;
    animation: confeteCaindo 3s linear infinite;
}

.aniversario-confete:nth-child(2n) {
    background: #4ecdc4;
    animation-duration: 3.5s;
    animation-delay: 0.2s;
}

.aniversario-confete:nth-child(3n) {
    background: #45b7d1;
    animation-duration: 4s;
    animation-delay: 0.4s;
}

.aniversario-confete:nth-child(4n) {
    background: #f9ca24;
    animation-duration: 3.2s;
    animation-delay: 0.6s;
}

.aniversario-confete:nth-child(5n) {
    background: #f0932b;
    animation-duration: 3.8s;
    animation-delay: 0.8s;
}

.aniversario-confete:nth-child(6n) {
    background: #eb4d4b;
    animation-duration: 3.3s;
    animation-delay: 1s;
}

.aniversario-confete:nth-child(7n) {
    background: #6c5ce7;
    animation-duration: 3.7s;
    animation-delay: 1.2s;
}

@keyframes confeteCaindo {
    0% {
        transform: translateY(-20px) translateX(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    25% {
        transform: translateY(25vh) translateX(-10px) rotate(180deg) scale(0.8);
        opacity: 0.9;
    }
    50% {
        transform: translateY(50vh) translateX(10px) rotate(360deg) scale(1.1);
        opacity: 0.8;
    }
    75% {
        transform: translateY(75vh) translateX(-5px) rotate(540deg) scale(0.9);
        opacity: 0.6;
    }
    100% {
        transform: translateY(100vh) translateX(0) rotate(720deg) scale(0.7);
        opacity: 0;
    }
}

/* ========== EFEITO BALÕES ========== */
.aniversario-balao {
    font-size: 30px;
    animation: balaoSubindo 12s ease-out infinite;
}

.aniversario-balao:nth-child(2n) {
    animation-duration: 14s;
    animation-delay: 0.5s;
}

.aniversario-balao:nth-child(3n) {
    animation-duration: 16s;
    animation-delay: 1s;
}

.aniversario-balao:nth-child(4n) {
    animation-duration: 13s;
    animation-delay: 1.5s;
}

@keyframes balaoSubindo {
    0% {
        transform: translateY(100vh) translateX(0) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
        transform: translateY(95vh) translateX(2px) rotate(1deg) scale(0.8);
    }
    15% {
        opacity: 1;
        transform: translateY(85vh) translateX(8px) rotate(3deg) scale(1);
    }
    30% {
        transform: translateY(70vh) translateX(-12px) rotate(-6deg) scale(1.1);
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) translateX(18px) rotate(4deg) scale(1.05);
        opacity: 1;
    }
    70% {
        transform: translateY(30vh) translateX(-15px) rotate(-8deg) scale(1);
        opacity: 0.9;
    }
    85% {
        transform: translateY(15vh) translateX(10px) rotate(5deg) scale(0.95);
        opacity: 0.7;
    }
    95% {
        transform: translateY(5vh) translateX(-5px) rotate(-3deg) scale(0.8);
        opacity: 0.3;
    }
    100% {
        transform: translateY(-10vh) translateX(0) rotate(0deg) scale(0.6);
        opacity: 0;
    }
}

/* ========== EFEITO FOGOS DE ARTIFÍCIO ========== */
.aniversario-fogo {
    font-size: 20px;
    animation: fogoExplodindo 2s ease-out infinite;
}

.aniversario-fogo:nth-child(2n) {
    animation-delay: 0.5s;
    animation-duration: 2.5s;
}

.aniversario-fogo:nth-child(3n) {
    animation-delay: 1s;
    animation-duration: 2.2s;
}

.aniversario-fogo:nth-child(4n) {
    animation-delay: 1.5s;
    animation-duration: 2.8s;
}

@keyframes fogoExplodindo {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
        filter: brightness(1) blur(0px);
    }
    15% {
        transform: scale(0.3) rotate(45deg);
        opacity: 0.8;
        filter: brightness(1.5) blur(1px);
    }
    30% {
        transform: scale(1) rotate(90deg);
        opacity: 1;
        filter: brightness(2) blur(0px);
    }
    50% {
        transform: scale(1.8) rotate(180deg);
        opacity: 0.9;
        filter: brightness(1.8) blur(2px);
    }
    70% {
        transform: scale(1.2) rotate(270deg);
        opacity: 0.6;
        filter: brightness(1.2) blur(3px);
    }
    100% {
        transform: scale(0.2) rotate(360deg);
        opacity: 0;
        filter: brightness(0.5) blur(5px);
    }
}

/* ========== EFEITO ESTRELAS ========== */
.aniversario-estrela {
    font-size: 25px;
    animation: estrelaBrilhando 3s ease-in-out infinite;
    position: fixed;
}

.aniversario-estrela:nth-child(2n) {
    animation-delay: 0.5s;
    animation-duration: 3.5s;
}

.aniversario-estrela:nth-child(3n) {
    animation-delay: 1s;
    animation-duration: 4s;
}

.aniversario-estrela:nth-child(4n) {
    animation-delay: 1.5s;
    animation-duration: 3.2s;
}

@keyframes estrelaBrilhando {
    0% {
        opacity: 0.2;
        transform: scale(0.5) rotate(0deg);
        filter: brightness(1) drop-shadow(0 0 3px currentColor);
    }
    25% {
        opacity: 0.8;
        transform: scale(1.2) rotate(90deg);
        filter: brightness(1.5) drop-shadow(0 0 8px currentColor);
    }
    50% {
        opacity: 1;
        transform: scale(1.5) rotate(180deg);
        filter: brightness(2) drop-shadow(0 0 12px currentColor);
    }
    75% {
        opacity: 0.9;
        transform: scale(1.1) rotate(270deg);
        filter: brightness(1.8) drop-shadow(0 0 10px currentColor);
    }
    100% {
        opacity: 0.2;
        transform: scale(0.5) rotate(360deg);
        filter: brightness(1) drop-shadow(0 0 3px currentColor);
    }
}

/* ========== EFEITOS ESPECIAIS ========== */

/* Efeito de brilho para elementos especiais */
.aniversario-brilho {
    animation: brilhoEspecial 2s ease-in-out infinite;
}

@keyframes brilhoEspecial {
    0%, 100% {
        filter: brightness(1) saturate(1);
        text-shadow: 0 0 5px currentColor;
    }
    50% {
        filter: brightness(1.5) saturate(1.5);
        text-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
    }
}

/* Efeito de pulso para elementos importantes */
.aniversario-pulso {
    animation: pulsoFestivo 1.5s ease-in-out infinite;
}

@keyframes pulsoFestivo {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* ========== INTENSIDADES ========== */

/* Intensidade baixa - menos elementos */
.intensidade-baixa .aniversario-efeito:nth-child(n+11) {
    display: none;
}

/* Intensidade média - configuração padrão */
.intensidade-media .aniversario-efeito:nth-child(n+21) {
    display: none;
}

/* Intensidade alta - todos os elementos visíveis */
.intensidade-alta {
    /* Sem limitações */
}

/* ========== RESPONSIVIDADE ========== */

/* Tablets */
@media (max-width: 768px) {
    .aniversario-confete,
    .aniversario-balao,
    .aniversario-fogo,
    .aniversario-estrela {
        font-size: 80%;
    }
    
    .aniversario-confete {
        width: 8px;
        height: 8px;
    }
}

/* Smartphones */
@media (max-width: 480px) {
    .aniversario-confete,
    .aniversario-balao,
    .aniversario-fogo,
    .aniversario-estrela {
        font-size: 60%;
    }
    
    .aniversario-confete {
        width: 6px;
        height: 6px;
    }
    
    /* Reduz quantidade de efeitos em telas pequenas */
    .aniversario-efeito:nth-child(n+11) {
        display: none;
    }
}

/* ========== PREFERÊNCIAS DE MOVIMENTO ========== */

/* Respeita a preferência do usuário por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .aniversario-efeito {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        opacity: 0.5;
    }
}

/* ========== BOTÃO DE CONTROLE ========== */
.aniversario-controle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.aniversario-controle:hover {
    background: #ff5252;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.aniversario-controle.pausado {
    background: #666;
}

.aniversario-controle.pausado:hover {
    background: #555;
}

/* ========== EFEITOS DE ENTRADA ========== */
.aniversario-fadeIn {
    animation: fadeInEffect 0.5s ease-in forwards;
}

@keyframes fadeInEffect {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========== CORES CUSTOMIZÁVEIS ========== */
.cor-customizada-1 { color: var(--aniversario-cor-1, #ff6b6b); background: var(--aniversario-cor-1, #ff6b6b); }
.cor-customizada-2 { color: var(--aniversario-cor-2, #4ecdc4); background: var(--aniversario-cor-2, #4ecdc4); }
.cor-customizada-3 { color: var(--aniversario-cor-3, #45b7d1); background: var(--aniversario-cor-3, #45b7d1); }
.cor-customizada-4 { color: var(--aniversario-cor-4, #f9ca24); background: var(--aniversario-cor-4, #f9ca24); }
.cor-customizada-5 { color: var(--aniversario-cor-5, #f0932b); background: var(--aniversario-cor-5, #f0932b); }
.cor-customizada-6 { color: var(--aniversario-cor-6, #eb4d4b); background: var(--aniversario-cor-6, #eb4d4b); }
.cor-customizada-7 { color: var(--aniversario-cor-7, #6c5ce7); background: var(--aniversario-cor-7, #6c5ce7); }