@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400;1,700&family=Orbitron:wght@600;700;800;900&family=Rajdhani:wght@600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --bg-darker: #050811;
  --bg-dark: #0b101d;
  --bg-card: rgba(15, 23, 42, 0.75);
  --bg-card-border: rgba(184, 139, 69, 0.25);
  
  --tactical-primary: #b88b45;
  --tactical-primary-light: #d8a85e;
  --tactical-primary-glow: rgba(184, 139, 69, 0.45);
  --tactical-primary-subtle: rgba(184, 139, 69, 0.12);

  --tactical-green: #b88b45;
  --tactical-green-glow: rgba(184, 139, 69, 0.45);
  --cyber-cyan: #d8a85e;
  --cyber-cyan-glow: rgba(216, 168, 94, 0.4);
  --warning-amber: #f59e0b;
  --alert-red: #ef4444;
  
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
}

body {
  background-color: var(--bg-darker);
  color: var(--text-main);
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: hidden;
  position: relative;
}

/* Headers and links with font-weight > 600 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.015em;
}

a, button {
  font-weight: 700;
}

/* 3D Holographic Rotating Cunaguaro Emblem */
.cunaguaro-3d-wrapper {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.cunaguaro-3d-card {
  transform-style: preserve-3d;
  animation: cunaguaroRotate3D 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  will-change: transform;
  transform-origin: center center;
}

.cunaguaro-3d-wrapper:hover .cunaguaro-3d-card {
  animation-play-state: paused;
}

@keyframes cunaguaroRotate3D {
  0% {
    transform: perspective(1000px) rotateY(-24deg) rotateX(8deg) scale(1);
    box-shadow: -8px 12px 30px rgba(184, 139, 69, 0.35);
  }
  50% {
    transform: perspective(1000px) rotateY(0deg) rotateX(-6deg) scale(1.06);
    box-shadow: 0px 16px 36px rgba(184, 139, 69, 0.55);
  }
  100% {
    transform: perspective(1000px) rotateY(24deg) rotateX(8deg) scale(1);
    box-shadow: 8px 12px 30px rgba(184, 139, 69, 0.35);
  }
}

/* 3D Gyroscopic rings */
@keyframes gyroSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes radarSpinReverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

.cunaguaro-gyro-ring {
  animation: gyroSpin 14s linear infinite;
}

.cunaguaro-radar-ring {
  animation: radarSpinReverse 20s linear infinite;
}

/* Custom Tactical Grid Background */
.tactical-grid-bg {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

.tactical-dots-bg {
  background-image: radial-gradient(rgba(184, 139, 69, 0.2) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Typography Utility Classes */
.font-display {
  font-family: 'Rajdhani', sans-serif;
}

.font-hud {
  font-family: 'Orbitron', sans-serif;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
}

/* Glassmorphism & Tactical Cards */
.hud-card {
  background: rgba(11, 16, 29, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(184, 139, 69, 0.22);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hud-card:hover {
  border-color: rgba(184, 139, 69, 0.6);
  box-shadow: 0 12px 40px 0 rgba(184, 139, 69, 0.2), inset 0 0 15px rgba(184, 139, 69, 0.08);
  transform: translateY(-2px);
}

/* HUD Corner Brackets */
.hud-corners::before,
.hud-corners::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 10;
}

.hud-corners::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--tactical-primary);
  border-left: 2px solid var(--tactical-primary);
}

.hud-corners::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--tactical-primary);
  border-right: 2px solid var(--tactical-primary);
}

.hud-corners-green::before,
.hud-corners-gold::before {
  border-color: var(--tactical-primary);
}
.hud-corners-green::after,
.hud-corners-gold::after {
  border-color: var(--tactical-primary);
}

/* Glowing Neon Text and Borders */
.text-glow-green,
.text-glow-gold {
  text-shadow: 0 0 14px var(--tactical-primary-glow);
}

.text-glow-cyan {
  text-shadow: 0 0 12px var(--cyber-cyan-glow);
}

.border-glow-cyan,
.border-glow-gold,
.border-glow-green {
  box-shadow: 0 0 15px var(--tactical-primary-glow);
}

/* COMPROTIC Footer Logo Glowing Hover Effect */
.comprotic-footer-logo-link {
  display: inline-block;
  position: relative;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
}

.comprotic-footer-logo-link img {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.9));
}

.comprotic-footer-logo-link:hover img {
  filter: drop-shadow(0 0 16px rgba(0, 203, 230, 0.8)) drop-shadow(0 0 28px rgba(184, 139, 69, 0.65)) brightness(1.2);
  transform: translateY(-2px) scale(1.03);
}

.comprotic-footer-logo-link::after {
  content: '';
  position: absolute;
  inset: -8px -12px;
  border-radius: 14px;
  background: radial-gradient(ellipse at center, rgba(0, 203, 230, 0.3) 0%, rgba(184, 139, 69, 0.25) 45%, transparent 75%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: -1;
  filter: blur(10px);
}

.comprotic-footer-logo-link:hover::after {
  opacity: 1;
}

/* Scanner Line Animation */
.scanline-container {
  position: relative;
  overflow: hidden;
}

.scanline-container::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 5;
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
}

@keyframes scanline-anim {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(1000%);
  }
}

.laser-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--cyber-cyan) 50%, transparent 100%);
  box-shadow: 0 0 15px var(--cyber-cyan);
  opacity: 0.8;
  animation: scanline-anim 4s linear infinite;
  pointer-events: none;
  z-index: 6;
}

/* Radar Pulse Animation */
@keyframes radar-sweep {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.radar-sweep-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, var(--tactical-green), transparent);
  transform-origin: left center;
  animation: radar-sweep 3s linear infinite;
}

/* Signal Wave Propagation (Mesh / Drone Section) */
@keyframes pulse-wave {
  0% {
    transform: scale(0.8);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.pulse-circle {
  animation: pulse-wave 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-darker);
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border: 1px solid rgba(184, 139, 69, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--tactical-primary);
}

/* Tab Switcher Styling */
.tab-btn {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.tab-btn.active {
  background: rgba(184, 139, 69, 0.18);
  border-color: var(--tactical-primary);
  color: var(--tactical-primary-light);
  box-shadow: 0 0 12px rgba(184, 139, 69, 0.25);
}

/* Glowing Pulsing Status Dot */
.status-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--tactical-primary);
  box-shadow: 0 0 10px var(--tactical-primary);
  animation: status-pulse 1.8s infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Responsive Modal Styling */
.modal-overlay {
  background: rgba(3, 7, 18, 0.88);
  backdrop-filter: blur(12px);
}

/* Collapsible Top Telemetry Live Feed on Scroll */
#top-telemetry-feed {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s ease;
  max-height: 60px;
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
}

#top-telemetry-feed.telemetry-hidden {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top-color: transparent !important;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Tactical Artificial Horizon Gyroscopic Simulation */
@keyframes horizonTiltFloat {
  0% {
    transform: rotate(-5.4deg) translateY(2px);
  }
  35% {
    transform: rotate(-4.2deg) translateY(0.5px);
  }
  70% {
    transform: rotate(-6.8deg) translateY(3.5px);
  }
  100% {
    transform: rotate(-5.1deg) translateY(1.5px);
  }
}

.artificial-horizon-gyro {
  transform-origin: 50px 50px;
  animation: horizonTiltFloat 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  will-change: transform;
}