/**
 * iLogist — Parallax Fix
 *
 * Чому НЕ використовуємо background-attachment: fixed?
 *   AOS-бібліотека додає CSS transform (translateY) до елементів,
 *   що створює новий stacking context. В цьому контексті
 *   background-attachment: fixed перестає працювати у всіх браузерах
 *   (це обмеження CSS-специфікації, а не баг браузера).
 *   Рішення: паралакс обчислюється через JS (parallax-init.js),
 *   а background-position оновлюється через requestAnimationFrame.
 */

/* ============================================================
   HERO-СЕКЦІЯ (.dynamic-hero)
   parallax-init.js рухає .dynamic-hero-bg через translate3d
============================================================ */
.dynamic-hero {
    position: relative;
    overflow: hidden;
}

.dynamic-hero-bg {
    /* Явний розрахунок розміру через calc() — гарантовано без конфліктів
       з custom.css (де width:100%;height:100%). Bg розширюється на 150px
       з кожного боку для буферу параллаксу. overflow:hidden на .dynamic-hero
       обрізає невидиму частину. */
    position: absolute !important;
    top: -150px !important;
    left: -150px !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100% + 300px) !important;
    height: calc(100% + 300px) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    will-change: transform;
    transition: none;
    /* Вимикаємо kenBurns (zoom) із custom.css — parallax-init.js керує transform */
    animation: none !important;
}

.dynamic-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 10, 30, 0.72) 0%,
        rgba(10, 10, 30, 0.45) 60%,
        rgba(57, 46, 201, 0.25) 100%
    );
    z-index: 1;
}

.dynamic-hero-content {
    position: relative;
    z-index: 2;
}

/* ============================================================
   СЕКЦІЇ З ФОНОВИМИ ЗОБРАЖЕННЯМИ (.bg-fixed-parallax)
   Класичний CSS-параллакс: фон закріплений до viewport, контент
   "проїжджає" над ним — це той ефект "повного прогортування",
   який був на сайті раніше.

   ВАЖЛИВО: треба зняти transform: translate3d(0,0,0) з custom.css,
   бо transformed parent ламає background-attachment: fixed.
============================================================ */
.bg-fixed-parallax {
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* Скасовуємо GPU-transform із custom.css — він ламає fixed attachment */
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto;
}

/* ============================================================
   AOS-ФІКС всередині паралакс-секцій
   AOS не повинен застосовувати transform до самого контейнера,
   щоб не ламати JS-паралакс.
============================================================ */
.bg-fixed-parallax[data-aos],
.dynamic-hero[data-aos] {
    transform: none !important;
    transition-property: opacity !important;
}

/* Дочірні AOS-елементи всередині паралакс-секцій:
   тільки opacity (без transform) щоб не ламати паралакс фону */
.bg-fixed-parallax [data-aos="fade-up"],
.bg-fixed-parallax [data-aos="fade-down"],
.bg-fixed-parallax [data-aos="fade-left"],
.bg-fixed-parallax [data-aos="fade-right"],
.bg-fixed-parallax [data-aos="zoom-in"],
.bg-fixed-parallax [data-aos="zoom-in-up"] {
    transform: none !important;
    transition-property: opacity !important;
}

.bg-fixed-parallax [data-aos].aos-animate {
    transform: none !important;
    opacity: 1 !important;
}

/* ============================================================
   МОБІЛЬНІ (≤1024px або touch-пристрої)
   На мобільних: без паралаксу, фон по центру, без will-change
============================================================ */
@media (max-width: 1024px), (hover: none) {
    .bg-fixed-parallax {
        /* На мобільних/touch fixed-attachment ламає рендеринг — фон стає
           величезним і виходить за межі. Тому на цих пристроях статичний фон. */
        background-attachment: scroll !important;
        background-position: center center !important;
        will-change: auto;
    }

    .dynamic-hero-bg {
        inset: 0;
        transform: none !important;
        will-change: auto;
    }
}

/* ============================================================
   УНІФІКОВАНИЙ ТЕМНИЙ OVERLAY ДЛЯ ПАРАЛЛАКС-СЕКЦІЙ
   style.css має .site-blocks-cover.overlay:before з rgba(0,0,0,0.44) —
   замало контрасту з білим текстом. .bg-image.overlay:after вже 0.7.
   Уніфікуємо все до 0.7 для однакової читабельності.
============================================================ */
.bg-fixed-parallax.overlay::before,
.site-blocks-cover.overlay::before {
    background: rgba(0, 0, 0, 0.70) !important;
}