@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    background-color: #0d1515;
    background-image: 
      linear-gradient(rgba(0, 242, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 242, 255, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    color: #dce4e4;
    overflow-x: hidden;
  }
}

@layer components {
  .glass-panel {
    background: rgba(13, 21, 21, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 242, 255, 0.15);
  }

  .terminal-header {
    background: rgba(46, 54, 55, 0.8);
    border-bottom: 1px solid rgba(185, 202, 203, 0.1);
  }

  .scanline {
    width: 100%;
    height: 2px;
    background: rgba(0, 242, 255, 0.1);
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    animation: scanline 8s linear infinite;
  }

  .pulse-green {
    animation: pulse-green 2s infinite;
  }

  .glow-cyan {
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
  }
}

@layer utilities {
  .grid-bg {
    background-image: 
      linear-gradient(rgba(0, 242, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 242, 255, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
  }

  .dot { 
    height: 10px; 
    width: 10px; 
    border-radius: 50%; 
    display: inline-block; 
    margin-right: 6px; 
  }
  .dot-red { background: #ff5f56; }
  .dot-yellow { background: #ffbd2e; }
  .dot-green { background: #27c93f; }
}

@keyframes scanline {
  0% { top: 0; }
  100% { top: 100%; }
}

@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(47, 248, 1, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(47, 248, 1, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 248, 1, 0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #00f2ff; }
}

.typewriter span {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #00f2ff;
  animation: typing 2s steps(40, end), blink-caret .75s step-end infinite;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}