/* ==========================================================================
 * BEA Platform — initial application loader
 *
 * Shown by index.html before Angular boots, so it cannot use the SCSS theme:
 * the two brand colours are repeated here as literals and must be kept in step
 * with content/scss/_bootstrap-variables.scss ($primary / $secondary).
 *
 * Deliberately mirrors the sign-in card in app/home/home.scss — same circular
 * logo mark, same royal blue, same mustard accent — so the first frame the user
 * sees and the login screen that replaces it look like one screen, not two.
 * ========================================================================== */

:root {
  --bea-primary: #00539c; /* royal blue   — $bea-blue */
  --bea-secondary: #e1ad01; /* gold         — $bea-gold */
  --bea-ink: #0f172a; /* $bea-ink */
  --bea-muted: #64748b; /* $bea-ink-muted */
}

.app-loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: radial-gradient(ellipse at 50% 35%, rgba(0, 83, 156, 0.06) 0%, transparent 60%), #fff;
  color: var(--bea-ink);
  /* The webfont is not loaded yet at this point, so this is the same fallback stack the
     application falls back to — see $bea-font-sans. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  z-index: 9999;
}

/* --- the mark, with a ring turning around it ----------------------------- */

.bea-loader {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
 * The square "A" mark, not the wordmark: bea-icon-2.png is 1.88:1 and draws "Be" in white, so
 * inside this circle it rendered as a small mustard "A" pushed to the right with a blank left half.
 * bea-icon-192.png is the mark cropped square, which centres and fills.
 */
.bea-loader-mark {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff url('../images/bea-icon-192.png') no-repeat center center;
  background-size: 42px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  animation: bea-breathe 2.4s ease-in-out infinite;
}

/* A single arc: transparent on three sides, so rotating it reads as a sweep. */
.bea-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(0, 83, 156, 0.12);
  border-top-color: var(--bea-primary);
  border-right-color: var(--bea-secondary);
  animation: bea-spin 1.1s linear infinite;
}

@keyframes bea-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bea-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

/* --- wordmark and caption ------------------------------------------------ */

/* The real wordmark, in the variant whose "Be" is brand blue rather than white. */
.bea-loader-brand {
  margin-top: 1.25rem;
  width: 168px;
  height: 90px;
  background: url('../images/bea-logo-on-light.png') no-repeat center center;
  background-size: contain;
}

.app-loading p {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  color: var(--bea-muted);
}

/* --- the failure notice, hidden until index.html reveals it -------------- */

#bea-error {
  max-width: 40rem;
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 4px solid var(--bea-secondary);
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px rgba(0, 83, 156, 0.12);
  text-align: start;
  color: var(--bea-ink);
}

#bea-error h1 {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
  color: var(--bea-primary);
}

#bea-error h2 {
  font-size: 0.95rem;
  margin: 1rem 0 0.35rem;
}

#bea-error ol {
  margin: 0;
  padding-inline-start: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

#bea-error code {
  background: rgba(0, 83, 156, 0.08);
  border-radius: 0.2rem;
  padding: 0.05rem 0.3rem;
}

/* Motion is decorative here — the caption already says what is happening. */
@media (prefers-reduced-motion: reduce) {
  .bea-loader-ring,
  .bea-loader-mark {
    animation: none;
  }
  .bea-loader-ring {
    border-color: rgba(0, 83, 156, 0.25);
    border-top-color: var(--bea-primary);
  }
}