/* ============================================================================
 * liquid-glass-refraction.css — layered Liquid Glass (Chrome + Firefox + Safari)
 *
 * Архитектура (как у Apple/fabiosleal/kevinbism):
 *   parent (.feature-cat и т.п.)
 *     ├─ .lg-bg (z:-1)  → backdrop-filter:blur + filter:url(#displacement)
 *     ├─ background gradient + border + box-shadow specular
 *     └─ ::before/::after glow + content
 *
 * filter: url(#...) работает в Firefox/Safari/Chromium на собственном
 * элементе — это путь, обходящий ограничение backdrop-filter:url().
 *
 * Инжектится через js/liquid-glass.js (DOMContentLoaded + window.load).
 * ============================================================================ */

/* ── Parent: подготовка stacking context ────────────────────────────── */
.lg-active {
  position: relative;
  isolation: isolate;            /* отрезает z:-1 ребёнка от document root */
  overflow: hidden;              /* refraction не торчит за borders */
  /* Отключаем backdrop-filter на parent — он переехал на .lg-bg.
     Без этого получим double-blur. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── .lg-bg — слой refraction под содержимым ────────────────────────── */
.lg-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  filter: url(#liquid-glass-distortion);
  /* Firefox: filter создаёт собственный stacking context — z:-1 безопасен */
}

/* ── Hover — усиленный displacement ─────────────────────────────────── */
.lg-active:hover > .lg-bg {
  backdrop-filter: blur(16px) saturate(185%);
  -webkit-backdrop-filter: blur(16px) saturate(185%);
  filter: url(#liquid-glass-distortion-strong);
}

/* ── Hover — Apple-style specular highlight на parent ───────────────── */
.feature-cat:hover, .tariff:hover, .sol-card:hover,
.step:hover, .pain:hover, #honest article:hover,
.demo-accent:hover, .mockup-hint-banner:hover,
.preset-chip:hover, .stat:hover, .faq-item:hover,
.glow-card:hover, .card:hover {
  background:
    linear-gradient(135deg, var(--lg-tint-hover), var(--lg-tint-hover-2))
    !important;
  border-color: var(--lg-rim-strong);
  box-shadow:
    inset 0  1px 0   rgba(255, 255, 255, 0.36),
    inset 1px 0 0    rgba(255, 255, 255, 0.10),
    inset -10px -8px 0 -11px rgba(255, 255, 255, 0.85),
    inset 0 -9px 0 -8px      rgba(255, 255, 255, 0.75),
    inset 0 -1px 0   rgba(0, 0, 0, 0.22),
    var(--lg-shadow-hover);
}