/* Atlántico Innovación — el movimiento al hacer scroll (05 §5).
 *
 * Sin librerías y sin las animaciones del panel de Elementor. El JS (ai-motion.js,
 * < 3 KB) solo añade clases; TODO el movimiento lo hace esta hoja:
 *
 *   .ai-entrada          aparece al cargar (el hero), escalonado con --ai-retardo
 *   .ai-revela           aparece al entrar en pantalla, cuando el JS le pone .es-visible
 *   .ai-observa          recibe .es-visible sin ocultarse: para que sus líneas y trazas
 *                        arranquen al entrar la sección (la franja, cómo trabajamos)
 *   .ai-escalonado > *   reparte --ai-retardo entre los hijos (80 ms entre cada uno)
 *   .ai-linea            trazo SVG que se dibuja (hero al cargar; secciones al revelarse)
 *   .ai-traza            línea que crece de izquierda a derecha (cómo trabajamos)
 *   .ai-parallax         se desplaza más despacio que el scroll; mejora progresiva
 *
 * Y TODO se apaga con prefers-reduced-motion: los elementos ya visibles, las
 * líneas ya dibujadas. No es opcional: es accesibilidad.
 */

/* --- Entrada al cargar (hero) --- */
@keyframes ai-aparecer {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.ai-entrada {
  animation: ai-aparecer var(--ai-mov-lento) var(--ai-curva) both;
  animation-delay: calc(var(--ai-retardo, 0) * 120ms + 120ms);
}

/* --- Revelado al entrar en pantalla --- */
.ai-revela {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--ai-mov-base) var(--ai-curva),
              transform var(--ai-mov-base) var(--ai-curva);
  transition-delay: calc(var(--ai-retardo, 0) * 80ms);
  will-change: opacity, transform;
}
.ai-revela--arriba    { transform: translateY(-24px); }
.ai-revela--izquierda { transform: translateX(-32px); }
.ai-revela--derecha   { transform: translateX(32px); }
.ai-revela.es-visible { opacity: 1; transform: none; }

/* Sin JS nadie pondría .es-visible: todo visible desde el principio. */
html:not(.ai-js) .ai-revela { opacity: 1; transform: none; transition: none; }

/* --- Escalonado: los hijos entran de uno en uno --- */
.ai-escalonado > :nth-child(2) { --ai-retardo: 1; }
.ai-escalonado > :nth-child(3) { --ai-retardo: 2; }
.ai-escalonado > :nth-child(4) { --ai-retardo: 3; }
.ai-escalonado > :nth-child(5) { --ai-retardo: 4; }
.ai-escalonado > :nth-child(6) { --ai-retardo: 5; }

/* --- Líneas que se dibujan (SVG con pathLength="1") --- */
@keyframes ai-dibujar {
  to { stroke-dashoffset: 0; }
}
.ai-linea {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
/* En el hero se dibujan al cargar (0,8 s); en el resto, cuando la sección se revela. */
.ai-hero .ai-linea,
.es-visible .ai-linea,
html:not(.ai-js) .ai-linea {
  animation: ai-dibujar 800ms var(--ai-curva) forwards;
}
.ai-linea--2 { animation-delay: 150ms; }
.ai-linea--3 { animation-delay: 300ms; }

/* --- Línea que crece (cómo trabajamos) --- */
.ai-traza {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ai-mov-lento) var(--ai-curva);
}
.es-visible .ai-traza,
html:not(.ai-js) .ai-traza { transform: scaleX(1); }

/* --- Parallax suave: solo donde el navegador lo soporta, sin JS --- */
@supports (animation-timeline: view()) {
  @keyframes ai-parallax {
    from { transform: translateY(-7%); }
    to   { transform: translateY(7%); }
  }
  .ai-parallax {
    animation: ai-parallax linear both;
    animation-timeline: view();
  }
}

/* --- Todo apagado para quien lo pide --- */
@media (prefers-reduced-motion: reduce) {
  .ai-entrada { animation: none; }
  .ai-revela { opacity: 1; transform: none; transition: none; }
  .ai-linea { animation: none; stroke-dashoffset: 0; }
  .ai-traza { transform: none; transition: none; }
  .ai-parallax { animation: none; }
  .ai-tarjeta, .ai-tarjeta::after { transition: none; }
}