/* herobg94 (2026-11-06): tlo krainy za Lumo i telefonem w hero strony glownej + planeta Szkolnego podworka w calosci.
   Plik dolaczany tylko na 8 stronach glownych, po discord.css; bez stylow inline (CSP). Obraz krainy = element LCP (eager,
   fetchpriority=high, bez animacji wejscia). Tekst hero lezy na jasnym gradiencie sekcji (obraz wygasa maska) -> kontrast >= 4.5.
   Ruch planety tylko przy prefers-reduced-motion: no-preference.
   heroplanet94 (wlasciciel 2026-11-06: „ta planeta w hero lepiej wygladala jak byla wieksza za telefonem i wystawala”): planeta duza,
   POD telefonem (z-index 1 < telefon 2 < Lumo 3), srodek kuli przy lewej krawedzi telefonu -> wystaje zza niego w lewo i domkami nad nim,
   jak w hero sprzed S94e. Pozycja liczona od telefonu (right 4% / 16% / 6% kolumny, szerokosc 214 / 250 / 262 px): srodek kuli = 47.6%
   szerokosci obrazu. Od 980 px lewa krawedz obrazu nie wychodzi poza kolumne obrazu (980-1199) ani dalej niz 24 px w odstep
   kolumn (>= 1200) -> nigdy pod tekstem. Plik 572 px = natywna rozdzielczosc renderu. */
.hero--world { isolation: isolate; }
.hero--world .hero-world { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 500px; max-width: none;
  object-fit: cover; object-position: 50% 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .5) 16%, #000 30%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .5) 16%, #000 30%, #000 88%, transparent 100%); }
.hero--world .hero-orbit { position: absolute; z-index: 1; left: calc(96% - 357px); top: -8px; width: 300px; height: auto; max-width: none; pointer-events: none;
  filter: drop-shadow(0 16px 18px rgba(11, 42, 69, .26)); }
.hero--world .ground-shadow { background: radial-gradient(closest-side, rgba(11, 42, 69, .34), transparent); }
@media (max-width: 359px) { .hero--world .hero-orbit { width: 250px; left: calc(96% - 314px); } }
@media (min-width: 640px) and (max-width: 979px) {
  .hero--world .hero-world { height: 600px; }
  .hero--world .hero-orbit { left: calc(84% - 479px); top: -26px; width: 440px; }
}
@media (min-width: 980px) {
  /* obraz zaczyna sie przy srodku strony (koniec kolumny tekstu) i wygasa w lewo -> tekst zawsze na jasnym gradiencie sekcji */
  .hero--world .hero-world { top: 0; height: 100%; left: calc(50% - 60px); width: calc(50% + 60px); object-position: 72% 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 40px, rgba(0, 0, 0, .6) 130px, #000 230px), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, transparent 40px, rgba(0, 0, 0, .6) 130px, #000 230px), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-composite: intersect; }
  .hero--world .hero-orbit { left: max(calc(94% - 490px), -24px); top: -36px; width: 480px; }
}
@media (min-width: 980px) and (max-width: 1199px) { .hero--world .hero-orbit { left: 0; top: -30px; width: 420px; } }

@media (prefers-reduced-motion: no-preference) {
  .js .hero--world .hero-orbit { animation: orbit-in .9s var(--spring) .2s both, orbit-bob 7s ease-in-out 1.2s infinite; }
}
@keyframes orbit-in { from { opacity: 0; transform: translateY(26px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes orbit-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-2deg); } }

/* ---------- herofinal (2026-11-06): kraina na cala szerokosc hero, takze pod tekstem ----------
   'glass' = jasna szklana karta za tekstem (styl jak szklany pas pobierania worldbg: blur 18px, saturate 1.35, jasna obwodka);
   'full'  = bez karty, miekki jasny welon pod kolumna tekstu (obraz widoczny pod tekstem). Oba: welon u gory pod naglowkiem
   strony (kontrast linkow >= 4.5), odznaki sklepow w jednym rzedzie na telefonie (bez modyfikacji, min. 40 px App Store). */
.hero--glass .hero-world, .hero--full .hero-world { z-index: -1; top: 0; left: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 92%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 92%, transparent 100%); }
.hero--glass::before, .hero--full::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: calc(var(--hero-header-stack, 72px) + 64px);
  pointer-events: none; background: linear-gradient(180deg, rgba(232, 245, 254, .9) 0, rgba(232, 245, 254, .72) 55%, rgba(232, 245, 254, 0) 100%); }
.hero--glass .hero-copy { margin-top: 8px; padding: 22px 18px 20px; border-radius: 24px; background: rgba(242, 249, 255, .93);
  border: 1px solid rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 26px 50px -22px rgba(11, 36, 64, .5); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero--glass .hero-copy { background: rgba(242, 249, 255, .82); -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35); }
}
@media (max-width: 559px) {
  .hero--glass .stores.official, .hero--full .stores.official { --bh: clamp(40px, calc((100vw - 70px) / 6.62), 48px); gap: calc(var(--bh) / 4); flex-wrap: nowrap; }
  .hero--glass .stores.official img[src*="appstore"], .hero--full .stores.official img[src*="appstore"] { height: var(--bh); }
  .hero--glass .stores.official img[src*="googleplay"], .hero--full .stores.official img[src*="googleplay"] { max-width: none; }
  .hero--glass .stores.official img[src*="googleplay-en"], .hero--full .stores.official img[src*="googleplay-en"] { height: calc(var(--bh) * 250 / 168); margin: calc(var(--bh) * -41 / 168); }
  .hero--glass .stores.official img[src*="googleplay-pl"], .hero--full .stores.official img[src*="googleplay-pl"] { height: calc(var(--bh) * 250 / 192); margin-block: calc(var(--bh) * -29 / 192); }
}
@media (max-width: 359px) { .hero--glass .hero-copy { margin-inline: -8px; padding-inline: 16px; } }
/* full: kraina widoczna takze pod tekstem; lagodny jasny welon tylko pod kolumna tekstu (telefon: gora sekcji). Drobny tekst
   w kolorze --ink (jak naglowek i lead), wiec welon moze byc lzejszy przy kontrascie >= 4.5. */
.hero--full::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 66%; pointer-events: none;
  background: linear-gradient(180deg, rgba(236, 247, 254, .7) 0, rgba(236, 247, 254, .62) 72%, rgba(236, 247, 254, 0) 100%); }
.hero--full .hero-copy .fine { color: var(--ink); }
.hero--full .hero-copy h1, .hero--full .hero-copy .lead, .hero--full .hero-copy .fine { text-shadow: 0 0 18px rgba(236, 247, 254, .9), 0 1px 0 rgba(255, 255, 255, .6); }
@media (max-width: 979px) {
  .hero--glass .hero-world, .hero--full .hero-world { object-position: 50% 100%; }
}
@media (min-width: 980px) {
  .hero--glass .hero-world, .hero--full .hero-world { object-position: 50% 100%; }
  /* karta wychodzi w lewy margines (tekst zostaje na linii logo) -> szerokosc tekstu jak w obecnym hero, naglowek w 3 liniach */
  /* szersza kolumna tekstu (1.12fr / .88fr) -> naglowek PL/EN/DE w najwyzej 3 liniach przy 1440; telefon, Lumo i planeta mieszcza sie w .88fr */
  .hero--glass .hero-inner, .hero--full .hero-inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .hero--full .hero-copy { max-width: 37.5rem; }
  .hero--glass .hero-copy { margin: 0 0 0 -40px; max-width: calc(37.5rem + 80px); padding: 36px 40px 32px; border-radius: 28px; }
  /* A-white (wlasciciel 2026-11-06: „zeby ten gradient w hero szedl do lewej na 100% do bialego”): poziomy gradient bieli nad sama
     kraina (warstwa sekcji z-index 0: pod tekstem, Lumo, planeta i telefonem, ktore zostaja bez zadnego welonu). 100% bialy od lewej
     krawedzi ekranu (x = 0) do poczatku tekstu, potem lagodnie (wiele przystankow, krzywa ease) wygasa przez kolumne tekstu i 220 px
     za nia do 0 -> kraina wyraznie widoczna od srodka kolumny tekstu w prawo. Pozycje liczone jak uklad: --hw-l = lewa krawedz tekstu
     (jak .wrap), --hw-w = szerokosc bloku tekstu (min(37.5rem, .56 tresci minus odstep 8 px) -- kolumny 1.12fr/.88fr). */
  .hero--full::after { --hw-l: max(var(--gutter), calc((100vw - var(--max)) / 2));
    --hw-w: min(37.5rem, calc((min(100vw, calc(var(--max) + 2 * var(--gutter))) - 2 * var(--gutter) - 8px) * .56));
    top: 0; bottom: 0; height: auto;
    background: linear-gradient(90deg, #fff 0, #fff var(--hw-l),
      rgba(255, 255, 255, .985) calc(var(--hw-l) + var(--hw-w) * .1),
      rgba(255, 255, 255, .95) calc(var(--hw-l) + var(--hw-w) * .25),
      rgba(255, 255, 255, .88) calc(var(--hw-l) + var(--hw-w) * .4),
      rgba(255, 255, 255, .78) calc(var(--hw-l) + var(--hw-w) * .55),
      rgba(255, 255, 255, .64) calc(var(--hw-l) + var(--hw-w) * .7),
      rgba(255, 255, 255, .48) calc(var(--hw-l) + var(--hw-w) * .85),
      rgba(255, 255, 255, .32) calc(var(--hw-l) + var(--hw-w)),
      rgba(255, 255, 255, .16) calc(var(--hw-l) + var(--hw-w) + 80px),
      rgba(255, 255, 255, .05) calc(var(--hw-l) + var(--hw-w) + 160px),
      rgba(255, 255, 255, 0) calc(var(--hw-l) + var(--hw-w) + 220px)); }
  /* ukryty link „przejdz do tresci” (top -60px) rzuca cien --shadow w lewy gorny rog; na bieli byl widoczny jako szara smuga -> cien
     tylko gdy link jest widoczny (:focus) */
  .skip:not(:focus) { box-shadow: none; }
}