/* ==========================================================================
   SPOTLIGHT GLOW CARDS COMPONENT
   ========================================================================== */
.glow-card {
  --base: 26;
  --spread: 32;
  --radius: 4;
  --border: 1;
  --backdrop: rgba(242, 236, 227, 0.035);
  --size: 190;
  --border-size: calc(var(--border) * 1px);
  --spotlight-size: calc(var(--size) * 1px);
  --hue: calc(var(--base) + (var(--xp, 0) * var(--spread)));

  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 6.5rem;
  padding: var(--space-sm);
  border: var(--border-size) solid var(--color-navy-line);
  border-radius: calc(var(--radius) * 1px);
  background-color: var(--backdrop);
  background-image: radial-gradient(
      var(--spotlight-size) var(--spotlight-size) at
      calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
      hsl(var(--hue) 62% 62% / 0.14), transparent);
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
  background-attachment: fixed;
}
.glow-card span {
  position: relative;
  z-index: 1;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--color-cream);
}

.glow-card::before,
.glow-card::after {
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
  mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}
.glow-card::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) 70% 62% / 1), transparent 100%);
  filter: brightness(1.5);
}
.glow-card::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(38 100% 92% / 0.85), transparent 100%);
}
.glow-card > [data-glow] {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius) * 1px);
  opacity: 0.6;
  filter: blur(calc(var(--border-size) * 8));
  pointer-events: none;
}