/* Натуральное стекло. Добавлено при переносе с Тильды.

   Что делает: поверх прежнего стекла (размытие фона + светлый тон) добавлены
   признаки реального стекла:
   1) отражение окружения: подсветка берётся из карты окружения
      images/glass-env.jpg (студийный свет: окно, софтбоксы, лампа),
      она проявляется по краю стекла и плывёт при прокрутке (скрипт js/glass.js
      пишет положение в --gx / --gy);
   2) кромка стекла (Френель): тонкая яркая линия, блик сверху слева,
      слабый отсвет снизу справа и лёгкая дисперсия по бокам;
   3) насыщенность и яркость фона за стеклом;

   Чтобы заменить карту окружения на настоящую HDRI-панораму, достаточно
   положить свою картинку (JPG, лучше 2048×1024, уже приведённую к LDR)
   в images/glass-env.jpg. */

:root{--yg-env:url("../images/glass-env.jpg")}

/* ---------- материал: размытие + насыщенность ---------- */
.glass,.eduGlass,.acc-plus,.care-tab,.care-video-play{
  backdrop-filter:blur(22px) saturate(1.55) brightness(1.06) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.55) brightness(1.06) !important;
  box-shadow:0 10px 32px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.08) !important;
}
.ycs-arrows button{
  backdrop-filter:blur(12px) saturate(1.5) brightness(1.06) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.5) brightness(1.06) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08) !important;
}
.ypGlass,.igNote{
  backdrop-filter:blur(40px) saturate(1.6) brightness(1.05) !important;
  -webkit-backdrop-filter:blur(40px) saturate(1.6) brightness(1.05) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08) !important;
}
.segOverlay{
  backdrop-filter:blur(30px) saturate(1.6) brightness(1.04) !important;
  -webkit-backdrop-filter:blur(30px) saturate(1.6) brightness(1.04) !important;
}
#ypHead .bar{
  position:relative;
  backdrop-filter:blur(var(--hd-blur)) saturate(1.35) brightness(1.03) !important;
  -webkit-backdrop-filter:blur(var(--hd-blur)) saturate(1.35) brightness(1.03) !important;
}
#ypDrop .pan,#ypmDrop .ypmPan,.ypmBtn{
  backdrop-filter:blur(14px) saturate(1.35) brightness(1.03) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.35) brightness(1.03) !important;
}

/* ---------- отражение окружения (вместо прежнего диагонального блика) ---------- */
.glass::before,.eduGlass::before,.acc-plus::before,.care-tab::before,.care-video-play::before,
.ycs-arrows button::before,.ypGlass::before,.igNote::before,
#ypHead .bar::before,#ypDrop .pan::before,.ypmBtn::before,#ypmDrop .ypmPan::before,.segOverlay::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background-image:var(--yg-env) !important;
  background-repeat:no-repeat !important;
  background-size:380% 380% !important;
  background-position:var(--gx,22%) var(--gy,30%) !important;
  mix-blend-mode:screen !important;
  opacity:.55 !important;
  /* отражение только у кромки, середина стекла остаётся чистой */
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,transparent 58%,rgba(0,0,0,.45) 84%,#000 100%) !important;
          mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,transparent 58%,rgba(0,0,0,.45) 84%,#000 100%) !important;
  z-index:1;
}
/* светлое стекло (шапка, мобильная панель): отражение слабее и без screen */
#ypHead .bar::before,#ypDrop .pan::before,.ypmBtn::before,#ypmDrop .ypmPan::before{
  mix-blend-mode:soft-light !important;
  opacity:.55 !important;
}

/* ---------- кромка стекла ---------- */
.glass::after,.eduGlass::after,.acc-plus::after,.care-tab::after,.care-video-play::after,
.ycs-arrows button::after,.ypGlass::after,.igNote::after,
#ypHead .bar::after,#ypDrop .pan::after,.ypmBtn::after,#ypmDrop .ypmPan::after,.segOverlay::after,
.ypHint::after,.ycs-hint::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.34),
    inset 1.5px 2px 3px -1px rgba(255,255,255,.80),
    inset -1px -1.5px 3px -1px rgba(255,255,255,.38),
    inset 2px 0 4px -3px rgba(255,150,140,.30),
    inset -2px 0 4px -3px rgba(140,175,255,.30),
    inset 0 0 20px rgba(255,255,255,.10);
}
#ypHead .bar::after,#ypDrop .pan::after,.ypmBtn::after,#ypmDrop .ypmPan::after{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 1.5px 2px 3px -1px rgba(255,255,255,.95),
    inset -1px -1.5px 3px -1px rgba(255,255,255,.55),
    inset 0 0 18px rgba(255,255,255,.28);
}
.ypHint,.ycs-hint{position:absolute}
.ypHint::after,.ycs-hint::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 1px 1.5px 2px -1px rgba(255,255,255,.45),inset -1px -1px 2px -1px rgba(255,255,255,.2)}
#ypDrop .pan,#ypmDrop .ypmPan,.segOverlay{position:absolute}
.ypmBtn{position:relative}

/* содержимое стекла поверх бликов */
.eduGlass > *,.acc-plus > *,.care-tab > *,.care-video-play > *,.ycs-arrows button > *{position:relative;z-index:3}