/* ============================================================
   ANIM.CSS · Animaciones de aparición al hacer scroll (secciones).
   NO cambia el diseño: solo el MOVIMIENTO de entrada de elementos
   que ya existen. Se activa por data-anim y la clase .is-visible.
   Tipos: letters | lines | rows | clip | fade | pop.
   Solo anima transform, opacity, filter y clip-path.
   ============================================================ */

:root { --anim-ease: cubic-bezier(.16, 1, .3, 1); }

/* ---------- 5 · FADE (etiquetas, subtítulos, chips, textos pequeños) ---------- */
[data-anim="fade"] { opacity: 0; transform: translateY(14px); filter: blur(8px); }
[data-anim="fade"].is-visible {
  opacity: 1; transform: translateY(0); filter: blur(0);
  transition: opacity .55s var(--anim-ease), transform .55s var(--anim-ease), filter .55s var(--anim-ease);
  transition-delay: var(--anim-delay, 0s);
}

/* ---------- 6 · POP (botones y CTAs) ---------- */
[data-anim="pop"] { opacity: 0; transform: scale(.92); }
[data-anim="pop"].is-visible {
  opacity: 1; transform: scale(1);
  transition: opacity .5s var(--anim-ease), transform .5s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: var(--anim-delay, 0s);
}

/* ---------- 4 · CLIP (imágenes y tarjetas) ---------- */
[data-anim="clip"] { clip-path: inset(0 0 100% 0); }
[data-anim="clip"].is-visible {
  clip-path: inset(0 0 0 0);
  transition: clip-path .6s var(--anim-ease);
  transition-delay: var(--anim-delay, 0s);
}
/* La imagen interior entra con un zoom visible (1.16 -> 1) y ágil */
[data-anim="clip"] img { transform: scale(1.16); }
[data-anim="clip"].is-visible img {
  transform: scale(1);
  transition: transform .8s var(--anim-ease);
  transition-delay: var(--anim-delay, 0s);
}
/* Al terminar, se quita el clip para no recortar sombras/hover */
[data-anim="clip"].anim-clip-done { clip-path: none; }

/* ---------- 3 · ROWS (tablas y listas: filas en cascada) ---------- */
[data-anim="rows"] > * { opacity: 0; transform: translateY(16px); }
[data-anim="rows"].is-visible > * {
  opacity: 1; transform: translateY(0);
  transition: opacity .5s var(--anim-ease), transform .5s var(--anim-ease);
  /* el retraso por fila lo pone el JS en cada hijo */
}

/* ---------- 1 · LETTERS (títulos grandes: letra por letra) ---------- */
[data-anim="letters"] .anim-letter {
  display: inline-block;
  opacity: 0; transform: translateY(20px); filter: blur(12px);
}
[data-anim="letters"].is-visible .anim-letter {
  opacity: 1; transform: translateY(0); filter: blur(0);
  transition: opacity .55s var(--anim-ease), transform .55s var(--anim-ease), filter .55s var(--anim-ease);
  /* el retraso por letra lo pone el JS en cada span */
}

/* ---------- 2 · LINES (frases/párrafos: revelado por línea con máscara) ---------- */
[data-anim="lines"] .anim-line { display: block; overflow: hidden; }
[data-anim="lines"] .anim-line > span { display: inline-block; transform: translateY(100%); }
[data-anim="lines"].is-visible .anim-line > span {
  transform: translateY(0);
  transition: transform .7s var(--anim-ease);
  /* el retraso por línea lo pone el JS */
}

/* ============================================================
   RED DE SEGURIDAD: sin JavaScript, todo visible
   ============================================================ */
.no-js [data-anim] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}
.no-js [data-anim="clip"] img { transform: none !important; }

/* ============================================================
   MÓVIL: distancias a la mitad (los escalonados los reduce el JS)
   ============================================================ */
@media (max-width: 768px) {
  [data-anim="fade"] { transform: translateY(7px); }
  [data-anim="rows"] > * { transform: translateY(8px); }
  [data-anim="letters"] .anim-letter { transform: translateY(10px); filter: blur(8px); }
}

/* ============================================================
   REDUCIR MOVIMIENTO: aparición SUAVE (solo fundido), no se desactiva.
   (Windows suele traer esta preferencia activada; si se desactivara
   por completo no se vería ninguna animación de entrada.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-anim] { transform: none; filter: none; clip-path: none; opacity: 0; }
  [data-anim] img { transform: none !important; }
  [data-anim] .anim-letter,
  [data-anim] .anim-line > span,
  [data-anim="rows"] > * { opacity: 1; transform: none; filter: none; }
  [data-anim].is-visible {
    opacity: 1;
    transition: opacity .6s ease;
    transition-delay: var(--anim-delay, 0s);
  }
}