/* ═══════════════════════════════════════════
   MAXO — Dark Theme Variables & Animations
   (Plain CSS — no PostCSS @layer needed)
═══════════════════════════════════════════ */

:root {
  --background: 222 47% 11%;
  --foreground: 210 40% 96%;
  --card: 217 33% 14%;
  --card-foreground: 210 40% 96%;
  --popover: 217 33% 14%;
  --popover-foreground: 210 40% 96%;
  --primary: 38 92% 50%;
  --primary-foreground: 222 47% 11%;
  --secondary: 187 94% 43%;
  --secondary-foreground: 222 47% 11%;
  --muted: 217 33% 18%;
  --muted-foreground: 215 16% 75%;
  --accent: 187 94% 43%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 217 33% 20%;
  --input: 217 33% 20%;
  --ring: 38 92% 50%;
  --radius: 0.75rem;
  --gold: 38 92% 50%;
  --gold-foreground: 222 47% 11%;
  --gold-glow: 38 92% 60%;
  --cyan: 187 94% 43%;
  --cyan-glow: 187 94% 55%;
  --navy: 222 47% 11%;
  --navy-light: 217 33% 17%;
  --navy-deep: 222 47% 6%;
  --success: 142 76% 36%;
  --success-foreground: 210 40% 98%;

  /* ── Override Bootstrap primary → gold (prevents Bootstrap's !important from showing blue) ── */
  --bs-primary: hsl(38 92% 50%);
  --bs-primary-rgb: 245, 163, 10;
  --bs-primary-text-emphasis: hsl(38 92% 35%);
  --bs-link-color: hsl(38 92% 50%);
  --bs-link-color-rgb: 245, 163, 10;
  --bs-link-hover-color: hsl(38 92% 65%);
  --bs-body-bg: hsl(222 47% 11%);
  --bs-body-color: hsl(210 40% 96%);
  --bs-border-color: hsl(217 33% 20%);
}

/* ─── Base ─── */
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ─── Glass ─── */
.glass {
  background-color: hsl(var(--card) / 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid hsl(var(--border) / 0.5);
}
.glass-strong {
  background-color: hsl(var(--card) / 0.6);
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  border: 1px solid hsl(var(--border) / 0.6);
}

/* ─── Text Gradients ─── */
.text-gradient-gold {
  background: linear-gradient(135deg, hsl(38 92% 50%), hsl(38 92% 70%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.text-gradient-cyan {
  background: linear-gradient(135deg, hsl(187 94% 43%), hsl(187 94% 63%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* ─── Glows ─── */
.glow-gold {
  box-shadow: 0 0 20px hsl(38 92% 50% / 0.3), 0 0 60px hsl(38 92% 50% / 0.1);
}
.glow-gold-strong {
  box-shadow: 0 0 30px hsl(38 92% 50% / 0.6), 0 0 80px hsl(38 92% 50% / 0.3), 0 0 120px hsl(38 92% 50% / 0.15);
}
.glow-cyan {
  box-shadow: 0 0 20px hsl(187 94% 43% / 0.3), 0 0 60px hsl(187 94% 43% / 0.1);
}

/* ─── Border Glows ─── */
.border-glow-gold  { border: 1px solid hsl(38 92% 50% / 0.4); }
.border-glow-cyan  { border: 1px solid hsl(187 94% 43% / 0.4); }
.border-glow-red   { border: 1px solid hsl(0 84% 60% / 0.4); }
.border-glow-green { border: 1px solid hsl(142 76% 36% / 0.4); }

/* ─── Backgrounds ─── */
.gradient-navy {
  background: linear-gradient(180deg, hsl(222 47% 6%) 0%, hsl(222 47% 11%) 50%, hsl(222 47% 6%) 100%);
}
.grid-bg {
  background-image:
    linear-gradient(hsl(217 33% 20% / 0.3) 1px, transparent 1px),
    linear-gradient(90deg, hsl(217 33% 20% / 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ─── Hover Lift ─── */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px hsl(38 92% 50% / 0.15);
}

/* ─── Scroll Fade In ─── */
.scroll-fade-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}
.scroll-fade-section.visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto; /* release after done */
}

/* ─── SVG Wire Animation ───
   IMPORTANT: opacity-only animation — compositor-only, zero Paint cost.
   stroke-dashoffset was removed because it forces CPU repaint every frame. */
.wire-path {
  animation: wire-fade 4s ease-in-out infinite;
  will-change: opacity;
}

/* ─── Keyframes ─── */
@keyframes wire-fade {
  0%   { opacity: 0; }
  15%  { opacity: 0.7; }
  60%  { opacity: 0.6; }
  85%  { opacity: 0.15; }
  100% { opacity: 0; }
}

@keyframes breathe-glow {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.65;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.18);
    opacity: 1;
  }
}

@keyframes breathe-overlay {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Animation Utilities ─── */
.animate-float           { animation: float 4s ease-in-out infinite; will-change: transform; }
.animate-bounce-slow     { animation: bounce-slow 2s ease-in-out infinite; will-change: transform; }
.animate-fadeInUp        { animation: fadeInUp 0.6s ease-out both; }
.animate-breathe-glow    { animation: breathe-glow 4s ease-in-out infinite; will-change: transform, opacity; }
.animate-breathe-overlay { animation: breathe-overlay 4s ease-in-out infinite; will-change: opacity; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scroll-fade-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .animate-fadeInUp {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── Range Sliders ─── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: hsl(38 92% 50%);
  cursor: pointer;
  margin-top: -8px;
  box-shadow: 0 0 10px hsl(38 92% 50% / 0.5);
  border: 2px solid hsl(222 47% 11%);
}
input[type="range"]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: hsl(38 92% 50%);
  cursor: pointer;
  border: 2px solid hsl(222 47% 11%);
  box-shadow: 0 0 10px hsl(38 92% 50% / 0.5);
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: hsl(217 33% 20%);
  border-radius: 2px;
}
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: hsl(217 33% 20%);
  border-radius: 2px;
}

/* ─── Force override Bootstrap's !important color classes ─── */
/* Bootstrap uses rgba(var(--bs-primary-rgb), ...) !important which beats Tailwind.
   These rules are placed last so they win the cascade. */
.bg-primary    { background-color: hsl(38 92% 50%) !important; }
.text-primary  { color:            hsl(38 92% 50%) !important; }
.border-primary{ border-color:     hsl(38 92% 50%) !important; }
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: hsl(38 92% 50%) !important;
  border-color:     hsl(38 92% 50%) !important;
  color:            hsl(222 47% 11%) !important;
}