/* ── INTRO ─────────────────────────────────── */
#intro {
  position: fixed; inset: 0; background: var(--dark);
  z-index: 500; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 18px;
  transition: opacity .8s;
}
#intro.gone { opacity: 0; pointer-events: none; }
#intro-logo { margin-bottom: 8px; }
#intro-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(22px, 3.6vw, 40px);
  font-weight: 700; color: #fff;
  text-align: center; padding: 0 20px;
}
#intro-sub {
  color: rgba(255,255,255,.45); font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
}
.loading-dots { display: flex; gap: 8px; margin-top: 14px; }
.loading-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fiber); animation: ldot 1.4s infinite;
}
.loading-dot:nth-child(2) { animation-delay: .2s; }
.loading-dot:nth-child(3) { animation-delay: .4s; }
@keyframes ldot {
  0%,100% { opacity:.3; transform:scale(.8); }
  50%      { opacity:1;  transform:scale(1.2); }
}

/* ── PROGRESS BAR ─────────────────────────── */
#progress-bar {
  position: fixed; top: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--fiber), var(--dotsi-purple));
  width: 0%; z-index: 300;
  box-shadow: 0 0 12px rgba(0,243,255,.85);
  transition: width .1s linear;
}