/* ============================================================
   ДИЗАЙН-СИСТЕМА LIQUID GLASS — СТЕКЛО
   ------------------------------------------------------------
   Внутри: сама стеклянная поверхность .ls-glass с кристальной
           фаской, её спекулярные блики (--panel / --card),
           3D-наклон и световое пятно строго под курсором
           (::after с --mouse-x / --mouse-y, их проставляет
           скрипт страницы).
   Зависит: только от ds/tokens.css.
   Пользоваться: класс .ls-glass ставится в разметке рядом
           с именем узла, и узел больше не собирает стекло сам.
           Блик выбирается модификатором: --panel для панелей
           и крупных карточек, --card для мелких.
   Точки перелома: нет.
   ============================================================ */

/* ── Стеклянная поверхность: единственное место, где она собрана ── */

.ls-glass {
  background: var(--ls-surface);
  backdrop-filter: var(--ls-blur);
  -webkit-backdrop-filter: var(--ls-blur);
  border: var(--ls-border);
}

.ls-glass--panel {
  box-shadow: var(--ls-specular-panel);
}

.ls-glass--card {
  box-shadow: var(--ls-specular-card);
}

/* ============================================================
   LIQUID GLASS 3D TILT & MOUSE SPOTLIGHT (Блик строго под мышкой)
   ============================================================ */

.ls-slot-card,
.ls-step-card,
.ls-pricing-card,
.ls-calc-results,
.ls-scenario-card,
.ls-club-slot-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.22s var(--ls-e-glass), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

/* Сфокусированный оптический блик строго под курсором мыши */

.ls-slot-card::after,
.ls-step-card::after,
.ls-pricing-card::after,
.ls-timeline-card::after,
.ls-calc-results::after,
.ls-scenario-card::after,
.ls-club-slot-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
  z-index: 5;
  background: radial-gradient(
    300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.14) 38%,
    transparent 70%
  );
}

[data-theme="dark"] .ls-slot-card::after,
[data-theme="dark"] .ls-step-card::after,
[data-theme="dark"] .ls-pricing-card::after,
[data-theme="dark"] .ls-calc-results::after,
[data-theme="dark"] .ls-scenario-card::after,
[data-theme="dark"] .ls-club-slot-card::after {
  background: radial-gradient(
    300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    transparent 70%
  );
}

.ls-slot-card:hover::after,
.ls-step-card:hover::after,
.ls-pricing-card:hover::after,
.ls-calc-results:hover::after,
.ls-scenario-card:hover::after,
.ls-club-slot-card:hover::after {
  opacity: 1;
}