/* ─────────────────────────────────────────────────────────────────────────────
 * Aparición al hacer scroll — mismos valores que animate.css (el que usa OLMO
 * en getsoftinweb.com), pero con IntersectionObserver: 2,4 KB en vez de ~70 KB
 * más jQuery.
 *
 * ⭐ Las direcciones son las de animate.css y significan DE DÓNDE VIENE:
 *   left  → entra desde la izquierda  (va en el bloque de la IZQUIERDA)
 *   right → entra desde la derecha    (va en el bloque de la DERECHA)
 * Así las dos mitades de una sección se separan hacia sus lados al aparecer,
 * que es el efecto del hero de getsoftinweb.com.
 *
 * ⚠️ Respeta prefers-reduced-motion y sin JS no oculta nada.
 * ───────────────────────────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transition: opacity 1.5s ease, transform 1.5s ease;
  will-change: opacity, transform;
}

/* fadeInUp — el más usado en OLMO (13 de 25). Por defecto. */
[data-reveal],
[data-reveal="up"]    { transform: translate3d(0, 20%, 0); }

/* fadeInLeft / fadeInRight — las dos mitades de una sección */
[data-reveal="left"]  { transform: translate3d(-20%, 0, 0); }
[data-reveal="right"] { transform: translate3d(20%, 0, 0); }

/* …Big: recorrido de 50%, para bloques grandes tipo hero */
[data-reveal="left-big"]  { transform: translate3d(-50%, 0, 0); }
[data-reveal="right-big"] { transform: translate3d(50%, 0, 0); }

[data-reveal="zoom"]  { transform: scale(.9); }

/* ⭐ Apertura desde el centro — las dos mitades arrancan juntas en el medio y se
   SEPARAN hacia sus posiciones. Es el signo contrario a left/right, que traen
   cada bloque desde fuera hacia dentro.
     split-left  → va en el bloque de la IZQUIERDA (empieza desplazado a la derecha)
     split-right → va en el bloque de la DERECHA   (empieza desplazado a la izquierda) */
[data-reveal="split-left"]  { transform: translate3d(20%, 0, 0); }
[data-reveal="split-right"] { transform: translate3d(-20%, 0, 0); }

[data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
[data-reveal="zoom"].is-visible { transform: scale(1); }

/* Escalonado — el índice lo pone el JS contando hermanos. Sin esto, las
   tarjetas de una fila entran todas a la vez y el efecto no se aprecia. */
[data-reveal] { transition-delay: calc(var(--reveal-i, 0) * .11s); }

/* ⭐ Elementos ANIDADOS dentro de un bloque que ya se mueve.
   El padre los arrastra, así que su desplazamiento propio se pierde. Se les da
   más recorrido y un retraso base para que entren DESPUÉS de que el padre haya
   llegado a su sitio — así el movimiento sí se ve, como en law. */
[data-reveal="in"] {
  transform: translate3d(0, 40px, 0);
  transition-delay: calc(.45s + var(--reveal-i, 0) * .14s);
}


/* ⚠️ Sin JS el contenido DEBE verse igual — si el script falla, nada queda oculto. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ⚠️ Mover un bloque hacia fuera desborda el ancho y saca barra horizontal. */
html { overflow-x: hidden; }