/* ==========================================================================
   Components (Buttons, Cards, Badges, UI Elements)
   ========================================================================== */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.9375rem;
  transition: all var(--transition-normal);
  border: 1px solid transparent;
}

.btn-primary {
  background-color: var(--color-accent-blue);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: #0d3156;
  color: #ffffff;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.btn-outline:hover {
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-border-hover);
}

/* Cards (Enterprise Glassmorphism) */
.card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-hover);
}

.card-glass {
  background: var(--color-surface);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.03);
}

/* Status Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.badge-safe { background: rgba(16, 185, 129, 0.1); color: var(--color-status-safe); }
.badge-safe .badge-dot { background: var(--color-status-safe); box-shadow: 0 0 8px var(--color-status-safe); }

.badge-threat { background: rgba(239, 68, 68, 0.1); color: var(--color-status-threat); }
.badge-threat .badge-dot { background: var(--color-status-threat); box-shadow: 0 0 8px var(--color-status-threat); }

.badge-intel { background: rgba(139, 92, 246, 0.1); color: var(--color-status-intel); }
.badge-intel .badge-dot { background: var(--color-status-intel); box-shadow: 0 0 8px var(--color-status-intel); }

.badge-neutral { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.badge-neutral .badge-dot { background: var(--color-text-secondary); }

/* Telemetry Dashboard UI */
.telemetry-panel {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.telemetry-header {
  background: var(--color-bg-secondary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.telemetry-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.telemetry-controls {
  display: flex;
  gap: 6px;
}

.telemetry-control {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border-hover);
}

.telemetry-body {
  padding: var(--spacing-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.telemetry-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.telemetry-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
}

.telemetry-value {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: 500;
  word-break: break-all;
}

.telemetry-value.loading {
  width: 100%;
  height: 1rem;
  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%);
  background-size: 200% 100%;
  animation: loadingPulse 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes loadingPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Animations */
.animate-fade-in {
  animation: fadeIn var(--transition-slow) ease forwards;
}

.animate-slide-up {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp var(--transition-slow) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   VAPT Simulation & Attack Graph Animations
   ========================================================================== */
.attack-graph {
  width: 100%;
  height: 200px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  margin-top: var(--spacing-md);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.02);
}

.ag-node {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.05);
  transition: all var(--transition-normal);
  z-index: 2;
}

.ag-node.threat {
  background: var(--color-status-threat);
  box-shadow: 0 0 12px var(--color-status-threat), 0 0 0 4px rgba(239, 68, 68, 0.2);
  animation: pulseThreat 2s infinite;
}

.ag-node.defense {
  background: var(--color-status-safe);
  box-shadow: 0 0 12px var(--color-status-safe), 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.ag-node.intel {
  background: var(--color-status-intel);
  box-shadow: 0 0 12px var(--color-status-intel), 0 0 0 4px rgba(139, 92, 246, 0.2);
}

.ag-line {
  position: absolute;
  height: 2px;
  background: var(--color-border);
  transform-origin: 0 50%;
  z-index: 1;
}

.ag-line.active {
  background: linear-gradient(90deg, var(--color-status-threat), var(--color-status-safe));
  background-size: 200% 100%;
  animation: dataFlow 1.5s linear infinite;
}

@keyframes pulseThreat {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

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

/* ==========================================================================
   Project & Gallery Visuals
   ========================================================================== */
.project-visual {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  box-shadow: var(--shadow-md);
  position: relative;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity var(--transition-normal);
}

.project-visual:hover img {
  opacity: 1;
}

.project-visual-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  z-index: 2;
  pointer-events: none;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-xl);
}