.jk-shaft-reveal {
  --jk-reveal-radius: clamp(48px, 10vw, 150px);
  --jk-reveal-feather: clamp(20px, 3vw, 48px);
  --jk-reveal-feather-soft: clamp(8px, 1.25vw, 20px);
  --jk-reveal-x: 50%;
  --jk-reveal-y: 50%;

  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 2173 / 515;
  touch-action: pan-y;
}

.jk-shaft-reveal img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.jk-shaft-reveal__photo {
  z-index: 1;
}

.jk-shaft-reveal__model {
  z-index: 2;
}

.jk-shaft-reveal.is-active .jk-shaft-reveal__model {
  -webkit-mask-image: radial-gradient(
    circle at var(--jk-reveal-x) var(--jk-reveal-y),
    transparent 0,
    transparent var(--jk-reveal-radius),
    rgba(0, 0, 0, 0.22) calc(var(--jk-reveal-radius) + var(--jk-reveal-feather-soft)),
    #000 calc(var(--jk-reveal-radius) + var(--jk-reveal-feather))
  );
  mask-image: radial-gradient(
    circle at var(--jk-reveal-x) var(--jk-reveal-y),
    transparent 0,
    transparent var(--jk-reveal-radius),
    rgba(0, 0, 0, 0.22) calc(var(--jk-reveal-radius) + var(--jk-reveal-feather-soft)),
    #000 calc(var(--jk-reveal-radius) + var(--jk-reveal-feather))
  );
}