@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #09090B;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

#loading-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #09090B;
  z-index: 9999;
  gap: 32px;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Subtle background radial glow */
#loading-screen::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
  pointer-events: none;
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: fade-in-up 0.6s ease both;
}

.logo-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 32px rgba(99, 102, 241, 0.35), 0 4px 16px rgba(0, 0, 0, 0.5);
  animation: icon-float 3s ease-in-out infinite;
}

.logo-icon svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes icon-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.logo-text {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #FAFAFA;
}

.logo-text span {
  background: linear-gradient(135deg, #A5B4FC, #6366F1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-tagline {
  font-size: 13px;
  color: #71717A;
  font-weight: 400;
  letter-spacing: 0.3px;
  margin-top: -8px;
}

/* Spinner */
.spinner-track {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid rgba(99, 102, 241, 0.2);
  border-top-color: #6366F1;
  animation: spin 0.9s linear infinite, fade-in-up 0.6s 0.2s ease both;
}

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

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Three-dot progress dots beneath spinner */
.dots {
  display: flex;
  gap: 6px;
  animation: fade-in-up 0.6s 0.35s ease both;
  opacity: 0;
}

.dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #4F46E5;
  animation: dot-bounce 1.2s ease-in-out infinite;
}

.dots span:nth-child(1) { animation-delay: 0s; }
.dots span:nth-child(2) { animation-delay: 0.18s; }
.dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}