/* logo_efeito_luminoso.css */

.logo-area {
    position: relative;
    z-index: 50; 
}

/* Camada de luz */
.logo-efeito-overlay {
    position: absolute;
    top: -300px;
    bottom: -340px;
    left: -300px;
    right: -300px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    mix-blend-mode: color-dodge;
    z-index: 10;
    
    /* ADIÇÃO: Aqui chamamos a animação de oscilação */
    animation: oscilarVela 4s infinite ease-in-out;
}

/* ADIÇÃO: O efeito de oscilação tipo vela (muda brilho e tamanho levemente) */
@keyframes oscilarVela {
    0% { 
        filter: brightness(1) contrast(1);
        transform: scale(1);
    }
    20% { 
        filter: brightness(1.3) contrast(1.1);
        transform: scale(1.05);
    }
    40% { 
        filter: brightness(0.9) contrast(0.9);
        transform: scale(0.98);
    }
    60% { 
        filter: brightness(1.4) contrast(1.2);
        transform: scale(1.08);
    }
    80% { 
        filter: brightness(0.8) contrast(1);
        transform: scale(0.95);
    }
    100% { 
        filter: brightness(1) contrast(1);
        transform: scale(1);
    }
}
@media (max-width: 768px) {

.logo-efeito-overlay {
    top: -200px;
    bottom: -200px;
    left: -200px;
    right: -200px;

}
}

/* Container da logo */
.logo-area {
    position: relative;
    z-index: 50;
    /* Adicionamos profundidade para o efeito 3D funcionar melhor */
    perspective: 1000px; 
}

/* --- NOVO EFEITO: Movimento da Imagem (logo.png) --- */
.logo-img {
    display: block;
    /* Aplica a animação de balanço: 6 segundos, infinita, suave */
    animation: balanco3D 2s infinite ease-in-out;
    transform-origin: center;
}

/* Lógica do movimento: afundando um lado e levantando o outro */
@keyframes balanco3D {
    0%, 100% {
        /* Lado esquerdo levemente para frente, lado direito para trás */
        transform: rotateY(-6deg) rotateX(2deg) scale(1);
    }
    50% {
        /* Inverte: Lado direito para frente, lado esquerdo "afunda" e diminui levemente */
        transform: rotateY(6deg) rotateX(-2deg) scale(0.89);
    }
}