/* ==========================================================================
   VISUAL POLISH — extends the existing motion language (light-sweep,
   gold glow) onto image cards, and adds scroll depth to the hero.
   Everything here degrades safely: no JS/motion = static, fully visible.
   ========================================================================== */

/* ---------- 1. Light-sweep on image cards (matches .btn's hover sweep) --- */
.poster-card, .portrait-grid figure, .about-photo, .split-media {
  position: relative;
  overflow: hidden;
}
.poster-card::after,
.portrait-grid figure::after,
.about-photo::after,
.split-media::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: skewX(-18deg);
  transition: left 900ms var(--ease-out-expo, ease);
  pointer-events: none;
  z-index: 2;
}
.poster-card:hover::after,
.portrait-grid figure:hover::after,
.about-photo:hover::after,
.split-media:hover::after {
  left: 130%;
}

/* ---------- 2. Hero parallax layer (moon background drifts slower) ------- */
.hero.hero-split {
  background-attachment: scroll; /* JS drives the offset via transform below */
}
.js-parallax .hero.hero-split {
  will-change: background-position;
}

@media (prefers-reduced-motion: reduce) {
  .poster-card::after, .portrait-grid figure::after,
  .about-photo::after, .split-media::after { display: none !important; }
}