#site-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: #020c18;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity 0.7s ease-in, transform 0.7s cubic-bezier(0.4, 0, 1, 1), visibility 0.7s;
}
#site-loader.done {
  opacity: 0;
  transform: translateY(60px);
  visibility: hidden;
  pointer-events: none;
}

/* Brand center */
.loader-brand {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative; z-index: 3;
  animation: loaderFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes loaderFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.loader-brand img {
  width: 80px; height: 80px; object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(96,165,250,0.7));
  animation: logoPulse 2.5s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(96,165,250,0.6)); }
  50%       { filter: drop-shadow(0 0 44px rgba(96,165,250,0.95)); }
}
.loader-brand-name {
  font-family: 'WeissenhofGrotesk', 'Inter', sans-serif;
  font-size: 32px; font-weight: 700; color: white; letter-spacing: -0.5px;
  text-shadow: 0 0 40px rgba(96,165,250,0.7), 0 0 90px rgba(37,99,235,0.4);
}
.loader-tagline {
  font-size: 12px; color: rgba(255,255,255,0.38);
  letter-spacing: 2px; text-transform: uppercase;
}

/* Bubbles */
.loader-bubble {
  position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(96,165,250,0.45);
  background: radial-gradient(circle at 35% 30%, rgba(56,189,248,0.18), rgba(37,99,235,0.06));
  bottom: -60px;
  animation: riseBubble var(--dur, 3s) ease-in infinite var(--delay, 0s);
}
.loader-bubble::before {
  content: '';
  position: absolute; top: 18%; left: 20%;
  width: 30%; height: 18%;
  background: rgba(255,255,255,0.45);
  border-radius: 50%; transform: rotate(-35deg);
}
@keyframes riseBubble {
  0%   { transform: translateX(0) translateY(0) scale(0.75); opacity: 0; }
  8%   { opacity: 1; }
  80%  { opacity: 0.55; }
  100% { transform: translateX(var(--drift, 20px)) translateY(calc(-105vh)) scale(1.05); opacity: 0; }
}

/* Waves */
.loader-waves {
  position: absolute; bottom: 0; left: 0; width: 100%;
  z-index: 2; line-height: 0; overflow: hidden; height: 130px;
}
.loader-waves svg { display: block; width: 200%; height: 130px; }
.lw1 { animation: waveScroll 5s linear infinite; }
.lw2 {
  animation: waveScrollReverse 7.5s linear infinite;
  opacity: 0.55; position: absolute; bottom: 0; left: 0;
  width: 200%; height: 130px;
}

/* Background grid (subtle) */
.loader-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
}