/* ============================================================================
   img-anim.css — scroll-reveal & hover for content photos only
   Elements are marked [data-photo] by img-anim.js at runtime.
   Only opacity + transform used — no layout changes, GPU-friendly.
   ============================================================================ */

/* ── Initial hidden state ──────────────────────────────────────────────────── */
img[data-photo] {
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}

/* ── Revealed state ────────────────────────────────────────────────────────── */
img[data-photo].is-photo-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hover: containers with overflow:hidden — scale is safely clipped ──────── */
/* .gallery-item, .project-card, .article-card, .about-img-wrap, .photo-card
   all already have overflow:hidden in their respective stylesheets */
.gallery-item img[data-photo].is-photo-visible,
.project-card img[data-photo].is-photo-visible,
.article-card img[data-photo].is-photo-visible,
.about-img-wrap img[data-photo].is-photo-visible,
.photo-card img[data-photo].is-photo-visible {
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), filter 0.42s ease;
}

.gallery-item img[data-photo].is-photo-visible:hover,
.project-card img[data-photo].is-photo-visible:hover,
.article-card img[data-photo].is-photo-visible:hover,
.about-img-wrap img[data-photo].is-photo-visible:hover,
.photo-card img[data-photo].is-photo-visible:hover {
  transform: scale(1.035);
  filter: brightness(1.06);
}

/* ── Hover: standalone / full-width images — brightness only, no scale ──────── */
[data-reveal] > img[data-photo].is-photo-visible,
.price-hero img[data-photo].is-photo-visible {
  transition: filter 0.42s ease;
}

[data-reveal] > img[data-photo].is-photo-visible:hover,
.price-hero img[data-photo].is-photo-visible:hover {
  filter: brightness(1.05);
}

/* ── Respect prefers-reduced-motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  img[data-photo] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  img[data-photo]:hover {
    transform: none !important;
    filter: none !important;
  }
}