/**
 * Fixed WebGL glow — тот же паттерн, что на страницах услуг
 * (.page-constructor__bg + #gradient-canvas).
 * Фирменный градиент обязателен: не скрывать canvas.
 */

html:has(.case-constructor-page),
body:has(.case-constructor-page),
html:has(.sa-contacts-page-constructor),
body:has(.sa-contacts-page-constructor) {
  background-color: #191a1b !important;
  background-image: none !important;
  /* snapshot/бандл: overflow-x:hidden на body ломает fixed canvas → шов */
  overflow-x: visible !important;
  overflow-y: auto !important;
}

/* /contacts: body как на prod Nuxt */
html:has(.sa-contacts-page-constructor),
body:has(.sa-contacts-page-constructor) {
  background-color: #151516 !important;
}

.page-constructor.case-constructor-page,
.page-constructor.sa-contacts-page-constructor {
  position: relative;
  min-height: 100vh;
  /* прозрачный — иначе перекрывает фирменный canvas */
  background: transparent;
  overflow: visible;
}

.page-constructor.case-constructor-page > .page-constructor__bg,
.page-constructor.sa-contacts-page-constructor > .page-constructor__bg {
  position: fixed;
  top: -10%;
  left: -10%;
  height: 120%;
  width: 120%;
  z-index: 0 !important;
  pointer-events: none;
}

@supports not (
  ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) or
    (-webkit-backdrop-filter: blur(15px))
) {
  .page-constructor.case-constructor-page > .page-constructor__bg,
  .page-constructor.sa-contacts-page-constructor > .page-constructor__bg {
    filter: blur(15px);
  }
}

.page-constructor.case-constructor-page > .page-constructor__bg canvas,
.page-constructor.sa-contacts-page-constructor > .page-constructor__bg canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  --gradient-color-1: #cb23da;
  --gradient-color-2: #191a1b;
  --gradient-color-3: #191a1b;
  --gradient-color-4: #2947e8;
  --gradient-color-5: #e829a7;
  --gradient-color-6: #1a2b85;
  --gradient-color-7: #191a1b;
  --gradient-color-8: #e829a7;
  --gradient-color-9: #6846e6;
}

/*
 * /contacts: фирменный mesh слишком «розовый+синий» под формой
 * (без блока «задачи» форма сидит прямо на canvas).
 * Палитра — тёплый тёмный, ближе к hero/фото.
 */
.page-constructor.sa-contacts-page-constructor > .page-constructor__bg canvas {
  --gradient-color-1: #4a2238;
  --gradient-color-2: #191a1b;
  --gradient-color-3: #151516;
  --gradient-color-4: #2a2436;
  --gradient-color-5: #3d2430;
  --gradient-color-6: #1c1a22;
  --gradient-color-7: #191a1b;
  --gradient-color-8: #3a2432;
  --gradient-color-9: #2c2438;
}

/* Wash как на услугах: затемняет, но mesh-градиент остаётся видимым */
.page-constructor.case-constructor-page > .page-constructor__bg::after,
.page-constructor.sa-contacts-page-constructor > .page-constructor__bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(23, 25, 26, 0.88), rgba(23, 25, 26, 0.35));
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

/*
 * /contacts: mesh на ProD приглушён wash’ем.
 * Слишком прозрачный wash → «розовый+синий» под формой.
 * Держим ближе к тёмному hero/хвосту ProD.
 */
.page-constructor.sa-contacts-page-constructor > .page-constructor__bg::after {
  background: linear-gradient(
    0deg,
    rgb(21, 21, 22) 0%,
    rgba(21, 21, 22, 0.92) 40%,
    rgba(21, 21, 22, 0.82) 100%
  );
}

@supports not (
  ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) or
    (-webkit-backdrop-filter: blur(15px))
) {
  .page-constructor.case-constructor-page > .page-constructor__bg::after,
  .page-constructor.sa-contacts-page-constructor > .page-constructor__bg::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Контент кейса над canvas */
.page-constructor.case-constructor-page > .hero,
.page-constructor.case-constructor-page > .container,
.page-constructor.case-constructor-page > .more-case-wr,
.page-constructor.sa-contacts-page-constructor > .sa-contacts-main {
  position: relative;
  z-index: 2;
}