/* ─── Fonts & Resets ─── */
@import url('https://fonts.googleapis.com/css2?family=Tagesschrift&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'Tagesschrift', system-ui, sans-serif;
  min-height: 100vh;
  background-color: black;
  color: white;
}


/* spotlight_effect.css */

/* Ensure container isolates the mask */

.sun-container {
  position: relative;
  isolation: isolate;
}

/* colour layer—unchanged */

.sun-pop {
  position: absolute; 
  inset: 0;
  width: 100%; 
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
}

/* B/W layer—apply a moving circular mask */

.sun-bw {
  position: absolute; 
  inset: 0;
  width: 100%; 
  height: 100%;
  object-fit: contain;
  z-index: 1;

  /* mask: hole of radius 6em at (varX, varY), black elsewhere */

  -webkit-mask-image: radial-gradient(
    circle 5em at var(--maskX, -9999px) var(--maskY, -9999px),
    transparent 100%,
    black 5em
  );
          mask-image: radial-gradient(
    circle 5em at var(--maskX, -9999px) var(--maskY, -9999px),
    transparent 100%,
    black 5em
  );
  mask-repeat: no-repeat;
}