/* Splash z logo — styl B: sygil nad rozstrzelonym wordmarkiem.

   Ruchem steruje oś czasu w `ekrany/splash.js`, nie ten plik. Tutaj siedzi
   wyłącznie WYGLĄD SPOCZYNKOWY i to, co ma chodzić w kółko bez końca.

   Reguła (ZASADY.md pkt 4): treść stoi widoczna, gdy nic się nie rusza.
   Wyjątki mają POWÓD przy sobie. */

#splash{
  position:fixed;inset:0;z-index:50;background:#02040a;overflow:hidden;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
}

/* --- pole iskier: rysowane na płótnie, pod całą sceną --- */
.splash-pyl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.splash-scena{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.splash-srodek{display:flex;flex-direction:column;align-items:center}

/* --- gniazdo logo: aura i fale leżą pod sygilem, wyśrodkowane na nim --- */
.splash-logo{
  position:relative;width:min(52vw,240px);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
}

/* poświata pod sygilem — stoi spokojnie, cały ruch bierze na siebie prąd */
.splash-aura{
  position:absolute;inset:-38%;pointer-events:none;
  background:radial-gradient(circle,rgba(94,231,255,.30) 0%,rgba(94,231,255,.10) 38%,rgba(94,231,255,0) 68%);
}

/* --- prąd: kopie sygilu przycięte do samej obręczy z włoskami ---
   Filamenty na obwodzie są częścią GRAFIKI, więc same nie drgną.

   Dorysowywanie łuków gradientem stożkowym NIE DZIAŁA: obracający się wycinek
   ma twarde krawędzie promieniowe i zawsze czyta się jak wirująca PŁYTKA.
   Zamiast tego puszczamy kopie tych samych włosków z innymi okresami —
   mijają się i krawędź iskrzy.

   `closest-side` jest tu konieczne: domyślnie promień gradientu liczy się do
   NAROŻNIKA kwadratu i obręcz wypada poza obwód sygilu. */
.splash-prad{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,transparent 56%,#000 65%,#000 78%,transparent 86%);
  mask-image:radial-gradient(closest-side,transparent 56%,#000 65%,#000 78%,transparent 86%);
}
/* stałe, nieanimowane krycie — druga obręcz tylko dokłada migotania,
   przy pełnej sile obwód robił się jasną obwódką */
.splash-prad.slaby{opacity:.6}

/* POWÓD wyjątku: fala uderzeniowa to czysta dekoracja, a jej stan
   SPOCZYNKOWY jest niewidoczny — zamrożone renderowanie nie może przez nią
   niczego ukryć. Oś czasu ma dodatkowo bezpiecznik na zegarze. */
.splash-fala{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  border:1px solid rgba(147,240,255,.9);
  box-shadow:0 0 22px rgba(94,231,255,.55),inset 0 0 22px rgba(94,231,255,.35);
}

/* --- sygil pocięty na pierścienie: każda warstwa to KOPIA tej samej grafiki
   z maską na swoim pasie promienia, obracana własnym rytmem w JS.
   Statyczna płyta nie istnieje — całość jest złożona z ruchomych plastrów.

   ŻADNEGO `mix-blend-mode`. Grafika przeszła przez `narzedzia/klucz_alfy.js`,
   który wypalił krycie z jasności pikseli — czarne tło po prostu nie istnieje.
   Wcześniejsze łatanie tego trybem `screen` trzy razy wpadło w pułapkę
   kontekstu składania. Alfa w pliku kończy temat.

   Pasy sąsiadów lekko na siebie NACHODZĄ: to te same piksele, więc zakładka
   tylko wygładza szew — szpara między maskami robiłaby ciemną obwódkę. */
.splash-warstwa{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.splash-warstwa.kamien{
  -webkit-mask-image:radial-gradient(closest-side,#000 22%,transparent 29%);
  mask-image:radial-gradient(closest-side,#000 22%,transparent 29%);
}
.splash-warstwa.piersc{
  -webkit-mask-image:radial-gradient(closest-side,transparent 21%,#000 27%,#000 37%,transparent 43%);
  mask-image:radial-gradient(closest-side,transparent 21%,#000 27%,#000 37%,transparent 43%);
}
.splash-warstwa.trojkaty{
  -webkit-mask-image:radial-gradient(closest-side,transparent 35%,#000 41%,#000 55%,transparent 60%);
  mask-image:radial-gradient(closest-side,transparent 35%,#000 41%,#000 55%,transparent 60%);
}
.splash-warstwa.runy{
  -webkit-mask-image:radial-gradient(closest-side,transparent 53%,#000 58%,#000 63%,transparent 69%);
  mask-image:radial-gradient(closest-side,transparent 53%,#000 58%,#000 63%,transparent 69%);
}

/* POWÓD wyjątku: wyplucie energii z kamienia to dekoracja o NIEWIDOCZNYM
   stanie spoczynkowym — zamrożone klatki mogą ją najwyżej zatrzymać. */
.splash-strzal{
  position:absolute;inset:31%;border-radius:50%;pointer-events:none;opacity:0;
  border:1px solid rgba(178,244,255,.9);
  box-shadow:0 0 18px rgba(94,231,255,.6),inset 0 0 14px rgba(94,231,255,.4);
}

/* --- wordmark: litery wybijają się kolejno spod spodu --- */
/* ŻADNEGO `overflow:hidden`: przycinało `text-shadow` dokładnie na krawędzi
   pudełka i dookoła napisu stał lekko widoczny PROSTOKĄT z uciętą poświatą.
   Litery chowa się przed wejściem samą transformacją (`scaleY:0` od dołu),
   więc przycinanie nie jest do niczego potrzebne. */
.splash-nazwa{
  position:relative;
  padding:6px 4px 8px;margin-top:6px;
  font-family:'Segoe UI',system-ui,sans-serif;
  font-size:min(6.2vw,31px);font-weight:800;letter-spacing:.3em;
  padding-left:.3em;                                  /* wyrównanie optyczne trackingu */
  max-width:100%;white-space:nowrap;
  color:#eaf8ff;text-shadow:0 0 30px rgba(94,231,255,.4);
}
.splash-litera{
  display:inline-block;font-style:normal;will-change:transform;
  transform-origin:50% 100%;                        /* rośnie od linii pisma */
}
.splash-przerwa{display:inline-block;width:.42em}

/* POWÓD wyjątku jak przy fali: smuga skanu jest dekoracją niewidoczną
   w spoczynku i przelatuje raz, w środku wejścia.

   Wąska, skośna i ROZMYTA — przy prostokątnej, mocnej wersji `screen`
   rozjaśniał całe ciemne tło pod napisem i smuga czytała się jak szary blok.
   Punkty wygaszenia mają jawnie zerowe krycie w TYM SAMYM kolorze: słowo
   `transparent` to przezroczysta CZERŃ, a droga przez nią daje szarą mgłę. */
.splash-skan{
  position:absolute;top:-10%;bottom:-10%;left:0;width:16%;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(226,252,255,0),rgba(226,252,255,.55),rgba(226,252,255,0));
  transform:skewX(-16deg);filter:blur(5px);mix-blend-mode:screen;
}

/* --- linia: rozjeżdża się od środka --- */
.splash-linia{width:min(60vw,280px);height:1px;margin-top:10px;overflow:hidden}
.splash-linia i{
  display:block;height:100%;
  background:linear-gradient(90deg,rgba(94,231,255,0),#5ee7ff,rgba(94,231,255,0));
  box-shadow:0 0 12px rgba(94,231,255,.8);
}

/* POWÓD: przejście na przezroczystości jest tu bezpieczne — krycie ustawia
   KOD wprost, przejście tylko wygładza. Gdyby nie ruszyło, wartość i tak
   wskakuje i ekran gaśnie natychmiast. */
.splash-zaslona{
  position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;
  transition:opacity .85s ease;
}

@media (prefers-reduced-motion:reduce){
  .splash-zaslona{transition:none}
  .splash-pyl{display:none}
}