/* ============================================
   ЖИДКОЕ СТЕКЛО

   Слоёв всегда три:
   1. Блик-линза в верхнем левом углу — «свет попал на грань»
   2. Диагональный световой градиент по поверхности
   3. Полупрозрачная тонировка + размытие фона

   Кромки задаются отдельно (inset-тени), чтобы не конфликтовать
   с собственными box-shadow элементов.

   Структура слоёв взята из VPN-проекта, палитра — золотая.
   Там же взят и главный урок: backdrop-filter не используем.
   Полсотни таких слоёв заставляют браузер пересчитывать
   размытие при каждой прокрутке и убивают производительность
   на телефонах. Стекло держится на бликах и полупрозрачности.
   ============================================ */

:root {
  /* Кромки: светлая сверху, тёмная снизу — стекло имеет толщину */
  --edge:
    inset 0 1px 0 rgba(255, 248, 232, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    inset 1px 0 0 rgba(255, 248, 232, 0.16),
    inset -1px 0 0 rgba(255, 248, 232, 0.09);

  /* Кромка с золотым свечением — для активных элементов */
  --edge-hot:
    inset 0 1px 0 rgba(255, 240, 210, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    inset 1px 0 0 rgba(255, 240, 210, 0.14),
    0 0 30px rgba(212, 160, 60, 0.2);

  /* Тень под стеклом — отрывает панель от фона */
  --lift: 0 18px 48px -12px rgba(0, 0, 0, 0.65);
}

/* ---------- Базовое стекло ---------- */

.glass {
  position: relative;
  background:
    /* 1. Блик-линза */
    radial-gradient(
      130% 100% at 0% 0%,
      rgba(255, 224, 165, 0.2) 0%,
      rgba(255, 224, 165, 0.06) 34%,
      transparent 60%
    ),
    /* 2. Световой градиент по поверхности */
      linear-gradient(
        155deg,
        rgba(255, 245, 225, 0.06) 0%,
        rgba(255, 245, 225, 0.012) 46%,
        transparent 100%
      ),
    /* 3. Тонировка почти отсутствует.
       Размытие минимальное: сильный blur делает стекло матовым
       и превращает искры в пятна. Глянец — это резкий фон плюс
       блики на поверхности. */
      rgba(22, 18, 14, 0.22);
  /* Без backdrop-filter: полсотни таких слоёв на странице
     заставляют браузер пересчитывать размытие при каждой
     прокрутке — на телефонах это главный источник лагов.
     Фон за карточками спокойный, полупрозрачности хватает. */
  box-shadow: var(--edge), var(--lift);
  border-radius: 18px;
}

/* Глянцевый отблеск: резкая световая полоса наискось
   по верхней части панели — как свет на полированном стекле. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.06) 14%,
    transparent 30%,
    transparent 100%
  );
  pointer-events: none;
}

/* Тонкая золотая грань по контуру.
   Отдельным слоем, чтобы не спорить с box-shadow. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    150deg,
    rgba(255, 235, 190, 0.5) 0%,
    rgba(212, 160, 60, 0.14) 38%,
    transparent 62%,
    rgba(255, 224, 165, 0.22) 100%
  );
  -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;
  pointer-events: none;
}

/* ---------- Прозрачный вариант ----------
   Без белёсого градиента: читается чище, годится
   когда под стеклом важно видеть фон. */

.glass--clear {
  background:
    radial-gradient(
      130% 100% at 0% 0%,
      rgba(255, 214, 140, 0.09) 0%,
      rgba(255, 214, 140, 0.025) 34%,
      transparent 60%
    ),
    rgba(22, 18, 14, 0.12);
}

/* ---------- Плотное стекло ----------
   Для панелей с текстом: фон под ним глушится сильнее,
   читаемость важнее прозрачности. */

.glass--solid {
  background:
    radial-gradient(
      130% 100% at 0% 0%,
      rgba(255, 214, 140, 0.11) 0%,
      rgba(255, 214, 140, 0.03) 34%,
      transparent 60%
    ),
    linear-gradient(
      155deg,
      rgba(255, 245, 225, 0.05) 0%,
      transparent 60%
    ),
    rgba(14, 11, 9, 0.82);
}

/* ---------- Золотое стекло ----------
   Акцент: кнопка действия, выбранная карточка. */

.glass--gold {
  background:
    radial-gradient(
      120% 90% at 26% 16%,
      rgba(255, 236, 190, 0.4) 0%,
      rgba(255, 214, 140, 0.12) 44%,
      transparent 72%
    ),
    linear-gradient(
      160deg,
      rgba(212, 160, 60, 0.3) 0%,
      rgba(138, 95, 28, 0.16) 100%
    ),
    rgba(22, 18, 14, 0.06);
  box-shadow: var(--edge-hot), var(--lift);
}

.glass--gold::after {
  background: linear-gradient(
    150deg,
    rgba(255, 235, 180, 0.5) 0%,
    rgba(212, 160, 60, 0.18) 40%,
    transparent 70%,
    rgba(255, 214, 140, 0.2) 100%
  );
}

/* ---------- Интерактив ---------- */

.glass--hover {
  transition:
    transform var(--med) var(--ease-out),
    box-shadow var(--med) var(--ease),
    background-color var(--med) var(--ease);
}

.glass--hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--edge-hot), 0 24px 60px -14px rgba(0, 0, 0, 0.7);
}

/* ---------- Читаемость ----------
   Ключевой приём: панель остаётся прозрачной, а защищается
   не она, а сам текст. Под содержимым — мягкое локальное
   затемнение, у букв — тонкая тень. Стекло не мутнеет,
   но яркая искра под строкой её не съедает. */

.glass__body {
  position: relative;
  z-index: 1;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}

/* Локальное затемнение под содержимым — растушёванное,
   краёв не видно, панель по-прежнему читается как стекло. */
.glass__body::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  background: radial-gradient(
    ellipse 70% 62% at 50% 50%,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.22) 45%,
    transparent 76%
  );
  pointer-events: none;
}

/* Мобильный: тонировка чуть плотнее — на маленьком экране
   контент читается поверх более пёстрого фона */
@media (max-width: 720px) {
  .glass {
    background:
      radial-gradient(
        130% 100% at 0% 0%,
        rgba(255, 224, 165, 0.16) 0%,
        transparent 55%
      ),
      rgba(20, 16, 13, 0.3);
  }
}