/* ==========================================================================
   ROZRUCH — wrota z logo GL (od 5 pazdziernika 2026, rozruch.js;
   notatki/pierwsze-wrazenie.md „NOWY ROZRUCH”, wzor mockupy/mockup-rozruch4.html)
   Kolory: --rz-a = akcent uzytkownika (z localStorage, zanim apka wstanie).
   Os czasu: opoznienia --d1..--d3, --dk i czasy --t1..--t3 z rozruch.js
   (liczone z dlugosci odcinkow — stala predkosc swiatla). Wszystkie etapy
   to animacje CSS ruszajace razem z klasa .rz-start, wiec zajeta apka
   nie przesuwa rytmu. Klasy „rz-”.
   ========================================================================== */
#rozruch {
  --rz-a: #00f2ff;
  --rz-g: color-mix(in srgb, var(--rz-a) 58%, #0a0f1a);   /* G — ciemniejszy odcien */
  --rz-l: color-mix(in srgb, var(--rz-a) 75%, #fff);      /* L, przyciski, PRO */
  --rz-ciemny: #1a2028;                                    /* znak „wygrawerowany” */
  --rz-g-pol: color-mix(in srgb, var(--rz-g) 70%, var(--rz-ciemny)); /* rozjasniony w trakcie */
  --rz-l-pol: color-mix(in srgb, var(--rz-l) 62%, var(--rz-ciemny));
  --lw: clamp(250px, 50vmin, 440px);                       /* szerokosc logo */
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  background: #030303; /* = background_color z manifestu (ekran z ikona Androida) */
  font-family: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  color: #fff;
}
html.quick-start #rozruch,
#rozruch.rz-koniec { display: none; }

/* ---------- wrota ---------- */
.rz-w {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden; /* kazde skrzydlo pokazuje swoja polowke logo */
  background: linear-gradient(180deg, #0b0d10, #050607 60%, #0b0d10);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.rz-wl { left: 0; }
.rz-wp { right: 0; }
.rz-start .rz-w { opacity: 1; }

/* logo na srodku ekranu; w kazdym skrzydle ta sama grafika przesunieta tak,
   ze polowki skladaja sie w calosc dokladnie na szwie */
.rz-logo {
  position: absolute;
  top: 46%;
  width: var(--lw);
  height: calc(var(--lw) * 276 / 454);
  transform: translateY(-50%);
  overflow: visible;
}
.rz-wl .rz-logo { right: calc(var(--lw) / -2); }
.rz-wp .rz-logo { left: calc(var(--lw) / -2); }

/* ---------- znak ----------
   ciemny -> rozjasnia sie, gdy swiatlo obiega pad -> PRO zapala sie, gdy
   swiatlo przeplywa obok -> pelny blask w finale */
.rz-logo .rz-obrys { fill: none; stroke: var(--rz-ciemny); stroke-width: 16; }
.rz-logo .rz-gg,
.rz-logo .rz-ll,
.rz-logo .rz-pro,
.rz-logo .rz-btn { fill: var(--rz-ciemny); }
.rz-start .rz-logo .rz-gg { animation: rz-g-pol var(--t2) ease-in-out var(--d2) both; }
.rz-start .rz-logo .rz-ll { animation: rz-l-pol var(--t2) ease-in-out var(--d2) both; }
.rz-start .rz-logo .rz-pro { animation: rz-zapal 0.3s ease-out calc(var(--d3) + 0.05s) both; }
.rz-start .rz-logo .rz-b0 { animation: rz-zapal 0.2s ease-out var(--d1) both; }
.rz-start .rz-logo .rz-b1 { animation: rz-zapal 0.2s ease-out var(--d2) both; }
.rz-start .rz-logo .rz-b2 { animation: rz-zapal 0.2s ease-out var(--d3) both; }
.rz-start .rz-logo .rz-b3 { animation: rz-zapal 0.2s ease-out var(--dk) both; }
@keyframes rz-g-pol { from { fill: var(--rz-ciemny); } to { fill: var(--rz-g-pol); } }
@keyframes rz-l-pol { from { fill: var(--rz-ciemny); } to { fill: var(--rz-l-pol); } }
@keyframes rz-zapal { from { fill: var(--rz-ciemny); } to { fill: var(--rz-l); } }
/* final: pelny blask (nowa animacja — poprzednie trzymaja swoj stan „both”) */
.rz-fin .rz-logo .rz-gg { animation: rz-g-pelny 0.3s ease-out both; }
.rz-fin .rz-logo .rz-ll { animation: rz-l-pelny 0.3s ease-out both; }
@keyframes rz-g-pelny { from { fill: var(--rz-g-pol); } to { fill: var(--rz-g); } }
@keyframes rz-l-pelny { from { fill: var(--rz-l-pol); } to { fill: var(--rz-l); } }

/* aura za logo: rosnie razem z rozjasnianiem (sama przezroczystosc — tania);
   w kazdym skrzydle polowka, rozjezdza sie z wrotami */
.rz-aura {
  position: absolute;
  top: 46%;
  width: calc(var(--lw) * 1.5);
  height: calc(var(--lw) * 1.1);
  transform: translateY(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rz-a) 30%, transparent), transparent);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.rz-wl .rz-aura { right: calc(var(--lw) * -0.75); }
.rz-wp .rz-aura { left: calc(var(--lw) * -0.75); }
.rz-start .rz-aura { animation: rz-aura var(--t2) ease-in-out var(--d2) both; }
@keyframes rz-aura { from { opacity: 0; } to { opacity: 0.6; } }
.rz-fin .rz-aura { animation: rz-aura-pelna 0.3s ease-out both; }
@keyframes rz-aura-pelna { from { opacity: 0.6; } to { opacity: 1; } }
/* apka jeszcze pracuje: logo (aura) spokojnie pulsuje */
.rz-czeka .rz-aura { animation: rz-aura-puls 1.3s ease-in-out infinite; }
@keyframes rz-aura-puls { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* swiatlo obiegajace obrys (dwie polowki od gory do dolu). Poswiata to
   druga, szersza i polprzezroczysta linia (filtr przeliczany co klatke
   gubil klatki na telefonie). */
.rz-logo .rz-bieg,
.rz-logo .rz-bieg-h {
  fill: none;
  stroke-linejoin: miter;
  stroke-dasharray: 100 200;
  stroke-dashoffset: 101;
}
.rz-logo .rz-bieg { stroke: var(--rz-l); stroke-width: 8; }
.rz-logo .rz-bieg-h { stroke: var(--rz-a); stroke-width: 26; opacity: 0.22; }
.rz-start .rz-logo .rz-bieg,
.rz-start .rz-logo .rz-bieg-h { animation: rz-obieg var(--t2) linear var(--d2) both; }
@keyframes rz-obieg { from { stroke-dashoffset: 101; } to { stroke-dashoffset: 0; } }

/* ---------- swiatlo w szwie ----------
   Pojemnik trzyma maske z przerwami (stoi w miejscu), w srodku pas 44 px
   z kreska i poswiata rosnie przez transform (karta graficzna, plynnie). */
.rz-szew {
  position: absolute;
  left: 50%;
  width: 44px;
  margin-left: -22px;
  pointer-events: none;
  z-index: 2;
  -webkit-mask: var(--m, none);
  mask: var(--m, none);
}
.rz-szew > i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--rz-a) 10%, transparent) 30%,
    color-mix(in srgb, var(--rz-a) 45%, transparent) 46%,
    var(--rz-a) 48.5%, #fff 50%, var(--rz-a) 51.5%,
    color-mix(in srgb, var(--rz-a) 45%, transparent) 54%,
    color-mix(in srgb, var(--rz-a) 10%, transparent) 70%, transparent);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}
.rz-start #rz-gora > i { animation: rz-rosnij var(--t1) linear var(--d1) both; }
.rz-start #rz-dol > i { animation: rz-rosnij var(--t3) linear var(--d3) both; }
@keyframes rz-rosnij { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.rz-czeka .rz-szew { animation: rz-puls 1.3s ease-in-out infinite; }
@keyframes rz-puls { 50% { opacity: 0.5; } }

/* blysk w finale: od dolu do gory, przez te same przerwy */
.rz-tor {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 44px;
  margin-left: -22px;
  z-index: 3;
  pointer-events: none;
  -webkit-mask: var(--m, none);
  mask: var(--m, none);
}
.rz-strzal {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30vmin;
  opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rz-a) 35%, transparent) 40%, #fff 50%, color-mix(in srgb, var(--rz-a) 35%, transparent) 60%, transparent);
  -webkit-mask: linear-gradient(180deg, #000, #000 30%, transparent);
  mask: linear-gradient(180deg, #000, #000 30%, transparent);
}
.rz-fin .rz-strzal { animation: rz-strzal 0.42s cubic-bezier(0.5, 0, 0.9, 0.4) forwards; }
@keyframes rz-strzal { 0% { opacity: 1; transform: translateY(110vh); } 100% { opacity: 1; transform: translateY(-35vh); } }

/* ---------- powitanie ---------- */
.rz-hej {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(46% + var(--lw) * 138 / 454 + 22px);
  z-index: 4;
  text-align: center;
  font-size: clamp(12px, 1.4vmin + 6px, 16px);
  letter-spacing: 0.04em;
  color: #aab3ba;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s;
}
.rz-hej b { color: #fff; }
.rz-hej i { font-style: normal; font-weight: 700; color: var(--rz-l); }
.rz-start .rz-hej { opacity: 1; transform: none; }

/* ---------- wejscie do apki: wrota sie rozsuwaja ---------- */
.rz-wyjscie { background: transparent; }
.rz-wyjscie .rz-szew,
.rz-wyjscie .rz-hej,
.rz-wyjscie .rz-tor { opacity: 0; transition: opacity 0.2s ease; animation: none; }
.rz-wyjscie .rz-wl { transform: translateX(-101%); transition: transform 0.75s cubic-bezier(0.7, 0, 0.2, 1) 0.1s; }
.rz-wyjscie .rz-wp { transform: translateX(101%); transition: transform 0.75s cubic-bezier(0.7, 0, 0.2, 1) 0.1s; }

/* ---------- start z powiadomienia: cichy ekran jak systemowy ---------- */
.rz-cichy .rz-w,
.rz-cichy .rz-szew,
.rz-cichy .rz-tor,
.rz-cichy .rz-hej { display: none; }
.rz-znak {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(120px, 34vmin, 220px);
  transform: translate(-50%, -50%);
  display: none;
}
.rz-cichy .rz-znak { display: block; }
.rz-cichy.rz-wyjscie { opacity: 0; transition: opacity 0.25s ease; }

/* bez animacji (ustawienie systemu): od razu stan koncowy, samo przenikanie */
@media (prefers-reduced-motion: reduce) {
  #rozruch *, #rozruch { transition-duration: 0.01s !important; animation-duration: 0.01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .rz-wyjscie { opacity: 0; }
  .rz-wyjscie .rz-wl, .rz-wyjscie .rz-wp { transform: none; }
}