/* =====================================================================
   STRONA GŁÓWNA — §1 HERO (T-185, makieta właścicielki z 01.10.2026)
   ---------------------------------------------------------------------
   Własna skorupa .sg-hero, tło PRZEZROCZYSTE: pod spodem wspólne nocne
   niebo (.sg-niebo z front-page.php, [data-sg-noc] na sekcji). Tokeny,
   kroje, .sg-wrap, akcenty rozkładów: strona-glowna.css. Ilustracja
   rozkładu w kaflu: komponent rozklad.php (bazowe .sg-rozklad w arkuszu
   oferty) — tu tylko jej pudełko.

   Układ:  < 1024 px — astrolabium nad tekstem, kafle w jednej kolumnie;
           ≥ 1024 px — treść | astrolabium, kafle 2×2.
   Ruch (tylko przy prefers-reduced-motion: no-preference): wejście przy
   załadowaniu, obrót pierścieni, oddech pełni, unoszenie i zaproszenie
   kart, połysk złotej kursywy, puls strzałek. Odwrócenie karty
   kliknięciem działa zawsze — przy ograniczonym ruchu bez animacji.
   Prefiks sg-hero__, bez !important, ostre rogi (koło: pełnia, dłoń,
   strzałka). Kolory spoza palety mają nazwany powód przy deklaracji.
   ===================================================================== */

.sg-hero {
    /* astrolabium: telefon ~300 px, tablet 384 px, komputer 440 px (≥ 1024) */
    --sg-hero-astro: clamp(16rem, 76vw, 24rem);
    /* karta = 26% astrolabium na każdej szerokości: geometria (pełnia ponad kartami) liczy się w procentach */
    --sg-hero-karta: calc(var(--sg-hero-astro) * 0.26);

    position: relative;
    z-index: 1;
    padding: clamp(1rem, 0.4rem + 1.4vw, 1.75rem) 0 var(--sg-pasmo-y);
    color: var(--sg-pergamin);
    font-family: var(--sg-font-tekst);
    background: transparent;
    overflow-wrap: break-word;
}

:where(.sg-hero) :where(p, h1, ul, li, em) { margin: 0; padding: 0; }

/* ---------- siatka ---------- */

.sg-hero__uklad {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    align-items: center;
}
.sg-hero__tresc { min-width: 0; }
.sg-hero__astrolabium { order: -1; justify-self: center; }

/* ---------- eyebrow ---------- */

.sg-hero__nad {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--sg-zloto);
}
.sg-hero__nad-gwiazda { flex: none; width: 0.8125rem; height: 0.8125rem; fill: var(--sg-zloto-jasne); }
.sg-hero__nad-kreska {
    flex: 0 0 3.5rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(201, 168, 76, 0), var(--sg-zloto));
    transform-origin: left center;
}

/* ---------- H1: Cormorant, koniec zdania złotą kursywą z połyskiem ---------- */

.sg-hero__h1 {
    max-width: 12em;
    margin: 0 0 clamp(0.875rem, 0.7rem + 0.5vw, 1.25rem);
    font-family: var(--sg-font-naglowek);
    font-size: var(--sg-fs-h1);
    /* 400 jak w makiecie; dopóki krój nie ładuje prostej 400, przeglądarka bierze najbliższą 500 */
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.005em;
    text-wrap: balance;
    color: var(--sg-papier);
}
.sg-hero__h1-akcent {
    /* koniec zdania w osobnym wierszu, jak w makiecie; czytnik czyta H1 jednym ciągiem (spacja przed <em>) */
    display: block;
    font-style: italic;
    font-weight: 400;
    color: var(--sg-zloto);
    /* połysk: złoto → złoto jasne → papier → złoto; najciemniejszy punkt (#c9a84c) ma 7,9:1 na nocy */
    background: linear-gradient(100deg, var(--sg-zloto) 0%, var(--sg-zloto-jasne) 30%, var(--sg-papier) 45%, var(--sg-zloto-jasne) 60%, var(--sg-zloto) 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.06em; /* wychylenie kursywy przy background-clip */
}

.sg-hero__opis {
    /* 29 em: wiersz łamie się po „a karty” (twarda spacja w treści), nie zostawia sierotki */
    max-width: 29em;
    margin: 0;
    font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.55;
    text-wrap: pretty;
    color: rgba(245, 237, 224, 0.82);
}

/* ---------- pas zaufania: plakietka oceny + płatności ---------- */

.sg-hero__zaufanie {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.875rem;
    margin-top: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
}
/* DOM trzyma kolejność copy (płatności, ocena); plakietkę oceny stawiamy pierwszą, jak w makiecie */
.sg-hero__ocena { order: -1; }

/* flex-wrap + min-width: 0 — przy tekście powiększonym do 200% „5,0” i opis schodzą w dwa wiersze, nic nie wystaje */
.sg-hero__ocena {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.875rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.75rem 1.25rem 0.75rem 1.125rem;
    color: var(--sg-atrament);
    background: var(--sg-papier-karta);
    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.7);
}
.sg-hero__ocena-liczba {
    font-family: var(--sg-font-naglowek);
    font-size: 2rem;
    font-weight: 600;
    font-variant-numeric: lining-nums; /* Cormorant ma domyślnie cyfry nautyczne — „0” wyglądało jak „o” */
    line-height: 1;
    color: var(--sg-atrament);
}
.sg-hero__ocena-opis { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.sg-hero__gwiazdki { display: inline-flex; flex-wrap: wrap; gap: 2px; }
/* gwiazdki to grafika (aria-hidden), złoto marki; rozmiar w px — nie rosną z powiększeniem tekstu */
.sg-hero__gwiazdki svg { flex: none; width: 15px; height: 15px; fill: var(--sg-zloto); }
.sg-hero__ocena-napis {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--sg-atrament-2);
}

.sg-hero__platnosci {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 1px solid rgba(245, 237, 224, 0.12);
    background: rgba(245, 237, 224, 0.03);
}
.sg-hero__platnosci-napis {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--sg-papier);
}
.sg-hero__klodka { flex: none; width: 0.9375rem; height: 0.9375rem; color: var(--sg-zloto-jasne); }
.sg-hero__logotypy { display: flex; flex-wrap: wrap; gap: 6px; }
/* logotypy marek w swoich kolorach — każdy na równym białym polu 50×28 (makieta);
   wysokość znaku dobrana optycznie per marka (pliki mają różne marginesy wewnętrzne) */
.sg-hero__logo-pole {
    display: grid;
    place-items: center;
    width: 50px;
    height: 28px;
    overflow: hidden;
    background: #fff;
}
.sg-hero .sg-hero__logo { display: block; width: auto; height: 14px; max-width: none; }
.sg-hero .sg-hero__logo-pole--payu .sg-hero__logo { height: 17px; }       /* plik ma pusty margines — znak optycznie jak reszta */
.sg-hero .sg-hero__logo-pole--stripe .sg-hero__logo { height: 22px; }      /* plik ma ~30% pustego marginesu: znak ≈ 15 px */
.sg-hero .sg-hero__logo-pole--visa .sg-hero__logo { height: 11px; }        /* o ~20% mniejsza — pełny kolor wydaje się większy */
.sg-hero .sg-hero__logo-pole--mastercard .sg-hero__logo { height: 17px; }
/* BLIK: kadr hero-blik.svg (znak 14 px na płaskiej czerni) wypełnia całe pole — bez „ramki w ramce” */
.sg-hero__logo-pole--blik { background: #000; }
.sg-hero .sg-hero__logo-pole--blik .sg-hero__logo { width: 100%; height: 100%; }

/* ---------- astrolabium ---------- */

.sg-hero__astrolabium {
    position: relative;
    isolation: isolate;
    width: var(--sg-hero-astro);
    aspect-ratio: 1;
}

/* obracane tła pierścieni mają kwadratowe narożniki — przycina je okrągła ramka,
   a nie całe astrolabium (inaczej poświata pełni i cienie kart ucinałyby się w kwadrat) */
.sg-hero__pierscienie,
.sg-hero__wskazowka {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
    pointer-events: none;
}
.sg-hero__pierscienie::before,
.sg-hero__pierscienie::after,
.sg-hero__wskazowka::before {
    content: '';
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.sg-hero__pierscienie::before { background-image: url(../img/strona-glowna/hero-astrolabium-podzialka.svg); }
.sg-hero__pierscienie::after { background-image: url(../img/strona-glowna/hero-astrolabium-zodiak.svg); }
.sg-hero__wskazowka::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 540 540'%3E%3Cpath d='M270 270V64' stroke='%23e8c978' stroke-opacity='.5' stroke-width='.8'/%3E%3Cpath d='M270 54l5 12h-10z' fill='%23e8c978'/%3E%3C/svg%3E");
}

/* pełnia: tarcza w ciepłym papierze, cienie mórz, poświata (kolory tarczy #c9b48a/#8e7f60 = cień kuli, nie tekst).
   Główny punkt kompozycji: średnica 50% astrolabium, środek na 45% wysokości — górne ~38% tarczy
   stoi ponad środkową kartą (karta od 39% wysokości), a tarcza mieści się w wewnętrznym pierścieniu */
.sg-hero__pelnia {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 38% 34%, var(--sg-papier-karta) 0%, var(--sg-papier-gleb) 40%, #c9b48a 74%, #8e7f60 100%);
    box-shadow: 0 0 3.75rem 0.625rem rgba(245, 237, 224, 0.16), 0 0 10rem 2.5rem rgba(232, 201, 120, 0.1);
}
.sg-hero__pelnia::before {
    content: '';
    position: absolute;
    inset: -45%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 201, 120, 0.22) 0%, rgba(232, 201, 120, 0.08) 40%, rgba(232, 201, 120, 0) 70%);
}
.sg-hero__pelnia::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* morza: miękkie plamy w odsłoniętej górnej części tarczy (twarde koło nad kartą wyglądało jak kleks) */
    background:
        radial-gradient(circle at 30% 34%, rgba(120, 105, 80, 0.2) 0, rgba(120, 105, 80, 0) 11%),
        radial-gradient(circle at 63% 22%, rgba(120, 105, 80, 0.17) 0, rgba(120, 105, 80, 0) 8%),
        radial-gradient(circle at 72% 42%, rgba(120, 105, 80, 0.15) 0, rgba(120, 105, 80, 0) 10%),
        radial-gradient(circle at 44% 18%, rgba(120, 105, 80, 0.12) 0, rgba(120, 105, 80, 0) 5%),
        radial-gradient(circle at 24% 58%, rgba(120, 105, 80, 0.14) 0, rgba(120, 105, 80, 0) 9%);
}

/* ---------- karty: Księżyc odkryty, boczne odwracane kliknięciem ---------- */

/* środek wachlarza poniżej środka astrolabium (58,5%) — karty odsłaniają górę pełni */
.sg-hero__karty {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 58.5%;
    width: 0;
    height: 0;
}
.sg-hero__karta {
    position: absolute;
    left: calc(var(--sg-hero-karta) / -2);
    top: calc(var(--sg-hero-karta) * -0.905);
    width: var(--sg-hero-karta);
    aspect-ratio: 337 / 610;
}
.sg-hero__karta--srodek { z-index: 2; transform: translateY(calc(var(--sg-hero-karta) * 0.2)) scale(1.08); }
.sg-hero__karta--lewa { transform: rotate(-15deg) translate(calc(var(--sg-hero-karta) * -0.76), calc(var(--sg-hero-karta) * 0.12)); }
.sg-hero__karta--prawa { transform: rotate(15deg) translate(calc(var(--sg-hero-karta) * 0.76), calc(var(--sg-hero-karta) * 0.12)); }
.sg-hero__karta[data-sg-odwroc] { cursor: pointer; -webkit-tap-highlight-color: transparent; }

.sg-hero__karta-unos {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    perspective: 56rem;
    filter: drop-shadow(0 1.25rem 1.5rem rgba(5, 5, 16, 0.75));
}
/* zaproszenie: złota poświata wokół zakrytej karty (oddycha tylko przy pełnym ruchu) */
.sg-hero__karta[data-sg-odwroc] .sg-hero__karta-unos::before {
    content: '';
    position: absolute;
    inset: 1.5%;
    z-index: -1;
    border-radius: 5% / 2.8%;
    box-shadow: 0 0 0 1px rgba(232, 201, 120, 0.7), 0 0 1.75rem 0.125rem rgba(232, 201, 120, 0.4);
    opacity: 0.55;
    transition: opacity 0.6s ease;
}
.sg-hero__karta.is-odwrocona .sg-hero__karta-unos::before { opacity: 0; }

.sg-hero__karta-obrot {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.1s var(--sg-wyjscie);
}
.sg-hero__karta.is-odwrocona .sg-hero__karta-obrot { transform: rotateY(180deg); }

.sg-hero__karta-strona {
    position: absolute;
    inset: 0;
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.sg-hero__karta-strona--lico { transform: rotateY(180deg); }
.sg-hero .sg-hero__karta-obraz { display: block; width: 100%; height: 100%; max-width: none; }

/* dłoń-zachęta na zakrytej karcie */
.sg-hero__dlon {
    position: absolute;
    z-index: 3;
    left: var(--sg-hero-dlon-x, 50%);
    bottom: 17%;
    display: grid;
    place-items: center;
    width: clamp(1.875rem, calc(var(--sg-hero-karta) * 0.34), 2.5rem);
    aspect-ratio: 1;
    border: 1px solid rgba(232, 201, 120, 0.7);
    border-radius: 50%;
    color: var(--sg-zloto-jasne);
    background: rgba(14, 14, 32, 0.78);
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity 0.6s ease;
}
/* dłoń w odsłoniętej połowie karty — wewnętrzną zakrywa Księżyc */
.sg-hero__karta--lewa .sg-hero__dlon { --sg-hero-dlon-x: 31%; }
.sg-hero__karta--prawa .sg-hero__dlon { --sg-hero-dlon-x: 69%; }
.sg-hero__dlon svg { width: 52%; height: 52%; }
.sg-hero__dlon-fala {
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(232, 201, 120, 0.6);
    border-radius: 50%;
    opacity: 0;
}
.sg-hero__karta.is-odwrocona .sg-hero__dlon { opacity: 0; }

/* ---------- wybór rozkładu: „Wybierz…” i cztery kafle ---------- */

/* odstęp pas zaufania → „Wybierz…” ~42 px przy 1440 (było 68): oba rzędy kafli w pierwszym ekranie 1440×900 */
.sg-hero__wybor { margin-top: clamp(2rem, 1.4rem + 1.4vw, 2.75rem); }

.sg-hero__wybierz {
    margin: 0 0 0.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--sg-zloto);
}

.sg-hero__kafle {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sg-odstep);
}
.sg-hero__kafle-el { display: flex; min-width: 0; margin: 0; padding: 0; }

/* kolumny ilustracji i strzałki w px: to grafika — przy tekście 200% rośnie tylko napis */
.sg-hero__kafel {
    --sg-akcent: var(--sg-zloto);
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    min-width: 0;
    min-height: 6rem;
    padding: 0.5rem 0.875rem 0.5rem 0.5rem;
    overflow: hidden;
    text-decoration: none;
    color: var(--sg-papier);
    border: 1px solid rgba(201, 168, 76, 0.5);
    border-color: color-mix(in srgb, var(--sg-akcent) 55%, transparent);
    background: var(--sg-noc-karta);
    background:
        radial-gradient(ellipse 8rem 7rem at 3.75rem 50%, color-mix(in srgb, var(--sg-akcent) 30%, transparent), transparent 75%),
        linear-gradient(100deg, color-mix(in srgb, var(--sg-akcent) 18%, var(--sg-noc-gleboka)) 0%, color-mix(in srgb, var(--sg-akcent) 6%, var(--sg-noc-gleboka)) 55%, var(--sg-noc-gleboka) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sg-akcent) 35%, transparent), 0 18px 40px -26px rgba(0, 0, 0, 0.9);
    transition: transform 0.25s var(--sg-wyjscie), border-color 0.25s ease, box-shadow 0.25s ease;
}
/* klasy akcentu ustawiają --sg-akcent na samym kaflu — muszą wygrać z wartością domyślną wyżej */
.sg-hero__kafel.sg-akcent--mini { --sg-akcent: var(--sg-akcent-mini); }
.sg-hero__kafel.sg-akcent--pelny { --sg-akcent: var(--sg-akcent-pelny); }
.sg-hero__kafel.sg-akcent--partnerski { --sg-akcent: var(--sg-akcent-partnerski); }
.sg-hero__kafel.sg-akcent--finansowy { --sg-akcent: var(--sg-akcent-finansowy); }

.sg-hero__kafel:hover,
.sg-hero__kafel:focus-visible {
    color: var(--sg-papier);
    border-color: var(--sg-akcent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sg-akcent) 60%, transparent), 0 26px 50px -24px color-mix(in srgb, var(--sg-akcent) 45%, transparent);
    transform: translateY(-3px);
}
/* border-radius: 0 — globalne a:focus-visible { border-radius: 6px } z blog.css */
.sg-hero__kafel:focus-visible { outline: 3px solid var(--sg-terakota); outline-offset: 3px; border-radius: 0; }

/* ilustracja rozkładu (rozklad.php): viewBox 400×240 ma puste marginesy po bokach —
   kadrujemy je ujemnym marginesem, bez zmiany komponentu (rozklad-gotowy.txt) */
.sg-hero__kafel-ilustracja { display: block; min-width: 0; color: var(--sg-akcent); }
.sg-hero .sg-hero__kafel-ilustracja .sg-rozklad { width: 112%; max-width: none; margin-inline: -6%; }
.sg-hero__kafel:hover .sg-rozklad__karty,
.sg-hero__kafel:focus-visible .sg-rozklad__karty { transform: translateY(-4px); }

.sg-hero__kafel-tekst {
    font-family: var(--sg-font-naglowek);
    font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
    font-weight: 500;
    line-height: 1.15;
    text-wrap: balance;
    color: var(--sg-papier);
}

.sg-hero__kafel-strzalka {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--sg-noc);
    background: var(--sg-akcent);
    transition: background-color 0.25s ease;
}
.sg-hero__kafel-strzalka svg { position: relative; width: 18px; height: 18px; transition: transform 0.25s var(--sg-wyjscie); }
/* puls: cienki pierścień w kolorze akcentu rozchodzi się od strzałki (ten sam gest co dłoń na karcie) */
.sg-hero__kafel-strzalka::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--sg-akcent);
    border-radius: 50%;
    opacity: 0;
}
.sg-hero__kafel:hover .sg-hero__kafel-strzalka { background: color-mix(in srgb, var(--sg-akcent) 70%, #fff); }
.sg-hero__kafel:hover .sg-hero__kafel-strzalka svg { transform: translateX(3px); }

/* ---------- telefon ---------- */

@media (max-width: 599px) {
    /* plakietka i płatności na całą szerokość — jeden pion, jak w makiecie */
    .sg-hero__ocena,
    .sg-hero__platnosci { flex: 1 1 100%; }
}

/* ---------- tablet ---------- */

@media (min-width: 600px) {
    /* kafel 112 px (było 124): ilustracja 140 px, pionowy margines 8 px */
    .sg-hero__kafel {
        grid-template-columns: 140px minmax(0, 1fr) 52px;
        gap: 1.25rem;
        min-height: 7rem;
        padding: 0.5rem 1.25rem 0.5rem 0.75rem;
        background:
            radial-gradient(ellipse 8.5rem 7rem at 4.4rem 50%, color-mix(in srgb, var(--sg-akcent) 30%, transparent), transparent 75%),
            linear-gradient(100deg, color-mix(in srgb, var(--sg-akcent) 18%, var(--sg-noc-gleboka)) 0%, color-mix(in srgb, var(--sg-akcent) 6%, var(--sg-noc-gleboka)) 55%, var(--sg-noc-gleboka) 100%);
    }
    .sg-hero__kafel-strzalka { width: 52px; }
}

/* ---------- układ dzielony od 1024 px ---------- */

@media (min-width: 1024px) {
    .sg-hero {
        --sg-hero-astro: min(27rem, 36vw);
    }
    .sg-hero__uklad {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
        column-gap: 2.5rem;
    }
    .sg-hero__astrolabium { order: 0; justify-self: end; }
    .sg-hero__kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ruch — wyłącznie gdy użytkownik go nie ogranicza ---------- */

@media (prefers-reduced-motion: no-preference) {
    /* wejście przy załadowaniu: treść wznosi się kaskadą, H1 w całości (bez dzielenia na słowa) */
    .sg-hero__nad,
    .sg-hero__h1,
    .sg-hero__opis,
    .sg-hero__zaufanie {
        animation: sg-hero-wejscie 1.1s var(--sg-wyjscie) both;
    }
    .sg-hero__h1 { animation-delay: 0.12s; }
    .sg-hero__opis { animation-delay: 0.32s; }
    .sg-hero__zaufanie { animation-delay: 0.5s; }
    .sg-hero__nad-kreska { animation: sg-hero-kreska 1.6s var(--sg-wyjscie) 0.4s both; }

    .sg-hero__astrolabium { animation: sg-hero-astrolabium 1.6s var(--sg-wyjscie) 0.1s both; }
    .sg-hero__karta-unos {
        animation:
            sg-hero-karta-wjazd 1.3s var(--sg-wyjscie) both,
            sg-hero-karta-unos 9s ease-in-out infinite;
    }
    .sg-hero__karta--lewa .sg-hero__karta-unos { animation-delay: 0.55s, -2s; }
    .sg-hero__karta--srodek .sg-hero__karta-unos { animation-delay: 0.75s, 0s; }
    .sg-hero__karta--prawa .sg-hero__karta-unos { animation-delay: 0.95s, -4s; }

    /* pierścienie astrolabium: bardzo wolny obrót, zodiak w przeciwną stronę */
    .sg-hero__pierscienie::before { animation: sg-hero-obrot 240s linear infinite; }
    .sg-hero__pierscienie::after { animation: sg-hero-obrot 180s linear infinite reverse; }
    .sg-hero__wskazowka::before { animation: sg-hero-obrot 120s linear infinite; }
    .sg-hero__pelnia::before { animation: sg-hero-oddech 14s ease-in-out infinite; }

    .sg-hero__karta[data-sg-odwroc]:not(.is-odwrocona) .sg-hero__karta-unos::before { animation: sg-hero-zaproszenie 5s ease-in-out infinite; }
    .sg-hero__dlon-fala { animation: sg-hero-fala 3.2s ease-out infinite; }
    .sg-hero__dlon-fala + .sg-hero__dlon-fala { animation-delay: 1.6s; }

    .sg-hero__h1-akcent { animation: sg-hero-polysk 14s ease-in-out infinite; }

    .sg-hero__kafel-strzalka::before { animation: sg-hero-puls 4s ease-out infinite; }
    .sg-hero__kafle-el:nth-child(2) .sg-hero__kafel-strzalka::before { animation-delay: 1s; }
    .sg-hero__kafle-el:nth-child(3) .sg-hero__kafel-strzalka::before { animation-delay: 2s; }
    .sg-hero__kafle-el:nth-child(4) .sg-hero__kafel-strzalka::before { animation-delay: 3s; }
}

@keyframes sg-hero-wejscie {
    from { opacity: 0; transform: translateY(1.25rem); }
    to { opacity: 1; transform: none; }
}
@keyframes sg-hero-kreska {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
@keyframes sg-hero-astrolabium {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: none; }
}
@keyframes sg-hero-karta-wjazd {
    from { opacity: 0; translate: 0 4rem; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes sg-hero-karta-unos {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.375rem); }
}
@keyframes sg-hero-obrot {
    to { transform: rotate(360deg); }
}
@keyframes sg-hero-oddech {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}
@keyframes sg-hero-zaproszenie {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}
@keyframes sg-hero-fala {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.9); }
}
@keyframes sg-hero-polysk {
    0%, 100% { background-position: 100% 0; }
    50% { background-position: 0 0; }
}
@keyframes sg-hero-puls {
    0%, 45% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1); }
    90%, 100% { opacity: 0; transform: scale(1.55); }
}

/* ograniczony ruch: bez przejść (odwrócenie karty i hover — natychmiast) */
@media (prefers-reduced-motion: reduce) {
    .sg-hero__kafel,
    .sg-hero__kafel-strzalka,
    .sg-hero__kafel-strzalka svg,
    .sg-hero__karta-obrot,
    .sg-hero__karta-unos::before,
    .sg-hero__dlon { transition: none; }
    .sg-hero__kafel:hover,
    .sg-hero__kafel:focus-visible,
    .sg-hero__kafel:hover .sg-rozklad__karty,
    .sg-hero__kafel:focus-visible .sg-rozklad__karty,
    .sg-hero__kafel:hover .sg-hero__kafel-strzalka svg { transform: none; }
}