/* ============================================================
   Clickable media — a subtle, snappy zoom on hover/focus.

   Whenever a DLS image tile is wrapped in a link, its image lifts a
   hair on hover: a barely-there scale (1.015) on a fast, snappy
   ease-out (180ms) — just enough to register as "this opens".
   The tiles already clip (overflow:hidden + radius), so the zoom
   stays inside the frame instead of overflowing it.

   The transition sits on the image unconditionally — it's inert on a
   static tile (nothing changes its transform), and only the presence
   of a hovered/focused ANCESTOR LINK applies the scale. So a tile is
   zoomable purely by being placed inside an <a>; non-linked tiles are
   untouched. Covers every DLS image tile the <project-list> component
   emits — Home carousel (.carousel__shot), Work gallery (.gallery__shot),
   recent grid (.recent__tile), case-study galleries (.casestudy__shot) —
   plus the About portraits (.photos__item), the archive tiles, and the
   Instagram masonry on About (.ig-tile).

   NOTE: this list is enumerated by class name, so a NEW project-list
   variant (or any new tile class) must be added here or it silently
   loses the zoom. Keep it in sync with scripts/projects.js.

   Motion respects prefers-reduced-motion (no scale, no transition).
   ============================================================ */

/* The set of zoomable images, named once. */
:is(
  .photos__item img,
  .casestudy__shot,
  .carousel__shot,
  .gallery__shot,
  .recent__tile img,
  [class*="archive__tile"] img,
  .ig-tile img
) {
  transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1);  /* snappy ease-out */
  will-change: transform;
}

/* The zoom itself — only under a hovered/focused link. */
a:hover :is(.photos__item img, .casestudy__shot, .carousel__shot, .gallery__shot, .recent__tile img, [class*="archive__tile"] img),
a:focus-visible :is(.photos__item img, .casestudy__shot, .carousel__shot, .gallery__shot, .recent__tile img, [class*="archive__tile"] img) {
  transform: scale(1.0075);
}

@media (prefers-reduced-motion: reduce) {
  :is(.photos__item img, .casestudy__shot, .carousel__shot, .gallery__shot, .recent__tile img, [class*="archive__tile"] img) {
    transition: none;
  }
  a:hover :is(.photos__item img, .casestudy__shot, .carousel__shot, .gallery__shot, .recent__tile img, [class*="archive__tile"] img),
  a:focus-visible :is(.photos__item img, .casestudy__shot, .carousel__shot, .gallery__shot, .recent__tile img, [class*="archive__tile"] img) {
    transform: none;
  }
}