@font-face {
      font-family: 'Space Grotesk';
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mDoQDjQSkFtoMM3T6r8E7mPbDY.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: #1f1f1f;
    }

    ::-webkit-scrollbar-thumb {
      background: #372a2a;
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #4a3a3a;
    }

    .font-display {
      font-family: 'Space Grotesk', system-ui, sans-serif;
    }

    .grid-pattern {
      background-image: radial-gradient(#372a2a 1px, transparent 1px);
      background-size: 30px 30px;
    }

    .glow-red {
      box-shadow: 0 0 15px rgba(228, 103, 103, 0.4);
    }

    .scanline {
      background: linear-gradient(to bottom, transparent, rgba(228, 103, 103, 0.1), transparent);
      background-size: 100% 4px;
      animation: scanline 8s linear infinite;
    }

    @keyframes scanline {
      0% {
        background-position: 0 -100px;
      }

      100% {
        background-position: 0 100vh;
      }
    }

    @keyframes dash-flow {
      to {
        stroke-dashoffset: -20;
      }
    }

    .animate-dash-flow {
      animation: dash-flow 1s linear infinite;
    }

    .animate-dash-flow-slow {
      animation: dash-flow 3s linear infinite;
    }

    .perspective-container {
      perspective: 1000px;
    }

    .sphere {
      animation: rotate-sphere 30s linear infinite;
    }

    .agent-node {
      position: absolute;
      background-color: #e46767;
      border-radius: 50%;
      box-shadow: 0 0 4px #e46767;
    }

    @keyframes rotate-sphere {
      0% {
        transform: rotateY(0deg) rotateX(0deg);
      }

      100% {
        transform: rotateY(360deg) rotateX(360deg);
      }
    }

    /* Radar Animation */
    .radar-grid {
      background-image:
        radial-gradient(circle, transparent 65%, rgba(228, 103, 103, 0.2) 66%, transparent 67%),
        radial-gradient(circle, transparent 45%, rgba(228, 103, 103, 0.2) 46%, transparent 47%),
        radial-gradient(circle, transparent 25%, rgba(228, 103, 103, 0.2) 26%, transparent 27%),
        linear-gradient(to right, transparent 49.8%, rgba(228, 103, 103, 0.2) 50%, transparent 50.2%),
        linear-gradient(to bottom, transparent 49.8%, rgba(228, 103, 103, 0.2) 50%, transparent 50.2%);
    }

    .radar-sweep {
      background: conic-gradient(from 0deg,
          transparent 0deg,
          transparent 270deg,
          rgba(228, 103, 103, 0.1) 300deg,
          rgba(228, 103, 103, 0.4) 360deg);
      border-radius: 50%;
      animation: radar-spin 4s linear infinite;
    }

    @keyframes radar-spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .text-shadow-red {
      text-shadow: 0 0 10px rgba(228, 103, 103, 0.8);
    }