/* common.css - единственный файл, подключённый на ВСЕХ страницах.
   Две независимые части: плавающая кнопка WhatsApp и снятие размытия
   ниже 1024px. Держать их вместе выгодно ровно одним: это один запрос
   и одно место, куда смотреть, когда правило должно работать везде.
   28.08.2026 файл назывался no-blur-mobile.css и лежал бы не к месту. */

/* ============================================================================
   ПЛАВАЮЩАЯ КНОПКА WHATSAPP (.wa-fab)
   Главный канал заявок: бэкенда нет, формы нет, вся связь идёт через WhatsApp.

   Механика перенесена с соседнего проекта atom.kg (.wa-sticky) вместе с его
   уроками, вид - наш, из переменных проекта. Что перенесено дословно и почему:

   1. bottom:90px на мобильной ширине, а НЕ 20-30px. position:fixed считается от
      лэйаут-вьюпорта, он равен большому вьюпорту, а нижняя панель браузера
      показывается поверх. При маленьком отступе панель срезает кнопку пополам,
      и обрезка читается как дёрганье при скролле. 90px больше любой панели.
   2. right:23px, а не 20. Внешняя орбита выходит за круг на 20px, электрон на
      ней - ещё на 3px. При 20px этот электрон срезался краем экрана.
   3. Орбиты стартуют с задержкой 3s. Три бесконечных вращения со старта дают
      около +30 мс TBT в окне замера; отложенный старт выносит их за это окно.
   4. Подушка padding-bottom у body на мобильной ширине. Без неё в конце страницы
      под кнопкой оказываются футер и кнопки квиза. Меняешь bottom или размер
      круга - пересчитай и подушку.
   5. Ниже 360px круг 48x48 - нижняя граница зоны нажатия по гайдлайнам.
   6. Класс на ссылке РОВНО ОДИН (wa-fab). Аналитика кладёт className в метку
      события; добавишь второй класс - метка поедет. Источник передаётся
      атрибутом data-wa-place, а не классом.

   Чего в atom.kg НЕТ и что добавлено здесь:
   7. Кнопка скрыта, пока виден первый экран. У нас в правом нижнем углу героя
      стоят стрелки карусели, и на обеих ширинах кнопка их перекрывала.
      Показ включается классом is-visible через IntersectionObserver - без
      обработчика скролла, чтобы не трогать pin-секции и не считать геометрию
      в горячем пути.
   ============================================================================ */
.wa-fab {
  position: fixed;
  right: 23px;
  bottom: 28px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  background: radial-gradient(circle at 32% 28%, #3ee27b 0%, var(--wa, #25d366) 46%, #1b8f47 100%);
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .55), inset 0 0 0 1px rgba(255, 255, 255, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.9);
  transition: opacity .28s var(--ease, ease), transform .28s var(--ease, ease), visibility .28s;
}
.wa-fab.is-visible { opacity: 1; visibility: visible; transform: none; }
.wa-fab:hover { transform: translateY(-2px); }
.wa-fab:focus-visible { outline: 3px solid var(--brand-orange, #E2661B); outline-offset: 4px; }
.wa-fab svg {
  grid-area: 1/1; position: relative; z-index: 2;
  width: 28px; height: 28px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .28));
}
/* Подложка-сфера в фирменном фиолетовом: кнопка перестаёт читаться плоской плашкой
   и связывается с остальным сайтом, где всё построено на орбитах и сферах. */
.wa-fab::before {
  content: ''; position: absolute; inset: -14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.16) 0%, rgba(91,45,142,.20) 45%, rgba(36,7,98,0) 72%);
}
.wa-fab__orbits { position: absolute; inset: 0; pointer-events: none; }
.wa-fab__orbits i {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(226, 102, 27, .38);
  animation: waFabOrbit 9s linear 3s infinite;
}
.wa-fab__orbits i:nth-child(1) { inset: -9px; }
.wa-fab__orbits i:nth-child(2) {
  inset: -15px; border-color: rgba(138, 79, 196, .34); border-style: dashed;
  animation-duration: 14s; animation-direction: reverse;
}
.wa-fab__orbits i:nth-child(3) { inset: -21px; border-color: rgba(95, 118, 232, .24); animation-duration: 20s; }
.wa-fab__orbits i::after {
  content: ''; position: absolute; top: -3px; left: 50%; margin-left: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-orange, #E2661B); box-shadow: 0 0 8px rgba(226, 102, 27, .85);
}
.wa-fab__orbits i:nth-child(2)::after {
  top: auto; bottom: -3px; left: 22%;
  background: #8A4FC4; box-shadow: 0 0 8px rgba(138, 79, 196, .8);
}
.wa-fab__orbits i:nth-child(3)::after {
  top: 28%; left: auto; right: -3px; margin-left: 0; width: 5px; height: 5px;
  background: #5f76e8; box-shadow: 0 0 7px rgba(95, 118, 232, .75);
}
@keyframes waFabOrbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }

@media (max-width: 768px) {
  /* см. пункты 1 и 4 в шапке блока */
  .wa-fab { bottom: 90px; width: 51px; height: 51px; }
  .wa-fab svg { width: 26px; height: 26px; }
  body { padding-bottom: calc(165px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) {
  .wa-fab { width: 48px; height: 48px; }
  .wa-fab svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab:hover { transform: none; }
  .wa-fab__orbits i { animation: none; }
}

/* ============================================================================
   БЕЗ РАЗМЫТИЯ НИЖЕ 1024px - прямой закон проекта.
   backdrop-filter и filter:blur заставляют мобильный GPU перерисовывать
   область под элементом на каждом кадре скролла. На скроллозависимой
   странице с pin-секциями это самое дорогое, что тут есть.

   Снимается НЕ слепо, иначе разваливается дизайн. Три группы, три замены:

   1) backdrop-filter на карточках. Карточка держалась на размытии того,
      что под ней, и своей заливке в 6-10% белого. Без размытия она
      становится почти невидимой, а белый текст ложится на пёструю
      картинку. Замена - плотная тёмно-фиолетовая подложка своей заливкой.
   2) Крупные filter:blur 25-120px на декоративных свечениях. Под размытием
      там лежит радиальный градиент. Замена - маска, которая гасит края
      без перерисовки: вид тот же, стоимость несопоставима.
   3) Мелкие filter:blur до 8px на орбитах, искрах и пылинках. Убираются
      без замены - на 390px разница в один-два пикселя не видна.

   Файл подключается последним, поэтому правила ниже перекрывают всё.
   !important нужен: часть размытий приезжает из @keyframes, а анимации
   перебиваются только важностью.
   ============================================================================ */
@media (max-width: 1023.98px) {

  /* --- 1. КАРТОЧКИ: размытие подложки -> плотная заливка --- */
  .scheme__item,
  .dcard,
  .mix__tag,
  .labcore__shots .shot__cap,
  .network__takes,
  .samples .visit,
  .faq__item,
  .visitus__samples span,
  .visitus .vcard,
  .lab-takes__cards article,
  .quiz__box,
  .detail-back,
  .detail-steps article,
  .color-chip,
  .detail-reveal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(42, 14, 102, .82) !important;
  }

  /* .spec - светлая карточка на тёмном, заливка и так почти непрозрачная */
  .spec {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(255, 255, 255, .94) !important;
  }

  /* Плашки на СВЕТЛОЙ секции производства - подложка светлая, не тёмная */
  .production-tab,
  .labcore .production-tab,
  .labcore .production-tab.is-active {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(255, 255, 255, .88) !important;
  }

  /* Шапка при скролле */
  .showcase__bar.is-stuck {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* --- 2. КРУПНЫЕ СВЕЧЕНИЯ: blur -> маска --- */
  .sphere,
  .spheres--light .sphere {
    filter: none !important;
    -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 68%);
    mask-image: radial-gradient(circle, #000 12%, transparent 68%);
  }
  .glowfield i,
  .viz__glow,
  .capabilities-catalog::before,
  .color-lab__halo {
    filter: none !important;
  }

  /* --- 3. МЕЛКИЕ РАЗМЫТИЯ: убрать --- */
  .orbit__core,
  .mobile-tech-preview__orbit,
  .showcase__shadow,
  .showcase__item,
  .vorb__ring,
  .vorb__orb::before,
  .pour__stream,
  .labcore__shots::before,
  .labcore__shots::after,
  .mix::before,
  .mix::after,
  .pantone-flask__wave,
  .network::before,
  .visitus__orbit,
  .visitus__core::before,
  .production-slider__orbit,
  .production-slider__orbit i::before,
  .quiz__orbit,
  .quiz__orbit i::before,
  .quiz__orbit--b i::before,
  .cycle:not(.is-cycle-revealed) .cstep__ball,
  .cycle.is-cycle-revealed .cstep__ball,
  .detail-orbit,
  .detail-core::before,
  .detail-dust i,
  .color-orbit,
  .color-orbit i {
    filter: none !important;
  }
}