/* ============================================================
   Marketplace-Assist — Glow-ореол карточек (.glow-card)
   Подключить: <link rel="stylesheet" href="/assets/glow-card.css">

   НАЗНАЧЕНИЕ
   ----------
   Деликатный световой контур по периметру карточки — отклик на наведение,
   premium-ощущение (Geist/Vercel), НЕ неон/AI-slop. Воссоздаёт «ощущение»
   Aceternity «Glowing Effect» средствами чистого CSS.

   ПУБЛИЧНЫЙ КОНТРАКТ (классы)
   ----------
   .glow-card                — базовый класс. Сам по себе НЕ светится (нейтральная
                               подложка-обёртка). Включается модификатором ниже.
   .glow-card--subtle        — рекомендованный: едва заметный контур в покое,
                               мягкое усиление при наведении.
   .glow-card--medium        — заметнее: чуть толще/ярче ореол, выраженнее hover.
   .glow-card--cursor        — добавка: контур ярче рядом с курсором (нужен
                               glow-card.js — он выставляет --glow-x/--glow-y).
                               БЕЗ JS деградирует до состояния «по центру» (как subtle).

   ТОКЕНЫ (настраиваются на карточке через style="--glow-color:…")
   ----------
   --glow-color   — цвет ореола. По умолчанию var(--accent) (UI-акцент, тема-зависим).
                    Для бренд-ореола передать --glow-color: var(--brand).
   --glow-x/--glow-y — позиция курсора в % (0..100), выставляет glow-card.js.

   ПРИНЦИПЫ
   ----------
   - Цвет — ТОЛЬКО токены (var(--accent)/var(--brand)); ни одного хардкод-HEX.
   - Работает в обеих темах: цвет берётся из тема-зависимых токенов.
   - prefers-reduced-motion → без анимации (статичный мягкий контур).
   - Ореол рисуется на ::before/::after, БЕЗ влияния на layout (position:absolute,
     inset, pointer-events:none). Контент карточки не смещается.
   - Контур виден ТОЛЬКО по рамке: маска border-box minus padding-box (exclude),
     поэтому центр не залит — это «обводка светом», а не подложка-свечение.
   ============================================================ */

.glow-card {
  /* Дефолты токенов ореола (карточка может переопределить через style) */
  --glow-color: var(--accent);
  --glow-x: 50%;
  --glow-y: 0%;
  /* Базовые величины — мягкость и толщина контура */
  --glow-blur: 10px;
  --glow-thickness: 1.5px;
  --glow-rest: 0;        /* интенсивность ореола в покое (0..1) */
  --glow-hover: 0.55;    /* интенсивность ореола при наведении (0..1) */

  position: relative;
  /* z-index изоляция: ореол не вылезает за пределы стека соседних карточек */
  isolation: isolate;
}

/* Ореол-контур: красим всю площадь градиентом, затем маской оставляем
   только «рамку» (border-box за вычетом padding-box → только периметр). */
.glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--glow-thickness);
  /* Радиальный градиент «от курсора»: ярко у точки --glow-x/--glow-y,
     плавно гаснет к остальному периметру. В покое центрируется сверху. */
  background:
    radial-gradient(
      120% 120% at var(--glow-x) var(--glow-y),
      var(--glow-color) 0%,
      color-mix(in srgb, var(--glow-color) 35%, transparent) 28%,
      transparent 62%
    );
  /* Маска: показываем заливку ТОЛЬКО на толщине рамки (контур). */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  /* Мягкость свечения */
  filter: blur(0.5px);
  opacity: var(--glow-rest);
  pointer-events: none;
  z-index: 1;
  transition: opacity 220ms ease, filter 220ms ease;
}

/* Дополнительный мягкий внешний ореол (halo) — лёгкое сияние НАРУЖУ от рамки.
   Деликатно: только на hover, чтобы покой оставался спокойным. */
.glow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  box-shadow: 0 0 var(--glow-blur) color-mix(in srgb, var(--glow-color) 45%, transparent);
  transition: opacity 220ms ease;
}

/* Наведение: усиливаем контур и зажигаем внешний halo. */
.glow-card:hover::before,
.glow-card:focus-within::before {
  opacity: var(--glow-hover);
}
.glow-card:hover::after,
.glow-card:focus-within::after {
  opacity: 0.5;
}

/* ──────────────────────────────────────────────────────────
   ВАРИАНТ 1 — SUBTLE (рекомендованный)
   Покой: едва-едва читается контур (3% — почти невидимо, «дышит» при наведении).
   Hover: мягкое спокойное усиление.
   ────────────────────────────────────────────────────────── */
.glow-card--subtle {
  --glow-blur: 8px;
  --glow-thickness: 1px;
  --glow-rest: 0.04;
  --glow-hover: 0.45;
}

/* ──────────────────────────────────────────────────────────
   ВАРИАНТ 2 — MEDIUM (заметнее)
   Покой: тонкий, но различимый контур.
   Hover: выраженный ореол + чуть шире halo.
   ────────────────────────────────────────────────────────── */
.glow-card--medium {
  --glow-blur: 14px;
  --glow-thickness: 1.5px;
  --glow-rest: 0.12;
  --glow-hover: 0.7;
}

/* ──────────────────────────────────────────────────────────
   ВАРИАНТ 3 — CURSOR (контур ярче у курсора)
   Требует glow-card.js (он выставляет --glow-x/--glow-y по позиции мыши).
   БЕЗ JS точка остаётся по центру-сверху → ведёт себя как subtle.
   Плавность движения точки — через transition на самих переменных.
   ────────────────────────────────────────────────────────── */
.glow-card--cursor {
  --glow-blur: 12px;
  --glow-thickness: 1.5px;
  --glow-rest: 0.06;
  --glow-hover: 0.75;
}
.glow-card--cursor::before {
  /* Плавный «доезд» точки за курсором (а не дёрганье). */
  transition: opacity 220ms ease, filter 220ms ease,
              background-position 120ms linear;
}

/* ──────────────────────────────────────────────────────────
   ДОСТУПНОСТЬ: уважаем prefers-reduced-motion.
   Анимации/переходы отключаем, ореол остаётся СТАТИЧНЫМ и деликатным
   (показываем мягкий контур без «оживления» на hover).
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .glow-card::before,
  .glow-card::after,
  .glow-card--cursor::before {
    transition: none;
  }
  /* Статичный спокойный контур; hover больше не «вспыхивает». */
  .glow-card--subtle::before { opacity: 0.06; }
  .glow-card--medium::before { opacity: 0.14; }
  .glow-card--cursor::before { opacity: 0.08; }
  .glow-card:hover::before,
  .glow-card:focus-within::before { opacity: inherit; }
  .glow-card:hover::after,
  .glow-card:focus-within::after { opacity: 0; }
}