/* ─────────────────────────────────────────────
   MEDIA FX · shared image presentation
   Used by case studies + portfolio (media-fx.js)
   Reveal-on-enter (clip-path) + scroll parallax
   + exit lift; all skipped for reduced motion.
   ───────────────────────────────────────────── */

.fx-media {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

/* Boxes created at runtime around bare imgs (case study .cs-img) carry the
   frame the img used to have; pre-existing frames (.img-p) keep their own. */
.fx-media.fx-wrap {
  border: 1px solid var(--hair-d);
}

.fx-media>img {
  border: 0;
  border-radius: 0;
  transform: scale(1.12);
  will-change: transform;
}

.fx-media.fx-reveal {
  clip-path: inset(12% 6% 12% 6% round 14px);
  transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-media.fx-reveal.in-view {
  clip-path: inset(0 0 0 0 round 14px);
}