/*
 * VRI photo transition layer.
 *
 * Runtime photo changes use one decoded crossfade system instead of fading the
 * live image to blank before changing its source. Hero and lazy-loaded photos
 * keep their layout space, decode fully, then arrive through a quiet opacity
 * transition so slower networks do not produce one-frame image pops.
 * Home mentorship pair photos are excluded here because their page-specific
 * stylesheet/runtime already owns that decoded reveal.
 */

.vri-photo-crossfade-host {
  position: relative !important;
}

.vri-photo-crossfade-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Photos should enter quietly: retain the reveal fade but remove the 16px
 * upward travel used by ordinary editorial sections. */
body.js-enhanced .hero-scene-image.reveal,
body.js-enhanced .hero-scene-image.reveal.is-visible {
  transform: none;
}

/* The js-preload class is installed in the document head before first paint.
 * This prevents a partially decoded hero or lazy image from flashing onscreen.
 * The shared photo runtime adds is-vri-photo-ready only after load/decode. */
html.js-preload main .hero-scene-image img:not(.vri-photo-crossfade-overlay),
html.js-preload main img[loading="lazy"]:not(.vri-photo-crossfade-overlay):not([data-vri-home-pair]) {
  opacity: 0;
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.js-preload main .hero-scene-image img.is-vri-photo-ready:not(.vri-photo-crossfade-overlay),
html.js-preload main img[loading="lazy"].is-vri-photo-ready:not(.vri-photo-crossfade-overlay):not([data-vri-home-pair]) {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.js-preload main .hero-scene-image img:not(.vri-photo-crossfade-overlay),
  html.js-preload main img[loading="lazy"]:not(.vri-photo-crossfade-overlay):not([data-vri-home-pair]) {
    transition: none;
  }
}