/* ===========================================================================
   motion.css — Capa de movimiento por objeto
   Ecotoxicología UAM · MOTION 5

   Patrón tomado de Slack: se separan tipo, estado y disparo.
   El objeto declara su entrada con una clase de tipo, nace pausado en el
   fotograma 0% y el observer lo pone en marcha al entrar al viewport.

   El marcado del HTML usa data-anim / data-stagger, no clases. Las clases
   las añade js/site.js. Sin JavaScript no se aplica nada y todo es visible.
   =========================================================================== */

:root {
  /* Firma de entrada. La duración y el easing son constantes en todo el sitio:
     es lo que hace que el movimiento se lea como un sistema y no como efectos. */
  --eco-ease-in-view: cubic-bezier(0.165, 0.84, 0.44, 1);  /* easeOutQuart */
  --eco-dur-in-view:  420ms;
  --eco-stagger:       70ms;
  --eco-rise:          24px;
  --eco-shift:         32px;
}

@media (max-width: 767px) {
  :root { --eco-rise: 12px; --eco-shift: 16px; }
}

/* ---- Fotogramas ---------------------------------------------------------- */
@keyframes eco-rise {
  from { opacity: 0; transform: translateY(var(--eco-rise)); }
  to   { opacity: 1; transform: none; }
}
@keyframes eco-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes eco-left {
  from { opacity: 0; transform: translateX(calc(var(--eco-shift) * -1)); }
  to   { opacity: 1; transform: none; }
}
@keyframes eco-right {
  from { opacity: 0; transform: translateX(var(--eco-shift)); }
  to   { opacity: 1; transform: none; }
}
@keyframes eco-scale {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: none; }
}
@keyframes eco-hero-bg {
  from { transform: scale(1.04); }
  to   { transform: none; }
}

/* ---- Estado base: pausado en el fotograma inicial ------------------------ */
.eco-anim {
  animation-duration: var(--eco-dur-in-view);
  animation-timing-function: var(--eco-ease-in-view);
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: var(--eco-d, 0ms);
}

/* ---- Tipo de entrada ----------------------------------------------------- */
.eco-anim--rise  { animation-name: eco-rise; }
.eco-anim--fade  { animation-name: eco-fade; }
.eco-anim--left  { animation-name: eco-left; }
.eco-anim--right { animation-name: eco-right; }
.eco-anim--scale { animation-name: eco-scale; }

/* ---- Disparo ------------------------------------------------------------- */
.eco-anim.is-in { animation-play-state: running; }

/* ---- Héroe: entra en carga, sin observer --------------------------------- */
/* Está en pantalla desde el primer fotograma; esperar a que "entre" se lee
   como un fallo de render. La cascada completa cierra en 620 ms.            */
.eco-hero .eco-hero__bg,
.eco-pagehead .eco-pagehead__bg {
  animation: eco-hero-bg 900ms var(--ease-soft) both;
}
.eco-hero__inner > *,
.eco-pagehead__inner > * {
  animation: eco-rise var(--eco-dur-in-view) var(--eco-ease-in-view) both;
}
.eco-hero__inner > *:nth-child(1),
.eco-pagehead__inner > *:nth-child(1) { animation-name: eco-fade; animation-delay: 0ms; }
.eco-hero__inner > *:nth-child(2),
.eco-pagehead__inner > *:nth-child(2) { animation-delay: 60ms; }
.eco-hero__inner > *:nth-child(3),
.eco-pagehead__inner > *:nth-child(3) { animation-delay: 130ms; }
.eco-hero__inner > *:nth-child(4),
.eco-pagehead__inner > *:nth-child(4) { animation-delay: 200ms; }
.eco-hero__inner > *:nth-child(n+5),
.eco-pagehead__inner > *:nth-child(n+5) { animation-delay: 270ms; }

/* ---- Micro-interacciones ------------------------------------------------- */
/* Duración corta del DS: un cambio de estado no debe verse como una entrada. */
.eco-card {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.eco-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.eco-card:active { transform: translateY(-1px); }

/* Subrayado que crece desde la izquierda en los enlaces con flecha. */
.eco-research__link { position: relative; display: inline-block; }
.eco-research__link::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1.5px;
  background: currentColor;
  transition: width var(--dur-base) var(--ease-out);
}
.eco-research__link:hover::after,
.eco-research__link:focus-visible::after { width: 100%; }

.eco-btn:active { transform: translateY(1px); }

/* ---- Movimiento reducido ------------------------------------------------- */
/* Colapsa a estado final. Ninguna sección puede quedar invisible. */
@media (prefers-reduced-motion: reduce) {
  .eco-anim,
  .eco-hero .eco-hero__bg,
  .eco-pagehead .eco-pagehead__bg,
  .eco-hero__inner > *,
  .eco-pagehead__inner > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .eco-card:hover { transform: none; }
  .eco-research__link::after { transition: none; }
}