/* ============================================================
   Site Builder — Animações globais
   Uso: adicione data-reveal + class="anim anim--<tipo>"
   O JS do layout adiciona .is-visible quando o elemento entra na tela.
============================================================ */

[data-reveal] {
    opacity: 0;
    transition: opacity .7s ease, transform .7s ease;
    will-change: opacity, transform;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none !important;
}

/* Tipos base ------------------------------------------------- */
.anim--fade-in     { /* só opacidade */ }
.anim--fade-up     { transform: translateY(32px); }
.anim--fade-down   { transform: translateY(-32px); }
.anim--slide-up    { transform: translateY(48px); }
.anim--slide-left  { transform: translateX(48px); }
.anim--slide-right { transform: translateX(-48px); }
.anim--zoom-in     { transform: scale(.92); }
.anim--zoom-out    { transform: scale(1.08); }

/* Keyframe-based (para autoplay contínuo, ex: pulse em CTA) */
@keyframes sb-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}
.anim--pulse {
    animation: sb-pulse 2.4s ease-in-out infinite;
}

@keyframes sb-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.anim--float {
    animation: sb-float 3s ease-in-out infinite;
}

/* Respeito a prefers-reduced-motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .anim--pulse, .anim--float {
        animation: none !important;
    }
}