/* ==========================================================================
   ARTEFACTO VISUAL — Animations
   animations.css v2.0 2026

   Sistema de animaciones de entrada en scroll.
   100% basado en opacity + transform — máxima compatibilidad cross-browser.
   No usa clip-path ni rotateX en animaciones: Chrome/Edge tienen un bug
   conocido con animation-fill-mode: forwards en esas propiedades.

   Todos los tipos usan CSS TRANSITIONS (no keyframe animations) para
   evitar cualquier conflicto de fill-mode en la cascada.

   Tipos (data-animate="..."):
   - title      → H1 texto plano: palabras con fade+slide escalonado
   - title-clip → H1 con HTML interior: fade+slide del elemento completo
   - heading    → H2 de sección: fade+slide
   - card       → tarjetas en grupo: slide-up escalonado (usa animation)
   - fade-up    → párrafos e imágenes: fade+slide suave
   - fade       → sidebar y metadatos: fade simple
   ========================================================================== */


/* --------------------------------------------------------------------------
   ESTADOS INICIALES
   Solo dentro de .anim-ready para que sin JS todo sea visible.
   -------------------------------------------------------------------------- */

/* title: el estado inicial lo gestionan los .word inyectados por JS */
.anim-ready [data-animate="title"] .word {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--word-i, 0) * 85ms);
}

/* title-clip: elemento completo con fade+slide */
.anim-ready [data-animate="title-clip"] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--animate-delay, 0ms);
}

/* heading: H2 y contenedores de sección */
.anim-ready [data-animate="heading"] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--animate-delay, 0ms);
}

/* card: estado inicial (la animación usa keyframe para el stagger) */
.anim-ready [data-animate="card"] {
  opacity: 0;
  transform: translateY(56px);
}

/* fade-up: párrafos e imágenes */
.anim-ready [data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--animate-delay, 0ms);
}

/* fade: sidebar y metadatos */
.anim-ready [data-animate="fade"] {
  opacity: 0;
  transition: opacity 500ms ease;
  transition-delay: var(--animate-delay, 150ms);
}


/* --------------------------------------------------------------------------
   ESTADOS VISIBLES — .is-visible añadido por IntersectionObserver
   Las transiciones se disparan automáticamente al añadir la clase.
   -------------------------------------------------------------------------- */

/* title: las palabras se revelan por transición individual */
[data-animate="title"].is-visible .word {
  opacity: 1;
  transform: translateY(0);
}

/* title-clip */
[data-animate="title-clip"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* heading */
[data-animate="heading"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* fade-up */
[data-animate="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* fade */
[data-animate="fade"].is-visible {
  opacity: 1;
}

/* card — mantiene keyframe para el stagger con --i */
@keyframes slideUpCard {
  from { opacity: 0; transform: translateY(56px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-animate="card"].is-visible {
  animation: slideUpCard 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}


/* --------------------------------------------------------------------------
   WORD-WRAP — contenedor para cada palabra en data-animate="title"
   Sin perspective ni overflow hidden: el efecto es solo fade+slide
   -------------------------------------------------------------------------- */

[data-animate="title"] .word-wrap {
  display: inline-block;
  vertical-align: bottom;
}

[data-animate="title"] .word {
  display: inline-block;
}


/* --------------------------------------------------------------------------
   PREFERS-REDUCED-MOTION — todo visible inmediatamente, sin transiciones
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .anim-ready [data-animate="title"] .word,
  .anim-ready [data-animate="title-clip"],
  .anim-ready [data-animate="heading"],
  .anim-ready [data-animate="card"],
  .anim-ready [data-animate="fade-up"],
  .anim-ready [data-animate="fade"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-animate="card"].is-visible {
    animation: none !important;
  }

}