@layer base {
  html, body {
    background-color: #f8f9fa;
    color: #111215;
    overscroll-behavior: none;
  }
}

::selection {
  background: #0055ff;
  color: #ffffff;
}

/* Technical Drafting Grid Pattern */
.lab-grid {
  background-image:
    radial-gradient(rgba(17, 18, 21, 0.08) 0.75px, transparent 0.75px),
    linear-gradient(to right, rgba(17, 18, 21, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 18, 21, 0.02) 1px, transparent 1px);
  background-size: 24px 24px, 96px 96px, 96px 96px;
}

@keyframes radarPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}

.radar-pulse {
  animation: radarPulse 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes ambientDrift {
  0%, 100% {
    transform: translate(0px, 0px) scale(1);
  }
  50% {
    transform: translate(15px, -10px) scale(1.04);
  }
}

.ambient-glow {
  animation: ambientDrift 16s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .radar-pulse,
  .ambient-glow {
    animation: none !important;
  }
}

.brand-dot {
  background: linear-gradient(135deg, #00d0ff, #1650ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}