/*
 * The pre-boot loading screen — the first thing a visitor sees on a cold load, before Angular has
 * parsed a single byte of the bundle.
 *
 * Replaces generator-jhipster's "pacman" animation, which was a JHipster-shaped mouth eating
 * JHipster logos. That is the framework's branding on the one screen where a visitor has nothing
 * else to look at.
 *
 * Navy ground, matching --ink on the launch page and the theme-color in index.html, so a hard
 * refresh goes navy → navy instead of flashing white first.
 */

.app-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: #06172b;
}

.app-loading .brand-loader {
  width: 88px;
  height: 88px;
  background: url('/content/images/abofonsa-brand.png') no-repeat center center;
  background-size: contain;
  animation: abf-loading-pulse 1.8s ease-in-out infinite;
}

.app-loading .brand-loader-label {
  margin-top: 18px;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Arial,
    sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* --sky from the launch palette: legible on navy without competing with the badge. */
  color: #abc8f8;
}

@keyframes abf-loading-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/*
 * A visitor who has asked for reduced motion still needs to see that something is happening, so the
 * badge stays fully visible rather than animating. Removing the animation without pinning opacity
 * would leave it stuck at the keyframe's 0.55.
 */
@media (prefers-reduced-motion: reduce) {
  .app-loading .brand-loader {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* The troubleshooting panel below the loader, shown only if boot takes more than 4 seconds. */
.app-loading #jhipster-error {
  max-width: 780px;
  margin: 28px auto 0;
  padding: 0 24px;
  color: #c6d6ec;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Arial,
    sans-serif;
  overflow-y: auto;
  max-height: 60vh;
}

.app-loading #jhipster-error h1,
.app-loading #jhipster-error h2,
.app-loading #jhipster-error h3 {
  color: #f4f7fb;
}

.app-loading #jhipster-error a {
  color: #c59437;
}