/*
 * DT Edge loading splash
 *
 * Shared by two consumers so the loading visual is identical from the first
 * paint through to a rendered page:
 *   1. The static markup inside #root in index.html (shown while the JS
 *      bundle downloads and while initCspNonce() resolves).
 *   2. The React <LoadingScreen> component (Suspense fallbacks and the
 *      admin portal auth check).
 *
 * WHY PLAIN CSS IN public/: Tailwind's stylesheet is injected by the JS
 * bundle, so no Tailwind class works at first paint. A stylesheet served
 * from the same origin also satisfies both the enforced CSP
 * (style-src 'self' 'unsafe-inline') and the nonce-only Report-Only policy
 * that inline <style> and style="" attributes would violate.
 *
 * CACHE BUSTING: nginx serves *.css with `expires 1y; Cache-Control:
 * immutable` and this filename carries no content hash, so the <link> in
 * index.html uses a ?v=N query. Bump that N when editing this file.
 *
 * COLORS: hard-coded mirrors of the @theme tokens in src/styles/globals.css
 * — primary #EB2427, foreground #002434, muted-foreground #58595B — because
 * those custom properties do not exist yet at first paint. Keep in sync.
 */

.dt-splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.5rem;
  background-color: #f6f7f8;
  background-image:
    radial-gradient(48rem 26rem at 50% -6%, #ffffff 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(36rem 22rem at 50% 116%, rgba(0, 36, 52, 0.07) 0%, rgba(0, 36, 52, 0) 70%);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #002434;
  -webkit-font-smoothing: antialiased;
  /* Delayed fade-in: a cached load that paints in <120ms never flashes. */
  animation: dt-splash-in 0.25s ease-out 0.12s both;
}

.dt-splash-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 21rem;
  padding: 2rem 2rem 1.75rem;
  border: 1px solid #e6e8ea;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(0, 36, 52, 0.04),
    0 14px 34px -14px rgba(0, 36, 52, 0.2);
  text-align: center;
}

/* The wordmark already carries the red DiversiTech chevron, so it is the
   only brand mark the panel needs. */
.dt-splash-logo {
  display: block;
  width: 11rem;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.dt-splash-title {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #002434;
}

.dt-splash-track {
  position: relative;
  overflow: hidden;
  height: 4px;
  margin: 1.25rem 0 0;
  border-radius: 999px;
  background: #e9ebec;
}

.dt-splash-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(235, 36, 39, 0) 0%,
    #eb2427 30%,
    #eb2427 70%,
    rgba(235, 36, 39, 0) 100%
  );
  animation: dt-splash-sweep 1.25s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

.dt-splash-hint {
  margin: 0.875rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #58595b;
}

@keyframes dt-splash-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dt-splash-sweep {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(260%);
  }
}

/* WCAG 2.3.3 — replace the sweep with a static bar rather than letting the
   global `animation-duration: 0.01ms` reset park it off-screen. */
@media (prefers-reduced-motion: reduce) {
  .dt-splash {
    animation: none;
  }

  .dt-splash-bar {
    width: 100%;
    background: #eb2427;
    opacity: 0.7;
    animation: none;
  }
}