/* Spotlight Effect - Museum Quality */

[data-glow] {
  --border-size: calc(var(--border, 2) * 1px);
  --spotlight-size: calc(var(--size, 200) * 1px);
  --hue: calc(var(--base, 30) + (var(--xp, 0) * var(--spread, 200)));
  position: relative;
  touch-action: none;
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue, 210) 100% 70% / 0.25), transparent
  );
  background-color: var(--backdrop, rgba(245, 210, 112, 0.03));
  border: var(--border-size) solid rgba(245, 210, 112, 0.1);
  border-radius: 16px;
}

[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: 16px;
  background-repeat: no-repeat;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: var(--border-size);
}

[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, 210) 100% 60% / 0.4), transparent 100%
  );
  filter: none;
  z-index: 0;
}

[data-glow]::after {
  content: none;
}

/* Specific for Kolel Features */
.kolel-feature-v2[data-glow] {
  --base: 30; /* Golden hue */
  --spread: 50;
  --size: 250;
  --border: 1.5;
}