#introScreen {
  position: fixed; inset: 0; z-index: 9999;
  background: #020617;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#introCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
#introContent {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
}
#introGlow {
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(ellipse, rgba(37,99,235,0.35) 0%, transparent 70%);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: glowPulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glowPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity:0.7; }
  50%      { transform: translate(-50%,-50%) scale(1.2); opacity:1; }
}
#introLogoWrap {
  width: 100px; height: 100px;
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px rgba(59,130,246,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: logoIn 0.8s cubic-bezier(.22,1,.36,1) forwards;
  opacity: 0;
}
@keyframes logoIn {
  0%   { opacity:0; transform: scale(0.5) rotateY(-90deg); }
  70%  { opacity:1; transform: scale(1.08) rotateY(8deg); }
  100% { opacity:1; transform: scale(1) rotateY(0deg); }
}
#introName {
  font-family: 'Syne', sans-serif;
  font-size: 2rem; font-weight: 800;
  color: #fff; letter-spacing: 0.02em;
  animation: fadeUp 0.6s 0.6s ease forwards; opacity: 0;
}
#introName span { color: #3b82f6; }
#introTagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem; font-weight: 500;
  color: #64748b; letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: fadeUp 0.6s 0.8s ease forwards; opacity: 0;
}
#introProgressWrap {
  width: 120px; height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px; overflow: hidden;
  margin-top: 24px;
  animation: fadeUp 0.6s 0.9s ease forwards; opacity: 0;
}
#introProgress {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 999px;
  width: 0%;
  transition: width 1.6s cubic-bezier(.22,1,.36,1);
}
@keyframes fadeUp {
  from { opacity:0; transform: translateY(12px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes introOut {
  0%   { opacity:1; transform: scale(1); }
  100% { opacity:0; transform: scale(1.04); }
}
.intro-exit {
  animation: introOut 0.6s cubic-bezier(.22,1,.36,1) forwards !important;
}