/* ==========================================================================
   motion.css — Medalla de San Benito
   --------------------------------------------------------------------------
   Animación ligada al scroll, CSS puro (animation-timeline). Sin JavaScript,
   sin librerías, sin observers.

   Reglas que este archivo no rompe:
   · Sólo se animan `transform` y `opacity`. Nada que provoque layout o paint.
   · Todo vive dentro de @media (prefers-reduced-motion: no-preference)
     anidado en @supports. Si el navegador no lo soporta, o si el usuario pidió
     menos movimiento, el bloque entero no aplica y el contenido se ve
     completo y quieto. El estado por defecto ya es el estado final.
   · "Nada brilla, nada parpadea" (DESIGN.md §4): recorridos cortos, curva
     lineal contra el scroll, nada de rebotes.

   Cinco clases:
     .m-sube      entrada sobria: sube y aparece
     .m-lista     la misma entrada, escalonada entre hijos
     .m-deriva    deriva lenta de fondo (paralaje contenida)
     .m-progreso  barra de progreso de lectura
     .m-pila      tarjetas que se apilan al salir
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fotogramas
   -------------------------------------------------------------------------- */

@keyframes msb-sube {
  from { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes msb-deriva {
  from { transform: translate3d(0, -1.5rem, 0); }
  to   { transform: translate3d(0, 1.5rem, 0); }
}

@keyframes msb-progreso {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes msb-pila {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: .55; transform: scale(.94); }
}

/* --------------------------------------------------------------------------
   Estado base — sin movimiento
   Visible y colocado. Lo que sigue sólo lo matiza cuando se puede.
   -------------------------------------------------------------------------- */

.m-progreso {
  transform-origin: 0 50%;
  transform: scaleX(0);            /* sin soporte, la barra queda a cero */
  block-size: 3px;
  background-color: var(--msb-acento, #8C6B2F);
}

.m-pila { position: sticky; inset-block-start: var(--msb-e-3, 1.5rem); }

/* --------------------------------------------------------------------------
   Línea de tiempo de vista: entradas
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* .m-sube — el elemento sube 20px y aparece mientras entra en pantalla.
       Termina al 55% de la entrada: llega antes de que el ojo lo alcance. */
    .m-sube {
      animation-name: msb-sube;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
      will-change: transform, opacity;
    }

    /* .m-lista — misma entrada aplicada a los hijos directos.
       El escalonado sale solo (cada hijo entra en pantalla en su momento) y
       se acentúa retrasando el final del recorrido en los primeros seis. */
    .m-lista > * {
      animation-name: msb-sube;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
      will-change: transform, opacity;
    }

    .m-lista > :nth-child(1) { animation-range: entry 0% entry 42%; }
    .m-lista > :nth-child(2) { animation-range: entry 0% entry 50%; }
    .m-lista > :nth-child(3) { animation-range: entry 0% entry 58%; }
    .m-lista > :nth-child(4) { animation-range: entry 0% entry 66%; }
    .m-lista > :nth-child(5) { animation-range: entry 0% entry 74%; }
    .m-lista > :nth-child(6) { animation-range: entry 0% entry 82%; }

    /* .m-deriva — paralaje corta: 3rem en total, de punta a punta del paso
       por pantalla. Para fondos e imágenes de apoyo, nunca para texto. */
    .m-deriva {
      animation-name: msb-deriva;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }

    /* .m-pila — la tarjeta se encoge y se apaga al salir por arriba,
       dejando ver la siguiente. Requiere `position: sticky` (estado base). */
    .m-pila {
      transform-origin: 50% 0;
      animation-name: msb-pila;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
      will-change: transform, opacity;
    }
  }
}

/* --------------------------------------------------------------------------
   Línea de tiempo de scroll: progreso de lectura
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {

    /* .m-progreso — barra que avanza con el scroll del documento.
       Colócala fija arriba desde la plantilla o el bloque; aquí sólo se anima. */
    .m-progreso {
      animation-name: msb-progreso;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      will-change: transform;
    }
  }
}