/* =========================================================================
   SPLASH — the branded loading screen both shells show before first paint.

   Shared by Magnet CRM.html (admin) and Client App.html (portal). The MARKUP
   lives inline in each of those files, not here: it has to be in the initial
   HTML to paint before any module loads, which is the entire point of a splash.
   If you change the SVG, change it in both.
   ========================================================================= */
/* Branded splash — shows on load, then fades out */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--canvas); opacity: 1;
  transition: opacity 0.5s ease;
}
#splash.hide { opacity: 0; pointer-events: none; }

/* Brand intro (magnet-logo-intro): the poles snap in, the U draws itself,
   then the mark glides left and the wordmark slides out from behind it. */
.splash-anim {
  --splash-ink: #28282B;                    /* wordmark: the only themed fill */
  --splash-ease-glide: cubic-bezier(.8, 0, .12, 1);
  --splash-slide: 0.9s;
  width: min(312px, 76vw);                  /* mark lands ~103px tall; vw keeps it clear of narrow phones */
}
html[data-theme="dark"] .splash-anim { --splash-ink: #ffffff; }
.splash-anim svg { width: 100%; height: auto; display: block; overflow: visible; }
.splash-anim .sp-wordmark { fill: var(--splash-ink); }

/* the U grows along its own stroke (masked) */
.sp-grow-s, .sp-grow-l { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.sp-grow-s { animation: spGrow 0.6s 0.05s cubic-bezier(.25, .8, .25, 1) forwards; }
.sp-grow-l { animation: spGrow 0.6s 0.28s cubic-bezier(.25, .8, .25, 1) forwards; }
.sp-pole { transform-box: fill-box; transform-origin: center; animation: spPoleSnap 1.05s cubic-bezier(.4, 0, .2, 1) both; }
.sp-inner { transform-box: fill-box; transform-origin: center; animation: spSettle 1.3s linear both; }
@keyframes spGrow { to { stroke-dashoffset: 0; } }
@keyframes spPoleSnap {
  0%   { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); }
  10%  { opacity: 1; }
  55%  { transform: translate(calc(var(--fx) * .9), calc(var(--fy) * .9)) rotate(calc(var(--fr) * .85));
         animation-timing-function: cubic-bezier(.6, 0, .9, .6); }
  82%  { transform: translate(3px, 4px) rotate(1.2deg) scale(1.035, .965); }
  91%  { transform: translate(-1px, -1.5px) scale(.99, 1.008); }
  100% { opacity: 1; transform: none; }
}
@keyframes spSettle {
  0%, 74% { transform: none; }
  83%     { transform: scale(1.014, .978); }
  93%     { transform: scale(.996, 1.006); }
  100%    { transform: none; }
}
/* speed ramp: mark glides left, wordmark slides out from behind it */
.sp-mark, .sp-reveal-r { transform: translateX(825.5px); animation: spGlideLeft 0.85s var(--splash-slide) var(--splash-ease-glide) forwards; }
.sp-wordmark { transform: translateX(-825.5px); animation: spSlideOut 0.85s var(--splash-slide) var(--splash-ease-glide) forwards; }
@keyframes spGlideLeft { to { transform: translateX(0); } }
@keyframes spSlideOut { to { transform: translateX(-48px); } }

@media (prefers-reduced-motion: reduce) {
  .sp-mark, .sp-inner, .sp-pole, .sp-reveal-r { animation: none; transform: none; opacity: 1; }
  .sp-wordmark { animation: none; transform: translateX(-48px); opacity: 1; }
  .sp-grow-s, .sp-grow-l { animation: none; stroke-dashoffset: 0; }
}