.js-reveal--slide-text {
        opacity: 0;
        transform: translateY(30px);
        transition:
                opacity var(--duration-1000) ease-in-out,
                transform var(--duration-1000) ease-in-out;
}

.js-reveal--slide-text.is-inview {
        opacity: 1;
        transform: translateY(0);
}



/* ==================== ANIMACIÓN TIPO 1: ENTRADA CON DESPLAZAMIENTO HACIA ARRIBA ==================== */


/* Clase activada vía JS */
.animation-scroll-type-1 {
        opacity: 0;
        transform: translateY(35px);
        transition:
                opacity 0.75s ease-out,
                transform 0.75s ease-out;
}

/* Clase activada vía JS */
.animation-scroll-type-1.animation-scroll-type-1-visible {
        opacity: 1;
        transform: translateY(0);
}

@media (max-width: 768px) {
        .animation-scroll-type-1 {
                opacity: 1;
                transform: translateY(0);
        }
}

/* ==================== ANIMACIÓN DE ENTRADA SIMÉTRICA DESDE EL CENTRO ==================== */

/* Animación base, estado inicial */
.animation-reveal-scroll {
        opacity: 0;
        transform: translateX(0);
        transition:
                transform var(--duration-1000) ease-out,
                opacity var(--duration-1000) ease-out,
                mask-position var(--duration-1000) ease-out,
                -webkit-mask-position var(--duration-1000) ease-out;
}

/* Animación desde el centro hacia la izquierda */
.animation-reveal-scroll-left {
        transform: translateX(80px);
        -webkit-mask-image: linear-gradient(to left,
                        transparent 0%,
                        black 0%);
        -webkit-mask-size: 200% 100%;
        -webkit-mask-position: right;
        mask-image: linear-gradient(to left,
                        transparent 0%,
                        black 0%);
        mask-size: 200% 100%;
        mask-position: right;
}

/* Animación desde el centro hacia la derecha */
.animation-reveal-scroll-right {
        transform: translateX(-80px);
        -webkit-mask-image: linear-gradient(to right,
                        transparent 0%,
                        black 0%);
        -webkit-mask-size: 200% 100%;
        -webkit-mask-position: left;
        mask-image: linear-gradient(to right,
                        transparent 0%,
                        black 0%);
        mask-size: 200% 100%;
        mask-position: left;
}

/* Estado visible cuando entra en pantalla */
.animation-reveal-scroll.is-visible {
        opacity: 1;
        transform: translateX(0);
        -webkit-mask-position: center;
        mask-position: center;
}

/* ==================== ANIMACIÓN DE ENTRADA CON ZOOM OUT ==================== */

/* Fade + Slide on scroll */
.reveal-on-scroll {
        opacity: 0;
        transform: scale(0.95);
        transition:
                opacity 0.75s ease-out,
                transform 0.75s ease-out;
        will-change: opacity, transform;
}

.reveal-on-scroll.is-visible-reveal-on-scroll {
        opacity: 1;
        transform: scale(1);
}

/* Reduce motion (accesibilidad) */
@media (prefers-reduced-motion: reduce) {

        .reveal-on-scroll,
        .post-card,
        .post-media img,
        .post-overlay {
                transition: none !important;
                transform: none !important;
        }
}