/* Animacje przewijania sekcji (parallax) — Modele i Landingi.
   Sterowane przełącznikiem w Omoda PGD → Ustawienia globalne ("Animacje przewijania sekcji"):
   - WŁĄCZONE (body.omoda-motion): section-motion.js nadaje elementom sekcji klasy .omoda-mo
     (wjazd z opóźnieniem kaskadowym) i parallaxę obrazków/teł (zmienna --omoda-mo-p, własności
     translate/scale — niezależne od `transform`, więc nie kolidują z istniejącymi efektami);
   - WYŁĄCZONE (brak klasy): sekcje pokazują się od razu, bez żadnej animacji (także bez
     dotychczasowego fade-in [data-omoda-reveal] wewnątrz sekcji).
   Wszystko jest "delikatne": krótkie przesunięcia, bez obrotów/rozmycia. */

/* ---------- Stan WYŁĄCZONY ---------- */
body:not(.omoda-motion) :is(.omoda-gallery-section, .omoda-colors-section, .omoda-tech-specs-section, .omoda-cards-section, .omoda-models-grid-section, .omoda-specs-section, .omoda-text-section, .omoda-offers-section) [data-omoda-reveal],
body:not(.omoda-motion) .omoda-banner-section [data-omoda-reveal],
body:not(.omoda-motion) .omoda-banner-section__inner > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Baner ze strony głównej (omoda-section-banner) — to samo co baner w sekcjach Modeli. */
body:not(.omoda-motion) .omoda-banner [data-omoda-reveal],
body:not(.omoda-motion) .omoda-banner__inner > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ---------- Stan WŁĄCZONY ---------- */

/* Strona główna: nagłówek sekcji Modele (h1 + podtytuł) wjeżdża jak reszta — jego dotychczasowy
   fade-in kontenera przejmuje nowy system (sama sekcja Modele, ze sticky/animacjami, zostaje). */
body.omoda-motion .omoda-models > .omoda-container:first-child[data-omoda-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Dotychczasowy fade-in kontenerów sekcji przejmuje nowy system (elementy wjeżdżają osobno,
   kaskadowo) — baner zostaje przy własnej animacji treści/tła, dostaje tylko parallaxę. */
body.omoda-motion :is(.omoda-gallery-section, .omoda-colors-section, .omoda-tech-specs-section, .omoda-cards-section, .omoda-models-grid-section, .omoda-specs-section, .omoda-text-section, .omoda-offers-section) [data-omoda-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Wjazd elementu: delikatne wynurzenie z dołu. Stan początkowy jest nakładany BEZ przejścia
   (inaczej element, który chwilę wcześniej był widoczny, najpierw płynnie by znikał — błysk);
   przejście włącza dopiero .is-in. Klasy zdejmuje JS po zakończeniu animacji, żeby nie zostawiać
   `transform` na elementach, które mają własne efekty (hover itd.). */
.omoda-mo {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition: none;
}

/* Zdjęcia/media: dodatkowo lekkie "docieranie" skali. */
.omoda-mo--media {
    transform: translate3d(0, 44px, 0) scale(0.975);
}

.omoda-mo.is-in {
    opacity: 1;
    transform: none;
    transition:
        opacity 1s var(--omoda-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        transform 1.1s var(--omoda-ease, cubic-bezier(0.22, 1, 0.36, 1));
    transition-delay: var(--omoda-mo-delay, 0ms);
}

/* Parallaxa: jedna wspólna formuła, siła per element (--omoda-mo-amp), skala (--omoda-mo-scale).
   --omoda-mo-p ∈ [-1, 1] — pozycja elementu względem środka ekranu (ustawia JS przy scrollu). */
.omoda-mo-px {
    translate: 0 calc(var(--omoda-mo-p, 0) * var(--omoda-mo-amp, 0px) * -1);
    scale: var(--omoda-mo-scale, 1);
    will-change: translate;
}

/* Lekka "głębia" tekstów — nagłówki dryfują odrobinę więcej niż opisy i przyciski. */
.omoda-mo-depth {
    translate: 0 calc(var(--omoda-mo-p, 0) * var(--omoda-mo-amp, 0px) * -1);
}

@media (max-width: 767px) {
    .omoda-mo {
        transform: translate3d(0, 24px, 0);
    }

    .omoda-mo--media {
        transform: translate3d(0, 30px, 0) scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .omoda-mo,
    .omoda-mo--media {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .omoda-mo-px,
    .omoda-mo-depth {
        translate: none;
        scale: none;
    }
}