/* ============================================================
   Атмосферный слой hero-секций. 12.08.2026.

   ЗАЧЕМ СВОЙ, А НЕ ГОТОВЫЙ КОМПОНЕНТ. Разобрал aurora- и mesh-фоны с 21st.dev:
   как есть они нам не подходят по трём причинам, каждая проверена на превью.
     1. Все они h-screen. Наш hero несёт хлебные крошки, оффер и панель фактов —
        полноэкранный фон вытолкнул бы их за первый экран и обнулил работу
        по сокращению объёма до <h1>.
     2. Контраст. На превью aurora-героя подзаголовок читается на грани: текст
        лежит прямо на движущемся многоцветном фоне. У нас на этих экранах
        коммерческий оффер, его нельзя терять.
     3. Canvas и WebGL-шейдеры тянут постоянную перерисовку. Тема без сборки,
        а CWV мы правили отдельно — платить кадрами за декорацию не будем.

   ЧТО ВЗЯТО. Сама идея: медленно дышащие цветовые пятна + зерно. Реализация
   своя, чистым CSS, в зелёной палитре сайта, БЕЗ canvas и без JS-анимации.
   Текст всегда лежит выше слоя (z-index), пятна идут с низкой альфой.
   ============================================================ */

/*
 * Слой ставится на существующую hero-секцию как ::before, поэтому секции нужен
 * только position:relative и overflow:hidden — они уже есть у всех наших hero.
 * Сам слой pointer-events:none, чтобы не перехватывать клики по кнопкам.
 */
.hero-atmo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero-atmo__layer {
    position: absolute;
    inset: -20% -10%;
    z-index: 0;
    pointer-events: none;
    /*
     * Три пятна вместо одного градиента: пересекаясь на разных скоростях, они
     * дают ощущение движения воздуха, а не «крутится картинка». Радиусы разные —
     * одинаковые читались бы как узор.
     */
    background:
        radial-gradient(38% 44% at 18% 28%, rgba(52, 211, 153, 0.20), transparent 70%),
        radial-gradient(32% 38% at 82% 22%, rgba(5, 150, 105, 0.18), transparent 72%),
        radial-gradient(46% 40% at 62% 78%, rgba(110, 231, 183, 0.14), transparent 70%);
    filter: blur(28px);
    will-change: transform;
}

/* Светлые hero: пятна должны быть заметно слабее, иначе текст теряет контраст. */
.hero-atmo--light .hero-atmo__layer {
    background:
        radial-gradient(38% 44% at 18% 28%, rgba(5, 150, 105, 0.10), transparent 70%),
        radial-gradient(32% 38% at 82% 22%, rgba(16, 185, 129, 0.09), transparent 72%),
        radial-gradient(46% 40% at 62% 78%, rgba(52, 211, 153, 0.08), transparent 70%);
}

/*
 * Зерно. SVG-шум инлайном в data-uri: 380 байт против килобайтов PNG-текстуры
 * и без лишнего запроса. Очень слабое — задача убрать «пластиковость» плоского
 * градиента, а не показать текстуру.
 */
.hero-atmo__grain {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Содержимое hero поднимается над слоями. */
.hero-atmo > .container,
.hero-atmo > .wrap,
.hero-atmo > .lp-hero__grid,
.hero-atmo > .cosmo-hero__grid,
.hero-atmo__content {
    position: relative;
    z-index: 1;
}

/*
 * ДВИЖЕНИЕ. Только при отсутствии prefers-reduced-motion и только на устройствах
 * с точным указателем: на тач-экранах постоянная анимация фона заметно греет
 * батарею, а выигрыш незаметен.
 * Анимируется ТОЛЬКО transform — свойство композитора, раскладку не трогает.
 */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
    @keyframes heroAtmoDrift {
        0%   { transform: translate3d(0, 0, 0) scale(1); }
        50%  { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
        100% { transform: translate3d(0, 0, 0) scale(1); }
    }
    .hero-atmo__layer {
        animation: heroAtmoDrift 26s ease-in-out infinite;
    }
}

/*
 * ПАРАЛЛАКС. Смещение задаёт JS (js/hero-parallax-atmo.js) через переменную,
 * а не inline-стилем: так CSS остаётся владельцем анимации, а скрипт передаёт
 * только величину сдвига. Если скрипт не загрузился, переменная равна нулю
 * и слой просто стоит на месте — деградация без поломки.
 */
.hero-atmo__layer {
    --atmo-shift: 0px;
    translate: 0 var(--atmo-shift);
}