/* HeroClip — walk-in clip that lands on the untouched portrait.
   .hc-box keeps the clip's exact 9:16 frame (1080×1920). The 852×1280-basis photo sits in it
   scaled to 1080×1621 at y=299; the top 299 px (15.6%) are extra studio backdrop (headroom).
   Place things with HeroClip.pct(photoX, photoY) (photo px -> % of this box).
   Default size: box height = hero height × 1920/1621, so the PHOTO part is exactly as tall as
   the hero (his size is unchanged vs the old 2:3 frame) and the headroom overflows above
   (clipped by .hc). Box width = 0.6656 × photo height, as before. */

.hc {
  position: relative;
  overflow: hidden;
  overflow: clip;   /* not scrollable by focus/scrollIntoView, unlike hidden */
  /* beyond the plate (ultra-wide / tall): approximates the photo's top row */
  background: linear-gradient(90deg, #fafafa 0%, #f7f7f7 55%, #ebebea 100%);
}

/* Concepts position the box (left/right/bottom); height drives width. */
.hc-box {
  position: absolute;
  bottom: 0;
  height: calc(100% * 1920 / 1621);
  aspect-ratio: 1080 / 1920;
}

/* Edge-stretched studio backdrop, 5760×1920 (3 frame-heights wide), frame (1080 wide) centred at x=2340. */
.hc-plate {
  position: absolute;
  top: 0;
  height: 100%;
  left: calc(-2340 / 1080 * 100%);
  width: calc(5760 / 1080 * 100%);
  background: url("assets/backdrop-plate-9x16.jpg") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.hc-media {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.hc-media > [hidden] { display: none; }
.hc-media > img,
.hc-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}

/* Box shorter than the hero: fade plate + media into .hc's background above. */
.hc--feather-top .hc-plate,
.hc--feather-top .hc-media {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%);
          mask-image: linear-gradient(180deg, transparent 0, #000 7%);
}
.hc--feather-top .hc-media {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%),
                      linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent 0, #000 7%),
                      linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-composite: intersect;
}

/* poster (first frame) sits underneath; the video stays up after it ends so
   the still crossfades over the clip's last frame, not over the poster */
.hc-video,
.hc-still { opacity: 0; }
.hc-still { transition: opacity var(--hc-land, 320ms) ease; }
.hc--played .hc-video { opacity: 1; }
.hc[data-state="landed"] .hc-still { opacity: 1; }
.hc[data-state="landed"].hc--instant .hc-still { transition: none; }

/* Slot for page overlays in photo coordinates. */
.hc-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}