/* V12: one focal interaction on the selected Hero image.
   The mask restores the source image tone without changing V7 scroll scale
   or V8 pointer parallax transforms. */
.hero-frame {
  isolation: isolate;
}

.hero-frame > .hero-image-base {
  position: relative;
  z-index: 0;
}

.hero-original-reveal {
  --v12-reveal-core: clamp(82px, 6vw, 96px);
  --v12-reveal-near: clamp(112px, 8.3vw, 132px);
  --v12-reveal-soft: clamp(176px, 12.8vw, 205px);
  --v12-reveal-radius: clamp(240px, 17.8vw, 285px);
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  contain: paint;
  -webkit-mask-image: radial-gradient(
    circle at var(--v12-reveal-x, -360px) var(--v12-reveal-y, -360px),
    #000 0 var(--v12-reveal-core),
    rgba(0, 0, 0, .92) var(--v12-reveal-near),
    rgba(0, 0, 0, .48) var(--v12-reveal-soft),
    transparent var(--v12-reveal-radius)
  );
  mask-image: radial-gradient(
    circle at var(--v12-reveal-x, -360px) var(--v12-reveal-y, -360px),
    #000 0 var(--v12-reveal-core),
    rgba(0, 0, 0, .92) var(--v12-reveal-near),
    rgba(0, 0, 0, .48) var(--v12-reveal-soft),
    transparent var(--v12-reveal-radius)
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: opacity 320ms ease;
}

.hero-original-reveal > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #140508;
  filter: saturate(1) contrast(1.05) brightness(1);
}

.hero-frame.is-brightness-revealing > .hero-original-reveal {
  opacity: 1;
  transition-duration: 220ms;
  will-change: opacity;
}

.hero-frame > .hero-wash {
  z-index: 2;
  pointer-events: none;
}

@media (hover: none), (pointer: coarse) {
  .hero-original-reveal {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-original-reveal {
    display: none;
  }
}