<div class="cm-stage">
  <p class="cm-hint">Move your cursor across the photo — a circular window reveals the alternate version underneath</p>
  <div class="cm-frame" id="cmFrame">
    <div class="cm-base" aria-hidden="true"></div>
    <div class="cm-mask" id="cmMask" aria-hidden="true"></div>
    <span class="cm-tag cm-tag-day">Day</span>
    <span class="cm-tag cm-tag-night">Night</span>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0a0a14; display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.cm-stage { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px; }
.cm-hint { font-size: 13px; color: #64748b; text-align: center; max-width: 360px; }

.cm-frame {
  position: relative;
  width: min(480px, 90vw);
  height: 320px;
  border-radius: 20px;
  overflow: hidden;
  cursor: none;
  border: 1px solid #26263f;
}

.cm-base, .cm-mask {
  position: absolute;
  inset: 0;
}

/* "Day" layer — always fully visible underneath. */
.cm-base {
  background: linear-gradient(160deg, #7dd3fc 0%, #38bdf8 35%, #fbbf24 70%, #fb923c 100%);
}
.cm-base::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 40px at 75% 25%, #fff8, transparent 70%),
    linear-gradient(0deg, #0ea5e955 0%, transparent 40%);
}

/* "Night" layer — only visible through the circular mask that follows the cursor. */
.cm-mask {
  background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 45%, #312e81 100%);
  -webkit-mask-image: radial-gradient(circle 90px at var(--cm-x, -200px) var(--cm-y, -200px), #000 98%, transparent 100%);
          mask-image: radial-gradient(circle 90px at var(--cm-x, -200px) var(--cm-y, -200px), #000 98%, transparent 100%);
  transition: -webkit-mask-image 0.02s linear;
}
.cm-mask::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 60% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80% 40%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 35% 65%, #fff, transparent),
    radial-gradient(2px 2px at 90% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10% 80%, #fff, transparent);
  opacity: 0.8;
}

.cm-tag {
  position: absolute;
  top: 14px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(0,0,0,0.45); color: #fff;
  padding: 5px 10px; border-radius: 999px;
  pointer-events: none;
}
.cm-tag-day { left: 14px; }
.cm-tag-night { right: 14px; }

// A circular CSS mask-image is repositioned every mousemove via CSS custom
// properties, so the "night" layer only shows through a small circular
// window that follows the cursor exactly — like a flashlight revealing a
// second image underneath the first, rather than a text/color spotlight.
var frame = document.getElementById('cmFrame');
var mask = document.getElementById('cmMask');

function setSpot(x, y) {
  frame.style.setProperty('--cm-x', x + 'px');
  frame.style.setProperty('--cm-y', y + 'px');
  mask.style.setProperty('--cm-x', x + 'px');
  mask.style.setProperty('--cm-y', y + 'px');
}

frame.addEventListener('mousemove', function (e) {
  var rect = frame.getBoundingClientRect();
  setSpot(e.clientX - rect.left, e.clientY - rect.top);
});

frame.addEventListener('mouseleave', function () {
  setSpot(-200, -200); // move the window fully off-frame
});

frame.addEventListener('touchmove', function (e) {
  var t = e.touches[0];
  if (!t) return;
  var rect = frame.getBoundingClientRect();
  setSpot(t.clientX - rect.left, t.clientY - rect.top);
}, { passive: true });