/*
  Ekran ladowania czytnika.

  Kolory sa te same, co tokeny aplikacji (`AppTheme`): `#FCFAF6` / `#15130F` jako tlo,
  `#F29400` jako pasek postepu - pomarancz kielicha z logo wydawcy. Dzieki temu moment,
  w ktorym Flutter przejmuje ekran, nie jest bialym mignieciem.
*/

:root {
  color-scheme: light dark;
  --ck-tlo: #FCFAF6;
  --ck-tekst: #1D1B17;
  --ck-tekst-drugi: #4E4639;
  --ck-tor: #E7E1D7;
  --ck-marka: #F29400;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ck-tlo: #15130F;
    --ck-tekst: #E9E2D8;
    --ck-tekst-drugi: #D3C9BA;
    --ck-tor: #37342F;
  }
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--ck-tlo);
}

#ck-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--ck-tlo);
  color: var(--ck-tekst);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  transition: opacity 300ms ease;
}

#ck-loader.ck-loader-hidden {
  opacity: 0;
  pointer-events: none;
}

#ck-loader img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.ck-loader-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ck-loader-track {
  width: 168px;
  height: 4px;
  border-radius: 999px;
  background: var(--ck-tor);
  overflow: hidden;
}

.ck-loader-bar {
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: var(--ck-marka);
  animation: ck-przesuw 1.4s ease-in-out infinite;
}

.ck-loader-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ck-tekst-drugi);
}

#ck-runtime-retry {
  border: 0;
  border-radius: 6px;
  padding: 9px 14px;
  background: var(--ck-marka);
  color: #1D1B17;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@keyframes ck-przesuw {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/*
  Ruch jest wygoda, a nie trescia: przy systemowym ograniczeniu animacji pasek stoi pelny
  zamiast biegac. Czytelnik z nadwrazliwoscia przedsionkowa nie musi placic za to, ze pakiet
  jest duzy.
*/
@media (prefers-reduced-motion: reduce) {
  .ck-loader-bar {
    animation: none;
    width: 100%;
  }
  #ck-loader {
    transition: none;
  }
}