/* ============================================================
   Spotlight glow en cards (utilería: spotlight-card, port del GlowCard de
   21st.dev). Comportamiento FIEL:
     - SIEMPRE activo y GLOBAL: la luz sigue el cursor por toda la rejilla.
     - Se ilumina SOLO el segmento del borde cercano al cursor (radial pequeño
       + máscara que muestra solo el marco). Al mover el cursor, el punto de luz
       recorre los bordes de las cards.
   Tono cálido de marca (naranja→fresa) según la posición horizontal.

   Variables globales (js/glow-cards.js escribe en :root):
     --gx/--gy = cursor en px (viewport)   --ghue = tono
   ============================================================ */
.cell, .set-card { position: relative; }

/* CLAVE: las cards tienen transform:translateY en :hover, y un transform en el
   ancestro rompe background-attachment:fixed (la luz se posiciona respecto a la
   card, no al viewport) → la card BAJO el cursor no se iluminaba. Lo anulamos
   para que el glow funcione también en esa card. El realce de profundidad lo da
   el propio glow + drop-shadow. */
.cell:hover, .set-card:hover { transform: none !important; }

.cell::before, .set-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;                 /* grosor del marco iluminado */
  pointer-events: none;
  z-index: 4;
  /* Radial ESTRECHO en coords de viewport (fixed) → solo se ilumina el borde de
     las cards muy cercanas al cursor (la de debajo y sus vecinas inmediatas). */
  background: radial-gradient(
    190px 190px at calc(var(--gx, -9999) * 1px) calc(var(--gy, -9999) * 1px),
    hsl(var(--ghue, 20) 100% 60% / 1),
    transparent 72%
  );
  background-attachment: fixed;
  /* Máscara: mostrar SOLO el marco (excluye el interior). */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  /* Bloom: el trozo iluminado "sangra" un poco → glow suave sobre la card blanca. */
  filter: brightness(1.35) drop-shadow(0 0 5px hsl(var(--ghue, 20) 100% 58% / .85));
}

/* Efecto de puntero (desktop). Fuera en táctil y con reduce-motion. */
@media (hover: none), (pointer: coarse) {
  .cell::before, .set-card::before { display: none; }
}