/* GlitchCraft Engine effect: image-sheen — a soft, cursor-following
   highlight over the site's photo AND video containers (plain photo grid,
   plus every media type feature-card-media can hold: photos, click-to-play
   video posters, autoplay videos — see tokens.css/catalog.css for all of
   these). Lives on a ::after overlay, not the media element itself, so
   it isn't affected by the media's own scale-on-hover transform.
   image-sheen.js writes --sheen-x/--sheen-y (percentages) on mousemove;
   this file just reads them back.

   `position: relative` is needed on every one of these — most already
   have it for their own reasons, but .video-item-poster (the click-to-play
   button) doesn't, so it's set here regardless rather than relying on
   what each happens to already carry. `border-radius` is set explicitly
   (not `inherit`) for the same reason: .video-item-poster's own box is
   square — only its child img is rounded — so inheriting would leave our
   overlay's corners square while the media under it is rounded.

   z-index: 1 (not left to auto) is what actually keeps this ON TOP of the
   media on hover: a hovered img/video here gets `transform: scale(1.04)`
   (see tokens.css/catalog.css), and a transformed element establishes its
   own stacking context — leaving z-index to auto risks that context
   painting over an auto-stacked overlay in some engines. Explicit beats
   relying on DOM-order tie-breaking, same reason .video-item-play's own
   svg already sets z-index: 1 for itself below.

   No mix-blend-mode: it sounds right for a "sheen" but it also blends the
   depth shadow below, and blend-mode results depend on whatever's directly
   underneath — over a dark photo the shadow all but disappeared. Plain
   alpha compositing (a low-opacity white gradient, a low-opacity black
   shadow) reads consistently regardless of the media under it. */
.photo-grid-item,
.feature-card-media .photo-item,
.feature-card-media .video-item-poster,
.feature-card-media .video-item-autoplay {
  position: relative;
}
.photo-grid-item::after,
.feature-card-media .photo-item::after,
.feature-card-media .video-item-poster::after,
.feature-card-media .video-item-autoplay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-md);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle 120px at var(--sheen-x, 50%) var(--sheen-y, 50%),
    rgba(255, 255, 255, 0.16),
    transparent 70%
  );
  box-shadow: inset 0 0 14px 2px rgba(0, 0, 0, 0.22); /* 0.35 -> 0.28 -> 0.22 */
  transition: opacity 0.3s ease;
}
.photo-grid-item:hover::after,
.feature-card-media .photo-item:hover::after,
.feature-card-media .video-item-poster:hover::after,
.feature-card-media .video-item-autoplay:hover::after {
  opacity: 1;
}