/*
 * /public/route-overlay.css
 *
 * Site-wide page-transition overlay (2026-06-01). Black fullscreen layer
 * with 3 pulsing cyan dots, shown while the browser is navigating between
 * pages. Imported by every HTML page alongside /route-overlay.js.
 *
 * Code Space DNA: cyan #00D4FF + black background, no text, language-
 * agnostic. Honors prefers-reduced-motion.
 */
.route-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  background: #000;
  display: none;
  align-items: center; justify-content: center;
}
.route-overlay.is-shown { display: flex; }

.route-overlay__dots { display: flex; gap: 10px; }
.route-overlay__dots span {
  width: 13px; height: 13px;
  background: #00D4FF;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.7);
  animation: route-dot-pulse 1.2s ease-in-out infinite;
}
.route-overlay__dots span:nth-child(2) { animation-delay: 0.18s; }
.route-overlay__dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes route-dot-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.65); }
  40%           { opacity: 1;    transform: scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
  .route-overlay__dots span { animation: none; opacity: 1; }
}