/* ═════════════════════════════════════════════════════════════════════
   KORS · СТЕКЛЯННЫЙ ИНТЕРФЕЙС НА ВЕСЬ САЙТ · 25.09.2026
   Только CSS. Поле «Пользовательские CSS-стили» настроек сайта.
   Метрика, формы, счётчики и любые скрипты лежат в других полях и не тронуты.
   Рецепт стекла взят с нижнего дока .khdock (он же теперь в шапке).
   ───────────────────────────────────────────────────────────────────
   v2 от 28.09.2026 — правка производительности (тормоза скролла на Android,
   перезагрузки вкладки в Safari на iPhone из-за нехватки памяти):
   · с фоновых слоёв снят filter:blur() — гладкие градиенты в нём не нуждались,
     а он стоил ~90 МБ видеопамяти на слой при DPR 3;
   · слои сжаты с -22vmax/-26vmax до -12vmax/-14vmax;
   · снят will-change:transform — он навсегда держал обе текстуры в памяти;
   · на телефонах и планшетах: второй слой выключен, у первого анимация только
     translate, поле -8vmax, и с ~113 кнопок снят backdrop-filter (раздел 5).
   На ПК внешний вид не менялся. Откат: резерв custom_css_KORS.css (v1).
   ───────────────────────────────────────────────────────────────────
   Откат: очистить это поле целиком.
   ═════════════════════════════════════════════════════════════════════ */

/* ───────── 1. ЖИВОЙ ФОН: закреплён, идёт всегда, лежит под всем ───────── */

html{background:#0A0A0C !important;}

html::before,
html::after{
  content:'';
  position:fixed;
  z-index:0;
  pointer-events:none;
}

/* нижний слой — крупные пятна */
html::before{
  inset:-12vmax;
  background:
    radial-gradient(38vmax 38vmax at 18% 20%, rgba(109,93,251,.30), transparent 62%),
    radial-gradient(32vmax 32vmax at 82% 28%, rgba(169,155,255,.20), transparent 60%),
    radial-gradient(42vmax 42vmax at 64% 84%, rgba(72,58,185,.28), transparent 64%),
    radial-gradient(30vmax 30vmax at 10% 88%, rgba(122,107,255,.18), transparent 60%);
  animation:kbg1 48s ease-in-out infinite alternate;
}

/* верхний слой — медленнее и в другую сторону, чтобы рисунок не повторялся */
html::after{
  inset:-14vmax;
  background:
    radial-gradient(28vmax 28vmax at 72% 10%, rgba(109,93,251,.16), transparent 58%),
    radial-gradient(34vmax 34vmax at 22% 60%, rgba(150,120,255,.15), transparent 60%),
    radial-gradient(26vmax 26vmax at 50% 46%, rgba(90,75,220,.12), transparent 58%);
  animation:kbg2 71s ease-in-out infinite alternate;
}

@keyframes kbg1{
  0%  {transform:translate3d(-4%,-3%,0) scale(1);}
  50% {transform:translate3d(3%,2%,0)   scale(1.09);}
  100%{transform:translate3d(-2%,4%,0)  scale(1.03);}
}
@keyframes kbg2{
  0%  {transform:translate3d(3%,2%,0)   scale(1.05) rotate(0deg);}
  50% {transform:translate3d(-3%,-2%,0) scale(1)    rotate(4deg);}
  100%{transform:translate3d(2%,-4%,0)  scale(1.07) rotate(-3deg);}
}

/* содержимое сайта — над фоном */
body{background-color:transparent !important;position:relative;z-index:1;}
#allrecords,.t-body{background-color:transparent !important;}

/* блоки Тильды больше не закрашивают фон наглухо */
#allrecords > .t-rec{background-color:transparent !important;}

/* секции, которые красят себя сами — переводим в полупрозрачное стекло */
.khd,.khm,.kshop,.kcalc,.kcontact,.kaur,.k404,.kfin,.kcs__row,.kcm__row,
.klw,.ks7,.kpr,.ktm,.krv,.krl,.kfq,.kcta,.ktg,.kaud{
  background-color:rgba(12,12,14,.55) !important;
}

/* на телефоне фон чуть плотнее: мелкий текст на движении читается хуже */
@media (max-width:640px){
  .khd,.khm,.kshop,.kcalc,.kcontact,.kaur,.k404,.kfin,.kcs__row,.kcm__row,
  .klw,.ks7,.kpr,.ktm,.krv,.krl,.kfq,.kcta,.ktg,.kaud{
    background-color:rgba(12,12,14,.68) !important;
  }
}

/* только сдвиг, без масштаба и поворота — вариант для телефонов */
@keyframes kbg1m{
  0%  {transform:translate3d(-4%,-3%,0);}
  50% {transform:translate3d(3%,2%,0);}
  100%{transform:translate3d(-2%,4%,0);}
}

/* ФОН НА ТЕЛЕФОНАХ И ПЛАНШЕТАХ: один слой, только сдвиг, маленькое поле.
   Экономит вторую большую текстуру и любую перерисовку при анимации. */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  html::after{display:none !important;}
  html::before{
    inset:-8vmax;
    animation:kbg1m 54s ease-in-out infinite alternate !important;
  }
}

@media (prefers-reduced-motion:reduce){
  html::before,html::after{animation:none;}
}


/* ───────── 2. КНОПКИ: общая стеклянная основа ───────── */

/* — акцентные (фиолетовые) — рецепт .khdock__i--accent — */
.khd__btn,
.khm__btn,
.khh__cta,
.khh__mcta,
.kaud__btn,
.kres__cta,
.kcontact__cta,
.kcp__cta,
.ksrd__cta,
.ksrm__cta,
.kstrip__cta,
.kfoot__ctabtn,
.kcta__btn--primary,
.kcs__btn--full,.kcs__btn--hero,
.kcm__btn--full,.kcm__btn--hero,
.kgald__more,.kgalm__more,.kcp__more,
.kty__btn--p,
.kfab__btn,
.kcalc__tab.is-active,
.t-submit,
.t702__btn,
.t-form__submit .t-submit{
  background-color:transparent !important;
  background-image:linear-gradient(140deg,rgba(122,107,255,.92),rgba(96,80,235,.84)) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.7) !important;
  backdrop-filter:blur(18px) saturate(1.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 10px 26px rgba(96,80,235,.34) !important;
  color:#fff !important;
  transition:box-shadow .18s, background-image .18s !important;
}
.khd__btn:hover,.khm__btn:hover,.khh__cta:hover,.khh__mcta:hover,.kaud__btn:hover,
.kres__cta:hover,.kcontact__cta:hover,.kcp__cta:hover,.ksrd__cta:hover,.ksrm__cta:hover,
.kstrip__cta:hover,.kfoot__ctabtn:hover,.kcta__btn--primary:hover,
.kcs__btn--full:hover,.kcs__btn--hero:hover,.kcm__btn--full:hover,.kcm__btn--hero:hover,
.kgald__more:hover,.kgalm__more:hover,.kcp__more:hover,.kty__btn--p:hover,.kfab__btn:hover,
.t-submit:hover,.t702__btn:hover{
  background-image:linear-gradient(140deg,rgba(137,123,255,.96),rgba(110,94,245,.90)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 14px 32px rgba(96,80,235,.48) !important;
}

/* — прозрачные (вторичные) — рецепт .khdock__i + подложка дока — */
.khd__btn--ghost,
.khm__btn--ghost,
.khd__pill,
.khm__pill,
.khh__pill,
.kcontact__pill,
.kstrip__pill,
.kcta__btn--ghost,
.kcs__btn--ghost,.kcs__btn--dark,
.kcm__btn--ghost,.kcm__btn--dark,
.kty__btn--s,
.ktg__btn,
.kcs__chip,.kcm__chip,
.kcalc__tab,
.kaud__tag,.kcp__tag,
.t-btn:not(.t-submit),
.khh__mnav a{
  background-color:transparent !important;
  background-image:linear-gradient(140deg,rgba(255,255,255,.10),rgba(255,255,255,.043)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.6) !important;
  backdrop-filter:blur(18px) saturate(1.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 8px 22px rgba(0,0,0,.30) !important;
  transition:background-image .18s, border-color .18s, box-shadow .18s !important;
}
.khd__btn--ghost:hover,.khm__btn--ghost:hover,.khd__pill:hover,.khm__pill:hover,
.khh__pill:hover,.kcontact__pill:hover,.kstrip__pill:hover,.kcta__btn--ghost:hover,
.kcs__btn--ghost:hover,.kcs__btn--dark:hover,.kcm__btn--ghost:hover,.kcm__btn--dark:hover,
.kty__btn--s:hover,.ktg__btn:hover,.kcalc__tab:hover,.t-btn:not(.t-submit):hover,
.khh__mnav a:hover{
  background-image:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.07)) !important;
  border-color:rgba(255,255,255,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 10px 26px rgba(0,0,0,.36) !important;
}


/* ───────── 3. МОБИЛЬНОЕ МЕНЮ: каждый пункт — отдельная стеклянная кнопка ───────── */

@media (max-width:760px){
  .khh-wrap .khh__mnav{gap:8px !important;}
  .khh-wrap .khh__mnav a{
    padding:13px 16px !important;
    border-radius:14px !important;
    border-bottom:1px solid rgba(255,255,255,.14) !important;
    font-size:16px !important;
    color:#F5F3EF !important;
  }
  .khh-wrap .khh__mcta{
    border-radius:14px !important;
    margin:14px 0 14px !important;
  }
  .khh-wrap .khh__mpills{gap:8px !important;}
  .khh-wrap .khh__pill{
    border-radius:999px !important;
    padding:11px 15px !important;
  }
}


/* ───────── 4. Мелочи, чтобы стекло не ломалось ───────── */

/* у Тильды бывает своя тень на кнопках формы — гасим, чтобы не спорила */
.t-submit{text-shadow:none !important;}

/* иконки внутри стеклянных кнопок наследуют цвет текста */
.khd__btn svg,.khm__btn svg,.khh__cta svg,.kcta__btn svg,.kcs__btn svg,.kcm__btn svg{
  stroke:currentColor;
}


/* ───────── 5. КНОПКИ НА ТЕЛЕФОНАХ И ПЛАНШЕТАХ: без backdrop-filter ─────────
   Правка производительности от 28.09.2026.
   Подложка кнопок здесь — гладкий градиент фона, размывать там нечего,
   а браузер на каждом кадре скролла пересчитывал подложку для ~113 кнопок.
   Вместо блюра — лёгкая белая заливка: на глаз то же стекло, стоимость нулевая.
   На ПК backdrop-filter остаётся как был. Шапка .khh и док .khdock не тронуты. */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  .khd__btn,.khm__btn,.khh__cta,.khh__mcta,.kaud__btn,.kres__cta,.kcontact__cta,
  .kcp__cta,.ksrd__cta,.ksrm__cta,.kstrip__cta,.kfoot__ctabtn,.kcta__btn--primary,
  .kcs__btn--full,.kcs__btn--hero,.kcm__btn--full,.kcm__btn--hero,
  .kgald__more,.kgalm__more,.kcp__more,.kty__btn--p,.kfab__btn,
  .kcalc__tab.is-active,.t-submit,.t702__btn,.t-form__submit .t-submit,
  .khd__btn--ghost,.khm__btn--ghost,.khd__pill,.khm__pill,.khh__pill,
  .kcontact__pill,.kstrip__pill,.kcta__btn--ghost,
  .kcs__btn--ghost,.kcs__btn--dark,.kcm__btn--ghost,.kcm__btn--dark,
  .kty__btn--s,.ktg__btn,.kcs__chip,.kcm__chip,.kcalc__tab,
  .kaud__tag,.kcp__tag,.t-btn:not(.t-submit),.khh__mnav a{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .khd__btn--ghost,.khm__btn--ghost,.khd__pill,.khm__pill,.khh__pill,
  .kcontact__pill,.kstrip__pill,.kcta__btn--ghost,
  .kcs__btn--ghost,.kcs__btn--dark,.kcm__btn--ghost,.kcm__btn--dark,
  .kty__btn--s,.ktg__btn,.kcs__chip,.kcm__chip,.kcalc__tab,
  .kaud__tag,.kcp__tag,.t-btn:not(.t-submit),.khh__mnav a{
    background-color:rgba(255,255,255,.055) !important;
  }
}


/* ───────── 6. ФИКСИРОВАННЫЕ ПАНЕЛИ НА ТЕЛЕФОНЕ: мягче радиус размытия ─────────
   Правка производительности от 28.09.2026, шаг 2.
   Нижняя панель .khtab и шапка .khh закреплены на экране и размывают всё,
   что под ними проезжает при скролле. Стоимость размытия растёт примерно
   как квадрат радиуса: 24 -> 10 px это примерно в 5-6 раз дешевле на кадр.
   Карточки .khm__price и .khm__gar лежат поверх фона первого экрана —
   им тоже хватает половины радиуса.
   Эффект стекла сохраняется: граница, блик и тень не тронуты.
   Откат этого шага: удалить раздел 6 целиком. */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  .khtab{
    -webkit-backdrop-filter:blur(10px) saturate(1.7) !important;
    backdrop-filter:blur(10px) saturate(1.7) !important;
  }
  .khh-wrap .khh, .khh{
    -webkit-backdrop-filter:blur(12px) saturate(1.8) !important;
    backdrop-filter:blur(12px) saturate(1.8) !important;
  }
  .khdock{
    -webkit-backdrop-filter:blur(12px) saturate(1.8) !important;
    backdrop-filter:blur(12px) saturate(1.8) !important;
  }
  .khm__price, .khm__gar{
    -webkit-backdrop-filter:blur(10px) saturate(1.6) !important;
    backdrop-filter:blur(10px) saturate(1.6) !important;
  }
}