@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Exo+2:wght@300;400;500;600&display=swap');

@source "../node_modules/streamdown/dist/*.js";

@layer base {
  html,
  body {
    font-size: 17px;
    height: 100%;
    overflow: hidden;
    background: #050515;
    color: #e0e0f0;
    font-family: 'Exo 2', sans-serif;
  }

  h1, h2, h3, .font-orbitron {
    font-family: 'Orbitron', sans-serif;
  }

  #root {
    height: 100%;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,255,255,0.2) transparent;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0,255,255,0.2);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0,255,255,0.4);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse-cyan {
  0%, 100% { box-shadow: 0 0 8px rgba(0,255,255,0.3); }
  50%       { box-shadow: 0 0 20px rgba(0,255,255,0.6), 0 0 40px rgba(0,255,255,0.2); }
}

@keyframes scan {
  0%   { background-position: 0 -100vh; }
  100% { background-position: 0 100vh; }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out both;
}

.vex-glow {
  animation: pulse-cyan 3s ease-in-out infinite;
}