/* 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 App.vue once the app is ready.
 *
 * Design: branded launch moment — deep violet night + amber aurora glow.
 * Identical in light & dark so the OS paint (manifest background_color)
 * matches — no flash.
 */
:root {
  --sp-0: #2e1065; /* deepest violet */
  --sp-1: #6d28d9; /* brand violet */
  --sp-brand: #f59e0b; /* amber */
  --sp-soft: #fcd34d; /* mid amber */
  --sp-deep: #a78bfa; /* intermediate violet-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(245, 158, 11, 0.14) 0%, transparent 55%),
    radial-gradient(90% 90% at 50% 120%, rgba(167, 139, 250, 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: -30%;
  background:
    radial-gradient(40% 30% at 30% 30%, rgba(245, 158, 11, 0.2), transparent 60%),
    radial-gradient(40% 30% at 70% 70%, rgba(167, 139, 250, 0.25), transparent 60%);
  animation: app-loader-drift 14s ease-in-out infinite alternate;
}

@keyframes app-loader-drift {
  from {
    transform: translate3d(-4%, -2%, 0) scale(1);
  }
  to {
    transform: translate3d(4%, 2%, 0) scale(1.06);
  }
}

.app-loader__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.app-loader__logo {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 0 28px rgba(245, 158, 11, 0.4));
  animation: app-loader-pop 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes app-loader-pop {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.app-loader__wordmark {
  margin: 14px 0 0;
  font:
    700 1.75rem/1.2 'Inter Variable',
    system-ui,
    sans-serif;
  letter-spacing: -0.02em;
  color: #fff;
}

.app-loader__wordmark b {
  color: var(--sp-soft);
}

.app-loader__tagline {
  margin: 0;
  font:
    500 0.85rem/1.4 'Inter Variable',
    system-ui,
    sans-serif;
  color: rgba(255, 255, 255, 0.65);
}

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