/**
 * Scroll Reveal Effects - Estilos
 * Define el estado inicial (oculto) y el estado final (visible) de cada efecto.
 * Las variables --sre-duration, --sre-distance y --sre-easing
 * se definen dinámicamente desde PHP según la configuración del admin.
 */

/* Estado base: todo elemento marcado para animarse empieza invisible */
.sre-init {
    opacity: 0;
    will-change: opacity, transform;
    transition-property: opacity, transform;
    transition-duration: var(--sre-duration, 700ms);
    transition-timing-function: var(--sre-easing, ease-out);
}

/* Cuando se le añade esta clase (vía JS al entrar en pantalla), se revela */
.sre-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* ---------- FADE simple ---------- */
.sre-init[data-sre-effect="fade"] {
    transform: none;
}

/* ---------- FADE UP (aparece desde abajo) ---------- */
.sre-init[data-sre-effect="fade-up"] {
    transform: translateY(var(--sre-distance, 30px));
}

/* ---------- FADE DOWN (aparece desde arriba) ---------- */
.sre-init[data-sre-effect="fade-down"] {
    transform: translateY(calc(var(--sre-distance, 30px) * -1));
}

/* ---------- FADE LEFT (entra deslizando desde la derecha) ---------- */
.sre-init[data-sre-effect="fade-left"] {
    transform: translateX(var(--sre-distance, 30px));
}

/* ---------- FADE RIGHT (entra deslizando desde la izquierda) ---------- */
.sre-init[data-sre-effect="fade-right"] {
    transform: translateX(calc(var(--sre-distance, 30px) * -1));
}

/* ---------- ZOOM IN (crece desde pequeño) ---------- */
.sre-init[data-sre-effect="zoom-in"] {
    transform: scale(0.85);
}

/* ---------- ZOOM OUT (se reduce desde grande) ---------- */
.sre-init[data-sre-effect="zoom-out"] {
    transform: scale(1.15);
}

/* ---------- FLIP UP (giro 3D) ---------- */
.sre-init[data-sre-effect="flip-up"] {
    transform: perspective(1000px) rotateX(40deg);
    transform-origin: top;
}

/* Respeta la preferencia de "reducir movimiento" del sistema operativo */
@media (prefers-reduced-motion: reduce) {
    .sre-init {
        transition-duration: 1ms !important;
        transform: none !important;
    }
}

/* Oculta el efecto en móvil si está desactivado desde el admin */
.sre-mobile-disabled .sre-init {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}