/* ============================================================
   Header Effects — switch by adding a class to <header class="header">
   Options: header-particles | header-neural | header-aurora | header-matrix | header-geometric
   Default (no extra class) = plain white as before
   ============================================================ */

/* ---- shared base for all effects ---- */
/* .header[class*="header-"] {
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: hidden;
} */

.header[class*="header-"] .header-content {
  position: relative;
  z-index: 2;
}

.header[class*="header-"] canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* dark-overlay variants need light text on buttons inside header */
.header-neural,
.header-matrix {
  background: #0a0e1a;
  border-bottom-color: #1e293b;
}

.header-neural .logo,
.header-matrix .logo {
  background: linear-gradient(135deg, #38bdf8, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-neural .tagline,
.header-matrix .tagline {
  color: #94a3b8;
}

/* light variants */
.header-particles,
.header-geometric {
  background: #ffffff;
  border-bottom-color: var(--color-border);
}

.header-aurora {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
  border-bottom-color: #312e81;
}

.header-aurora .logo {
  background: linear-gradient(135deg, #f472b6, #818cf8, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-aurora .tagline {
  color: #c4b5fd;
}

/* ---- ensure buttons look great on dark backgrounds ---- */
.header-neural .btn-primary,
.header-matrix .btn-primary {
  background: #38bdf8;
  color: #0c1a2e;
}
.header-neural .btn-primary:hover,
.header-matrix .btn-primary:hover {
  background: #7dd3fc;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
}

.header-neural .btn-secondary,
.header-matrix .btn-secondary {
  background: #34d399;
  color: #0c1a2e;
}
.header-neural .btn-secondary:hover,
.header-matrix .btn-secondary:hover {
  background: #6ee7b7;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
}

.header-neural .btn-accent,
.header-matrix .btn-accent {
  background: #a78bfa;
  color: #0c1a2e;
}
.header-neural .btn-accent:hover,
.header-matrix .btn-accent:hover {
  background: #c4b5fd;
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.3);
}

.header-aurora .btn-primary {
  background: linear-gradient(135deg, #f472b6, #ec4899);
  color: #fff;
}
.header-aurora .btn-primary:hover {
  box-shadow: 0 0 20px rgba(244, 114, 182, 0.4);
  transform: translateY(-2px);
}

.header-aurora .btn-secondary {
  background: linear-gradient(135deg, #818cf8, #6366f1);
  color: #fff;
}
.header-aurora .btn-secondary:hover {
  box-shadow: 0 0 20px rgba(129, 140, 248, 0.4);
  transform: translateY(-2px);
}

.header-aurora .btn-accent {
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #fff;
}
.header-aurora .btn-accent:hover {
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.4);
  transform: translateY(-2px);
}