/* =========================================================================
   SilesiaPulse · prezapp — css/style.css
   Kanon wizualny 1:1 ze skilla §7 (= SILESIAPULSE_MASTER §1c).
   Baza projektowa: 1920×1080 (16:9); #stage skalowany transformem do okna
   (skill §2.3) — wymiary wewnątrz stage'u podawane w px bazy.
   ========================================================================= */

:root {
  --tlo: #1C1C2E;
  --panel: #252535;
  --obrys: #3A3A5C;
  --turkus: #00D4AA;
  --czerwien: #FF4444;
  --slask: #18AE8A;
  --tekst: #FFFFFF;
  --tekst2: #8A8A9A;
  --ui-aktywne-tlo: #2E2E4E;
  --font: "Segoe UI", -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: var(--tlo);
  font-family: var(--font);
  color: var(--tekst);
  overflow: hidden;
  user-select: none;
  cursor: default;
}

#app { position: fixed; inset: 0; }

/* ---- scena 1920×1080, centrowana i skalowana przez engine ---- */
#stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--skala, 1));
  transform-origin: center center;
  background: var(--tlo);
  overflow: hidden;
}

/* ---- PAUZA (przycisk start/stop): zamrożenie animacji CSS ---- */
#stage.pauza * { animation-play-state: paused !important; }

/* ---- slajdy + crossfade 400 ms (skill §4) ---- */
#slajdy { position: absolute; inset: 0; }

.slajd {
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.slajd.aktywny { opacity: 1; pointer-events: auto; }

.slajd-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.slajd-overlays { position: absolute; inset: 0; pointer-events: none; }

/* ---- placeholder materiału (bramka 1; media wchodzą w bramce 4) ---- */
.ph-kafel {
  min-width: 640px; max-width: 1400px;
  padding: 56px 72px;
  background: var(--panel);
  border: 1px solid var(--obrys);
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
  display: flex; flex-direction: column; gap: 18px; align-items: center;
}
.ph-id { font-size: 56px; font-weight: 700; color: var(--tekst2); letter-spacing: 1px; }
.ph-tytul { font-size: 20px; font-weight: 700; color: var(--tekst); }
.ph-info { font-size: 15px; color: var(--tekst2); }

/* ---- ekran startowy (autoplay-gate, skill §2.4) ---- */
/* Plansza tytułowa (przebudowa 13.09). Była nazwą na jednolitym tle — nie mówiła,
   o czym jest pokaz ani ile trwa, więc dawała gościowi same powody, żeby nie
   klikać. Teraz jest pierwszą sceną: kadr z aktu zerowego, zawiązka, obietnica
   czasu i przycisk. Wymiary w px bazy 1920×1080, jak reszta sceny. */
#ekran-startowy {
  position: absolute; inset: 0;
  z-index: 40;
  background: var(--tlo);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  transition: opacity 400ms ease;
}
#ekran-startowy.ukryty { opacity: 0; pointer-events: none; }

/* Kadr z otwarcia pokazu. `object-fit: cover`, bo scena ma 16∶9, a materiał
   niekoniecznie — przycięcie jest tu lepsze niż czarne pasy. */
/* Rozjaśnione 13.09. Pierwsza wersja gasiła kadr tak mocno, że plansza zlewała
   się z ciemnym tłem wizytówki i ramka w sekcji 05 traciła krawędź. Materiał
   jest nagraniem o świcie, więc sam w sobie jest przygaszony — podniesienie
   jasności i kontrastu przywraca mu to, co miał na wejściu. */
#start-tlo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.04) brightness(1.20) contrast(1.05);
}
/* Dwa przyciemnienia zamiast jednego: promieniste wybiera środek pod tekst,
   liniowe dokłada ciężaru górze i dołowi, żeby pigułki UI i pasek postępu
   nie ginęły na jasnym niebie. Wartości opuszczone wobec pierwszej wersji —
   najmocniej w narożnikach (0,96 → 0,80), bo to one decydują, czy kadr ma
   w ogóle brzeg. Środek zostaje najciemniejszy tam, gdzie leży zawiązka. */
#start-mrok {
  position: absolute; inset: 0;
  background:
    radial-gradient(118% 82% at 50% 50%, rgba(28,28,46,0.16) 0%, rgba(28,28,46,0.62) 58%, rgba(28,28,46,0.80) 100%),
    linear-gradient(180deg, rgba(28,28,46,0.46) 0%, rgba(28,28,46,0.06) 38%, rgba(28,28,46,0.72) 100%);
}
#start-tresc {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 26px; text-align: center; padding: 0 120px;
}

/* Kula z tętnem. Projekt nazywa się Pulse, a czerwony punkt na logu stał
   nieruchomo — ruch jest tu w nazwie, nie w ozdobniku. Poświata rysowana w CSS,
   bo logo jest bitmapą i samej kropki nie da się z niej wyjąć. */
.start-kula { position: relative; display: grid; place-items: center; }
.start-kula::before {
  content: ""; position: absolute;
  width: 230px; height: 230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,68,68,0.34) 0%, rgba(255,68,68,0) 62%);
  animation: puls-aura 3.2s ease-in-out infinite;
}
@keyframes puls-aura {
  0%, 100% { transform: scale(0.80); opacity: 0.30; }
  50%      { transform: scale(1.14); opacity: 0.85; }
}
#start-logo { position: relative; max-height: 150px; }

#ekran-startowy h1 { font-size: 64px; font-weight: 700; letter-spacing: 2px; }

/* Tło jest ruchome, więc kontrast pod tekstem zmienia się klatka po klatce —
   przy rozjaśnionym kadrze nie da się na niego liczyć. Cień pod literami nie
   jest ozdobą, tylko zabezpieczeniem tego jednego ujęcia, w którym kadłam
   tankowca wchodzi dokładnie pod wers. */
#ekran-startowy h1, .start-hak { text-shadow: 0 2px 18px rgba(10,10,22,0.78); }

/* Zawiązka aktu zerowego. Jedno zdanie, które robi całą robotę: gość dowiaduje
   się, o co tu chodzi, zanim cokolwiek kliknie. */
.start-hak {
  max-width: 1000px;
  font-size: 31px; font-weight: 300; line-height: 1.45;
  color: var(--tekst);
}
/* Obietnica czasu. Bez niej kliknięcie jest zakładem w ciemno. */
.start-meta {
  font-size: 16px; letter-spacing: 2.6px; text-transform: uppercase;
  color: #A8A8B8;   /* o stopień jaśniej niż --tekst2: linia leży nad jasnym kadłubem */
  text-shadow: 0 1px 12px rgba(10,10,22,0.82);
}
/* Przycisk zamiast szarego zdania — to samo zaproszenie, tylko widoczne. */
.start-cta {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 6px; padding: 16px 38px;
  font-size: 19px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--turkus);
  border: 1px solid rgba(0, 212, 170, 0.55); border-radius: 4px;
  background: rgba(0, 212, 170, 0.06);
  animation: puls-cta 2.6s ease-in-out infinite;
}
.start-trojkat {
  width: 0; height: 0;
  border-left: 11px solid var(--turkus);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
@keyframes puls-cta { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }

/* Redukcja ruchu: zostaje sam kadr bez pętli, tętno i oddech przycisku gasną.
   Plansza dalej mówi wszystko, co ma do powiedzenia — traci tylko ruch. */
@media (prefers-reduced-motion: reduce) {
  #start-tlo { display: none; }
  .start-kula::before, .start-cta { animation: none; }
  .start-cta { opacity: 1; }
}

/* ---- pigułki UI (prawy górny róg; reguła slicera — skill §6/§7) ---- */
/* wskaźnik poziomu analizy Kani — STAŁA pozycja lewy górny róg (nad kadrem media,
   bez kolizji z dashboardem); zamiast ruchomych pastylek u dołu */
#poziom-badge {
  position: absolute;
  top: 18px; left: 50%;                 /* górny środek = środkowa kolumna dashboardu */
  transform: translateX(-50%);
  z-index: 50;
  display: flex; align-items: baseline; gap: 11px;
  padding: 8px 20px 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--turkus);
  background: var(--ui-aktywne-tlo);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
#poziom-badge[hidden] { display: none; }
#poziom-badge .pb-krok {
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: var(--turkus);
}
#poziom-badge .pb-nazwa {
  font-size: 16px; font-weight: 700; letter-spacing: 1.6px;
  color: var(--tekst);
}
#poziom-badge.zmiana { animation: pb-puls 750ms ease; }
@keyframes pb-puls {
  0%   { transform: translateX(-50%) scale(0.9);  opacity: 0.4; box-shadow: 0 0 0 0 rgba(0, 212, 170, 0); }
  45%  { transform: translateX(-50%) scale(1.06); opacity: 1;   box-shadow: 0 0 24px 2px var(--turkus); }
  100% { transform: translateX(-50%) scale(1);    opacity: 1;   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45); }
}

#ui-pigulki {
  position: absolute;
  top: 18px; right: 10px;       /* dosunięte do rogu — nie kolidują z UI pokazu */
  z-index: 50;
  display: flex; gap: 6px;
}
/* przygaszenie PER-PIGUŁKA (dawniej na całym pasku) — dzięki temu aktywny FFWD
   może być pełni widoczny, gdy reszta pozostaje przygaszona */
.pigulka {
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tekst2);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 250ms ease, border-color 200ms ease, background 200ms ease, color 200ms ease;
}
#ui-pigulki:hover .pigulka { opacity: 1; }
.pigulka.on {
  border-color: var(--turkus);
  background: var(--ui-aktywne-tlo);
  color: var(--tekst);
}
.pigulka .kropka { color: var(--tekst2); margin-right: 6px; }
.pigulka.on .kropka { color: var(--turkus); }

/* ---- pigułka „Szybciej" = przycisk FFWD (podwójny trójkąt jak w odtwarzaczu) ---- */
.pigulka-ffwd { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; }
.ffwd-ikona { width: 15px; height: 15px; display: block; flex: none; }
.ffwd-ikona path { fill: var(--tekst2); transition: fill 200ms ease; }
.ffwd-txt { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }
/* stan AKTYWNY (przyspieszenie ON): wyraźnie widoczny dla komisji — pełna
   widoczność nawet bez najechania, turkusowy trójkąt z pulsem „do przodu" + poświata */
.pigulka-ffwd.on { opacity: 1; box-shadow: 0 0 14px -2px var(--turkus); }
.pigulka-ffwd.on .ffwd-txt { color: var(--turkus); }
.pigulka-ffwd.on .ffwd-ikona path { fill: var(--turkus); }
.pigulka-ffwd.on .ffwd-ikona { animation: ffwd-puls 0.75s ease-in-out infinite; }
@keyframes ffwd-puls {
  0%, 100% { transform: translateX(-1px); opacity: 0.75; }
  50%      { transform: translateX(2px);  opacity: 1; }
}

/* ---- pasek napisów (tryb TEKST — pełna logika w bramce 3) ---- */
#pasek-napisy {
  position: absolute;
  left: 50%; bottom: 46px;
  transform: translateX(-50%);
  z-index: 45;
  max-width: 1480px;
  padding: 14px 28px;
  background: rgba(37, 37, 53, 0.92);       /* --panel @ 92% */
  border: 1px solid var(--obrys);
  border-radius: 8px;
  font-size: 21px;
  line-height: 1.45;
  color: var(--tekst);
  text-align: center;
  white-space: pre-line;          /* akapity narracji (\n\n) */
  max-height: 320px;
  overflow-y: auto;
}
#pasek-napisy[hidden] { display: none; }

/* ---- pasek postępu: 6 segmentów aktów (skill §4) ---- */
#pasek-postepu {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  height: 6px;
  padding-top: 30px;               /* niewidoczna strefa hover nad paskiem */
  box-sizing: content-box;
  display: flex; gap: 3px;
  align-items: flex-end;
}

.segment {
  position: relative;
  height: 6px;
  background: var(--panel);
  border-radius: 2px;
  overflow: visible;
  cursor: pointer;                 /* segment = klikalny skok do rozdziału */
}
.segment .wypelnienie {
  height: 100%;
  width: 0%;
  background: var(--turkus);
  border-radius: 2px;
  opacity: 0.45;                   /* akty zaliczone — przygaszony turkus */
  transition: width 350ms ease;
}
.segment.aktywny .wypelnienie { opacity: 1; }

.segment .etykieta {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--tekst2);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.segment.aktywny .etykieta { color: var(--turkus); }
/* etykieta klikalna TYLKO gdy widoczna (hover/pokaz) → klik w nią bąbelkuje
   do rodzica .segment i wywołuje skok; poza tym pointer-events:none (nie łapie
   klików ani nie zmienia zachowania „klik gdziekolwiek = next") */
#pasek-postepu:hover .etykieta,
#pasek-postepu.pokaz .etykieta { opacity: 1; pointer-events: auto; }

/* ---- przycisk „wstecz" (dolny lewy róg): cofnięcie o jeden PODROZDZIAŁ ----
   siedzi WYŻEJ niż strefa hover paska postępu (bottom 46px > 36px), na wysokości
   #pasek-napisy ale w rogu (poza jego wyśrodkowanym zasięgiem). Przygaszony jak
   #ui-pigulki: opacity .35 → 1 na hover, z akcentem --turkus. */
#btn-wstecz {
  position: absolute;
  left: 14px; bottom: 46px;
  z-index: 50;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--obrys);
  background: var(--panel);
  color: var(--tekst2);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 250ms ease, color 250ms ease,
              border-color 250ms ease, background 250ms ease;
}
#btn-wstecz:hover {
  opacity: 1;
  color: var(--turkus);
  border-color: var(--turkus);
  background: var(--ui-aktywne-tlo);
}
#btn-wstecz svg { display: block; pointer-events: none; }

/* =========================================================================
   NAKŁADKI KINETYCZNEJ TYPOGRAFII (skill §5) — bramka 2
   ========================================================================= */

.ov-abs { position: absolute; transform: translate(-50%, -50%); }

/* wspólny wjazd: fade + scale 0.8→1.0, 300 ms */
.ov-wjazd { animation: ov-wjazd 300ms ease-out both; }
@keyframes ov-wjazd {
  from { opacity: 0; scale: 0.8; }
  to   { opacity: 1; scale: 1; }
}

.ov-znika { transition: opacity 400ms ease; opacity: 0 !important; }

/* ---- bigNumber: 48–72 px Bold, wjazd + pojedynczy puls ---- */
.ov-bignumber { text-align: center; }
.ov-bignumber-in {
  font-weight: 700;
  line-height: 1.05;
  animation: ov-wjazd 300ms ease-out both,
             ov-puls 900ms ease-in-out 400ms 1;
}
.ov-bignumber-podpis {
  margin-top: 8px;
  font-size: 17px;
  color: var(--tekst2);
  animation: ov-wjazd 300ms ease-out 250ms both;
}
@keyframes ov-puls { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
.ov-puls-raz { animation: ov-wjazd 300ms ease-out both, ov-puls 900ms ease-in-out 400ms 1; }

/* ---- tekst / adnotacje / etykiety ---- */
.ov-tekst {
  max-width: 900px;
  text-align: center;
  line-height: 1.4;
  animation: ov-wjazd 300ms ease-out both;
}
.ov-tekst-ramka {
  border: 2px solid var(--turkus);
  border-radius: 8px;
  padding: 12px 22px;
  background: rgba(37, 37, 53, 0.75);
}
.ov-annotation-etykieta {
  transform: translate(-50%, 0);
  font-size: 18px;
  padding: 5px 12px;
  background: rgba(37, 37, 53, 0.85);
  border: 1px solid var(--obrys);
  border-radius: 6px;
  white-space: nowrap;
  animation: ov-wjazd 300ms ease-out 350ms both;
}
.ov-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---- highlightBox: ramka wokół obszaru + opcjonalny puls ----
   ciemna „fosa" + delikatna poświata odcinają ramkę od obramowań
   wizuali dashboardu na zrzutach (nie zlewa się z obrysem kart) */
.ov-highlight {
  transform: none;               /* pozycja lewym górnym rogiem obszaru */
  border: 2px solid var(--turkus);
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(15, 15, 26, 0.55), 0 0 20px -3px currentColor;
  animation: ov-fadein 300ms ease-out both;
}
@keyframes ov-fadein { from { opacity: 0; } to { opacity: 1; } }
.ov-highlight.ov-puls-raz { animation: ov-fadein 300ms ease-out both, ov-hl-puls 1s ease-in-out 350ms 1; }
.ov-highlight.ov-puls-ciagly { animation: ov-fadein 300ms ease-out both, ov-hl-puls 1.4s ease-in-out 350ms infinite; }
@keyframes ov-hl-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
  50%      { box-shadow: 0 0 26px 2px currentColor; }
}
.ov-highlight-etykieta {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  background: rgba(37, 37, 53, 0.85);
  border-radius: 6px;
  white-space: nowrap;
}
.ov-highlight-etykieta.gora { top: auto; bottom: calc(100% + 8px); }

/* ---- ticker v2 (Akt 0): nagłówki „breaking news" ----
   pasek akcentu z lewej (czerwień=eskalacja, turkus=deeskalacja),
   tag daty jak depesza agencyjna, wjazd z prawej z przestrzeleniem */
.ov-ticker { transform: none; }
.ov-ticker-in {
  display: flex;
  align-items: baseline;
  gap: 18px;
  max-width: 1280px;
  padding: 10px 26px 12px 22px;
  background: linear-gradient(90deg, rgba(15, 15, 26, 0.78) 0%, rgba(15, 15, 26, 0.42) 78%, rgba(15, 15, 26, 0) 100%);
  border-left: 5px solid var(--tekst2);
  animation: ov-ticker-wjazd 850ms cubic-bezier(0.18, 1.14, 0.32, 1) both;
}
@keyframes ov-ticker-wjazd {
  0%   { opacity: 0; transform: translateX(58vw); }
  70%  { opacity: 1; transform: translateX(-1.2%); }
  100% { opacity: 1; transform: translateX(0); }
}
.ov-ticker-tag {
  flex: none;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 2.5px;
  padding: 3px 12px;
  border: 1px solid;
  border-radius: 4px;
  background: rgba(15, 15, 26, 0.6);
  white-space: nowrap;
}
.ov-ticker-tekst {
  font-weight: 700;
  line-height: 1.22;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.8);
}
.ticker-frozen .ov-ticker { transition: opacity 900ms ease; opacity: 0.4; }

/* ---- bloki schematu (0.3) — rym wizualny z „Łańcuchem przyczynowym" S2 ---- */
.ov-blok {
  transform: none;
  min-width: 220px;
  max-width: 330px;
  padding: 14px 20px 14px 22px;
  background: var(--panel);
  border: 1px solid var(--obrys);
  border-left: 4px solid var(--turkus);
  border-radius: 8px;
  box-shadow: 0 8px 34px rgba(0, 0, 0, 0.45);
  text-align: left;
}
.ov-blok-nr {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--turkus);
}
.ov-blok-tekst { font-size: 22px; font-weight: 700; line-height: 1.25; margin-top: 2px; }
.ov-blok-podpis { font-size: 14px; color: var(--tekst2); margin-top: 4px; }

/* ---- sequence: kafle KPI / kafle / pastylki ---- */
.ov-kpi {
  transform: none;
  background: var(--panel);
  border: 1px solid var(--obrys);
  border-radius: 8px;
  padding: 14px 18px;
  min-width: 210px;
  text-align: center;
}
.ov-kpi-naglowek { font-size: 14px; letter-spacing: 1px; color: var(--tekst2); }
.ov-kpi-wartosc { font-size: 38px; font-weight: 700; margin-top: 4px; }

.ov-kafel {
  background: var(--panel);
  border: 1px solid var(--obrys);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  max-width: 320px;
}

.ov-pastylka {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--turkus);
  background: var(--ui-aktywne-tlo);
  white-space: nowrap;
}

/* rząd pastylek kotwiczony prawą krawędzią (finał 5.1) */
.ov-pastylki-rzad {
  display: flex;
  gap: 14px;
  transform: translate(-100%, -50%);   /* x = prawa krawędź rzędu */
}
.ov-pastylki-rzad .ov-pastylka-el {
  position: static;
  opacity: 0;
  scale: 0.85;
  transition: opacity 300ms ease, scale 300ms ease;
}
.ov-pastylki-rzad .ov-pastylka-el.zapalona { opacity: 1; scale: 1; }

/* ---- slupki bet (3.2) — spółki śląskie #18AE8A ---- */
/* WSZYSTKIE TRZY słupki (KGHM/JSW/PKN) wchodzą identycznie: wiersz fade-in
   300 ms + wypełnienie paska width 0→proc% (900 ms ease-out). Liczba (etykieta)
   pojawia się z wierszem w tym samym fade — jednolite zachowanie dla całej trójki.
   Stagger między słupkami = interwal cue (4 s) — celowa synchronizacja z lektorem
   A3_2, który nazywa spółki po kolei (KGHM → JSW → Orlen). */
.ov-slupki { transform: translate(-50%, 0); display: flex; flex-direction: column; gap: 34px; }
.ov-slupek { display: grid; grid-template-columns: 150px 1fr 110px; align-items: center; gap: 20px; width: 900px;
             animation: ov-fadein 300ms ease-out both; }
.ov-slupek-label { font-size: 26px; font-weight: 700; text-align: right; }
.ov-slupek-tor { height: 36px; background: var(--panel); border: 1px solid var(--obrys); border-radius: 6px; overflow: hidden; }
.ov-slupek-pasek { height: 100%; width: 0; background: var(--slask); transition: width 900ms ease-out; }
.ov-slupek.wyrozniony .ov-slupek-tor { border: 2px solid var(--turkus); }
.ov-slupek-wartosc { font-size: 30px; font-weight: 700; }

/* redukcja ruchu (a11y): przy prefers-reduced-motion słupki pokazują od razu
   stan końcowy — wiersz bez fade, pasek skacze do wartości docelowej bez animacji.
   Stagger (moment pojawienia się każdego wiersza) zostaje — to synchronizacja
   z narracją, nie ozdoba ruchu. */
@media (prefers-reduced-motion: reduce) {
  .ov-slupek { animation: none; }
  .ov-slupek-pasek { transition: none; }
}

/* ---- typewriter (35 ms/znak) ---- */
.ov-typewriter {
  max-width: 880px;
  padding: 14px 24px;
  background: rgba(37, 37, 53, 0.85);
  border: 1px solid var(--obrys);
  border-radius: 8px;
  line-height: 1.4;
  text-align: left;
}
.ov-kursor { color: var(--turkus); animation: ov-kursor 800ms step-end infinite; transition: opacity 300ms; }
@keyframes ov-kursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---- synthesis (4.3): linie decyzji ---- */
.ov-synthesis { transform: translate(-50%, 0); display: flex; flex-direction: column; gap: 30px; width: 1240px; }
.ov-synteza-linia { font-size: 30px; font-weight: 700; line-height: 1.35; text-align: left; }

/* ---- cascade (1.3): schodki liczb ---- */
.ov-cascade { font-weight: 700; line-height: 1; }

/* ---- sylwetka + logo ---- */
.ov-sylwetka { pointer-events: none; }
.ov-logo { transform: translate(-50%, -50%); }
.ov-logo-napis {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 5px;
  color: var(--tekst);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

/* ---- plaster: maska na natywne UI materiału (bez ramki, miękkie brzegi) ---- */
.ov-plaster { transform: none; border-radius: 6px; animation: ov-fadein 200ms ease-out both; }

/* ---- przycisk „Mapa Przepływu Danych" (finał 5.3) ----
   mały button stylizowany prezentacją, pod napisem „Dziękuję za uwagę";
   .slajd-overlays ma pointer-events:none → przycisk musi włączyć auto */
.ov-przycisk {
  pointer-events: auto;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.4px;
  padding: 9px 24px;
  border-radius: 999px;
  border: 1px solid var(--turkus);
  background: rgba(37, 37, 53, 0.85);
  color: var(--tekst);
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  animation: ov-wjazd 300ms ease-out both,
             przycisk-oddech 2.6s ease-in-out 1.2s infinite;   /* delikatne „zaproszenie" jak start-cta */
}
.ov-przycisk:hover {
  background: var(--ui-aktywne-tlo);
  box-shadow: 0 0 20px -2px var(--turkus);
}
@keyframes przycisk-oddech {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45); }
  50%      { box-shadow: 0 0 18px -2px var(--turkus); }
}

/* nakładka pełnoekranowa z Mapą Przepływu Danych — na BODY (nie w #stage:
   transform na przodku zmieniłby układ fixed; body = prawdziwe 100% ekranu).
   Nawigacja zamiast nakładki wyrzuciłaby z element-fullscreen (klawisz F). */
#mapa-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;                    /* ponad całym UI prezentacji (max 50) */
  background: var(--tlo);
  opacity: 0;
  transition: opacity 300ms ease;
}
#mapa-overlay.pokaz { opacity: 1; }
#mapa-overlay iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--tlo);
}

/* ---- fade to dark (5.2) ---- */
.ov-fadeout {
  position: absolute; inset: 0;
  background: var(--tlo);
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
}

/* =========================================================================
   REALNE MEDIA (bramka 4) — kafel §7, tła AI §3.4, plakietki czytelności
   ========================================================================= */

/* kafel media: obramowanie #3A3A5C + cień, jak wizual w dashboardzie (§7) */
.media-kadr {
  position: relative;
  border: 1px solid var(--obrys);
  border-radius: 8px;
  overflow: hidden;
  background: var(--tlo);   /* granat, NIE czerń — żadna luka/przejście nie da czarnego pola */
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.5);
}
.media-kadr .media-plik {
  display: block;
  max-width: 1690px;   /* 88% bazy 1920 — deterministyczna kalibracja nakładek */
  max-height: 950px;   /* 88% bazy 1080 */
  width: auto;
  height: auto;
  background: var(--tlo);   /* tło <video> przed 1. klatką = granat, nie czerń */
}
.media-przejscie { transition: opacity 300ms ease; }

/* tła dekoracyjne AI (§3.4) — przyciemnione POD nakładkami; brak pliku → tło #1C1C2E */
.tlo-ai {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
}
.tlo-ai.kenburns { animation: kenburns 45s ease-out forwards; }
.tlo-ai.jasne { filter: none; }   /* finał 5.3: klip w oryginalnej jasności */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.tlo-ai-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(28, 28, 46, 0.20) 0%,
    rgba(28, 28, 46, 0.38) 48%,
    rgba(28, 28, 46, 0.94) 100%);
}

/* czytelność typografii na zrzutach i tłach AI */
.ov-tekst, .ov-bignumber-in, .ov-bignumber-podpis, .ov-cascade {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.na-plakietce {
  background: rgba(28, 28, 46, 0.9);
  border: 1px solid var(--obrys);
  border-radius: 8px;
  padding: 10px 20px;
}
.ov-cascade {
  background: rgba(28, 28, 46, 0.9);
  border: 1px solid var(--obrys);
  border-radius: 8px;
  padding: 8px 18px;
}