/* ═══════════════════════════════════════════════════════════════
   SPOTLIGHT CARD — светящаяся рамка, следящая за курсором.
   Порт React-компонента GlowCard на чистый CSS.
   Работает через переменные --x/--y/--xp, которые ставит spotlight.js.

   Разметка:  <div class="spot" data-glow>…</div>
   Оттенок:   data-glow="ruby" | "gold" | "purple" (по умолчанию ruby)
═══════════════════════════════════════════════════════════════ */

[data-glow]{
  /* палитра свечения: электро-циан → фиолет (плывёт за курсором) */
  --base: 190;          /* базовый оттенок (циан) */
  --spread: 90;         /* к фиолету при движении курсора вправо */
  --saturation: 90;
  --lightness: 62;

  --radius: 22;
  --border: 2;
  --size: 240;          /* радиус пятна света */
  --outer: 1;
  --backdrop: rgba(255,255,255,.02);
  --backup-border: rgba(255,255,255,.09);

  --bg-spot-opacity: .10;
  --border-spot-opacity: .95;
  --border-light-opacity: .85;

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

  position: relative;
  border-radius: calc(var(--radius) * 1px);
  border: var(--border-size) solid var(--backup-border);
  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,348) calc(var(--saturation)*1%) calc(var(--lightness)*1%) / var(--bg-spot-opacity)),
    transparent
  );
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
  background-attachment: fixed;
  backdrop-filter: blur(5px);
  touch-action: none;
}

/* варианты оттенка */
[data-glow="gold"]     { --base: 42;  --spread: 30; --saturation: 92; --lightness: 60; }
[data-glow="purple"]   { --base: 275; --spread: 60; --saturation: 90; --lightness: 64; }
[data-glow="cyan"],
[data-glow="amethyst"],
[data-glow="ruby"]     { --base: 190; --spread: 90; --saturation: 90; --lightness: 62; }

/* ── светящаяся рамка: два слоя поверх бордера ── */
[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-attachment: fixed;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
          mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
          mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
          mask-composite: intersect;
}

/* цветное свечение рамки */
[data-glow]::before{
  background-image: radial-gradient(
    calc(var(--spotlight-size) * .75) calc(var(--spotlight-size) * .75) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(var(--hue,348) calc(var(--saturation)*1%) calc(var(--lightness)*1%) / var(--border-spot-opacity)),
    transparent 100%
  );
  filter: brightness(1.9);
}
/* белый блик — там, где курсор ближе всего */
[data-glow]::after{
  background-image: radial-gradient(
    calc(var(--spotlight-size) * .5) calc(var(--spotlight-size) * .5) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(0 100% 100% / var(--border-light-opacity)),
    transparent 100%
  );
}

/* внутренний размытый ореол (вложенный [data-glow]) */
[data-glow] > .spot-halo{
  position: absolute;
  inset: 0;
  will-change: filter;
  opacity: var(--outer, 1);
  border-radius: calc(var(--radius) * 1px);
  filter: blur(calc(var(--border-size) * 10));
  background: none;
  pointer-events: none;
  border: none;
}
[data-glow] > .spot-halo::before{
  content: "";
  position: absolute;
  inset: -10px;
  border: 10px solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: calc(100% + 20px) calc(100% + 20px);
  background-image: radial-gradient(
    calc(var(--spotlight-size) * .75) calc(var(--spotlight-size) * .75) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(var(--hue,348) calc(var(--saturation)*1%) calc(var(--lightness)*1%) / 1),
    transparent 100%
  );
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
          mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
          mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
          mask-composite: intersect;
  filter: brightness(1.6);
}

/* ── интеграция с карточками портала ──
   У .tool2/.plan свои background и overflow:hidden — свечение рамки
   рисуется псевдоэлементами за пределами бокса, поэтому overflow снимаем,
   а фон-пятно накладываем поверх их градиента через ::before родителя. */
.tool2[data-glow], .plan[data-glow]{
  overflow: visible;
  background-color: transparent;   /* свой linear-gradient остаётся */
  backdrop-filter: none;
  border-color: var(--backup-border);
}
/* внутренние слои карточки не должны вылезать за скруглённые углы */
.tool2[data-glow] > .t2-art{ border-radius: calc(var(--radius) * 1px) calc(var(--radius) * 1px) 0 0; overflow: hidden; }
.tool2[data-glow], .plan[data-glow]{ --radius: 20; --border: 1; --size: 260; }
/* Ореол вокруг карточки — только при наведении на неё саму.
   Иначе размытое пятно ложится на соседей и «плавит» сетку. */
.tool2[data-glow] > .spot-halo, .plan[data-glow] > .spot-halo{
  opacity: 0; transition: opacity .35s ease;
}
.tool2[data-glow]:hover > .spot-halo, .plan[data-glow]:hover > .spot-halo{ opacity: .45; }

/* на тач-устройствах ореол и тяжёлые фильтры не нужны */
@media (hover: none), (max-width: 768px){
  [data-glow] > .spot-halo{ display: none; }
  [data-glow]{ backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce){
  [data-glow]::before, [data-glow]::after{ transition: none; }
}