/* Petalume — Animações de entrada */

/* ============================================================
   FADE UP — aplicado via JS via IntersectionObserver
   ============================================================ */
.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay progressivo para grades */
.produto-card:nth-child(1)  { transition-delay: 0.05s; }
.produto-card:nth-child(2)  { transition-delay: 0.15s; }
.produto-card:nth-child(3)  { transition-delay: 0.25s; }
.produto-card:nth-child(4)  { transition-delay: 0.35s; }

.depoimento-card:nth-child(1) { transition-delay: 0.05s; }
.depoimento-card:nth-child(2) { transition-delay: 0.15s; }
.depoimento-card:nth-child(3) { transition-delay: 0.25s; }


/* ============================================================
   HEADER — sombra ao rolar
   ============================================================ */
#site-header.scrolled {
    box-shadow: 0 2px 24px rgba(194,123,107,0.12);
}


/* ============================================================
   MENU TOGGLE — animação X
   ============================================================ */
.menu-toggle.is-active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}