/* Animacje Hero (model/landing) i Slidera — sterowane tym samym przełącznikiem co animacje sekcji
   (Omoda PGD → Ustawienia globalne → "Animacje przewijania"): body.omoda-motion.
   - wejście: zdjęcie wynurza się z ciemności i z lekkiego powiększenia "osiada", treść wjeżdża;
   - scroll w dół: tło powoli się powiększa i przygasa, treść zanika i lekko unosi się
     (--omoda-hero-p ∈ [0,1] ustawia hero-motion.js).
   Używa własności `scale`/`translate`/`opacity` + CSS animation — bez ruszania `transform`
   slajdów Slidera (jego przejścia między slajdami działają jak dotąd). Wyłączone: nic się nie
   zmienia (brak klasy na body). Respektuje prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    /* ---------- Wejście "kinowe" (przy otwarciu strony) ----------
       1) zdjęcie odsłania miękki gradient (ciemny u góry → przezroczysty u dołu) od dołu do góry, a w tym czasie powoli
          "wychodzi do nas" (przybliża się) i wyostrza się z lekkiego rozmycia; treść wchodzi już w trakcie;
       2) tytuł wyjeżdża zza niewidzialnej krawędzi (maska) — linia po linii (hero-motion.js dzieli
          zawinięty tytuł na linie);
       3) potem po kolei: slogan/podtytuł, cena, korzyści, przyciski... co 90 ms.
       Wszystko to CSS animation z `backwards` (po końcu zostaje zwykły stan — nie przykrywa przejść
       slajdów Slidera ani scrolla). Liczniki liczb startują, gdy cena jest już widoczna (hero-count.js). */
    /* Gradient odsłaniający: nakładka (ciemna u góry, przezroczysta u dołu) jedzie w górę i miękką
       krawędzią odsłania zdjęcie od dołu — jakby samochód wyłaniał się z ciemności. */
    @keyframes omoda-hero-reveal {
        from { transform: translateY(-30%); }
        to { transform: translateY(-100%); }
    }

    /* Zdjęcie "wychodzi do nas": powoli się przybliża (od skali 1 do skali spoczynkowej — brak
       klatki `to`, więc animacja kończy się dokładnie w stanie spoczynkowym i nie ma skoku),
       z lekkim wyostrzeniem z rozmycia. */
    @keyframes omoda-hero-focus {
        from {
            scale: 1;
            filter: blur(7px) brightness(0.7);
        }
    }

    @keyframes omoda-hero-rise {
        from {
            opacity: 0;
            transform: translateY(26px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes omoda-hero-mask {
        from { transform: translateY(115%); }
        to { transform: translateY(0); }
    }

    @keyframes omoda-hero-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    body.omoda-motion {
        --omoda-hero-base: 0.35s;     /* kiedy zaczyna się treść — już w trakcie odsłaniania zdjęcia */
        --omoda-hero-step: 90ms;      /* odstęp między kolejnymi elementami */
    }

    /* Zdjęcie: gradientowa nakładka-odsłona na wrapperze (::after, wysokość 250% — pełne krycie
       na starcie, miękka krawędź przechodzi przez zdjęcie od dołu do góry), focus pull na samym
       obrazie/wideo. Stan spoczynkowy nakładki = przesunięta poza wrapper (overflow:hidden),
       `backwards` trzyma ją na zdjęciu od pierwszej klatki do startu animacji. */
    body.omoda-motion .omoda-model-hero__media::after,
    body.omoda-motion .omoda-hero-slider__media::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 200%;
        z-index: 1;
        pointer-events: none;
        /* Górna połowa (= wysokość zdjęcia) pełna ciemna → pełne krycie na starcie; dolna połowa to
           miękkie przejście do przezroczystości, które wjeżdża na zdjęcie od razu od dołu. */
        background: linear-gradient(
            to bottom,
            #121212 0%,
            #121212 50%,
            rgba(18, 18, 18, 0.92) 57%,
            rgba(18, 18, 18, 0.7) 66%,
            rgba(18, 18, 18, 0.42) 76%,
            rgba(18, 18, 18, 0.18) 87%,
            rgba(18, 18, 18, 0) 100%
        );
        transform: translateY(-100%);
        animation: omoda-hero-reveal 1.5s cubic-bezier(0.25, 0.6, 0.2, 1) backwards;
    }

    body.omoda-motion .omoda-model-hero__media-item,
    body.omoda-motion .omoda-hero-slider__media-item {
        animation: omoda-hero-focus 2.6s cubic-bezier(0.22, 0.6, 0.2, 1) backwards;
        /* stan spoczynkowy: lekkie powiększenie 1.06 (miejsce na przybliżanie) + scroll (dalsze
           zbliżenie i przygaszenie) — osobne własności, nie kolidują z animacją wejścia */
        scale: calc(1.06 + var(--omoda-hero-p, 0) * 0.14);
        opacity: calc(1 - var(--omoda-hero-p, 0) * 0.55);
    }

    /* Hero modelu: kontener treści nie wygasza się już razem (animują się dzieci osobno). */
    body.omoda-motion .omoda-model-hero__inner[data-omoda-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Kolejność elementów treści — indeks z pozycji w kontenerze (tytuł, slogan, cena...). */
    body.omoda-motion :is(.omoda-model-hero__inner, .omoda-hero-slider__inner) > :nth-child(1) { --omoda-hero-i: 0; }
    body.omoda-motion :is(.omoda-model-hero__inner, .omoda-hero-slider__inner) > :nth-child(2) { --omoda-hero-i: 1; }
    body.omoda-motion :is(.omoda-model-hero__inner, .omoda-hero-slider__inner) > :nth-child(3) { --omoda-hero-i: 2; }
    body.omoda-motion :is(.omoda-model-hero__inner, .omoda-hero-slider__inner) > :nth-child(4) { --omoda-hero-i: 3; }
    body.omoda-motion :is(.omoda-model-hero__inner, .omoda-hero-slider__inner) > :nth-child(5) { --omoda-hero-i: 4; }
    body.omoda-motion :is(.omoda-model-hero__inner, .omoda-hero-slider__inner) > :nth-child(6) { --omoda-hero-i: 5; }
    body.omoda-motion :is(.omoda-model-hero__inner, .omoda-hero-slider__inner) > :nth-child(n + 7) { --omoda-hero-i: 6; }

    body.omoda-motion :is(.omoda-model-hero__inner, .omoda-hero-slider__inner) > :not(.omoda-model-hero__title):not(.omoda-hero-slider__title) {
        animation: omoda-hero-rise 1s var(--omoda-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
        animation-delay: calc(var(--omoda-hero-base) + var(--omoda-hero-i, 0) * var(--omoda-hero-step));
    }

    /* Tytuł w masce: wrapper ucina, wnętrze wyjeżdża od dołu. Niewielki padding/ujemny margines,
       żeby maska nie przycinała ogonków liter. */
    body.omoda-motion .omoda-hl {
        display: block;
        overflow: hidden;
        padding-block: 0.1em;
        margin-block: -0.1em;
    }

    body.omoda-motion .omoda-hl__in {
        display: block;
        animation: omoda-hero-mask 1.15s cubic-bezier(0.22, 1, 0.36, 1) backwards;
        animation-delay: calc(var(--omoda-hero-base) + var(--omoda-hero-i, 0) * var(--omoda-hero-step) + var(--omoda-hl-line, 0) * 110ms);
    }

    /* Tytuł podzielony na linie (JS): zewnętrzna maska nie ucina — każda linia ma własną. */
    body.omoda-motion .omoda-hl--lines {
        overflow: visible;
        padding-block: 0;
        margin-block: 0;
    }

    /* Po animacji tytuł jest składany z powrotem w jeden blok — bez ponownego odtwarzania. */
    body.omoda-motion .omoda-hl--done .omoda-hl__in {
        animation: none;
    }

    /* Obrazek-etykieta w rogu Hero / galeria Slidera: pojawia się na końcu. */
    body.omoda-motion .omoda-model-hero__corner-images,
    body.omoda-motion .omoda-hero-slider__gallery {
        animation: omoda-hero-fade 1s ease 1.1s backwards;
    }
}

/* Zanikanie treści przy scrollu — tylko desktop: na mobile treść jest blokiem pod zdjęciem
   (ma własne przejścia opacity w Sliderze) i ma zostać czytelna przy przewijaniu. */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    body.omoda-motion .omoda-model-hero__content,
    body.omoda-motion .omoda-hero-slider__content,
    body.omoda-motion .omoda-model-hero__corner-images,
    body.omoda-motion .omoda-hero-slider__gallery {
        opacity: calc(1 - var(--omoda-hero-p, 0) * 1.7);
        translate: 0 calc(var(--omoda-hero-p, 0) * -36px);
    }
}

/* Licznik liczb (hero-count.js): cyfry o stałej szerokości, żeby tekst nie "pływał" podczas liczenia. */
body.omoda-count-hero :is(.omoda-model-hero__slogan, .omoda-model-hero__price, .omoda-model-hero__benefit, .omoda-model-hero__long-description),
body.omoda-count-slider :is(.omoda-hero-slider__subtitle, .omoda-hero-slider__price, .omoda-hero-slider__perk) {
    font-variant-numeric: tabular-nums;
}