/* stylelint-disable -- not a CSS module and loaded before tokens.css exists: plain classes and the brand's own values. */
/*
 * The first paint, before the app's code arrives (index.html): the brand loader (src/shared/ui/BrandLoader) in plain
 * CSS, as the CSP allows no inline styles. It fades in after 300 ms, so a fast start never shows it, and stays until
 * the app paints into #root, whose full-page loader looks the same. Colours are the brand kit's (tokens.css holds the
 * same values).
 */

/* Only until the app paints: its own reset and base styles take over then. */
body:has(> #root:empty) {
  margin: 0;
  background: #f4f6f9;
}

#root:not(:empty) + .boot {
  display: none;
}

.boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  min-height: 100vh;
  min-height: 100dvh;
  animation: boot-appear 240ms ease-out 300ms both;
}

.boot-stage {
  position: relative;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
}

.boot-ripple {
  position: absolute;
  inset: 0;
  border: 2px solid rgb(47 107 255 / 45%);
  border-radius: 14px;
  opacity: 0;
  animation: boot-ripple 2.4s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

.boot-ripple-late {
  animation-delay: 1.2s;
}

.boot-float {
  position: relative;
  animation: boot-float 2.4s ease-in-out infinite;
}

.boot-tile {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: 14px;
}

.boot-shadow {
  position: absolute;
  bottom: -18px;
  left: 50%;
  width: 40px;
  height: 7px;
  margin-left: -20px;
  border-radius: 50%;
  background: rgb(8 26 49 / 22%);
  filter: blur(3px);
  animation: boot-shadow 2.4s ease-in-out infinite;
}

.boot-track {
  width: 148px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8efff;
}

.boot-bar {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8efff, #2f6bff 45%, #f5b942);
  box-shadow: 4px 0 10px rgb(245 185 66 / 65%);
  animation: boot-run 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.boot-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes boot-appear {
  from {
    opacity: 0;
  }
}

@keyframes boot-ripple {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(2.1);
  }
}

@keyframes boot-float {
  50% {
    transform: translateY(-6px);
  }
}

@keyframes boot-shadow {
  50% {
    opacity: 0.55;
    transform: scaleX(0.72);
  }
}

@keyframes boot-run {
  from {
    transform: translateX(-110%);
  }

  to {
    transform: translateX(240%);
  }
}

/* Still, though it still fades in after 300 ms: a fade is no motion, and without it a fast start would flash. */
@media (prefers-reduced-motion: reduce) {
  .boot-float,
  .boot-shadow,
  .boot-bar {
    animation: none;
  }

  .boot-ripple {
    display: none;
  }

  .boot-bar {
    width: 100%;
  }
}