/* ==========================================================================
   fluidez.css · común a las tres demos. Entrada de imágenes + respiración con el scroll.
   Solo transform, opacity, filter y clip-path. Movimiento reducido: fundido simple.
   ========================================================================== */
:root { --fluida-curva: cubic-bezier(0.16, 1, 0.3, 1); --fluida-dur: 1500ms; }

/* Lenis (sus reglas recomendadas): mientras hay inercia, nada de scroll-behavior nativo */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

.fluida { overflow: hidden; }
.fluida img { transform-origin: 50% 50%; will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  .js .fluida {
    opacity: 0; filter: blur(14px) saturate(.7);
    clip-path: inset(14% 8% 14% 8%);
    transition: opacity 900ms var(--fluida-curva), filter var(--fluida-dur) var(--fluida-curva), clip-path var(--fluida-dur) var(--fluida-curva);
  }
  .js .fluida[data-fluida="lateral"] { clip-path: inset(0 100% 0 0); }
  .js .fluida[data-fluida="centro"] { clip-path: inset(0 50% 0 50%); }
  .js .fluida[data-fluida="abajo"] { clip-path: inset(100% 0 0 0); }
  .js .fluida.es-visible { opacity: 1; filter: none; clip-path: inset(0 0 0 0); }

  /* dentro, la foto entra grande y se asienta; después respira con el scroll (--fp de 0 a 1) */
  .js .fluida img {
    transform: scale(calc(1.22 - var(--fp, .5) * .1)) translate3d(0, calc((var(--fp, .5) - .5) * -4%), 0);
    transition: transform 1800ms var(--fluida-curva);
  }
  .js .fluida.es-visible img {
    transform: scale(calc(1.1 - var(--fp, .5) * .1)) translate3d(0, calc((var(--fp, .5) - .5) * -4%), 0);
    transition: transform 1800ms var(--fluida-curva);
  }
  .js .fluida.es-visible.es-asentada img { transition: none; } /* tras la entrada, el scroll manda sin retraso */
}
@media (prefers-reduced-motion: reduce) {
  .js .fluida { opacity: 0; transition: opacity 400ms linear; }
  .js .fluida.es-visible { opacity: 1; }
}