/* ──────────────────────────────────────────────────────────
   The Ginger Group — Motion
   Scroll reveals + image hover transitions.
   Loads after brand.css / home.css / pages.css.
   Respects prefers-reduced-motion.
   ────────────────────────────────────────────────────────── */

/* ───── Scroll reveal — opt-in via [data-reveal] ───── */
.tgg [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s var(--tgg-ease),
    transform 0.9s var(--tgg-ease);
  will-change: opacity, transform;
}
.tgg [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ───── Image base transitions ───── */
.tgg .img {
  transition:
    transform 0.7s var(--tgg-ease),
    filter 0.5s var(--tgg-ease);
}

/* ───── Image hover zoom on interactive parents ───── */
.tgg .work__grid figure:hover .img,
.tgg .gallery-grid figure:hover .img,
.tgg .svc-variations__grid figure:hover .img,
.tgg .profile-portfolio__grid figure:hover .img,
.tgg .svc-row:hover .svc-row__thumb .img,
.tgg .services-list__row:hover .img,
.tgg .svc-split__photo:hover .img,
.tgg .first-visit__photo:hover .img,
.tgg .about-photo__frame:hover .img {
  transform: scale(1.04);
}

/* ───── Artist photos: grayscale → color on hover ───── */
.tgg .artist-card:hover .img {
  filter: grayscale(0);
  transform: scale(1.02);
}
.tgg .profile:hover .profile__photo .img {
  filter: grayscale(0);
}

/* ───── Reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
  .tgg [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tgg .img {
    transition: none;
  }
  .tgg .work__grid figure:hover .img,
  .tgg .gallery-grid figure:hover .img,
  .tgg .svc-variations__grid figure:hover .img,
  .tgg .profile-portfolio__grid figure:hover .img,
  .tgg .svc-row:hover .svc-row__thumb .img,
  .tgg .services-list__row:hover .img,
  .tgg .svc-split__photo:hover .img,
  .tgg .first-visit__photo:hover .img,
  .tgg .about-photo__frame:hover .img,
  .tgg .artist-card:hover .img {
    transform: none;
  }
  .tgg .artist-card:hover .img,
  .tgg .profile:hover .profile__photo .img {
    filter: grayscale(1);
  }
}