/* K-246 / K-253 / K-255 — TŁO STRONY GŁÓWNEJ I CHOREOGRAFIA „POLE ROŚNIE, TŁO GAŚNIE”.
   Decyzja Piotra 02.10 23:5x: baza = próbka 07 (pole rośnie, tło gaśnie), w tle mgławica z 03 (daleko, słabiej)
   i WOLNO dryfujące gwiazdy z 02 (bez warpu); ruchomy element z 05 (paralaksa + unoszenie), bez planet.
   K-255: ten plik odpowiada WYŁĄCZNIE za tło, kurtynę, głębię i reakcję samego pola. Układ sceny (chipy
   kategorii, kafle promowanych, ciche linie) żyje w `home_scena.css` — dwa pliki, dwie odpowiedzialności.
   🔴 KOLORY: ani jednej nowej wartości — wszystko z tokenów `skin.css` (--bg, --brand2, --accent, --mint, --line…).
   Kolorystyka to osobny, drugi krok z Piotrem (zieleń poprawia sam); ten plik jej NIE przesądza.
   Warstwy żyją w jednym kontenerze `position:fixed; z-index:-1` (ta sama sztuczka co `body::before` w skin.css),
   więc nie wchodzą w drogę ani nagłówkowi (z-index 50), ani oknu rozmowy (9200), ani oknu zgody (9500). */

/* K-319 (Piotr 06.10: „sklep i okazje dalej mala zwykłe tło a nie gwiazdy jak na głównej”): strony sklepu (`body.sk-kosmos`,
   `base.html` dla bloku `body_class` = std) dostają TO SAMO tło — te same tokeny, warstwy i skrypt; choreografia sceny i karty
   polecanych (`.sc-*`) zostają wyłącznie na `pg-home`. */
body.pg-home,body.sk-kosmos{
  --ck-mgla:0;              /* krycie przyciemnienia tła: 0 → .12 po wejściu w pole (Piotr 16.10: było .52 = czarne tło; mgła idzie na treść, `skin.css` .cz-zamglone) */
  --ck-rozmycie:0px;        /* rozmycie warstw tła: 0 → 6px */
  --ck-px:0px;--ck-py:0px;  /* paralaksa od kursora/żyroskopu (zachowanie z próbki 05) */
  --ck-glebia:0;            /* 0 = kadr sceny, 1 = głąb (ustawia home_kosmos.js z przewinięcia) */
  --ck-krzywa:cubic-bezier(.16,.84,.30,1);   /* ta sama krzywa wyjścia co w rozmowa.js */
  --ck-dlugo:900ms;         /* K-255: dłużej i miękciej niż w próbce (760 ms) — „zmienić dynamikę ruchu” */
}

/* ===== KONTENER WARSTW ===== */
/* `html` ma własne tło (skin.css:28), więc tło `body` maluje się JAKO BLOK nad warstwami o z-index:-1 i je zakrywa
   (zmierzone 03.10 00:4x na instancji testowej: canvasy miały piksele, zrzut był płaski). Na stronie głównej body jest
   przezroczyste — kolor bazowy i gradient fallbacku niesie `.ck`. */
body.pg-home,body.sk-kosmos{background:transparent}
.ck{position:fixed;inset:-28px;z-index:-1;   /* K-257: zapas 28 px — paralaksa przesuwa warstwę i odsłaniała pasek przy krawędzi ekranu */
  pointer-events:none;overflow:hidden;
  /* statyczny gradient = widok bazowy i FALLBACK, gdy nie ma WebGL (mgławica nie wstaje) */
  background:radial-gradient(ellipse 78% 58% at 50% 34%,var(--brand2),transparent 72%),var(--bg);
  filter:blur(var(--ck-rozmycie));
  transform:translate3d(var(--ck-px),var(--ck-py),0);
  transition:filter var(--ck-dlugo) var(--ck-krzywa),transform 1.2s linear}
.ck canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ck-mglawica{opacity:calc(var(--ck-wschod,1) * (.9 - var(--ck-glebia) * .3))}   /* K-257: mgławica WIDOCZNA (była .62 i ginęła w czerni); `--ck-wschod` 0→1 = tło wschodzi przy wejściu */
.ck-gwiazdy{opacity:calc(var(--ck-wschod,1) * (1 - var(--ck-glebia) * .5))}     /* w głębi gwiazd jest mniej (ta sama warstwa, mniejsze krycie) */
.ck-gasnie{position:absolute;inset:0;opacity:var(--ck-mgla);
  background:radial-gradient(ellipse 88% 72% at 50% 46%,rgba(3,13,9,.92),rgba(3,13,9,.6) 70%,rgba(3,13,9,.48));
  transition:opacity var(--ck-dlugo) var(--ck-krzywa)}
/* welon głębi (K-253): kosmos nie kończy się krawędzią pod kadrem — niżej robi się głębiej i ciszej */
.ck-glab{position:absolute;inset:0;background:var(--bg);opacity:calc(var(--ck-glebia) * .58);
  transition:opacity .5s linear}
/* spad ku dołowi kadru — zjada krawędź winiety shadera; gaśnie, kiedy zjeżdżamy w głąb */
/* K-257: niższy i lżejszy — w dolnej części kadru stoją teraz karty polecanych, kosmos ma za nimi być widać */
.ck::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30vh;
  background:linear-gradient(180deg,rgba(4,21,15,0),rgba(4,21,15,.38) 70%,rgba(4,21,15,.6));
  opacity:calc(1 - var(--ck-glebia));transition:opacity .5s linear}

/* ===== NAGŁÓWEK: przepuszcza kosmos, żeby kadr był JEDNYM obrazem, a nie dwiema płytami =====
   (K-257: położenie belki — `fixed` u góry ekranu — ustawia `home_scena.css`) */
body.pg-home .hdr,body.sk-kosmos .hdr{background:rgba(4,21,15,.55)}
body.pg-home .cats-pas,body.sk-kosmos .cats-pas{background:transparent}

/* ===== POLE ROŚNIE (próbka 07) — 900 ms, miękkie wyjście, nie skokiem ===== */
/* K-257: rośnie cały PANEL rozmowy (`.sc-panel`, szerokość i obrys — `home_scena.css`), samo pole jedzie z nim */
/* ...a nagłówek kadru ustępuje mu miejsca (to samo, co `body.rozmowa` w próbce 07) */
body.pg-home .sc-h1,body.pg-home .sc-lead,body.pg-home .sc-ciche{
  transition:opacity var(--ck-dlugo) var(--ck-krzywa),transform var(--ck-dlugo) var(--ck-krzywa)}
html.ck-skupienie body.pg-home .sc-h1{opacity:.34;transform:scale(.965) translateY(-6px)}
html.ck-skupienie body.pg-home .sc-lead{opacity:.22;transform:translateY(-4px)}
html.ck-skupienie body.pg-home .sc-ciche{opacity:.2}

/* ===== ORBITY (zachowanie z próbki 05, bez planet): każda karta polecanych krąży po własnej wolnej elipsie =====
   K-257: zamiast samego „oddychania” góra-dół (K-255, 5 px) — mała elipsa 6×9 px, różne okresy i fazy, więc karty
   nigdy nie ruszają się w takt; paralaksa od kursora dokłada się osobno (właściwość `translate`, home_scena.css). */
@keyframes ck-orbita{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(5px,-4px,0)}
  50%{transform:translate3d(0,-9px,0)}75%{transform:translate3d(-5px,-4px,0)}}
.sc-kafle .card{animation:ck-orbita 15s ease-in-out infinite}
.sc-kafle .card:nth-child(2){animation-duration:18s;animation-delay:-5s;animation-direction:reverse}
.sc-kafle .card:nth-child(3){animation-duration:13s;animation-delay:-8s}
.sc-kafle .card:nth-child(4){animation-duration:19s;animation-delay:-3s;animation-direction:reverse}
/* kursor na kafelku = unoszenie ustaje i wraca podniesienie z `skin.css` (`transform:translateY(-2px)`),
   bo animacja wygrywa z regułą `:hover` — dlatego ją tu GASIMY, a nie tylko pauzujemy */
.sc-kafle .card:hover{animation:none}

/* ===== CIEMNE SZKŁO: jedna powierzchnia dla wszystkiego, co stoi w scenie ===== */
body.pg-home{
  --ck-szklo:linear-gradient(168deg,rgba(15,42,31,.56),rgba(4,21,15,.50));
  --ck-szklo-on:linear-gradient(168deg,rgba(20,56,42,.78),rgba(7,30,22,.66));
  --ck-ramka:1px solid rgba(255,255,255,.10);
  --ck-cien:0 22px 52px -28px rgba(0,0,0,.85);
  --ck-kant:inset 0 1px 0 rgba(255,255,255,.07);   /* jasna górna krawędź — szkło, nie płaski prostokąt */
}
body.pg-home .sc-kafle .card{background:var(--ck-szklo);border:var(--ck-ramka);
  box-shadow:var(--ck-kant),var(--ck-cien);
  backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%)}
body.pg-home .sc-kafle .card:hover{background:var(--ck-szklo-on);border-color:rgba(16,185,129,.42);
  box-shadow:var(--ck-kant),0 30px 60px -26px rgba(0,0,0,.9),0 0 26px -6px rgba(16,185,129,.26)}

/* ----- KARTA POLECANA: zdjęcie na jasnej płycie, BRAK zdjęcia na kafelku kosmosu (nie biała ramka) ----- */
body.pg-home .sc-kafle .card-img:not(.card-bez){background:linear-gradient(180deg,#fff,#EEF3F0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
body.pg-home .sc-kafle .card-bez{background:radial-gradient(ellipse 120% 100% at 50% 0%,var(--brand2),rgba(4,21,15,.9) 78%);
  box-shadow:inset 0 0 0 1px rgba(16,185,129,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-decoration:none}
.card-bez-ikona{position:static!important;width:34px;height:34px;padding:0;color:var(--accent-ink);opacity:.9;
  filter:drop-shadow(0 0 12px rgba(16,185,129,.45))}
.card-bez-marka{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:0 10px;text-align:center;overflow-wrap:anywhere}

/* ----- STOPKA: ta sama paleta, pełna czytelność (tekst --muted na prawie czarnym tle) ----- */
body.pg-home .ftr{background:linear-gradient(180deg,rgba(3,13,9,.74),rgba(3,13,9,.96));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:0;position:relative}
body.pg-home .ftr::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(16,185,129,.4),transparent)}
body.pg-home .copy{border-top-color:rgba(255,255,255,.06)}

@media (max-width:700px){
  .ck-mglawica{opacity:calc(var(--ck-wschod,1) * (.75 - var(--ck-glebia) * .25))}
  body.pg-home{overflow-x:hidden}
}
@media (max-width:480px){.ck::after{height:38vh}}

@media (prefers-reduced-motion:reduce){
  /* ruch stoi: animacje tła i unoszenia wyłączone, przejścia natychmiastowe (klatkę tła JS rysuje raz) */
  .ck,.ck-gasnie,.ck-glab,.ck::after,
  body.pg-home .sc-h1,body.pg-home .sc-lead,body.pg-home .sc-ciche{transition:none!important}
  .sc-kafle .card{animation:none!important}
}