.reveal-image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  background: #000;

  --x: 50%;
  --y: 50%;
  --r: 0px;
  --strength: 1;
  --skew: 12deg;
  --tint: #3a66c4;
}

.reveal-photo,
.reveal-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reveal-light {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  pointer-events: none;
  mix-blend-mode: multiply;
  will-change: transform;
  opacity: var(--strength);
  transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) skewX(var(--skew));
  background: radial-gradient(
    circle closest-side,
    color-mix(in srgb, var(--tint) 100%, transparent) 0%,
    color-mix(in srgb, var(--tint) 96%, transparent) 10%,
    color-mix(in srgb, var(--tint) 85%, transparent) 20%,
    color-mix(in srgb, var(--tint) 69%, transparent) 30%,
    color-mix(in srgb, var(--tint) 51%, transparent) 40%,
    color-mix(in srgb, var(--tint) 33%, transparent) 50%,
    color-mix(in srgb, var(--tint) 18%, transparent) 60%,
    color-mix(in srgb, var(--tint) 8%, transparent) 70%,
    color-mix(in srgb, var(--tint) 2%, transparent) 80%,
    transparent 90%
  );
}

.reveal-image .reveal-light {
  max-width: none;
}

.reveal-content a,
.reveal-content button {
  pointer-events: auto;
}