/*
  ARKANIP — baza wiedzy: START „TRZY PIĘTRA W RUCHU” (wiedza-start.js, opis tam; ekranStartPietra w app.js).
  Ładuje TYLKO wiedza.html, PO wiedza-otwarcie.css — style makiety (płaszczyzny, podest, drzewa, kula,
  etykiety) są tam (`.so`; etykiety pięter = wspólna warstwa 2D `mk-*`). Tu tylko układ ekranu (16.10.2026:
  makieta w lewej kolumnie, nagłówek i duża akcja po prawej; telefon: nagłówek → makieta → akcja) i to,
  czego otwarcie nie ma. Prefiks st- (klasy, klatki), zarejestrowane właściwości `--st-*`. Przeniesione
  z `_podglad-wiedza-start-2.html` (wariant C; A i B uchylone). Ruch gra pod `.st-gra` (klasa na korzeniu
  ekranu), pętle mają policzone powtórzenia i stają; prefers-reduced-motion = od razu stan końcowy.
*/
@property --st-z { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --st-bo { syntax: "<number>"; inherits: false; initial-value: 0.3; }
@property --st-bs { syntax: "<number>"; inherits: false; initial-value: 0.42; }

/* ================================================================== EKRAN STARTU ==
   Podział lewa–prawa (właściciel, 16.10.2026: „animacja, która jest na środku, przechodzi do lewej, z prawej
   strony ma być nagłówek i CTA »Zaczynamy«”). Runda 2 (16.10.2026: „wszystko jest dobite do lewej… prawa strona
   jest wręcz pusta”): to ma być ZBALANSOWANA kompozycja w osi ekranu — dwie kolumny o szerokości treści
   (`justify-content: center`), równe marginesy po obu stronach. Kolumna makiety ma szerokość z wysokości ekranu
   (makieta jest ograniczana wysokością, proporcja ~0,92), więc nie ma w niej pustych pasów; tekst stoi tuż obok
   (odstęp 32–88 px), wyrównany do lewej krawędzi swojej kolumny, razem z akcją wyśrodkowany w pionie.
   Uchylone: kolumna nagłówek → scena → akcja w osi ekranu (runda 5); lewa kolumna 1.12fr od krawędzi okna
   i prawa 1fr (makieta przyklejona do lewej, tekst w pustej połowie ekranu).
   Ekran ma całą wysokość okna pod belką (ujemny margines dolny znosi dolny odstęp #ekran — bez
   przewijania) i szerokość całego okna (poświata dochodzi do brzegów; body ma overflow-x: hidden). */
.st {
  --kula: radial-gradient(circle at 32% 26%, #9cc8ff 0%, #3f7ff5 36%, var(--blue) 62%, var(--blue-deep) 100%);
  --st-h: max(520px, calc(100vh - 104px));
  --st-h: max(520px, calc(100dvh - 104px));
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: calc(100vh - 104px);
  height: calc(100dvh - 104px);
  min-height: 520px;
  margin-bottom: -72px;
  overflow: clip;
  display: grid;
  /* --st-kol = szerokość makiety w skali z wysokości (wiedza-start.js, dopasujTu); zapas przed pierwszym
     dopasowaniem = proporcja z wysokości ekranu */
  grid-template-columns: min(var(--st-kol, calc(var(--st-h) * 0.92)), 60vw, calc(100vw - 460px)) auto;
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: "scena ." "scena gora" "scena dol" "scena .";
  justify-content: center;
  column-gap: clamp(32px, 4vw, 88px);
  padding: 0 clamp(24px, 3vw, 56px);
  box-sizing: border-box;
}
.st__gora {
  grid-area: gora;
  position: relative;
  z-index: 4;
  max-width: 620px;
  text-align: left;
}
.st__tytul {
  margin: 0;
  /* skala z obu wymiarów ekranu — nagłówek rośnie razem z makietą (ta jest ograniczana wysokością) */
  font-size: clamp(38px, min(4.4vw, 7.4vh), 84px);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
  /* szerokość = najdłuższy wyraz („Zbudujmy / Waszego / Asystenta”): kolumna tekstu ma szerokość treści,
     więc kompozycja ze sceną jest naprawdę wyśrodkowana (max-width 620 px zostawiał ~240 px pustki po prawej) */
  width: min-content;
}
.st__tytul span {
  /* wyróżnienie w osobnym wierszu: „Zbudujmy / Waszego Asystenta” (balance łamał „Waszego / Asystenta”) */
  display: block;
  color: var(--blue);
}
.st__linia {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink-muted);
  text-wrap: balance;
}
.st__scena {
  grid-area: scena;
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
}
.st__dol {
  grid-area: dol;
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: flex-start;
  padding-top: clamp(28px, 5vh, 48px);
}
.st__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 300px;
  border: 0;
  cursor: pointer;
  padding: 21px 46px 21px 52px;
  border-radius: 20px;
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--surface);
  background: var(--cta);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--surface) 16%, transparent) inset, 0 22px 44px -20px color-mix(in srgb, var(--blue) 85%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--blue) 60%, transparent);
  transition: background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.st__cta svg {
  width: 20px;
  height: 20px;
  transition: transform 0.25s var(--ease);
}
.st__cta:hover {
  background: var(--blue-deep);
  transform: translateY(-1px);
}
.st__cta:hover svg {
  transform: translateX(4px);
}
.st__cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue-sky) 60%, transparent);
  outline-offset: 4px;
}
/* „Kontynuuj · 26 %” — postęp lżejszy niż słowo akcji */
.st__cta-meta {
  font-weight: 600;
  color: color-mix(in srgb, var(--surface) 78%, transparent);
  margin-left: -6px;
}
/* oddech CTA: miękka obwódka, która raz-dwa „zaprasza” po wejściu */
.st__cta::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 40%, transparent);
  opacity: 0;
}
.st-gra .st__cta::after { animation: st-zapr 2.4s ease-out 4.4s 2; }
@keyframes st-zapr { 0% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 38%, transparent); } 100% { opacity: 0; box-shadow: 0 0 0 16px transparent; } }

.st-gra .st__tytul { animation: st-wj 0.8s var(--ease) 0.1s backwards; }
.st-gra .st__linia { animation: st-wj 0.8s var(--ease) 0.25s backwards; }
.st-gra .st__cta { animation: st-wj 0.8s var(--ease) 1.2s backwards; }
@keyframes st-wj { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================================================ MAKIETA ==
   Style płaszczyzn, podestu, drzew, kuli i etykiet = wiedza-otwarcie.css (`.so`). */
.st .so { position: absolute; inset: 0; overflow: visible; }
/* etykiety pięter: wspólna warstwa 2D `.mk-ety` (wiedza-otwarcie.css, „ETYKIETY PIĘTER (2D)”), numer + nazwa.
   Dawne billboardy 3D z numerem i ikoną powiększane scale(--es) były rozmyte — zdjęte 16.10.2026. Warstwa
   obraca się z kamerą (te same klatki czasu co `.swiat`), kotwica jedzie w pionie cyklem swojej kondygnacji. */
.st .so-scena { --ks: 0.72; }
.st-gra .so-scena .wjazd { animation: so-pojaw 0.7s ease-out backwards; }
.st .st-ety { --mk-fi: -31deg; }
.st-gra .st-ety { animation: mk-obrot-st 3.2s cubic-bezier(0.35, 0, 0.25, 1) backwards; }
@keyframes mk-obrot-st { from { --mk-fi: -20deg; } to { --mk-fi: -31deg; } }
.st .st-ety .mk-kotwica { --mk-dz: var(--st-z); }
.st-gra .st-ety .mk-kotwica[data-p="0"] { animation: st-p0 8s cubic-bezier(0.45, 0, 0.25, 1) 0.9s 3 backwards; }
.st-gra .st-ety .mk-kotwica[data-p="1"] { animation: st-p1 8s cubic-bezier(0.45, 0, 0.25, 1) 0.9s 3 backwards; }
.st-gra .st-ety .mk-kotwica[data-p="2"] { animation: st-p2 8s cubic-bezier(0.45, 0, 0.25, 1) 0.9s 3 backwards; }
.st-gra .st-et { animation: mk-wj 0.6s var(--ease) var(--d, 1s) backwards; }

/* kula: pojawia się sprężyście; blask i fale grają w cyklu pięter */
.st .st-kula .kula { transform: scale(var(--ks)); }
.st-gra .st-kula .kula { animation: st-kula-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) var(--kd, 1.5s) backwards; }
@keyframes st-kula-pop { from { transform: scale(0); } to { transform: scale(var(--ks)); } }
.st .st-halo .blask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue-sky) 42%, transparent), color-mix(in srgb, var(--blue) 9%, transparent) 48%, transparent 92%);
  opacity: var(--st-bo);
  transform: scale(var(--st-bs));
}

/* --- kondygnacje z materiału makiety --- */
.st .st-podloga {
  background:
  repeating-linear-gradient(0deg, transparent 0 13px, color-mix(in srgb, var(--blue) 7%, transparent) 13px 14px),
  repeating-linear-gradient(90deg, transparent 0 13px, color-mix(in srgb, var(--blue) 7%, transparent) 13px 14px),
  var(--surface);
}
.st .st-deski {
  background:
  repeating-linear-gradient(90deg, transparent 0 9px, color-mix(in srgb, var(--blue) 9%, transparent) 9px 10px),
  color-mix(in srgb, var(--blue-tint) 45%, var(--surface));
}
.st .st-sciana {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--blue-tint) 40%, var(--surface)));
  box-shadow: inset 0 0 0 0.6px var(--krawedz);
  overflow: hidden;
}
.st .st-sciana.ciemniej {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue-tint) 30%, var(--surface)), color-mix(in srgb, var(--blue-tint) 75%, var(--surface)));
}
.st .st-szklo {
  background:
  linear-gradient(180deg, var(--surface) 0 2px, transparent 2px calc(100% - 2.5px), var(--surface) calc(100% - 2.5px)),
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--surface) 95%, transparent) 0 1.3px, transparent 1.3px 23px),
  linear-gradient(160deg, color-mix(in srgb, var(--surface) 55%, transparent) 0 28%, transparent 28% 46%, color-mix(in srgb, var(--surface) 30%, transparent) 46% 52%, transparent 52%),
  color-mix(in srgb, var(--blue-tint) 22%, transparent);
  box-shadow: inset 0 0 0 0.6px color-mix(in srgb, var(--blue) 22%, transparent);
}
.st .st-led {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-sky);
  box-shadow: 0 0 6px var(--blue-sky), 0 6px 16px 2px color-mix(in srgb, var(--blue-sky) 40%, transparent);
  opacity: 0;
}
/* duża ikona piętra na posadzce / tablicy tarasu */
.st .st-znak {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 0 0 0.8px var(--blue-line), 0 8px 16px -10px color-mix(in srgb, var(--blue) 60%, transparent);
  color: var(--blue);
}
.st .st-znak svg { width: 26px; height: 26px; display: block; }
.st .st-plyta { background: transparent; }
.st .st-plyta .st-znak {
  top: 50%;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: radial-gradient(closest-side, var(--surface) 70%, color-mix(in srgb, var(--blue-tint) 80%, var(--surface)));
  box-shadow: 0 0 0 1px var(--blue-line), 0 0 0 7px color-mix(in srgb, var(--blue-sky) 10%, transparent), 0 10px 22px -10px color-mix(in srgb, var(--blue) 55%, transparent);
}
.st .st-plyta .st-znak svg { width: 38px; height: 38px; }
.st .st-p { transform: translate3d(0, 0, calc(var(--z0) + var(--st-z))); }
/* cykl (P = 8 s, gra 3 razy, kończy w ROZŁOŻENIU — piętra czekają na „Zaczynamy”):
   rozsunięte → osiadają po kolei z „klikiem” (01, 02, 03, kula) → stoją złożone → znów się rozsuwają.
   Stan bazowy (bez animacji, reduced motion) = rozłożone: --z0 zawiera już odsunięcie. */
.st-gra .st-p0 { animation: st-p0 8s cubic-bezier(0.45, 0, 0.25, 1) 0.9s 3 backwards; }
.st-gra .st-p1 { animation: st-p1 8s cubic-bezier(0.45, 0, 0.25, 1) 0.9s 3 backwards; }
.st-gra .st-p2 { animation: st-p2 8s cubic-bezier(0.45, 0, 0.25, 1) 0.9s 3 backwards; }
.st-gra .st-pk { animation: st-pk 8s cubic-bezier(0.45, 0, 0.25, 1) 0.9s 3 backwards; }
@keyframes st-p0 { 0%, 14% { --st-z: 0px; } 30% { --st-z: -24px; } 33%, 74% { --st-z: -22px; } 94%, 100% { --st-z: 0px; } }
@keyframes st-p1 { 0%, 18% { --st-z: 0px; } 35% { --st-z: -72px; } 38%, 74% { --st-z: -70px; } 94%, 100% { --st-z: 0px; } }
@keyframes st-p2 { 0%, 22% { --st-z: 0px; } 40% { --st-z: -120px; } 43%, 74% { --st-z: -118px; } 94%, 100% { --st-z: 0px; } }
/* kula po złożeniu siada 15 jednostek wyżej niż w dawnym cyklu (−125 zamiast −140): wcześniej fala kuli wchodziła
   na tablicę tarasu (wersja 2) */
@keyframes st-pk { 0%, 26% { --st-z: 0px; } 45% { --st-z: -128px; } 48%, 74% { --st-z: -125px; } 94%, 100% { --st-z: 0px; } }
/* LED-y i blask kuli, gdy wszystko osiadło */
.st-gra .st-c .st-led { animation: st-led 8s ease-in-out 0.9s 3 backwards; }
@keyframes st-led { 0%, 44% { opacity: 0; } 50%, 72% { opacity: 1; } 80%, 100% { opacity: 0; } }
.st-gra .st-c .st-halo .blask { animation: st-blask-c 8s ease-out 0.9s 3 backwards; }
/* blask kuli wchodzi RAZEM z kulą (wersja 2: dawniej stał od pierwszej klatki jako „duch” nad pustym tarasem) */
.st-gra .st-c .st-halo { animation: so-pojaw 0.7s ease-out 0.6s backwards; }
@keyframes st-blask-c { 0%, 46% { --st-bo: 0.3; --st-bs: 0.42; } 50% { --st-bo: 1; --st-bs: 0.85; } 74% { --st-bo: 0.55; --st-bs: 0.55; } 90%, 100% { --st-bo: 0.3; --st-bs: 0.42; } }
.st-gra .st-c .st-halo .fala-k { animation: st-fala-c 8s ease-out 0.9s 3 backwards; }
.st-gra .st-c .st-halo .fala-k + .fala-k { animation-delay: 1.2s; }
@keyframes st-fala-c { 0%, 47% { opacity: 0; transform: scale(0.5); } 48% { opacity: 0.9; } 62%, 100% { opacity: 0; transform: scale(2.8); } }
/* kamera: krótki obrót do stanu otwarcia (−31°) */
.st-gra .st-c .so-scena .swiat { animation: st-obrot-c 3.2s cubic-bezier(0.35, 0, 0.25, 1) backwards; }
@keyframes st-obrot-c { from { --so-fi: -20deg; } to { --so-fi: -31deg; } }
/* trzask osiadania: delikatny pierścień na podeście */
.st .st-trzask-f { background: transparent; }
.st .st-trzask {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--blue-sky) 55%, transparent);
  opacity: 0;
}
.st-gra .st-trzask { animation: st-trzask 8s ease-out 0.9s 3 backwards; }
@keyframes st-trzask { 0%, 28% { opacity: 0; transform: scale(0.7); } 30% { opacity: 1; } 44%, 100% { opacity: 0; transform: scale(1.25); } }

/* ---------------------------------------------------------------- telefon -- 
   Jedna kolumna: nagłówek → makieta → akcja (ta sama granica co `tel` w wiedza-start.js). */
@media (max-width: 860px) {
  .st {
    height: calc(100vh - 112px);
    height: calc(100dvh - 112px);
    min-height: 480px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "gora" "scena" "dol";
    justify-content: stretch;
    padding: 0;
  }
  .st__gora { max-width: none; padding: 14px 20px 0; text-align: center; }
  .st__tytul { width: auto; font-size: clamp(32px, 8.6vw, 44px); letter-spacing: -0.04em; }
  .st__linia { font-size: 15px; margin: 10px auto 0; }
  .st__dol { justify-content: center; padding: 6px 16px max(20px, env(safe-area-inset-bottom)); }
  .st__cta { width: 100%; min-width: 0; padding: 19px 24px; font-size: 18px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .st *, .st *::before, .st *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}