/*
  Initial loader — shown before the JS bundle boots.

  Deliberately logo-less: a logo has to be re-cut for every project and shifts
  the layout the moment the real app mounts. Four bars whose heights oscillate
  read as "working" at a glance and stay visible on a large screen, which a
  small spinner or a row of tiny dots does not.

  Colours come from --initial-loader-bg / --initial-loader-color, which are set
  in index.html from the active brand preset (see build/initialLoaderTheme.ts).
*/

body {
  margin: 0;
}

html {
  overflow: hidden scroll;
}

#loading-bg {
  position: fixed;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg, #fff);
  inset: 0;
}

.loading {
  /* Fixed height so the bars grow about a stable centre line rather than
     nudging each other as their heights animate. */
  display: flex;
  align-items: center;
  block-size: 72px;
  gap: 10px;
}

.loading .effects {
  border-radius: 5px;
  animation: loader-eq 1s ease-in-out infinite;
  background: var(--initial-loader-color, #64748b);
  inline-size: 10px;
  will-change: block-size;
}

/* Offsets are not evenly spaced on purpose — an even stagger reads as a
   mechanical sweep, while an irregular one looks alive. */
.loading .effects:nth-child(1) {
  animation-delay: -0.4s;
}

.loading .effects:nth-child(2) {
  animation-delay: -0.2s;
}

.loading .effects:nth-child(3) {
  animation-delay: -0.3s;
}

.loading .effects:nth-child(4) {
  animation-delay: -0.1s;
}

@keyframes loader-eq {
  0%,
  100% {
    block-size: 22px;
    opacity: 0.4;
  }

  50% {
    block-size: 68px;
    opacity: 1;
  }
}

/* Respect users who ask for reduced motion — fade in place, no size change. */
@media (prefers-reduced-motion: reduce) {
  .loading .effects {
    animation: loader-fade 1.6s ease-in-out infinite;
    block-size: 46px;
  }

  @keyframes loader-fade {
    0%,
    100% {
      opacity: 0.35;
    }

    50% {
      opacity: 1;
    }
  }
}