/* Wejście do portalu klienta (23.10.2026, prośba właściciela): zanim pojawi się logowanie, złoty lew DKTE „loguje” stronę.
   Kolejność: granatowe tło → okrągła odznaka → kontur lwa rysuje się złotą linią → lew wypełnia się złotem jak pasek
   ładowania, pierścień dookoła pokazuje postęp, od odznaki rozchodzą się fale → błysk, „Połączono” → odznaka przechodzi
   w logo formularza (wejscie.js). Ta część to czysty CSS – rusza od pierwszej klatki, zanim dojdą skrypty.
   Kolory DKTE: granat #02377A, złoto #B98F48. Odznaka ma tło jak ikona aplikacji (klient-app/ikony/ikona-192.png),
   a lew zajmuje w niej tyle samo miejsca (52,6 % szerokości), więc na końcu przechodzi w logo bez skoku.
   Gdy wejscie.js się nie wczyta, animacja chowa się sama po 6 s (wj-awaria). Warstwa ma w HTML atrybut hidden i pokazuje
   ją dopiero ten plik – bez niego (np. brak internetu przy pierwszym wejściu) strona działa jak dawniej, bez animacji. */
@property --wj-p { syntax: '<number>'; inherits: true; initial-value: 0; } /* postęp 0–1: pierścień, wypełnienie lwa, kropka */

#wejscie[hidden] { display: grid !important }
#wejscie { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; color: #fff; touch-action: none;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-tap-highlight-color: transparent; cursor: progress;
  animation: wj-awaria .45s ease-out 6s forwards }
#wejscie.wj-js { animation: none }
@keyframes wj-awaria { to { opacity: 0; visibility: hidden } }

/* tło: granat z jaśniejszym środkiem i delikatną siatką kropek przy odznace */
.wj-tlo { position: absolute; inset: 0; background: radial-gradient(130% 95% at 50% 38%, #063f8a 0%, #02316e 34%, #01214d 68%, #01142f 100%) }
.wj-tlo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(closest-side at 50% 44%, #000, transparent); mask-image: radial-gradient(closest-side at 50% 44%, #000, transparent);
  animation: wj-pojaw 1.2s ease-out both }

.wj-scena { position: relative; display: flex; flex-direction: column; align-items: center; transform: translateY(-3vh) }
.wj-emblemat { position: relative; width: clamp(168px, 46vmin, 208px); aspect-ratio: 1;
  animation: wj-postep 1.05s cubic-bezier(.4, 0, .2, 1) .35s both, wj-czekaj 7s cubic-bezier(.1, .6, .3, 1) 1.4s forwards }
.wj-emblemat > * { position: absolute }
@keyframes wj-postep { from { --wj-p: 0 } to { --wj-p: .86 } }
@keyframes wj-czekaj { from { --wj-p: .86 } to { --wj-p: .97 } } /* wolne łącze: powoli dalej, ale nie do końca */

/* fale „łączenia” od odznaki */
.wj-fale { inset: 6% }
.wj-fale i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(214, 176, 106, .5); opacity: 0;
  animation: wj-fala 2.4s cubic-bezier(.2, .6, .3, 1) .55s infinite }
.wj-fale i + i { animation-delay: 1.75s }
@keyframes wj-fala { from { opacity: .6; transform: scale(1) } to { opacity: 0; transform: scale(1.85) } }

.wj-poswiata { inset: -22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 170, 92, .34), rgba(214, 170, 92, .1) 55%, transparent);
  animation: wj-oddech 2.6s ease-in-out .3s infinite alternate both }
@keyframes wj-oddech { from { opacity: .3; transform: scale(.94) } to { opacity: .8; transform: scale(1.04) } }

/* pierścień postępu z jasną „głowicą” */
.wj-pierscien { inset: 0; width: 100%; height: 100%; overflow: visible; animation: wj-pojaw .6s ease-out .1s both }
.wj-tor { fill: none; stroke: rgba(214, 176, 106, .2); stroke-width: 1.5 }
.wj-luk { fill: none; stroke: url(#wj-luk-g); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100;
  stroke-dashoffset: calc(100px - var(--wj-p) * 100px); transform: rotate(-90deg); transform-origin: 100px 100px; transition: stroke-width .3s ease-out }
.wj-glowica { transform: rotate(calc(var(--wj-p) * 360deg)); transform-origin: 100px 100px; transition: opacity .3s ease-out }
.wj-glowica circle { fill: #FFF3D6 }
.wj-glowica .wj-glowica-blask { fill: rgba(255, 222, 150, .32) }
.wj-impuls { fill: none; stroke: #EBCB8B; stroke-width: 2; opacity: 0; transform-origin: 100px 100px }

/* odznaka: koło w kolorach ikony aplikacji, na końcu staje się logo formularza */
.wj-dysk { inset: 6%; border-radius: 50%; background: linear-gradient(135deg, #0d4c99 0%, #0a4185 48%, #02295c 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 18px 30px -18px rgba(255, 255, 255, .16);
  animation: wj-dysk .7s cubic-bezier(.2, .7, .2, 1) both }
@keyframes wj-dysk { from { opacity: 0; transform: scale(.84) } }

/* lew: cień kształtu → złota linia konturu → złoto wypełnia od dołu (z jasnym „poziomem”) → odblask */
.wj-lew { inset: 0; margin: auto; width: 46.3%; height: 56.5%; overflow: visible; filter: drop-shadow(0 0 7px rgba(226, 186, 110, .38));
  animation: wj-lew .8s cubic-bezier(.2, .7, .2, 1) .05s both }
@keyframes wj-lew { from { opacity: 0; transform: scale(.9) } }
.wj-cien { fill: rgba(214, 176, 106, .15) }
.wj-wypelnienie { transform: translateY(calc(1060px - var(--wj-p) * 1100px)) } /* px = jednostki rysunku lwa (wysokość 1000) */
.wj-blysk { transform-box: fill-box; transform-origin: center; transform: rotate(18deg) }
.wj-obrysy { transition: opacity .6s ease-out }
.wj-obrysy use { fill: none; stroke: #EFD093; stroke-width: 11px; stroke-linejoin: round; stroke-dasharray: 1px 2px; stroke-dashoffset: 1px;
  animation: wj-rysuj .95s cubic-bezier(.45, 0, .2, 1) .12s forwards }
.wj-obrysy use:nth-child(2) { animation-delay: .2s }
.wj-obrysy use:nth-child(3) { animation-delay: .3s }
.wj-obrysy use:nth-child(4) { animation-delay: .36s }
.wj-obrysy use:nth-child(5) { animation-delay: .5s; animation-duration: .6s }
@keyframes wj-rysuj { to { stroke-dashoffset: 0px } }

/* napis i stan */
.wj-napis { margin-top: 30px; display: flex; gap: .55em; font: 800 21px/1 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .34em; padding-left: .34em;
  animation: wj-napis .9s cubic-bezier(.2, .7, .2, 1) .3s both }
.wj-napis b { font-weight: 800; color: #fff }
.wj-napis span { color: #D2AA62 }
@keyframes wj-napis { from { opacity: 0; letter-spacing: .62em; transform: translateY(8px) } }
.wj-stan { position: relative; margin-top: 16px; height: 18px; font: 600 11.5px/18px 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .64); white-space: nowrap; animation: wj-pojaw .6s ease-out .55s both }
.wj-stan > span { display: inline-flex; align-items: center; gap: 8px; transition: opacity .3s ease-out, transform .3s ease-out }
.wj-stan svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.wj-stan i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin-left: -5px; animation: wj-kropka 1.2s ease-in-out infinite both }
.wj-stan i + i { margin-left: -4px; animation-delay: .2s }
.wj-stan i + i + i { animation-delay: .4s }
@keyframes wj-kropka { 0%, 100% { opacity: .2 } 40% { opacity: 1 } }
.wj-stan .wj-stan-b { position: absolute; left: 50%; top: 0; color: #E8C887; opacity: 0; transform: translate(-50%, 7px) }
@keyframes wj-pojaw { from { opacity: 0 } }

/* błysk po dojściu do 100 % (klasę dodaje wejscie.js) */
.wj-gotowe .wj-luk { stroke-width: 3.6 }
.wj-gotowe .wj-glowica, .wj-gotowe .wj-obrysy { opacity: 0 }
.wj-gotowe .wj-fale { opacity: 0; transition: opacity .3s ease-out }
.wj-gotowe .wj-stan-a { opacity: 0; transform: translateY(-7px) }
.wj-gotowe .wj-stan .wj-stan-b { opacity: 1; transform: translate(-50%, 0) }

/* ── kółeczka po kliknięciu „Zaloguj się” (wejscie.js): kółko w przycisku, potem karta „Ładowanie danych…” ── */
.wj-czeka .btn, .wj-czeka .btn:disabled { opacity: 1; cursor: progress; display: inline-flex; align-items: center; justify-content: center; gap: 10px }
.wj-krecik { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: wj-krec .7s linear infinite }
@keyframes wj-krec { to { transform: rotate(360deg) } }
.wj-ladowanie { position: absolute; z-index: 45; margin: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center }
.wj-ladowanie b { margin-top: 18px; font: 700 17px var(--sans); color: var(--fg) }
.wj-ladowanie span { font: 500 14px var(--sans); color: var(--muted) }
/* klasyczne „kręcące się kółeczka”: 12 kropek, najjaśniejsza obiega koło skokami */
.wj-kolo { position: relative; width: 60px; height: 60px; color: var(--dkte, #02377A); animation: wj-krec 1s steps(12) infinite }
.wj-kolo i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: currentColor;
  opacity: var(--o); transform: rotate(var(--a)) translateY(-24px) scale(var(--s)) }

/* ── logowanie w panelu „/” (index.html) w tym samym stylu co portal klienta (klient.css .logowanie-k) ── */
.pB .logowanie { max-width: 420px; margin: 8vh auto 0; display: grid; gap: 10px; padding: 18px } /* panel-b.css daje dawnemu formularzowi bez karty padding 0 16px – logo dotykało krawędzi */
.pB .logowanie img { border-radius: 16px }
.pB .logowanie h1 { margin: 2px 0 6px }
.pB .logowanie label { font: 600 13px var(--sans); color: var(--muted) }
.pB .logowanie input { font: 400 16px var(--sans); padding: 12px 14px; border-radius: 12px; min-width: 0 } /* 16 px: iPhone nie powiększa strony */
.pB .logowanie .btn { background: #02377A; margin-top: 6px; padding: 13px 18px; font-size: 16px }
.pB .logowanie .komunikat { color: var(--zle); font-weight: 600 }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) .pB .logowanie .btn { background: #2F63C7 } }
:root[data-motyw="ciemny"] .pB .logowanie .btn { background: #2F63C7 }

/* „Ogranicz ruch” w systemie: lew od razu złoty, bez rysowania, fal i kropek; wejscie.js robi samo przenikanie */
@media (prefers-reduced-motion: reduce) {
  .wj-emblemat { animation: none; --wj-p: 1 }
  .wj-obrysy, .wj-fale, .wj-glowica { display: none }
  .wj-tlo::after, .wj-pierscien, .wj-dysk, .wj-lew, .wj-napis, .wj-stan, .wj-stan i, .wj-poswiata { animation: none }
  .wj-poswiata { opacity: .5 }
}