/* ==========================================================================
   ABELHA GOURMET — animations.css
   Animações: fade in, scroll reveal, hover, voo da abelha, etc.
   ========================================================================== */

/* ----- FADE IN GERAL (usado no hero) ----- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content {
    animation: fadeInUp 1s ease forwards;
}

/* ----- SCROLL REVEAL ----- */
/* Elementos com a classe .reveal começam invisíveis e sobem suavemente
   quando entram na viewport (controlado via IntersectionObserver no JS) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ----- ANIMAÇÃO DE VOO DA ABELHA ----- */
@keyframes voar {
    0%   { transform: translate(0, 0) rotate(0deg); }
    20%  { transform: translate(4px, -6px) rotate(8deg); }
    40%  { transform: translate(-3px, -10px) rotate(-6deg); }
    60%  { transform: translate(5px, -4px) rotate(6deg); }
    80%  { transform: translate(-4px, -8px) rotate(-8deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* ----- SCROLL DOWN (indicador de rolagem) ----- */
@keyframes bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 10px); }
}

/* ----- PULSO DO BOTÃO WHATSAPP ----- */
@keyframes pulsar {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
    70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ----- CARDS LEVANTANDO (hover) ----- */
.feature-item,
.info-card,
.depoimento-card,
.galeria-item {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.feature-item:hover {
    transform: translateY(-6px);
}

.depoimento-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(255, 179, 0, 0.15);
}

/* ----- ENTRADA GRADUAL EM SEQUÊNCIA (galeria) ----- */
.galeria-grid.reveal.active .galeria-item {
    animation: fadeInUp 0.6s ease backwards;
}

.galeria-grid.reveal.active .galeria-item:nth-child(1) { animation-delay: 0.05s; }
.galeria-grid.reveal.active .galeria-item:nth-child(2) { animation-delay: 0.15s; }
.galeria-grid.reveal.active .galeria-item:nth-child(3) { animation-delay: 0.25s; }
.galeria-grid.reveal.active .galeria-item:nth-child(4) { animation-delay: 0.35s; }
.galeria-grid.reveal.active .galeria-item:nth-child(5) { animation-delay: 0.45s; }

/* ----- LOGO ANIMAÇÃO SUAVE NO HOVER ----- */
.logo-icon {
    transition: transform 0.4s ease;
}

.logo:hover .logo-icon {
    transform: rotate(-12deg) scale(1.1);
}