/* PWA splash / loader screen — linked directly in index.html so it paints
 * as soon as the stylesheet loads, before the JS bundle boots.
 * `body.app-loaded` is added by lib/splash.ts once the app is ready.
 *
 * Design: branded launch moment — deep navy night + Caterpillar-gold
 * aurora glow, logo stroke-draw via SMIL in logo-line-white.svg, wordmark
 * reveal. Identical in light & dark so the OS paint (manifest
 * background_color) matches — no flash.
 */
:root {
  --sp-0: #001422; /* deepest navy */
  --sp-1: #002b49; /* True Blue Pearl Coat */
  --sp-brand: #ffb800; /* Caterpillar yellow */
  --sp-soft: #ffd34d; /* mid gold */
  --sp-deep: #00528c; /* intermediate navy-light */
}

.app-loader-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(env(safe-area-inset-top), 24px) 24px max(env(safe-area-inset-bottom), 24px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 184, 0, 0.14) 0%, transparent 55%),
    radial-gradient(90% 90% at 50% 120%, rgba(0, 82, 140, 0.28) 0%, transparent 50%),
    linear-gradient(160deg, var(--sp-1) 0%, var(--sp-0) 100%);
  overflow: hidden;
}

#app-loader {
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 600ms;
}

/* Slow drifting aurora glow behind the logo. */
.app-loader-screen::before {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: 0;
  background:
    radial-gradient(circle at 32% 34%, rgba(255, 211, 77, 0.18) 0%, transparent 42%),
    radial-gradient(circle at 68% 66%, rgba(0, 82, 140, 0.22) 0%, transparent 42%);
  animation: app-loader-aurora 14s ease-in-out infinite alternate;
  transform-origin: center;
  filter: blur(6px);
}

body.app-loaded #app-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-loader__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  margin-top: -6vh;
  animation: app-loader-fade-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-loader__logo {
  width: clamp(120px, 30vw, 160px);
  height: auto;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 26px rgba(255, 184, 0, 0.25));
}

.app-loader__wordmark {
  margin: 0;
  font-family:
    'Inter Variable',
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
  font-size: clamp(22px, 5.5vw, 30px);
  font-weight: 300;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.92);
  animation: app-loader-wordmark 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.app-loader__wordmark b {
  font-weight: 650;
  color: var(--sp-brand);
}

.app-loader__tagline {
  margin: -14px 0 0;
  font-family: 'Inter Variable', 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  animation: app-loader-wordmark 0.7s ease 0.9s both;
}

@keyframes app-loader-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes app-loader-wordmark {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes app-loader-aurora {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(8deg) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-loader-screen::before,
  .app-loader__content,
  .app-loader__wordmark,
  .app-loader__tagline {
    animation: none;
  }
  #app-loader {
    transition-duration: 120ms;
  }
}