/* estado inicial (oculto) */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 1000ms ease, transform 1000ms ease;
    will-change: opacity, transform;
}

/* quando visível */
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* variações opcionais: direção */
.reveal[data-reveal="left"] {
    transform: translateX(-16px);
}

.reveal[data-reveal="right"] {
    transform: translateX(16px);
}

.reveal[data-reveal="up"] {
    transform: translateY(16px);
}

.reveal[data-reveal="down"] {
    transform: translateY(-16px);
}

.reveal.is-visible[data-reveal] {
    transform: translate(0,0);
}


/* Acessibilidade: respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {

    .reveal, .reveal.is-visible {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

}