/* The page loader: generated from src/common/frontend/loader/loader.html by `make sync-loader`; edit the canonical copy, not this one. */
/* The brand mark in the stripe's five colours, on the login's dark slab.
   Written here inline; each portal gets it as loader.css (loader-parts.mjs). */
#yotta-loader {
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  background: #231a15;
  transition: opacity 0.32s ease 0.08s;
}
#yotta-loader .yl-mark {
  position: relative; width: 104px; height: 104px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#yotta-loader .yl-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: yotta-loader-spin 1.2s linear infinite;
}
#yotta-loader .yl-ring circle {
  fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 16 84;
}
#yotta-loader .yl-ghost { width: 44px; height: 44px; }
#yotta-loader.yl-done { opacity: 0; pointer-events: none; }
#yotta-loader.yl-done .yl-mark { opacity: 0; transform: scale(0.92); }
@keyframes yotta-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #yotta-loader .yl-ring { animation: none; }
  #yotta-loader, #yotta-loader .yl-mark { transition-duration: 0.12s; transition-delay: 0s; }
}