/* Cinematic FX — estilos base. Los estados ocultos solo aplican bajo .fx
 * (clase que añade cinematic.js), así que sin JS todo queda visible. */
.fx {
  transition: opacity .9s cubic-bezier(.16,.84,.3,1),
              transform .9s cubic-bezier(.16,.84,.3,1),
              filter .9s cubic-bezier(.16,.84,.3,1);
  will-change: transform, opacity, filter;
}
.fx:not(.fx-in) { opacity: 0; }
.fx-in { opacity: 1; transform: none; filter: none; }

.fx[data-fx="reveal"]:not(.fx-in) { transform: translate3d(0, 48px, 0); }
.fx[data-fx="rise"]:not(.fx-in)   { transform: translate3d(0, 72px, 0); }
.fx[data-fx="zoom"]:not(.fx-in)   { transform: scale(.94); }
.fx[data-fx="blur"]:not(.fx-in)   { filter: blur(10px); }

.fx[data-fx="parallax"] { transition: none; will-change: transform; }
.fx[data-fx="tilt"] { transition: transform .15s ease-out; will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}