/* =========================================================
   Spotlight glow cards, cursor-tracking radial highlight
   Adapted from React spotlight-card to vanilla CSS/JS
   ========================================================= */

[data-glow] {
  --base: 315;            /* magenta hue */
  --spread: 80;
  --radius: 16;
  --border: 1.5;
  --backdrop: rgba(255, 255, 255, 0.02);
  --backup-border: rgba(255, 255, 255, 0.08);
  --size: 320;
  --outer: 1;
  --saturation: 85;
  --lightness: 55;
  --bg-spot-opacity: 0.18;
  --border-spot-opacity: 0.9;
  --border-light-opacity: 0.6;

  --border-size: calc(var(--border) * 1px);
  --spotlight-size: calc(var(--size) * 1px);
  --hue: calc(var(--base) + (var(--xp, 0.5) * var(--spread)));

  position: relative;
  border-radius: calc(var(--radius) * 1px);
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / var(--bg-spot-opacity)),
    transparent
  );
  background-color: var(--backdrop);
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
  border: var(--border-size) solid var(--backup-border);
  transition: border-color .3s ease;
}

[data-glow]::before,
[data-glow]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  -webkit-mask-clip: padding-box, border-box;
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

[data-glow]::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / var(--border-spot-opacity)),
    transparent 100%
  );
  filter: brightness(1.6);
  z-index: 1;
}

[data-glow]::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(0 100% 100% / var(--border-light-opacity)),
    transparent 100%
  );
  z-index: 2;
}

/* Magenta brand variant */
[data-glow="magenta"] {
  --base: 330;
  --spread: 30;
  --saturation: 80;
  --lightness: 60;
}

/* Apply to service cards and "why" cards without breaking existing backgrounds */
.service-card[data-glow] {
  background-color: rgba(10,10,31,0.7);
  --backup-border: rgba(255,255,255,0.06);
}
.service-card[data-glow]:hover { --bg-spot-opacity: 0.28; }

.why[data-glow] {
  --radius: 14;
  --backdrop: rgba(10,10,31,0.5);
  --backup-border: rgba(255,255,255,0.06);
}

.pillar[data-glow] {
  --radius: 14;
  --backdrop: rgba(10,10,31,0.4);
}

.eco-item[data-glow] {
  --radius: 12;
  --size: 220;
}