/* ============================================================
   SPOTLIGHT CARD — borde que sigue al cursor. Adaptación vanilla de un
   patrón de "glow card" (referencia: 21st.dev "Spotlight Card"). Bajo
   Enmienda 4 el segundo tono (--cool-accent) ya no es frío/plata — es un
   dorado-arena más claro (ver tokens.css), así el halo interior sigue
   teniendo dos paradas de color sin volver a introducir un acento frío.
   Requiere data-spotlight en el elemento + js/core/spotlight-card.js
   para fijar --mx/--my.
   ============================================================ */
[data-spotlight]{
  position:relative;
  --mx:50%; --my:40%;
}
[data-spotlight]::before,
[data-spotlight]::after{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-premium);
}
/* Filo — anillo fino de 1px que se ilumina en frío/dorado justo donde
   está el cursor (mask-composite recorta el interior, deja solo el borde). */
[data-spotlight]::before{
  padding:1px;
  background:radial-gradient(240px circle at var(--mx) var(--my),
    var(--gold) 0%, var(--cool-accent) 45%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
/* Halo interior — luz fría muy sutil que entra en la superficie de la
   tarjeta, no un resplandor cálido que la empape entera. */
[data-spotlight]::after{
  background:radial-gradient(320px circle at var(--mx) var(--my), var(--cool-accent-dim), transparent 70%);
}
[data-spotlight]:hover::before,
[data-spotlight]:focus-within::before,
[data-spotlight].is-active::before{opacity:1;}
[data-spotlight]:hover::after,
[data-spotlight]:focus-within::after,
[data-spotlight].is-active::after{opacity:0.7;}

@media (prefers-reduced-motion: reduce){
  [data-spotlight]::before,
  [data-spotlight]::after{transition:none;}
}