/* ================================================================
   Solvetaa — Site Preloader + Internal Nav Progress Bar
   ================================================================ */

/* ── Overlay ─────────────────────────────────────────────────── */
#spl {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(140deg, #0d2e46 0%, #184A6B 55%, #1d608d 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
#spl.spl-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Floating blobs for depth (same pattern as hero sections) */
#spl::before,
#spl::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
#spl::before {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(91,184,245,0.12) 0%, transparent 70%);
  top: -100px; right: -100px;
  animation: splBlobA 7s ease-in-out infinite;
}
#spl::after {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(29,96,141,0.18) 0%, transparent 70%);
  bottom: -80px; left: -60px;
  animation: splBlobA 9s ease-in-out infinite reverse;
}
@keyframes splBlobA {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(30px,-30px) scale(1.1); }
}

/* ── Icon Scene ──────────────────────────────────────────────── */
.spl-scene {
  perspective: 520px;
  perspective-origin: 50% 48%;
  animation: splEntry 0.7s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
@keyframes splEntry {
  from { opacity: 0; transform: scale(0.25) translateY(40px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.spl-icon {
  width: 108px;
  height: 108px;
  display: block;
  filter: drop-shadow(0 18px 44px rgba(29,96,141,0.95))
          drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  animation: splTilt 6s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes splTilt {
  0%,100% { transform: rotateX(20deg)  rotateY(-15deg) rotateZ(-2deg); }
  30%     { transform: rotateX(-10deg) rotateY(20deg)  rotateZ(2deg);  }
  60%     { transform: rotateX(14deg)  rotateY(8deg)   rotateZ(-1deg); }
}

/* Ring segments spin */
#spl-segs {
  transform-box: fill-box;
  transform-origin: center;
  animation: splRotCW 5s linear infinite;
}

/* Outer ring gentle pulse */
#spl-outer {
  animation: splPulse 2.5s ease-in-out infinite;
}
@keyframes splPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.5; }
}

/* Globe lines counter-spin */
#spl-glines {
  transform-box: fill-box;
  transform-origin: center;
  animation: splRotCW 1.8s linear infinite reverse;
}

/* Center circle breathe */
#spl-gcircle {
  animation: splBreathe 2s ease-in-out infinite;
}
@keyframes splBreathe {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.7; }
}

@keyframes splRotCW {
  to { transform: rotate(360deg); }
}

/* Glow ring beneath icon */
.spl-glow {
  width: 80px;
  height: 12px;
  background: radial-gradient(ellipse, rgba(91,184,245,0.45) 0%, transparent 70%);
  border-radius: 50%;
  margin-top: -20px;
  animation: splGlowPulse 2s ease-in-out infinite;
}
@keyframes splGlowPulse {
  0%,100% { transform: scaleX(1);   opacity: 1;   }
  50%     { transform: scaleX(0.7); opacity: 0.5; }
}

/* ── Brand + Bar ─────────────────────────────────────────────── */
.spl-brand {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #ffffff;
  opacity: 0;
  animation: splFadeUp 0.55s 0.55s ease both;
}
@keyframes splFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.spl-track {
  width: 130px;
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 99px;
  overflow: hidden;
  opacity: 0;
  animation: splFadeUp 0.55s 0.65s ease both;
}
.spl-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5bb8f5 0%, #ffffff 60%, #5bb8f5 100%);
  background-size: 200% 100%;
  width: 0;
  animation:
    splProgress 1.6s 0.35s cubic-bezier(0.4,0,0.2,1) forwards,
    splShimmer  1.2s 0.35s linear infinite;
}
@keyframes splProgress {
  0%   { width: 0%; }
  65%  { width: 80%; }
  100% { width: 100%; }
}
@keyframes splShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Internal Nav Progress Bar ───────────────────────────────── */
#spl-np {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  z-index: 99998;
  background: linear-gradient(90deg, #5bb8f5, #ffffff 50%, #5bb8f5);
  box-shadow: 0 0 12px rgba(91,184,245,0.8), 0 0 4px rgba(255,255,255,0.5);
  pointer-events: none;
  opacity: 0;
  border-radius: 0 2px 2px 0;
}
#spl-np.spl-np-on {
  opacity: 1;
}