/* --- Производительность: отложенный рендер секций ниже первого экрана --- */
:is(
  #directions-hub,
  #about-author,
  #social-proof,
  #course-audience,
  #course-after-audience,
  #course-program,
  #course-how-learning,
  #course-pocket-studio,
  #course-pricing,
  #course-faq,
  #kids-results,
  #kids-program,
  #kids-studio,
  #kids-mentor,
  #kids-faq,
  #kids-pricing,
  #imx-audience,
  #imx-program,
  #imx-value,
  #imx-backstage,
  #imx-pricing,
  #imx-faq,
  #pco-audience,
  #pco-advantages,
  #pco-packages,
  #pco-expertise,
  #pco-contact,
  #training-application,
  #wp-el-materials,
  #site-footer,
  #intensiv-msk-about,
  #intensiv-msk-program,
  #intensiv-msk-how,
  #intensiv-msk-moments,
  #intensiv-msk-pay,
  #intensivkids-about,
  #intensivkids-program,
  #intensivkids-moments,
  #intensivkids-pay
) {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

/* --- Производительность: фолбэк для браузеров без content-visibility ---
   content-visibility появился в Safari только в 18.0, в Yandex Browser зависит
   от версии Chromium. Там весь декор всех секций отрисовывается сразу: 95
   backdrop-filter, 184 filter: blur() и 149 бесконечных анимаций в один кадр.
   Ниже первого экрана декор не рисуем, пока artvoic-perf.js не пометит секцию
   как .artvoic-inview. Герой не затронут — он виден сразу и выглядит как раньше.
   Класс .artvoic-js ставит инлайновый скрипт в site-header.html; без JS
   и при незагрузившемся artvoic-perf.js декор остаётся на месте. */
@supports not (content-visibility: auto) {
  .artvoic-js :is(
    #directions-hub,
    #about-author,
    #social-proof,
    #course-audience,
    #course-after-audience,
    #course-program,
    #course-how-learning,
    #course-pocket-studio,
    #course-pricing,
    #course-faq,
    #kids-results,
    #kids-program,
    #kids-studio,
    #kids-mentor,
    #kids-faq,
    #kids-pricing,
    #imx-audience,
    #imx-program,
    #imx-value,
    #imx-backstage,
    #imx-pricing,
    #imx-faq,
    #pco-audience,
    #pco-advantages,
    #pco-packages,
    #pco-expertise,
    #pco-contact,
    #site-footer,
    #intensiv-msk-about,
    #intensiv-msk-program,
    #intensiv-msk-how,
    #intensiv-msk-moments,
    #intensiv-msk-pay,
    #intensivkids-about,
    #intensivkids-program,
    #intensivkids-moments,
    #intensivkids-pay
  ):not(.artvoic-inview) :is(
    [class*="__bg-wrapper"],
    [class*="__aurora"],
    [class*="__glow"]
  ) {
    /* visibility, а не display: раскладка не меняется, сдвига контента нет */
    visibility: hidden;
  }
}

/* --- Производительность: пауза декора вне viewport (artvoic-perf.js) --- */
.artvoic-offscreen :is(
  [class*="__aurora"],
  [class*="__glow"],
  [class*="__wave-track"],
  [class*="__marquee-track"],
  [class*="__sound-bars"] i,
  .hero-dubbing__portrait-orbit,
  .hero-dubbing__portrait-pulse
) {
  animation-play-state: paused !important;
}

.artvoic-offscreen :is(#kids-hero, #imx-hero, #pco-hero) .kids-hero__video,
.artvoic-offscreen .kids-hero__video {
  visibility: hidden;
}

.artvoic-inview :is(#kids-hero, #imx-hero, #pco-hero) .kids-hero__video,
.artvoic-inview .kids-hero__video {
  visibility: visible;
}

/* --- Производительность: WebKit — не анимируем размытые слои ---
   -webkit-named-image поддерживает только WebKit, поэтому блок достаётся
   Safari (десктоп и iOS) и не задевает Chrome, Edge и Yandex Browser.

   В WebKit анимация transform на элементе с filter заставляет заново
   растеризовывать всю размытую поверхность каждый кадр, а не двигать готовый
   композитный слой. У .hero-dubbing__aurora это область 160% x 160% вьюпорта
   из пяти радиальных градиентов под blur(38px), которая масштабируется до
   scale(1.12) бесконечно; у .hero-dubbing__glow — blur(64px) и scale(1.28).
   Останавливаем движение: свечение остаётся на месте, а перерастеризовывать
   его каждый кадр больше не нужно. Для мобилок то же сделано ниже. */
@supports (background: -webkit-named-image(i)) {
  /* Радиусы blur оставляем как были: свечения построены на blur(56-76px),
     с меньшим радиусом они станут жёсткими. Статичное размытие
     растеризуется один раз, дальше слой просто композитится. */
  :is(#hero-dubbing, #hero-course, #course-how-learning) :is(
    .hero-dubbing__aurora,
    .hero-dubbing__glow
  ),
  :is(#hero-dubbing, #hero-course, #course-how-learning) .hero-dubbing__glow::after,
  #directions-hub :is(.directions-hub__aurora, .directions-hub__glow),
  #directions-hub .directions-hub__glow::after,
  #about-author :is(.about-author__aurora, .about-author__glow),
  #about-author .about-author__glow::after {
    animation: none;
    will-change: auto;
  }

  /* Keyframes *-breath держали opacity в диапазоне ~0,5-0,95. Без анимации
     слой встал бы на свой базовый opacity: 1 и засветил бы блок, поэтому
     прибиваем яркость к середине прежней пульсации. */
  :is(#hero-dubbing, #hero-course, #course-how-learning) .hero-dubbing__glow,
  :is(#hero-dubbing, #hero-course, #course-how-learning) .hero-dubbing__glow::after {
    opacity: 0.75;
  }

  #directions-hub .directions-hub__glow,
  #directions-hub .directions-hub__glow::after {
    opacity: 0.69;
  }

  #about-author .about-author__glow,
  #about-author .about-author__glow::after {
    opacity: 0.74;
  }
}

/* --- Производительность: мобилка — меньше blur и бесконечных анимаций фона --- */
@media (max-width: 768px) {
  [class*="__aurora"],
  [class*="__glow"] {
    animation: none !important;
    filter: none !important;
  }

  #about-author .about-author__marquee-track,
  .hero-dubbing__wave-track {
    animation: none !important;
    will-change: auto;
  }

  #site-header .site-header__bar,
  #site-header.site-header--scrolled:not(.site-header--open) .site-header__bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  :is(#hero-dubbing, #hero-course) .hero-dubbing__photo {
    will-change: auto;
  }

  :is(#hero-dubbing, #hero-course) .hero-dubbing__sound-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}