/* ==========================================================================
   SysmoraCloud — page loading screen
   Markup lives as the first child of <body> (#site-loader) so it paints
   before anything else. Plain CSS (no Tailwind dependency).
   ========================================================================== */
#site-loader {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  background: #08110c; color: #fff;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  opacity: 1; visibility: visible;
  transition: opacity .25s ease;
  /* Failsafe: if JS never runs, the loader still gets out of the way */
  animation: sl-failsafe .5s ease 6s forwards;
}
#site-loader.sl-hide {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
@keyframes sl-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Background */
#site-loader .sl-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#site-loader .sl-orb {
  position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
  filter: blur(80px); opacity: .5;
}
#site-loader .sl-orb-a { top: -18vmax; left: -12vmax; background: radial-gradient(circle, rgba(34,197,94,.65), transparent 65%); animation: sl-drift-a 9s ease-in-out infinite alternate; }
#site-loader .sl-orb-b { bottom: -20vmax; right: -14vmax; background: radial-gradient(circle, rgba(250,204,21,.45), transparent 65%); animation: sl-drift-b 11s ease-in-out infinite alternate; }
#site-loader .sl-grid {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
}
@keyframes sl-drift-a { to { transform: translate(6vmax, 5vmax) scale(1.1); } }
@keyframes sl-drift-b { to { transform: translate(-6vmax, -4vmax) scale(1.08); } }

/* Core */
#site-loader .sl-core {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 1.4rem; padding: 1.5rem; text-align: center;
  animation: sl-rise .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes sl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

#site-loader .sl-mark { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
#site-loader .sl-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 50%, #16a34a 74%, #facc15 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: sl-spin 1.1s linear infinite;
}
#site-loader .sl-ring-2 {
  inset: -14px; opacity: .35;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation-duration: 2.4s; animation-direction: reverse;
}
#site-loader .sl-mark img {
  width: 68px; height: 68px; border-radius: 18px; object-fit: cover;
  box-shadow: 0 0 44px rgba(34,197,94,.5), 0 0 0 1px rgba(255,255,255,.08);
  animation: sl-pulse 1.8s ease-in-out infinite;
}
@keyframes sl-spin  { to { transform: rotate(360deg); } }
@keyframes sl-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

#site-loader .sl-word { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
#site-loader .sl-word span {
  margin-left: .3rem;
  background: linear-gradient(90deg, #4ade80, #facc15);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

#site-loader .sl-bar {
  width: min(240px, 62vw); height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.09);
}
#site-loader .sl-bar span {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #16a34a, #facc15);
  box-shadow: 0 0 14px rgba(250,204,21,.6);
  transform-origin: 0 50%; transform: scaleX(0);
  animation: sl-fill 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes sl-fill { to { transform: scaleX(.88); } }

#site-loader .sl-status {
  margin: 0; min-height: 1.2em; font-size: .8rem; font-weight: 500;
  letter-spacing: .02em; color: #9ca3af;
}

@media (prefers-reduced-motion: reduce) {
  #site-loader .sl-orb, #site-loader .sl-mark img, #site-loader .sl-core { animation: none; }
  #site-loader .sl-ring { animation-duration: 3s; }
  #site-loader .sl-ring-2 { display: none; }
}

/* Logo mark */
#site-loader .sl-mark img { box-shadow: 0 0 44px rgba(34,197,94,.45), 0 0 0 1px rgba(255,255,255,.08); }