/* Directional scroll-reveal for images (added on top of the Framer clone).
   Images start offset + transparent, then slide to place when scrolled into view. */
img[data-reveal] {
  opacity: 0;
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
img[data-reveal="left"]   { transform: translateX(-60px); }
img[data-reveal="right"]  { transform: translateX(60px); }
img[data-reveal="bottom"] { transform: translateY(60px); }

img[data-reveal].reveal-in {
  opacity: 1;
  transform: translate(0, 0);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  img[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}