/* motion: hero
   Entrada cinematográfica breve al cargar (zoom de la imagen + aparición
   escalonada del contenido) y salida sutil controlada por hero.js.

   Reglas de seguridad:
   - Solo se anima transform y opacity.
   - animation-fill-mode: backwards → el estado natural (visible, sin
     transform) es el final: si el CSS o el JS fallan, el hero se ve normal.
   - El zoom vive en .hero-media (envoltorio); #heroimg queda libre para el
     parallax que escribe app.js en cada scroll. */

/* inset: -6% 0 = exactamente la caja que tenía #heroimg antes, así el recorte
   de background-size:cover y el centro que mide el parallax de app.js quedan
   idénticos. La foto (1536x1024, aspecto 1.50) apenas cubre el ancho, por eso
   la escala en reposo debe ser 1: cualquier escala menor abriría franjas a los
   lados y ensancharla cambiaría el encuadre. */
.hero-media {
  position: absolute;
  inset: -6% 0;
  animation: hero-zoom 1200ms cubic-bezier(.16, .72, .24, 1) backwards;
}

@keyframes hero-zoom {
  from { transform: scale(1.055); }
  to   { transform: scale(1); }   /* reposo = encuadre actual, sin cambios */
}

[data-hero-in] {
  animation: hero-rise 520ms cubic-bezier(.22, .7, .28, 1) backwards;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}

[data-hero-in="1"] { animation-delay:  40ms; }
[data-hero-in="2"] { animation-delay: 110ms; }
[data-hero-in="3"] { animation-delay: 180ms; }
[data-hero-in="4"] { animation-delay: 250ms; }
[data-hero-in="5"] { animation-delay: 320ms; }

/* ------------------------------------------------------------------ reduce */
@media (prefers-reduced-motion: reduce) {
  .hero-media,
  [data-hero-in] { animation: none !important; }
}