/* ───────────────────────────────────────────────────────────────
   V10 · capa de movimiento sobre la v08 de José.
   No cambia tipografías, textos, colores ni composición:
   styles.css y los textos son idénticos. Todo lo nuevo vive aquí y en dynamics.js.
   Solo anima transform y opacity. Con «reducir movimiento» no se aplica nada.
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  :root { --ease-out: cubic-bezier(.23, 1, .32, 1); }

  /* Portada: el nombre se abre hacia los lados al bajar. */
  .hero { overflow: hidden; }
  .hero-image { overflow: hidden; }
  .hero-image img, .hero h1 em, .hero h1 strong { will-change: transform, opacity; }

  /* Textos que se van escribiendo: las palabras se encienden al leer. */
  .dyn-w { transition: opacity .18s linear; }

  /* Botones: ceden al pulsar; la flecha se adelanta al pasar el ratón. */
  .quick-actions a { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out); }
  .quick-actions a:active, .reel-frame:active { transform: scale(.97); }
  .quick-actions a span { transition: transform .25s var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .quick-actions a:hover span { transform: translate(2px, -2px); }
    .scroll-hint:hover span { transform: translateY(3px); }
    .scroll-hint span { display: inline-block; transition: transform .25s var(--ease-out); }
  }

  /* Fotos ampliables. */
  .dyn-zoomable { cursor: zoom-in; }
  .dyn-zoomable:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
  .dyn-lb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(13, 14, 16, .94); opacity: 0; transition: opacity .35s var(--ease-out); overscroll-behavior: contain; }
  .dyn-lb.is-open { opacity: 1; }
  .dyn-lb img { display: block; max-width: 92vw; max-height: 90vh; max-height: 90svh; width: auto; height: auto; cursor: zoom-out; opacity: 0; transform: scale(.95); transition: transform .55s var(--ease-out), opacity .35s var(--ease-out); }
  .dyn-lb.is-open img { opacity: 1; transform: none; }
  .dyn-lb button { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--white); background: transparent; color: var(--white); font: 400 1.5rem/1 var(--sans); cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out); }
  .dyn-lb button:hover, .dyn-lb button:focus-visible { background: var(--white); color: var(--ink); }
  .dyn-lb button:active { transform: scale(.95); }
  html.dyn-lock { overflow: hidden; }
}