/* ==========================================================================
   Scroll-reveal motion
   Elements get [data-reveal] added by animate.js, then flip to .is-visible
   once they enter the viewport. Wrapped in prefers-reduced-motion so anyone
   with that OS setting just sees content in place, no animation at all.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* A couple of interactive elements get a slightly livelier hover, independent
   of the reduced-motion gate above since these are short, low-amplitude,
   and only trigger on deliberate user interaction (not on page load/scroll). */
.gallery__card,
.properties__card,
.story__image img,
.curated__media img {
  transition: transform 0.5s ease;
}
.gallery__card:hover,
.properties__card:hover {
  transform: translateY(-4px);
}
.story__image:hover img,
.curated__media:hover img {
  transform: scale(1.035);
}
.story__image,
.curated__media {
  overflow: hidden;
}