/* ============================================================
   CodebyCarter — spotlight.css
   Cursor-following spotlight on dark sections. A soft radial
   light follows the cursor, revealing the section beneath. This
   is the "wait, how did he do that?" moment.
   ============================================================ */

/* Mark sections that should have a spotlight with [data-spotlight] */
[data-spotlight]{
  position:relative;
  isolation:isolate;
}

[data-spotlight]::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(
    600px circle at var(--sx, 50%) var(--sy, -50%),
    rgba(255,255,255,.08),
    transparent 40%
  );
  z-index:-1;
  opacity:0;
  transition:opacity .8s ease;
}
[data-spotlight].is-spot-active::after{
  opacity:1;
}

/* Larger / brighter variant — for the boldest sections */
[data-spotlight="hero"]::after{
  background:radial-gradient(
    700px circle at var(--sx, 50%) var(--sy, -50%),
    rgba(168,85,247,.18),
    rgba(236,72,153,.10) 25%,
    transparent 50%
  );
}

[data-spotlight="warm"]::after{
  background:radial-gradient(
    700px circle at var(--sx, 50%) var(--sy, -50%),
    rgba(255,180,80,.16),
    rgba(255,80,80,.06) 30%,
    transparent 55%
  );
}

[data-spotlight="cool"]::after{
  background:radial-gradient(
    700px circle at var(--sx, 50%) var(--sy, -50%),
    rgba(127,191,157,.16),
    rgba(168,230,207,.06) 30%,
    transparent 55%
  );
}

[data-spotlight="gold"]::after{
  background:radial-gradient(
    700px circle at var(--sx, 50%) var(--sy, -50%),
    rgba(212,164,55,.20),
    rgba(250,204,21,.08) 30%,
    transparent 55%
  );
}

/* Touch devices + reduced motion users get nothing */
@media (hover:none){
  [data-spotlight]::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  [data-spotlight]::after{display:none}
}