body {
  margin: 0;
}

html {
  overflow: hidden scroll;
}

#loading-bg {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg, #fff);
  block-size: 100%;
  gap: 1.25rem 0;
  inline-size: 100%;
}

/* Logo with concentric wave rings radiating from its center, sitting behind
   the mark. The waves are stroked (not filled) circles that scale up while
   fading out, in the brand/primary color (--initial-loader-color). Rings keep
   the animation clearly behind/around the logo instead of a filled disc that
   would bleed through the logo's transparent areas. */
.loading-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.loading-logo img {
  position: relative;
  z-index: 1;
}

.loading-logo .wave {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 0;
  border: 2px solid var(--initial-loader-color, #64afcc);
  border-radius: 50%;
  background: transparent;
  block-size: 56px;
  inline-size: 56px;
  margin-block-start: -28px;
  margin-inline-start: -28px;
  opacity: 0;
  animation: wave-pulse 2.4s ease-out infinite;
}

.loading-logo .wave-2 {
  animation-delay: 0.8s;
}

.loading-logo .wave-3 {
  animation-delay: 1.6s;
}

@keyframes wave-pulse {
  0% {
    opacity: 0.45;
    transform: scale(0.25);
  }

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

/* Word revealed letter by letter, looping. Each letter is its own span and
   starts hidden until its staggered delay (--i) brings it in. */
.loading-text {
  display: inline-flex;
  color: var(--initial-loader-color, #64afcc);
  font-family: system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.18em;
}

.loading-text span {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  animation: letter-appear 2.8s ease infinite;
  animation-delay: calc(var(--i, 0) * 0.09s);
}

@keyframes letter-appear {
  0% {
    opacity: 0;
    transform: translateY(0.4em);
  }

  12% {
    opacity: 1;
    transform: translateY(0);
  }

  72% {
    opacity: 1;
    transform: translateY(0);
  }

  88% {
    opacity: 0;
    transform: translateY(-0.3em);
  }

  100% {
    opacity: 0;
    transform: translateY(0.4em);
  }
}