/**
 * SJPR Blocks — Animações de entrada via IntersectionObserver
 * Ativadas pelo JS sjpr-blocks.js quando o elemento entra no viewport.
 *
 * Uso: adicione data-sjpr-anim="<tipo>" e opcionalmente data-sjpr-delay="0.2"
 * Tipos: fade | fade-up | fade-left | fade-right
 */

/* ── Estado inicial (oculto) ── */
[data-sjpr-anim] {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity  0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-sjpr-anim="fade"] {
    transform: none;
}

[data-sjpr-anim="fade-up"] {
    transform: translateY(48px);
}

[data-sjpr-anim="fade-left"] {
    transform: translateX(-56px);
}

[data-sjpr-anim="fade-right"] {
    transform: translateX(56px);
}

/* ── Estado visível (após IntersectionObserver disparar) ── */
[data-sjpr-anim].sjpr-is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* ── Respeita prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    [data-sjpr-anim] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}