/* ================= SPLASH / PRELOADER ================= */
/* Scoped standalone: local vars only, does not touch site :root vars. */
#splash{
  --splash-navy:#020957;
  --splash-navy-soft:#3B4A8A;
  --splash-blue:#8aabff;
  position:fixed; inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(120% 140% at 50% 30%, #F5F8FF 0%, #EAF1FF 60%, #E2ECFF 100%);
  transition:opacity 1s ease, transform 1s ease;
}
#splash.leaving{
  opacity:0;
  transform:scale(1.03);
  pointer-events:none;
}
.splash-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  width:min(90vw,560px);
  padding:0 20px;
}
.logo-svg{ width:100%; height:auto; display:block; }

.splash-skip{
  position:absolute;
  top:28px; right:32px;
  appearance:none; border:none;
  background:transparent;
  color:var(--splash-navy-soft);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:13px;
  letter-spacing:.04em;
  cursor:pointer;
  opacity:.7;
  transition:opacity .2s ease;
}
.splash-skip:hover{ opacity:1; }

.splash-progress{
  width:220px;
  height:2px;
  background:rgba(2,9,87,0.12);
  border-radius:2px;
  overflow:hidden;
}
.splash-progress-bar{
  height:100%;
  width:0%;
  background:var(--splash-navy);
  border-radius:2px;
}

/* ---- logo build groups ---- */
#splash #mark{ transform: translate(89.1px,0px); }
#splash #letterA{ transform-origin: 19px 44px; opacity:0; }
#splash #letterP{ transform-origin: 44px 44px; opacity:0; }
#splash #beam{ transform-origin: 43px 25px; opacity:0; }
#splash #letterL{ transform-origin: 34px 33px; opacity:0; }
#splash #wordmark{ opacity:0; transform: translateX(-6px); }

#splash.run #letterA{ animation: splashAGrow 5s cubic-bezier(.2,.7,.3,1) forwards; }
#splash.run #letterP{ animation: splashPSpin 5s cubic-bezier(.25,.75,.3,1) forwards; }
#splash.run #beam{ animation: splashBeamShine 5s ease forwards; }
#splash.run #letterL{ animation: splashLFade 5s ease forwards; }
#splash.run #mark{ animation: splashMarkShift 5s ease forwards; }
#splash.run #wordmark{ animation: splashWordFade 5s ease forwards; }

@keyframes splashAGrow{
  0%{ opacity:0; transform:scale(.88); }
  3%{ opacity:.25; }
  12%{ opacity:1; transform:scale(1); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes splashPSpin{
  0%,13%{ opacity:0; transform:scale(.15) rotate(-260deg); }
  15%{ opacity:1; }
  29%{ opacity:1; transform:scale(1) rotate(0deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
@keyframes splashBeamShine{
  0%,27%{ opacity:0; transform:scaleY(.25); }
  30%{ opacity:1; transform:scaleY(.25); }
  42%{ opacity:1; transform:scaleY(1); }
  58%{ opacity:1; transform:scaleY(1); }
  64%{ opacity:0; transform:scaleY(1); }
  100%{ opacity:0; }
}
@keyframes splashLFade{
  0%,42%{ opacity:0; }
  52%{ opacity:1; }
  100%{ opacity:1; }
}
@keyframes splashMarkShift{
  0%,64%{ transform: translate(89.1px,0px); }
  80%{ transform: translate(0px,0px); }
  100%{ transform: translate(0px,0px); }
}
@keyframes splashWordFade{
  0%,68%{ opacity:0; transform:translateX(-6px); }
  84%{ opacity:1; transform:translateX(0); }
  100%{ opacity:1; transform:translateX(0); }
}

/* Skip animation entirely for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  #splash{ display:none !important; }
}