/* =========================================================================
   Liquid Glass — оформление главной страницы (landing.php, UniDesk #115).

   Работает только внутри <body class="lg">: шапка и подвал (lp-nav.php,
   lp-foot.php) общие со страницей входа, и её этот стиль не трогает.

   Разметка главной собрана из макета инлайн-стилями, но все поверхности
   берут цвет из переменных (--card, --bg-2, --hero-bg …). Поэтому стекло
   сделано так:
   • переменные переопределены: карточки — полупрозрачный градиент со
     светлым бликом по краю, фон страницы — прозрачный;
   • под страницей — неподвижный слой с цветными «жидкими» пятнами, которые
     медленно перетекают (body.lg::before);
   • поверхностям с background:var(--card) добавлено размытие того, что
     под ними (backdrop-filter) — по атрибуту style, без правки разметки.
   Без поддержки размытия, при «уменьшить прозрачность» и «уменьшить
   движение» в системе — плотные карточки и неподвижный фон.
   ========================================================================= */

body.lg{
  --lg-base:#E8EEF9;
  --bg:transparent;
  --hero-bg:transparent;
  --bg-2:rgba(255,255,255,.42);
  --card:linear-gradient(145deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.50) 100%);
  --card-2:rgba(255,255,255,.46);
  --line:rgba(110,130,165,.20);
  --line-2:rgba(110,130,165,.26);
  --nav-bg:rgba(255,255,255,.52);
  --lg-rim:rgba(255,255,255,.72);
  --lg-blur:blur(20px) saturate(175%);
  --shadow:inset 0 1px 0 rgba(255,255,255,.90),inset 0 0 0 1px rgba(255,255,255,.38),0 24px 60px -24px rgba(28,58,120,.38);
  --shadow-sm:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.32),0 14px 36px -20px rgba(28,58,120,.32);
  background:var(--lg-base);
}
html.dark body.lg{
  --lg-base:#060A13;
  --bg-2:rgba(255,255,255,.06);
  --card:linear-gradient(145deg,rgba(52,68,96,.58) 0%,rgba(16,24,38,.44) 100%);
  --card-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --nav-bg:rgba(14,20,33,.55);
  --lg-rim:rgba(255,255,255,.14);
  --shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.05),0 26px 64px -24px rgba(0,0,0,.75);
  --shadow-sm:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.04),0 16px 40px -22px rgba(0,0,0,.65);
}

/* ---- «Жидкий» фон: цветные пятна под стеклом ---- */
body.lg::before{
  content:"";position:fixed;inset:-12vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vmax 30vmax at 14% 12%,rgba(30,99,214,.44),transparent 70%),
    radial-gradient(32vmax 28vmax at 86% 16%,rgba(14,160,170,.38),transparent 70%),
    radial-gradient(42vmax 34vmax at 72% 78%,rgba(124,92,255,.34),transparent 70%),
    radial-gradient(32vmax 30vmax at 18% 86%,rgba(255,122,182,.28),transparent 70%);
  animation:lgFlow 34s ease-in-out infinite alternate;
  will-change:transform;
}
html.dark body.lg::before{
  background:
    radial-gradient(38vmax 30vmax at 14% 12%,rgba(42,110,255,.55),transparent 70%),
    radial-gradient(32vmax 28vmax at 86% 16%,rgba(20,200,210,.36),transparent 70%),
    radial-gradient(42vmax 34vmax at 72% 78%,rgba(130,90,255,.46),transparent 70%),
    radial-gradient(32vmax 30vmax at 18% 86%,rgba(255,90,160,.26),transparent 70%);
}
@keyframes lgFlow{
  0%  {transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50% {transform:translate3d(3vmax,-2vmax,0) scale(1.06) rotate(4deg)}
  100%{transform:translate3d(-2vmax,2vmax,0) scale(1.03) rotate(-3deg)}
}

/* ---- Стекло: размытие и блик по краю у карточек и кнопок-«подложек» ---- */
body.lg [style*="background:var(--card)"],
body.lg [style*="background:var(--card-2)"]{
  -webkit-backdrop-filter:var(--lg-blur);
  backdrop-filter:var(--lg-blur);
  border-color:var(--lg-rim) !important;
}

/* Основные кнопки — глянец: светлый блик сверху и подсветка снизу */
body.lg [style*="background:var(--accent)"]{
  background-image:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 58%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50),inset 0 -1px 0 rgba(0,0,0,.10),0 14px 30px -14px rgba(30,99,214,.70) !important;
}

/* Разделители секций не нужны — их заменяет общий фон */
body.lg section{border-bottom-color:transparent !important}

/* ---- Шапка: парящая стеклянная панель ---- */
body.lg .lp-header{
  top:12px !important;
  width:calc(100% - 24px);max-width:1240px;margin:12px auto 0;
  border:1px solid var(--lg-rim) !important;
  border-radius:22px;
  background:var(--nav-bg) !important;
  -webkit-backdrop-filter:blur(26px) saturate(185%) !important;
  backdrop-filter:blur(26px) saturate(185%) !important;
  box-shadow:var(--shadow-sm);
}
body.lg .lp-header nav{padding-top:10px !important;padding-bottom:10px !important}

/* ---- Доступность и запасные варианты ---- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.lg{--card:rgba(255,255,255,.94);--nav-bg:rgba(255,255,255,.94)}
  html.dark body.lg{--card:rgba(20,28,42,.96);--nav-bg:rgba(14,20,33,.96)}
}
@media (prefers-reduced-transparency:reduce){
  body.lg{--card:#FFFFFF;--card-2:#F5F8FC;--bg-2:#E9EEF6;--nav-bg:#F3F6FB}
  html.dark body.lg{--card:#0D131B;--card-2:#131B25;--bg-2:#10161F;--nav-bg:#080B10}
  body.lg::before{opacity:.35}
  body.lg [style*="background:var(--card)"],body.lg [style*="background:var(--card-2)"],body.lg .lp-header{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  }
}
@media (prefers-reduced-motion:reduce){
  body.lg::before{animation:none}
}
/* Телефоны: размытие слабее — дешевле для видеокарты, стекло остаётся */
@media (max-width:640px){
  body.lg{--lg-blur:blur(14px) saturate(160%)}
  body.lg .lp-header{top:8px !important;width:calc(100% - 16px);margin-top:8px;border-radius:18px}
}