/* ===== Animações leves para a página PidaJá ===== */
:root {
    --anim-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Entrada inicial */
.hero-copy > * {
    opacity: 0;
    transform: translateY(24px);
    animation: pidajaFadeUp .75s var(--anim-ease) forwards;
}
.hero-copy h1 { animation-delay: .08s; }
.hero-copy p { animation-delay: .18s; }
.hero-copy .btn-cta { animation-delay: .28s; }

.hero-visual {
    opacity: 0;
    transform: translateX(35px) scale(.97);
    animation: pidajaHeroImage .9s var(--anim-ease) .18s forwards;
}

/* Flutuação muito sutil do mockup principal */
.hero-visual img {
    
    transform-origin: center;
}

/* Cards entram conforme aparecem */
.benefit-card,
.personalization-copy,
.personalization-card,
.management-visual,
.management-copy,
.contact-content > * {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .7s var(--anim-ease),
        transform .7s var(--anim-ease);
}

.pidaja-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Hover dos benefícios */
.benefit-card {
    transition:
        opacity .7s var(--anim-ease),
        transform .35s var(--anim-ease),
        box-shadow .35s ease;
}
.benefit-card:hover {
    transform: translateY(-8px) !important;
}
.benefit-icon {
    transition: transform .35s var(--anim-ease);
}
.benefit-card:hover .benefit-icon {
    transform: translateY(-3px) scale(1.08) rotate(-3deg);
}

/* Hover nas imagens das seções */
.personalization-card img,
.management-visual img {
    transition: transform .5s var(--anim-ease), filter .5s ease;
}
.personalization-card:hover img,
.management-visual:hover img {
    transform: scale(1.025);
}

/* Botões */
.btn-cta,
.header-cta,
.form-submit {
    transition: transform .25s ease, box-shadow .25s ease;
}
.btn-cta:hover,
.header-cta:hover,
.form-submit:hover {
    transform: translateY(-3px);
}

/* Mascote */
.mascot-badge {
    transition: transform .5s var(--anim-ease);
}
.mascot-badge:hover {
    transform: translateY(-5px) rotate(-3deg);
}

/* Links do menu */
.nav-link {
    transition: color .25s ease, transform .25s ease;
}
.nav-link:hover {
    transform: translateY(-2px);
}

/* Respeita acessibilidade */


@keyframes pidajaFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pidajaHeroImage {
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes pidajaFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}