/* ============================================================
   TVK LIQUID GLASS SYSTEM
   Ловушки (не нарушать):
   — без will-change: filter (ломает backdrop-filter)
   — без overflow: hidden на .btn-glass (Safari + blur)
   — без translateZ(0) на элементе с backdrop-filter
   — backdrop-filter статичный; transition: transform, box-shadow,
     opacity, filter(brightness) — не background-position/size
   Физическая модель: 5 слоёв стекла
   1. Body        — матовая основа (backdrop-filter)
   2. Tint        — цветной оттенок материала
   3. Specular    — блик (::before, следует за мышью)
   4. Rim         — ободок-фаска (::after, постоянный)
   5. Caustic     — каустика сквозь стекло (pseudo)
   ============================================================ */

/* ── Токены стекла ─────────────────────────────────────────── */
:root {
  --glass-blur:         16px;
  --glass-saturate:     1.8;
  --glass-body:         rgba(255,255,255,.08);
  --glass-tint:         rgba(220,38,38,.06);
  --glass-rim:          rgba(255,255,255,.22);
  --glass-rim-bottom:   rgba(0,0,0,.35);
  --glass-specular:     rgba(255,255,255,.72);
  --glass-inner-shadow: rgba(0,0,0,.45);
  --glass-glow:         rgba(220,38,38,.28);
  --glass-radius:       14px;
  --glass-duration:     220ms;
  --glass-ease:         cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Базовая кнопка ────────────────────────────────────────── */
.btn-glass {
  /* Позиционирование */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  isolation: isolate;
  z-index: 0;

  /* Размер */
  padding: 13px 28px;
  border-radius: var(--glass-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Типографика */
  font-family: var(--ff-body, "DM Sans", system-ui, sans-serif);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255,255,255,.92);

  /* ── Слой 1: матовая стеклянная основа ── */
  background:
    /* Слой 4: Tint (цветное стекло) */
    linear-gradient(
      135deg,
      rgba(220,38,38,.10) 0%,
      rgba(220,38,38,.04) 50%,
      rgba(220,38,38,.08) 100%
    ),
    /* Слой 3: Gradient body (неравномерная плотность стекла) */
    linear-gradient(
      170deg,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,.06) 40%,
      rgba(255,255,255,.02) 60%,
      rgba(255,255,255,.10) 100%
    ),
    /* Слой 2: Глубина (тёмное дно стекла) */
    rgba(255,255,255,.04);

  /* ── Слой 2: Внутренние тени (объём) ── */
  box-shadow:
    /* Rim — верхний ободок (свет) */
    inset 0  1px  0    0    rgba(255,255,255,.28),
    /* Rim — нижний ободок (тень) */
    inset 0 -1px  0    0    rgba(0,0,0,.25),
    /* Rim — боковые фаски */
    inset 1px 0   0    0    rgba(255,255,255,.10),
    inset -1px 0  0    0    rgba(255,255,255,.06),
    /* Inner shadow — глубина снизу */
    inset 0 -8px 16px -4px  rgba(0,0,0,.20),
    /* Inner light — свет сверху */
    inset 0  8px 16px -4px  rgba(255,255,255,.06),
    /* Outer glow */
    0 4px 20px -2px          rgba(220,38,38,.18),
    0 1px  4px  0            rgba(0,0,0,.35);

  /* ── Blur: физический проброс фона ── */
  backdrop-filter:
    blur(var(--glass-blur))
    saturate(var(--glass-saturate))
    brightness(1.05);
  -webkit-backdrop-filter:
    blur(var(--glass-blur))
    saturate(var(--glass-saturate))
    brightness(1.05);

  /* ── Граница — имитация фаски стекла ── */
  outline: 1px solid rgba(255,255,255,.14);
  outline-offset: -1px;

  transition:
    transform        var(--glass-duration) var(--glass-ease),
    box-shadow       var(--glass-duration) cubic-bezier(0.22,1,.36,1),
    outline-color    150ms ease,
    filter           var(--glass-duration) ease;

  /* ── CSS vars для динамического блика ── */
  --mx: 50%;
  --my: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

/* Fallback если backdrop-filter не поддерживается */
@supports not (backdrop-filter: blur(1px)) {
  .btn-glass {
    background:
      linear-gradient(
        135deg,
        rgba(40,10,10,.85) 0%,
        rgba(30,5,5,.90) 100%
      );
  }
}

/* ── Слой 3: Динамический блик (следует за мышью) ─────────── */
.btn-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;

  /* Блик — эллипс в точке курсора */
  background: radial-gradient(
    ellipse 55% 40% at var(--mx) var(--my),
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.15) 35%,
    transparent 70%
  );

  /* Маска: блик сильнее в верхней части */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1.0) 0%,
    rgba(0,0,0,0.7) 40%,
    rgba(0,0,0,0.2) 75%,
    rgba(0,0,0,0.0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1.0) 0%,
    rgba(0,0,0,0.7) 40%,
    rgba(0,0,0,0.2) 75%,
    rgba(0,0,0,0.0) 100%
  );

  opacity: .8;
  transition: opacity 150ms ease;
  mix-blend-mode: screen;
}

/* ── Слой 4: Постоянный ободок-фаска ──────────────────────── */
.btn-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;

  /* Постоянный gradient rim — имитирует физический угол стекла */
  background: linear-gradient(
    160deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.06) 18%,
    transparent 40%,
    transparent 65%,
    rgba(255,255,255,.04) 80%,
    rgba(0,0,0,.15) 100%
  );
}

/* ── HOVER ─────────────────────────────────────────────────── */
.btn-glass:hover {
  transform:
    perspective(600px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(1.02);

  box-shadow:
    inset 0  1px  0    0    rgba(255,255,255,.35),
    inset 0 -1px  0    0    rgba(0,0,0,.30),
    inset 1px 0   0    0    rgba(255,255,255,.14),
    inset -1px 0  0    0    rgba(255,255,255,.08),
    inset 0 -8px 16px -4px  rgba(0,0,0,.25),
    inset 0  8px 16px -4px  rgba(255,255,255,.09),
    /* Усиленный glow на hover */
    0  8px 32px -4px         rgba(220,38,38,.35),
    0  2px  8px  0           rgba(220,38,38,.20),
    0  1px  4px  0           rgba(0,0,0,.40);

  outline-color: rgba(255,255,255,.28);
  filter: brightness(1.06);
}

.btn-glass:hover::before {
  opacity: 1;
}

/* ── ACTIVE (нажатие) ──────────────────────────────────────── */
.btn-glass:active {
  transform:
    perspective(600px)
    scale(0.97);

  box-shadow:
    /* Углублённые inner shadows при нажатии */
    inset 0  2px  8px  0    rgba(0,0,0,.35),
    inset 0 -1px  0    0    rgba(255,255,255,.10),
    inset 0  8px 20px -4px  rgba(0,0,0,.40),
    /* Минимальный outer glow */
    0 1px 6px 0              rgba(220,38,38,.20),
    0 1px 3px 0              rgba(0,0,0,.30);

  outline-color: rgba(255,255,255,.18);
  filter: brightness(0.94);
  transition-duration: 80ms;
}

.btn-glass:active::before {
  opacity: .5;
}

/* ── FOCUS-VISIBLE (доступность) ───────────────────────────── */
.btn-glass:focus-visible {
  outline: 2px solid rgba(220,38,38,.8);
  outline-offset: 3px;
}

/* ── Вариант: Primary (красное стекло) ─────────────────────── */
.btn-glass--primary {
  --glass-tint: rgba(220,38,38,.20);
  --glass-glow: rgba(220,38,38,.45);

  background:
    linear-gradient(
      135deg,
      rgba(220,38,38,.25) 0%,
      rgba(180,20,20,.15) 50%,
      rgba(220,38,38,.20) 100%
    ),
    linear-gradient(
      170deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.05) 40%,
      rgba(255,255,255,.02) 60%,
      rgba(255,255,255,.12) 100%
    ),
    rgba(220,38,38,.08);

  box-shadow:
    inset 0  1px  0    0    rgba(255,160,160,.35),
    inset 0 -1px  0    0    rgba(80,0,0,.40),
    inset 1px 0   0    0    rgba(255,100,100,.12),
    inset -1px 0  0    0    rgba(255,100,100,.08),
    inset 0 -8px 16px -4px  rgba(80,0,0,.30),
    inset 0  8px 16px -4px  rgba(255,100,100,.08),
    0  6px 28px -4px         rgba(220,38,38,.40),
    0  1px  6px  0           rgba(220,38,38,.25),
    0  1px  4px  0           rgba(0,0,0,.35);
}

.btn-glass--primary:hover {
  box-shadow:
    inset 0  1px  0    0    rgba(255,180,180,.45),
    inset 0 -1px  0    0    rgba(80,0,0,.45),
    inset 1px 0   0    0    rgba(255,120,120,.16),
    inset -1px 0  0    0    rgba(255,120,120,.10),
    inset 0 -8px 16px -4px  rgba(80,0,0,.35),
    inset 0  8px 16px -4px  rgba(255,120,120,.10),
    0  10px 40px -4px        rgba(220,38,38,.55),
    0   4px 16px  0          rgba(220,38,38,.30),
    0   1px  4px  0          rgba(0,0,0,.40);
}

/* ── Вариант: Ghost (прозрачное стекло) ────────────────────── */
.btn-glass--ghost {
  --glass-tint: transparent;
  color: rgba(255,255,255,.75);
}

/* Светлая ghost в hero (Запросить комплект и т.п.) */
.hero-actions .btn-glass--ghost,
.page-hero .hero-actions .button-dark.btn-glass--ghost {
  color: #0a0c10 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  outline-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.hero-actions .btn-glass--ghost:hover,
.page-hero .hero-actions .button-dark.btn-glass--ghost:hover {
  color: #0a0c10 !important;
  filter: brightness(1.04);
}

/* ── Размеры ───────────────────────────────────────────────── */
.btn-glass--sm {
  padding: 9px 18px;
  font-size: .82rem;
  --glass-blur: 12px;
  --glass-radius: 10px;
}

.btn-glass--lg {
  padding: 17px 36px;
  font-size: 1.02rem;
  --glass-blur: 20px;
  --glass-radius: 16px;
}

/* Sticky CTA: стекло поверх мобильной полоски */
.sticky-cta__btn.btn-glass {
  border: none;
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: -1px;
}

.sticky-cta__btn--call.btn-glass {
  background:
    linear-gradient(
      135deg,
      rgba(220, 38, 38, 0.25) 0%,
      rgba(180, 20, 20, 0.15) 50%,
      rgba(220, 38, 38, 0.2) 100%
    ),
    linear-gradient(
      170deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.05) 40%,
      rgba(255, 255, 255, 0.02) 60%,
      rgba(255, 255, 255, 0.12) 100%
    ),
    rgba(220, 38, 38, 0.08);
}

/* 404: кнопки в блоке copy-actions */
.copy-actions .btn-home.btn-glass {
  color: rgba(255, 255, 255, 0.88);
}

.copy-actions .btn-phone.btn-glass {
  color: #fff;
}

/* ── prefers-reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn-glass,
  .btn-glass::before,
  .btn-glass::after {
    transition: none !important;
    animation: none !important;
  }
  .btn-glass:hover {
    transform: none;
    filter: brightness(1.08);
  }
  .btn-glass:active {
    transform: scale(0.98);
  }
}

/* MAX — фиолетовое стекло */
.btn-glass--max,
.btn-glass--whatsapp,
.btn-glass--wa {
  background:
    linear-gradient(
      135deg,
      rgba(108,92,255,.24) 0%,
      rgba(79,70,229,.16)  50%,
      rgba(108,92,255,.20) 100%
    ),
    linear-gradient(
      170deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.04) 40%,
      rgba(255,255,255,.02) 60%,
      rgba(255,255,255,.10) 100%
    ),
    rgba(108,92,255,.08);

  box-shadow:
    inset 0  1px  0    0    rgba(180,170,255,.38),
    inset 0 -1px  0    0    rgba(30,20,80,.42),
    inset 1px 0   0    0    rgba(108,92,255,.14),
    inset -1px 0  0    0    rgba(108,92,255,.10),
    inset 0 -8px 16px -4px  rgba(30,20,80,.32),
    inset 0  8px 16px -4px  rgba(180,170,255,.08),
    0  6px 28px -4px         rgba(108,92,255,.38),
    0  1px  6px  0           rgba(108,92,255,.22),
    0  1px  4px  0           rgba(0,0,0,.35);
}

.btn-glass--max:hover,
.btn-glass--whatsapp:hover,
.btn-glass--wa:hover {
  box-shadow:
    inset 0  1px  0    0    rgba(200,190,255,.48),
    inset 0 -1px  0    0    rgba(30,20,80,.48),
    inset 1px 0   0    0    rgba(108,92,255,.18),
    inset -1px 0  0    0    rgba(108,92,255,.12),
    inset 0 -8px 16px -4px  rgba(30,20,80,.38),
    inset 0  8px 16px -4px  rgba(200,190,255,.10),
    0  10px 40px -4px        rgba(108,92,255,.52),
    0   4px 16px  0          rgba(108,92,255,.28),
    0   1px  4px  0          rgba(0,0,0,.40);
}

.sticky-cta__btn--max.btn-glass,
.sticky-cta__btn--wa.btn-glass {
  background:
    linear-gradient(
      135deg,
      rgba(108,92,255,.24) 0%,
      rgba(79,70,229,.16)  50%,
      rgba(108,92,255,.20) 100%
    ),
    linear-gradient(
      170deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.04) 40%,
      rgba(255,255,255,.02) 60%,
      rgba(255,255,255,.10) 100%
    ),
    rgba(108,92,255,.08);
}