#app-site {
  display: flex;
  width: 100%;
  height: 100vh;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  /* Bílé pozadí — ne transparentní. Jinak při schování/překrytí OIDC loaderem
     prosvítá prázdný #root a uživatel vidí bílý flash (RHP-1917). */
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  /* LAYER_OVERLAY ze stupnice (configs/layers.js) — tady číslo, layers.less ještě není načtený. */
  z-index: 9000;
}

/*
 * Brand loader pro HTML splash (RHP-5096) — musí sedět s
 * src/components/ui/loader-ui/style.css, ať mezi splash a Reactem nic neblikne.
 */
.loader-ui {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.loader-ui-ring {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3.5px solid rgba(58, 138, 58, 0.14);
  border-top-color: #3a8a3a;
  border-right-color: rgba(58, 138, 58, 0.55);
  animation: loader-ui-spin 0.75s linear infinite;
}

.loader-ui-core {
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: rgba(58, 138, 58, 0.12);
  animation: loader-ui-pulse 1.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes loader-ui-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loader-ui-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader-ui-ring {
    animation: none;
    border-top-color: #3a8a3a;
    border-right-color: rgba(58, 138, 58, 0.35);
    border-bottom-color: rgba(58, 138, 58, 0.18);
    opacity: 0.9;
  }

  .loader-ui-core {
    animation: none;
    opacity: 0.7;
  }
}

/*
 * Pípačka (RHP-3224): místo spinneru rovnou pozadí uvítací obrazovky —
 * krajina s vycházejícím sluncem. React na ni v prvním snímku dokreslí pozdrav,
 * takže start nikde neskočí zpátky na začátek animace.
 *
 * Atribut na <html> doplňuje build (`vite.config.mjs`, plugin app-flavor-attribute).
 * Pozadí musí zůstat stejné jako v `src/shared/pipackaWelcome/pipackaWelcome.css`;
 * tenhle soubor se načítá dřív než bundle, proto je napsané dvakrát.
 */
html[data-app-flavor="pipacka"] .loader {
  background-color: #0b1526;
  background-image:
    linear-gradient(
      180deg,
      rgba(4, 10, 22, 0.34) 0%,
      rgba(4, 10, 22, 0.14) 45%,
      rgba(4, 10, 22, 0.12) 72%,
      rgba(4, 10, 22, 0.3) 100%
    ),
    url('/images/pipacka/welcome-sunrise.svg');
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}

html[data-app-flavor="pipacka"] .loader .loader-ui {
  display: none;
}