/* EXPERIMENT: scroll-reveal motion. Loaded only by index-motion.html.
   Elements get .fx (hidden start state) from scrollfx.js, then .fx-in when
   they enter the viewport. Variants tune the entrance per element type. */

@media (prefers-reduced-motion: no-preference) {
  .fx {
    opacity: 0;
    transform: translateY(34px);
    transition:
      opacity .6s cubic-bezier(.22, .9, .3, 1),
      transform .7s cubic-bezier(.22, 1.4, .3, 1); /* overshoot = playful snap */
    transition-delay: var(--fx-delay, 0s);
    will-change: opacity, transform;
  }

  /* cards roll in: rise + straighten from a slight tilt */
  .fx.fx-roll { transform: translateY(44px) rotate(-2.5deg) scale(.94); }

  /* big feature boxes zoom in */
  .fx.fx-zoom { transform: scale(.9); }

  /* hero card keeps its resting 1deg tilt, so land back on it */
  .fx.fx-tilt { transform: translateY(30px) rotate(5deg) scale(.92); }

  .fx.fx-in { opacity: 1; transform: none; }
  .fx.fx-tilt.fx-in { transform: rotate(1deg); }
}