@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  --color-primary-dark: #030611;
  --color-panel-dark: rgba(10, 15, 30, 0.75);
  --color-border-cyan: rgba(0, 240, 255, 0.15);
  --color-neon-cyan: #00f0ff;
  --color-neon-red: #ff003c;
  --color-neon-green: #00ff66;
  --color-neon-orange: #ff6c00;
  --color-neon-purple: #bd00ff;
  --color-neon-amber: #ffb700;
}

html {
  scroll-behavior: smooth;
  font-family: 'Space Grotesk', sans-serif;
  background-color: var(--color-primary-dark);
  color: #F1F5F9;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #030611;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.15);
  border-radius: 3px;
  border: 1px solid rgba(0, 240, 255, 0.05);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-neon-cyan);
  box-shadow: 0 0 10px var(--color-neon-cyan);
}

/* Background Cyber Grid */
.cyber-grid {
  background-color: #030611;
  background-image: 
    linear-gradient(rgba(0, 240, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center;
}

/* Glassmorphism style cyber panel */
.cyber-panel {
  background: var(--color-panel-dark);
  backdrop-filter: blur(16px);
  border: 1px solid var(--color-border-cyan);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.03);
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cyber-panel:hover {
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.1);
  transform: translateY(-2px);
}

/* High-tech clip path polygons */
.cyber-cut {
  clip-path: polygon(
    0 16px, 
    16px 0, 
    100% 0, 
    100% calc(100% - 16px), 
    calc(100% - 16px) 100%, 
    0 100%
  );
}

.cyber-cut-sm {
  clip-path: polygon(
    0 8px, 
    8px 0, 
    100% 0, 
    100% calc(100% - 8px), 
    calc(100% - 8px) 100%, 
    0 100%
  );
}

.cyber-cut-left {
  clip-path: polygon(
    0 16px, 
    16px 0, 
    100% 0, 
    100% 100%, 
    0 100%
  );
}

/* Floating Light Blobs */
.glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* High-tech HUD brackets */
.hud-bracket-left::before, .hud-bracket-right::after {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  border-color: var(--color-neon-cyan);
  border-style: solid;
  pointer-events: none;
}
.hud-bracket-left::before {
  left: 0;
  border-width: 2px 0 0 2px;
}
.hud-bracket-right::after {
  right: 0;
  border-width: 0 2px 2px 0;
}

/* Floating scan line sweep (GPU hardware accelerated) */
@keyframes laser-sweep {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(0%); opacity: 0; }
}
.laser-scanner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}
.laser-scanner::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid var(--color-neon-cyan);
  box-shadow: 0 2px 8px var(--color-neon-cyan);
  animation: laser-sweep 4s linear infinite;
}

/* Scanlines overlay (disabled for performance optimization) */
.scanlines-overlay {
  display: none;
}

/* Pulsing alert states */
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 60, 0.6);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(255, 0, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 60, 0);
  }
}
.pulse-critical {
  animation: pulse-ring 2s infinite;
}

/* Monospace metrics font styling */
.font-tech {
  font-family: 'Share Tech Mono', monospace;
}

/* Active Nav state styling */
.nav-link-active {
  color: var(--color-neon-cyan) !important;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
  border-bottom: 2px solid var(--color-neon-cyan);
}
.nav-link-active::before {
  content: "[ ";
  color: var(--color-neon-cyan);
}
.nav-link-active::after {
  content: " ]";
  color: var(--color-neon-cyan);
}