/* ============================================================
   Splash screen — Blazor WASM initial load / refresh
   Drop into: wwwroot/css/splash.css
   Uses the real Oscar logo (place at wwwroot/img/logo-icon.png).
   Colors are pulled directly from the logo + your palette:
     navy  #162b6f  == your --color-accent-active
     gold  #f5b00c  == sampled from the mustache
   ============================================================ */

#app-splash {
  --splash-bg: #f4f5f7;
  --splash-surface: #ffffff;
  --splash-text-secondary: #6b6b6b;
  --splash-navy: #162b6f;
  --splash-navy-mid: #1e3a8a;
  --splash-navy-light: #274cb0;
  --splash-gold: #f5b00c;
  --splash-border: #e0e0e0;

  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 20%, #ffffff 0%, var(--splash-bg) 55%, #eceef2 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: opacity 520ms cubic-bezier(.4,0,.2,1), filter 520ms cubic-bezier(.4,0,.2,1);
}

#app-splash.splash-exit {
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
}

/* Ambient background drift — subtle on purpose */
.splash-blob {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(10px);
  animation: splash-drift 15s ease-in-out infinite alternate;
}
.splash-blob.b1 {
  top: -14%; left: -12%;
  background: radial-gradient(circle, var(--splash-navy) 0%, transparent 70%);
  opacity: 0.06;
}
.splash-blob.b2 {
  bottom: -12%; right: -10%;
  background: radial-gradient(circle, var(--splash-gold) 0%, transparent 70%);
  opacity: 0.07;
  animation-duration: 19s;
  animation-direction: alternate-reverse;
}
@keyframes splash-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(38px, 26px) scale(1.15); }
}

/* Signature element: the logo's own rounded-square silhouette used as
   a "draw-in" frame, with a small gold comet orbiting it as the
   indeterminate loading indicator. */
.logo-frame-wrap { position: relative; width: 150px; height: 150px; z-index: 1; }
.logo-frame-wrap svg { position: absolute; inset: 0; width: 150px; height: 150px; overflow: visible; }

.frame-track { fill: none; stroke: var(--splash-navy); stroke-width: 2; opacity: .10; }
.frame-draw {
  fill: none; stroke: var(--splash-navy); stroke-width: 2;
  stroke-dasharray: 548; stroke-dashoffset: 548;
  animation: frame-draw-in .9s cubic-bezier(.4,0,.2,1) both;
}
.frame-comet {
  fill: none; stroke: var(--splash-gold); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 46 502; stroke-dashoffset: 0; opacity: 0;
  animation: frame-comet-fade .3s ease-out .9s both, frame-comet-move 2.6s linear .9s infinite;
}
@keyframes frame-draw-in { to { stroke-dashoffset: 0; } }
@keyframes frame-comet-fade { to { opacity: 1; } }
@keyframes frame-comet-move { to { stroke-dashoffset: -548; } }

.logo-img {
  position: absolute; inset: 0; margin: auto;
  width: 104px; height: 104px;
  border-radius: 30px;
  box-shadow: 0 10px 26px rgba(22, 43, 111, .22);
  animation: logo-pop .65s cubic-bezier(.34,1.56,.64,1) .35s both,
             logo-breathe 3.2s ease-in-out 1.2s infinite;
}
@keyframes logo-pop {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes logo-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

.splash-copy { display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 1; }
.brand-word {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .14em;
  color: var(--splash-navy);
  animation: fade-up .5s ease-out .9s both;
}
.brand-caption {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--splash-text-secondary);
  animation: fade-up .5s ease-out 1.05s both;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--splash-navy); opacity: .25;
  animation: dot-pulse 1.2s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: .15s; }
.dot:nth-child(3) { animation-delay: .3s; }
@keyframes dot-pulse { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .frame-draw, .frame-comet, .logo-img, .brand-word, .brand-caption, .splash-blob, .dot {
    animation: none !important;
  }
  .frame-draw { stroke-dashoffset: 0; }
  .frame-comet { opacity: 1; }
  .logo-img, .brand-word, .brand-caption { opacity: 1; transform: none; }
  .dot { opacity: .6; }
  #app-splash, #app-splash.splash-exit { transition: opacity 200ms linear; filter: none; }
}