/* iOS Liquid Glass — базовые переменные */
:root{
  --lg-radius: 999px;                  /* капсула */

  /* затемнение/тинт плашки */
  --lg-tint: 0.18;                     /* 0.10 = чуть, 0.18 = средне, 0.26 = сильнее */
  --lg-tint-color: 16,16,18;           /* нейтральный темный (RGB) */

  --lg-blur: 18px;                     /* blur для fallback */
  --lg-sat: 1.55;                      /* насыщенность */
  --lg-bright: 1.12;                   /* яркость */
  --lg-outer-shadow: 0 12px 34px rgba(0,0,0,0.14);
  --lg-inner-shadow-1: 0 0 0 1px rgba(255,255,255,0.22) inset;
  --lg-inner-shadow-2: 0 0 18px rgba(255,255,255,0.14) inset;
}

/* контейнер (шапка/плашка) */
.liquid-header{
  position: relative;
  isolation: isolate;
  border-radius: var(--lg-radius);
  overflow: hidden;                 /* важно: клип по радиусу */
  transform: translateZ(0);         /* стабилизирует рендер */
}

/* слой “жидкого стекла” */
.liquid-header .liquid-glass-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  border-radius: inherit;
  overflow: hidden;

  /* iOS tint: слегка тёмная подложка */
  background: rgba(var(--lg-tint-color), var(--lg-tint));

  /* fallback (Safari/Firefox) */
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright));

  /* iOS-линза: тонкая обводка + мягкая подсветка */
  box-shadow:
    var(--lg-inner-shadow-1),
    var(--lg-inner-shadow-2),
    var(--lg-outer-shadow);
}

/* блик (верхний) */
.liquid-header .liquid-glass-layer::before{
  content:"";
  position:absolute;
  inset:-60% -20% auto -20%;
  height: 120%;
  border-radius: inherit;
  background: radial-gradient(closest-side, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
  opacity: 0.28;                    /* чуть меньше, чтобы темнее выглядело */
  filter: blur(2px);
}

/* лёгкое затемнение снизу для “глубины” */
.liquid-header .liquid-glass-layer::after{
  content:"";
  position:absolute;
  inset:auto -20% -60% -20%;
  height: 120%;
  border-radius: inherit;
  background: radial-gradient(closest-side, rgba(0,0,0,0.34), rgba(0,0,0,0) 72%);
  opacity: 0.22;                    /* чуть сильнее */
}

/* Chromium enhancement: displacement */
@supports (backdrop-filter: url(#liquidGlass)) {
  .liquid-header .liquid-glass-layer{
    backdrop-filter: url(#liquidGlass) brightness(var(--lg-bright)) saturate(var(--lg-sat));
  }
}

/* контент шапки поверх слоя */
.liquid-header > *{
  position: relative;
  z-index: 1;
}