/* ============================================================================
 * liquid-glass-effects.css — featured tariff, glow overlay,
 * mobile-оптимизация, prefers-reduced-motion, fallback для старых браузеров.
 * ============================================================================ */

/* ── Tariff featured — mint-акцент в стекле ─────────────────────────── */
.tariff.featured {
  border-color: rgba(34, 211, 160, 0.36);
  box-shadow:
    inset 0  1px 0   rgba(255, 255, 255, 0.28),
    inset 1px 0 0    rgba(255, 255, 255, 0.10),
    inset -10px -8px 0 -11px rgba(34, 211, 160, 0.55),
    inset 0 -9px 0 -8px      rgba(34, 211, 160, 0.42),
    inset 0 -1px 0   rgba(0, 0, 0, 0.22),
    0 12px 40px rgba(34, 211, 160, 0.20);
}

/* ── Glow-overlay для блоков (mouse-tracked через JS card-glow.js) ──── */
.preset-chip, .stat, .faq-item, .marquee-item {
  position: relative;
  overflow: hidden;
}
.preset-chip::before, .stat::before,
.faq-item::before, .marquee-item::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, 0.14), transparent 70%);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease-out;
  border-radius: inherit;
}
.preset-chip:hover::before, .stat:hover::before,
.faq-item:hover::before, .marquee-item:hover::before { opacity: 1; }
.preset-chip > *, .stat > *, .faq-item > *, .marquee-item > * {
  position: relative; z-index: 2;
}

/* ── Mobile: радикально упростить (mobile GPU не тянет 215 backdrop-filter) ─
 * Apple на iOS рисует Liquid Glass нативно через CoreAnimation; в браузере
 * через web-стек на 215 карточках = тормоза + jank скролла.
 * Стратегия: убираем backdrop-filter совсем, оставляем background gradient +
 * specular box-shadow + border. Визуально остаётся "стеклянный" вид без GPU-боли. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  /* Полностью прячем .lg-bg layer (если JS всё-таки его инжектил) */
  .lg-bg { display: none !important; }
  .lg-active {
    /* Возвращаем backdrop-filter на parent (но лёгкий — blur 6px) */
    backdrop-filter: blur(6px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(130%) !important;
  }
  /* Все glass-карточки — лёгкий blur вместо тяжёлого */
  .feature-cat, .tariff, .sol-card, .step, .pain,
  #honest article, .demo-accent, .mockup-hint-banner,
  .stat, .preset-chip, .faq-item, .roi-cell,
  .glow-card, .card {
    backdrop-filter: blur(6px) saturate(130%);
    -webkit-backdrop-filter: blur(6px) saturate(130%);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015))
      !important;
    box-shadow:
      inset 0  1px 0   rgba(255, 255, 255, 0.18),
      inset -8px -6px 0 -10px rgba(255, 255, 255, 0.50),
      inset 0 -1px 0   rgba(0, 0, 0, 0.18),
      0 4px 14px rgba(0, 0, 0, 0.22);
  }
  /* Hover-эффекты на мобиле НЕ работают (touch) — отключаем чтобы они не
     зависали при tap на карточку */
  .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 {
    transform: none !important;
  }
  /* Header / nav — лёгкий blur */
  header, nav.main-nav, .site-nav, .top-nav {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }
  /* Compare table / sticky-cta — без blur вообще */
  .compare {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(20, 27, 38, 0.85);
  }
  .sticky-cta {
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
  }
}

/* ── Reduced motion: убрать displacement ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lg-bg {
    filter: none !important;
  }
  .lg-active:hover > .lg-bg {
    filter: none !important;
  }
}

/* ── Резерв для устройств без backdrop-filter ───────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .feature-cat, .tariff, .sol-card, .step, .pain, #honest article,
  .demo-accent, .mockup-hint-banner, .stat, .preset-chip, .faq-item,
  .roi-cell, .glow-card, .card, .compare, header, nav.main-nav,
  footer, .sticky-cta {
    background: rgba(20, 27, 38, 0.92) !important;
  }
}