/*
 * CEFI loading screen: a rotating gold ring around the logo, with a title and
 * a short line underneath. Used by the page-load splash in index.html (before
 * React starts) and by src/components/PageLoader.jsx, so the two look the same.
 *
 * This is a linked stylesheet on purpose: the Content-Security-Policy forbids
 * inline styles.
 */
.cefi-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: 60vh;
  padding: 2rem 1rem;
  text-align: center;
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  /* Fade in after a beat, so a load that finishes instantly never flashes. */
  animation: cefi-loader-in 0.25s ease 0.15s both;
}

/* The first paint, before any script has run: show it immediately. */
.cefi-loader--instant { animation: none; }

.cefi-loader--full {
  position: fixed;
  inset: 0;
  z-index: 100;
  min-height: 100vh;
  background: #FBF9F5;
}

.cefi-loader__ring {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  border: 3px solid rgba(27, 67, 50, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The moving arc. Sits on top of the faint track and spins around it. */
.cefi-loader__ring::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #C9971C;
  border-right-color: #E0B33A;
  animation: cefi-loader-spin 1.1s linear infinite;
}

.cefi-loader__logo {
  width: 104px;
  height: 104px;
  object-fit: contain;
  border-radius: 50%;
}

/* Same font as the rest of the site: DM Sans, bold for headings. */
.cefi-loader__title {
  margin: 0;
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #2D251E;
}

.cefi-loader__hint {
  margin: 0.375rem 0 0;
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: #665B54;
}

@keyframes cefi-loader-spin { to { transform: rotate(360deg); } }
@keyframes cefi-loader-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .cefi-loader__ring::before { animation-duration: 3.5s; }
  .cefi-loader { animation-duration: 0.01s; }
}

@media (max-width: 480px) {
  .cefi-loader__ring { width: 144px; height: 144px; }
  .cefi-loader__logo { width: 88px; height: 88px; }
}