/* ===== LOADING SCREEN ===== */
#loading-screen {
  position: fixed; inset: 0; background: #000; z-index: 10000;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#loading-screen.fade-out { opacity: 0; transform: scale(1.03); pointer-events: none; }

.loading-bg-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: gridPulse 4s ease-in-out infinite;
}
@keyframes gridPulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

#loading-screen::before {
  content: ''; position: absolute; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.035) 0%, transparent 70%);
  border-radius: 50%; animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.15);opacity:1} }

.loading-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:32px; }

.loading-logo { display:flex; align-items:center; gap:16px; animation:logoEntrance 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes logoEntrance { from{opacity:0;transform:translateY(-20px) scale(0.8)} to{opacity:1;transform:translateY(0) scale(1)} }

/* Logo mark */
.logo-mark { position:relative; width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.logo-ring { position:absolute; border-radius:50%; border:2px solid white; }
.logo-ring-outer { width:44px; height:44px; opacity:0; animation:ringExpand 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards 0.2s; }
.logo-ring-inner { width:26px; height:26px; opacity:0; animation:ringExpand 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards 0.35s; }
.logo-dot { width:8px; height:8px; background:white; border-radius:50%; opacity:0; animation:dotPop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards 0.5s; }
@keyframes ringExpand { from{opacity:0;transform:scale(0.4)} to{opacity:1;transform:scale(1)} }
@keyframes dotPop { from{opacity:0;transform:scale(0)} to{opacity:1;transform:scale(1)} }

/* Cloud icon */
.logo-cloud {
  display: flex; align-items: center; justify-content: center;
  animation: cloudPop 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards;
  opacity: 0;
}
@keyframes cloudPop {
  from { opacity:0; transform: scale(0.5) translateY(8px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
.logo-cloud svg { filter: drop-shadow(0 0 12px rgba(255,255,255,0.4)); }

.logo-text { font-size:28px; font-weight:800; letter-spacing:-1px; color:#fff; }

/* Loading bar */
.loading-bar-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; width:280px; animation:fadeInUp 0.6s ease forwards 0.5s; opacity:0; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.loading-bar { width:100%; height:2px; background:rgba(255,255,255,0.07); border-radius:1px; overflow:hidden; position:relative; }
.loading-bar::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent); animation:shimmer 1.5s ease-in-out infinite; }
@keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

.loading-bar-fill { height:100%; background:#fff; border-radius:1px; width:0%; transition:width 0.08s linear; box-shadow:0 0 8px rgba(255,255,255,0.5); }

.loading-percent { font-size:12px; font-weight:600; color:rgba(255,255,255,0.35); letter-spacing:1px; }
.loading-status { font-size:12px; color:rgba(255,255,255,0.25); letter-spacing:0.5px; animation:fadeInUp 0.6s ease forwards 0.7s; opacity:0; }

/* Particles */
.loading-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.particle { position:absolute; background:rgba(255,255,255,0.35); border-radius:50%; animation:particleFloat linear infinite; }
@keyframes particleFloat { 0%{transform:translateY(100vh) translateX(0);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(-100px) translateX(var(--drift));opacity:0} }