/* ──────────────────────────────────────────────
   Cursor Spotlight + Image Lens
   Base spotlight concept by omma.build, extended:
   - adapts to light AND dark sections (blend swap)
   - turns into a reveal lens over showcase images
   - inverted "scan" lens over the technical shots
   Pairs with spotlight.js. No dependencies.
   ────────────────────────────────────────────── */

/* ── Ambient glow that trails the cursor ───────────────────── */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;                 /* above content, below sticky nav/modals */
  transform: translate(-300px, -300px);
  will-change: transform;
  opacity: 0;
  transition: opacity .5s ease, background .45s ease;

  /* Dark default — only adds light (screen). Violet core, faint
     software-blue halo to echo the brand palette. */
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(77, 30, 247, 0.065) 0%,
    rgba(29, 184, 241, 0.03) 36%,
    transparent 60%);
}
body:hover .cursor-glow { opacity: 1; }

/* Over a light/white section: screen vanishes, so flip to multiply
   and let a violet bloom read as a soft tint instead. */
.cursor-glow[data-theme="light"] {
  mix-blend-mode: multiply;
  background: radial-gradient(circle,
    rgba(77, 30, 247, 0.085) 0%,
    rgba(77, 30, 247, 0.03) 38%,
    transparent 60%);
}

/* While a lens is active over an image, fade the ambient glow back
   so the local effect owns the moment. */
.cursor-glow[data-lens="on"] { opacity: .18; }

/* ── Image lens ────────────────────────────────────────────── */
/* JS tags each showcase media box with .spot-host and injects a
   .spot-lens (a clone of the image/video) right after the media.
   The lens is masked to a circle that tracks the cursor via the
   --mx / --my / --lens-r custom properties set on the host. */

.spot-host { position: relative; }

/* Dim + cool the base media while hovering, so the lens pops. */
.spot-host > img,
.spot-host > video { transition: filter .3s ease; }
.spot-host.spot-active > img,
.spot-host.spot-active > video { filter: brightness(.8) saturate(.68); }

.spot-lens {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s ease;
  -webkit-mask: radial-gradient(circle var(--lens-r, 140px) at var(--mx, 50%) var(--my, 50%),
    #000 0%, #000 40%, transparent 72%);
          mask: radial-gradient(circle var(--lens-r, 140px) at var(--mx, 50%) var(--my, 50%),
    #000 0%, #000 40%, transparent 72%);
}
.spot-host.spot-active .spot-lens { opacity: 1; }

/* The cloned media — bright, saturated reveal by default. */
.spot-lens-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.22) saturate(1.55) contrast(1.04);
}

/* Scan variant — invert under the cursor for an x-ray feel. */
.spot-lens[data-mode="invert"] .spot-lens-media {
  filter: invert(1) hue-rotate(180deg) contrast(1.05);
}

/* Thin accent ring riding the lens edge. */
.spot-lens::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent, #4d1ef7);
  mix-blend-mode: screen;
  opacity: .55;
  -webkit-mask: radial-gradient(circle var(--lens-r, 140px) at var(--mx, 50%) var(--my, 50%),
    transparent 0%, transparent 58%, #000 63%, #000 69%, transparent 74%);
          mask: radial-gradient(circle var(--lens-r, 140px) at var(--mx, 50%) var(--my, 50%),
    transparent 0%, transparent 58%, #000 63%, #000 69%, transparent 74%);
}

/* ── Hero collage colour-reveal ────────────────────────────── */
/* The collage is greyscale + dim by default. spotlight.js adds
   .spot-collage (switching the tiles to full colour) and injects a
   .hc-spot backdrop veil that recreates the greyscale look — then
   punches a circular hole at the cursor so the photos bloom into
   colour as the spotlight sweeps across. Gated on .spot-collage so
   touch / reduced-motion (where the JS bails) keep the original look. */
.hero-collage.spot-collage .hc-tile img { filter: none; }

.hc-spot {
  position: absolute;
  inset: 0;
  z-index: 2;                  /* above the grid, below grain (z3) + veil (z4) */
  pointer-events: none;
  -webkit-backdrop-filter: grayscale(1) brightness(.42) contrast(1.06);
          backdrop-filter: grayscale(1) brightness(.42) contrast(1.06);
}
/* While the cursor is over the collage, cut a soft hole that follows it.
   The centre only PARTIALLY lifts the veil (alpha ~0.5) so the photos
   read as muted colour rather than a full-saturation pop. */
.hero-collage.spot-active .hc-spot {
  -webkit-mask: radial-gradient(circle var(--hc-r, 180px) at var(--mx, -999px) var(--my, -999px),
    rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.6) 32%, #000 80%);
          mask: radial-gradient(circle var(--hc-r, 180px) at var(--mx, -999px) var(--my, -999px),
    rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.6) 32%, #000 80%);
}

/* ── Opt-outs ──────────────────────────────────────────────── */
@media (max-width: 768px), (hover: none) {
  .cursor-glow,
  .spot-lens { display: none; }
  .spot-host.spot-active > img,
  .spot-host.spot-active > video { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-glow,
  .spot-lens { display: none; }
  .spot-host.spot-active > img,
  .spot-host.spot-active > video { filter: none; }
}