/* ─────────────────────────────────────────────────────────────────────────
   SkyPitch — specjalna strona JEDNEGO wydarzenia (11.09.2026). TYMCZASOWA.

   Świat strony bierze się z plakatu organizatora: nocne niebo nad Odrą,
   ciepłe złoto „PITCH", światła miasta. Granat i złoto to jedyne kolory —
   reszta to odcienie tej samej nocy.

   Język ruchu i materiału wg skilla apple-design:
   • stos kart prowadzą sprężyny z /js/skypitch.js — NIE ma tu transition
     na .sp-karta, bo przejścia CSS nie da się złapać i odwrócić w locie;
   • szkło (backdrop-filter) tylko tam, gdzie coś naprawdę pływa nad
     przewijaną treścią — pływający pasek rejestracji;
   • tracking dobrany do stopnia pisma: nagłówek mocno ujemny, drobne
     etykiety dodatnie, tekst zero.

   Selektory komponentów mają prefiks .sp — strona jest ciemna, a globalne
   style portalu zakładają jasne tło, więc kolory ustawiamy jawnie.
   ───────────────────────────────────────────────────────────────────────── */

.sp{
  --noc:#0a1128; --noc-2:#0f1834; --noc-3:#16214a;
  --zloto:#f2b638; --zloto-2:#f7d27a;
  --ink:#f4f6fb; --ink-2:#b6bfd5; --mute:#8390ae;
  --linia:rgba(255,255,255,.10); --linia-2:rgba(255,255,255,.18);
  --cien:0 2px 8px rgba(0,0,0,.25), 0 24px 60px rgba(0,0,0,.45);
  --sp-kw:min(344px, 76vw);
  --sp-kh:calc(var(--sp-kw) * 1.28);
  --sp-dol:22px;

  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(180deg,#0a1128 0%,#0c1531 50%,#0a1128 100%);
  color:var(--ink); font-size:17px; line-height:1.5; letter-spacing:0;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
.sp *{box-sizing:border-box;}
.sp h1,.sp h2,.sp h3,.sp p,.sp li,.sp dt,.sp dd,.sp span,.sp b{color:inherit;}
.sp p,.sp dl,.sp dd,.sp figure{margin:0;}
.sp a{color:inherit;}
.sp h1,.sp h2,.sp h3{margin:0; font-weight:650; text-wrap:balance; font-optical-sizing:auto; color:var(--ink);}
.sp h2{font-size:clamp(1.65rem,3.3vw,2.4rem); line-height:1.08; letter-spacing:-.03em;}
.sp h3{font-size:1.26rem; line-height:1.2; letter-spacing:-.022em;}

.sp .sp-w{max-width:1120px; margin:0 auto; padding:0 24px;}
.sp .sp-w--szeroki{max-width:1060px;}
.sp .sp-etyk{font-size:.74rem; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--zloto);}

/* ── Nagłówek ───────────────────────────────────────────────────────── */
.sp .sp-hero{padding:64px 0 16px;}
.sp .sp-hero-glowa{text-align:center; display:flex; flex-direction:column; align-items:center;}
.sp .sp-h1{margin-top:14px; font-size:clamp(3.3rem,9.5vw,6.6rem); line-height:.92; letter-spacing:-.05em; font-weight:800;}
.sp .sp-h1 span{color:var(--zloto);}
.sp .sp-haslo{margin-top:14px; font-size:clamp(.8rem,1.6vw,1rem); font-weight:600; letter-spacing:.24em; text-transform:uppercase;}
.sp .sp-lid{margin-top:20px; max-width:46ch; font-size:1.14rem; line-height:1.5; letter-spacing:-.006em; color:var(--ink-2);}
.sp .sp-akcje{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:28px;}
.sp .sp-uwaga{margin-top:12px; font-size:.84rem; color:var(--mute);}

/* Guziki: odpowiedź na WCIŚNIĘCIE, nie na puszczenie */
.sp .sp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 26px; border-radius:999px; border:1px solid transparent;
  background:var(--zloto); color:#0a1128; font-weight:650; font-size:1rem; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; font-family:inherit;
  transition:transform 90ms ease-out, background-color 140ms ease-out;
}
.sp .sp-btn:hover{background:var(--zloto-2);}
.sp .sp-btn:active{transform:scale(.97);}
.sp .sp-btn--cichy{background:transparent; color:var(--ink); border-color:var(--linia-2);}
.sp .sp-btn--cichy:hover{background:rgba(255,255,255,.06);}
.sp .sp-btn--maly{min-height:40px; padding:0 18px; font-size:.92rem;}

.sp .sp-plakat{margin-top:48px; border-radius:24px; overflow:hidden; background:#0b1330;
  border:1px solid rgba(242,182,56,.28); box-shadow:var(--cien);}
.sp .sp-plakat img{display:block; width:100%; height:auto;}

/* Fakty jako jedna płyta z włoskowatymi przegrodami (gap na tle linii) */
.sp .sp-fakty{margin-top:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--linia); border:1px solid var(--linia); border-radius:18px; overflow:hidden;}
.sp .sp-fakty > div{background:var(--noc-2); padding:16px 18px;}
.sp .sp-fakty dt{font-size:.7rem; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-bottom:5px;}
.sp .sp-fakty dd{font-size:.95rem; font-weight:550; line-height:1.35; letter-spacing:-.008em; color:var(--ink);}

/* ── Stos kart ──────────────────────────────────────────────────────── */
.sp .sp-sek{padding:92px 0;}
.sp .sp-sek-glowa{text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;}
.sp .sp-podpowiedz{font-size:.9rem; color:var(--mute);}

/* Bez JS: zwykły rząd przewijany w bok ze skokiem do karty — da się przejrzeć */
.sp .sp-scena{position:relative; margin-top:34px; outline:none;
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px 24px 30px;}
.sp .sp-scena .sp-karta{flex:none; scroll-snap-align:center; width:var(--sp-kw); height:var(--sp-kh);}

/* Z JS: segregator — karty jedna za drugą, sąsiednie wystają z boków */
.sp .sp-scena.stos{display:block; overflow:hidden; height:calc(var(--sp-kh) + 56px); padding:0;
  perspective:1500px; perspective-origin:50% 45%;
  touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab;}
.sp .sp-scena.stos.ciagnie{cursor:grabbing;}
.sp .sp-scena.stos .sp-karta{position:absolute; left:50%; top:26px;
  width:var(--sp-kw); height:var(--sp-kh); margin-left:calc(var(--sp-kw) / -2);
  will-change:transform, opacity; transform-origin:50% 50%;}
.sp .sp-scena:focus-visible{box-shadow:inset 0 0 0 2px rgba(242,182,56,.6); border-radius:28px;}

.sp .sp-karta-in{position:relative; width:100%; height:100%; border-radius:26px;
  background:linear-gradient(180deg,#152046 0%,#0f1834 100%);
  border:1px solid var(--linia-2); box-shadow:var(--cien);
  padding:16px; display:flex; flex-direction:column; gap:18px; overflow:hidden;}
/* Przyciemnienie kart z tyłu: warstwa z opacity sterowanym ze skryptu
   (tańsze niż filter:brightness, bo idzie przez kompozytor) */
.sp .sp-karta-in::after{content:""; position:absolute; inset:0; border-radius:inherit;
  background:#050a1a; opacity:var(--dim,0); pointer-events:none;}
/* Aktywna karta ma złotą krawędź — stan widać w formie, nie tylko w pozycji */
.sp .sp-karta.jest-aktywna .sp-karta-in{border-color:rgba(242,182,56,.55);
  box-shadow:var(--cien), 0 0 0 1px rgba(242,182,56,.16);}

.sp .sp-plyta{flex:none; height:40%; border-radius:18px; background:#fff;
  display:flex; align-items:center; justify-content:center; padding:18px 22px;
  box-shadow:inset 0 0 0 1px rgba(10,17,40,.06);}
.sp .sp-plyta img{display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; pointer-events:none;}

.sp .sp-karta-tresc{flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; padding:0 6px 6px;}
.sp .sp-kraj{display:inline-flex; align-items:center; gap:7px; font-size:.7rem; font-weight:650;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);}
.sp .sp-kraj i{width:16px; height:11px; border-radius:2px; display:inline-block; box-shadow:0 0 0 1px rgba(255,255,255,.2);}
.sp .sp-kraj--de i{background:linear-gradient(180deg,#000 0 33.33%,#dd0000 33.33% 66.66%,#ffce00 66.66%);}
.sp .sp-kraj--pl i{background:linear-gradient(180deg,#fff 0 50%,#dc143c 50%);}
.sp .sp-karta-tresc p{font-size:.9rem; line-height:1.45; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;}
.sp .sp-karta-link{margin-top:auto; align-self:flex-start; font-size:.92rem; font-weight:600;
  color:var(--zloto-2); text-decoration:none; padding:6px 0;}
.sp .sp-karta-link:hover{text-decoration:underline; text-underline-offset:3px;}

.sp .sp-ster{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:4px;}
.sp .sp-strz{width:44px; height:44px; border-radius:50%; border:1px solid var(--linia-2);
  background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer;
  transition:transform 90ms ease-out, background-color 140ms ease-out;}
.sp .sp-strz:hover{background:rgba(255,255,255,.06);}
.sp .sp-strz:active{transform:scale(.94);}
.sp .sp-kropki{display:flex; align-items:center;}
/* Pole dotyku 24 px, widoczna kropka 8 px */
.sp .sp-kropka{width:24px; height:24px; border:0; padding:0; background:none; cursor:pointer; display:grid; place-items:center;}
.sp .sp-kropka::before{content:""; width:8px; height:8px; border-radius:4px; background:var(--linia-2);
  transition:width 220ms ease, background-color 220ms ease;}
.sp .sp-kropka.on::before{width:20px; background:var(--zloto);}
.sp .sp-licznik{text-align:center; margin-top:8px; font-size:.82rem; color:var(--mute); font-variant-numeric:tabular-nums;}

/* ── Program i informacje ───────────────────────────────────────────── */
.sp .sp-dwie{border-top:1px solid var(--linia);}
.sp .sp-dwie-siatka{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
.sp .sp-dwie h2{margin:8px 0 24px;}
.sp .sp-os{list-style:none; margin:0; padding:0;}
.sp .sp-os li{display:grid; grid-template-columns:7.5rem 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--linia);}
.sp .sp-os li:first-child{border-top:0; padding-top:4px;}
.sp .sp-os b{font-weight:650; color:var(--zloto-2); font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.sp .sp-os span{color:var(--ink-2);}
.sp .sp-info{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.sp .sp-info li{position:relative; padding-left:28px; color:var(--ink-2); line-height:1.5;}
.sp .sp-info li::before{content:""; position:absolute; left:3px; top:.45em; width:11px; height:6px;
  border-left:2px solid var(--zloto); border-bottom:2px solid var(--zloto); transform:rotate(-45deg);}
.sp .sp-info a{color:var(--zloto-2); text-underline-offset:3px; overflow-wrap:anywhere;}

/* ── Zamknięcie ─────────────────────────────────────────────────────── */
.sp .sp-koniec{padding:96px 0 124px; text-align:center; border-top:1px solid var(--linia);}
.sp .sp-koniec p{margin:14px auto 0; max-width:46ch; color:var(--ink-2);}
.sp .sp-koniec .sp-zrodlo{margin-top:28px; font-size:.84rem; color:var(--mute);}
.sp .sp-zrodlo a{color:var(--ink-2); text-underline-offset:3px;}

/* ── Pływający pasek rejestracji: materiał nad przewijaną treścią ─────
   Pozycję i widoczność prowadzi sprężyna w JS (da się ją przerwać, gdy
   ktoś szybko przewija w górę i w dół). Tu tylko stan spoczynkowy. */
.sp .sp-lep{position:fixed; left:50%; bottom:calc(var(--sp-dol) + env(safe-area-inset-bottom)); z-index:70;
  display:flex; align-items:center; gap:16px; padding:7px 7px 7px 20px; border-radius:999px;
  background:rgba(14,22,48,.66); backdrop-filter:blur(20px) saturate(170%); -webkit-backdrop-filter:blur(20px) saturate(170%);
  border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.45);
  font-size:.9rem; font-weight:600; white-space:nowrap; color:var(--ink);
  transform:translate3d(-50%,24px,0) scale(.96); opacity:0; visibility:hidden;}

.sp a:focus-visible,.sp button:focus-visible{outline:2.5px solid var(--zloto); outline-offset:3px; border-radius:12px;}

@media (max-width:900px){
  .sp .sp-dwie-siatka{grid-template-columns:1fr; gap:56px;}
  .sp .sp-fakty{grid-template-columns:1fr 1fr;}
  .sp .sp-sek{padding:72px 0;}
}
@media (max-width:560px){
  .sp{font-size:16px;}
  .sp .sp-hero{padding:44px 0 8px;}
  .sp .sp-plakat{margin-top:36px; border-radius:18px;}
  .sp .sp-fakty > div{padding:14px;}
  .sp .sp-os li{grid-template-columns:6.4rem 1fr;}
  .sp .sp-lep{gap:12px; padding-left:16px; font-size:.84rem;}
}

/* ── Dostępność: trzy sygnały, każdy obsłużony osobno ──────────────── */
@media (prefers-reduced-motion:reduce){
  .sp .sp-btn,.sp .sp-strz{transition:opacity 160ms ease !important;}
  .sp .sp-btn:active,.sp .sp-strz:active{transform:none !important; opacity:.75;}
  .sp .sp-kropka::before{transition:none !important;}
}
@media (prefers-reduced-transparency:reduce){
  .sp .sp-lep{background:var(--noc-2); backdrop-filter:none; -webkit-backdrop-filter:none;}
}
@media (prefers-contrast:more){
  .sp{--linia:rgba(255,255,255,.3); --linia-2:rgba(255,255,255,.5); --ink-2:#dfe5f2; --mute:#c2cadd;}
  .sp .sp-lep{background:var(--noc-2); backdrop-filter:none;}
}

/* Telefon: portal ma w dolnych rogach własne pływające guziki (A− i ↑). Pełny pasek
   (~330 px) wchodził na oba — zostaje sam guzik, który mieści się w szczelinie. */
@media (max-width:560px){
  .sp .sp-lep > span{display:none;}
  .sp .sp-lep{padding:6px;}
}

/* Telefon: niemieckie i ukraińskie opisy nie mieściły się w czterech liniach (Codigen po
   niemiecku był ucinany). Karta wyższa, płytka z logo niższa, tekst do sześciu linii. */
@media (max-width:560px){
  .sp{--sp-kh:calc(var(--sp-kw) * 1.42);}
  .sp .sp-plyta{height:33%;}
  .sp .sp-karta-tresc p{-webkit-line-clamp:6;}
}

/* ── Przebudowa 11.09 (founder: „karty wyżej”) ─────────────────────────
   Nagłówek → fakty → KARTY → plakat → program. Karty podjeżdżają pod fakty,
   plakat idzie niżej i zawsze w całości: szerokość 100%, wysokość z pliku. */
.sp .sp-hero{padding-bottom:0;}
.sp .sp-hero .sp-fakty{margin-top:36px;}
.sp .sp-sek--karty{padding:64px 0 36px;}
.sp .sp-sek--karty .sp-scena{margin-top:18px;}
.sp .sp-plakat-sek{padding:28px 0 80px;}
.sp .sp-plakat-sek .sp-plakat{margin-top:0;}
.sp .sp-plakat img{object-fit:contain;}
@media (max-width:560px){
  .sp .sp-hero .sp-fakty{margin-top:28px;}
  .sp .sp-sek--karty{padding:48px 0 28px;}
  .sp .sp-plakat-sek{padding:20px 0 56px;}
}

/* ── Karty jeszcze wyżej (11.09, druga tura) ───────────────────────────
   Fakty zeszły pod karty; datę i miejsce trzyma jedna linijka pod hasłem,
   żeby nie zniknęły z pierwszego ekranu. Nagłówek sekcji kart krótszy. */
.sp .sp-hero{padding:44px 0 0;}
.sp .sp-h1{font-size:clamp(3.1rem,8.4vw,5.8rem);}
.sp .sp-kiedy{margin-top:12px; font-size:1rem; font-weight:600; letter-spacing:-.005em; color:var(--zloto-2); font-variant-numeric:tabular-nums;}
.sp .sp-lid{margin-top:14px; max-width:60ch;}
.sp .sp-akcje{margin-top:22px;}
.sp .sp-sek--karty{padding:36px 0 28px;}
.sp .sp-sek--karty .sp-sek-glowa{gap:6px;}
.sp .sp-sek--karty h2{font-size:clamp(1.4rem,2.6vw,1.9rem);}
.sp .sp-sek--karty .sp-scena{margin-top:6px;}
.sp .sp-podpowiedz--dol{text-align:center; margin-top:2px; font-size:.84rem;}
.sp .sp-plakat-sek .sp-fakty{margin:0 0 16px;}
@media (max-width:560px){
  .sp .sp-hero{padding-top:30px;}
  .sp .sp-lid{font-size:1.02rem;}
  .sp .sp-sek--karty{padding:28px 0 22px;}
}

/* ── Autoprzewijanie (11.09) ─────────────────────────────────────────────
   Aktywna kropka to pasek odliczający do zmiany karty (czas z JS: --sp-okres).
   Bez biegu — pauza, najechanie, ograniczony ruch — pasek stoi pełny. */
.sp .sp-kropka{position:relative;}
.sp .sp-kropka.on::before{background:rgba(242,182,56,.32);}
.sp .sp-kropka::after{content:""; position:absolute; left:50%; top:50%; width:20px; height:8px; margin:-4px 0 0 -10px;
  border-radius:4px; background:var(--zloto); transform-origin:0 50%; transform:scaleX(0); opacity:0; pointer-events:none;}
.sp .sp-kropka.on::after{opacity:1; transform:scaleX(1);}
.sp .sp-ster.bieg .sp-kropka.on::after{animation:sp-postep var(--sp-okres,3000ms) linear both;}
@keyframes sp-postep{from{transform:scaleX(0);} to{transform:scaleX(1);}}
.sp .sp-pauza{display:none; width:38px; height:38px; margin-left:2px;}
.sp .sp-scena.stos ~ .sp-ster .sp-pauza{display:grid;}
.sp .sp-pauza .ik-wznow{display:none;}
.sp .sp-pauza.wstrzymane .ik-pauza{display:none;}
.sp .sp-pauza.wstrzymane .ik-wznow{display:block;}
@media (prefers-reduced-motion:reduce){ .sp .sp-ster.bieg .sp-kropka.on::after{animation:none;} }

/* ── Niebo w tle (13.09, founder: „lekka animacja z tyłu strony”) ──────
   Płótno rysuje /js/skypitch.js. isolation daje .sp własny stos warstw, więc
   z-index:-1 kładzie gwiazdy nad tłem strony, ale pod całą treścią. */
.sp{isolation:isolate;}
.sp .sp-niebo{position:fixed; inset:0; width:100%; height:100%; z-index:-1; display:block;
  pointer-events:none; opacity:0; transition:opacity 1.6s ease-out;}
.sp .sp-niebo.jest{opacity:1;}

/* ── Scena stosu nie jest kontenerem przewijania (13.09) ───────────────
   Przy samym overflow:hidden przeglądarka dalej ją przewijała: scroll-snap z trybu
   bez JS dociągał do karty wysuniętej transformacją w prawo i na telefonie cały stos
   uciekał ~200 px w lewo (aktywna karta DuoRegio stała jako lewa sąsiadka).
   clip = przycina, ale nie przewija; bez dociągania w trybie stosu. */
.sp .sp-scena.stos{overflow:clip; scroll-snap-type:none;}
.sp .sp-scena.stos .sp-karta{scroll-snap-align:none;}

/* ── Wolne miejsce w stosie (20.09) ────────────────────────────────────
   Karta zaproszenia ma wyglądać jak puste miejsce w segregatorze: przerywana
   ramka zamiast pełnej i plus zamiast logo. Reszta wymiarów bez zmian, żeby
   stos dalej liczył się tak samo. */
.sp .sp-karta--wolne .sp-karta-in{border-style:dashed; border-color:rgba(242,182,56,.45); background:linear-gradient(180deg,#141d40 0%,#0e1631 100%);}
.sp .sp-plyta--wolne{background:rgba(255,255,255,.04); border:2px dashed rgba(242,182,56,.45); box-shadow:none;
  display:grid; place-items:center; color:var(--zloto); font-size:2.4rem; font-weight:300; line-height:1;}
.sp .sp-karta--wolne h3{color:var(--zloto-2);}