/**
 * ANIMATION CONSISTENCY FIX
 * Ensures background animation looks the same across all sections
 * Removes overlays and gradients that make animation look different in hero section
 */

/* Remove any background overlays from hero section */
.hero-section,
#hero {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

.hero-content {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
}

/* Ensure hero section doesn't have overlay that affects animation visibility */
.hero-section::before,
.hero-section::after,
#hero::before,
#hero::after {
  display: none !important;
  content: none !important;
}

/* Remove any gradients or overlays on sections that might affect animation */
section {
  background: transparent !important;
  background-image: none !important;
  position: relative;
  z-index: 1;
}

/* Ensure body has solid color, canvas behind everything */
body {
  background: var(--bg-color) !important;
  position: relative;
}

/* Make sure canvas is behind everything - ALWAYS FIXED */
#bgCanvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Remove any section-specific backgrounds that might overlay the animation */
#hero,
#about,
#dashboard,
#calculator,
#simulator,
#battery-flex-fund,
#assistant,
#blockchain,
#roadmap,
#contact {
  background: transparent !important;
  background-image: none !important;
}

/* Ensure all content has proper z-index to stay above canvas */
.hero-content,
.dashboard-container,
.panel,
.card,
.info-panel {
  position: relative;
  z-index: 1;
}

/* Fix navbar to not block animation */
nav {
  background: rgba(var(--bg-color-rgb, 0, 0, 0), 0.95) !important;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1000;
}

/* Light mode adjustments */
body.light-mode {
  --bg-color-rgb: 255, 255, 255;
}

body:not(.light-mode) {
  --bg-color-rgb: 0, 0, 0;
}

/* Remove any theme-specific overlays */
body.theme-neon .hero-section,
body.theme-purple .hero-section,
body.theme-blue .hero-section,
body.theme-red .hero-section,
body.theme-white .hero-section,
body.theme-gold .hero-section,
body.theme-green .hero-section,
body.theme-orange .hero-section,
body.theme-black .hero-section {
  background: transparent !important;
  background-image: none !important;
}

body.theme-neon #hero,
body.theme-purple #hero,
body.theme-blue #hero,
body.theme-red #hero,
body.theme-white #hero,
body.theme-gold #hero,
body.theme-green #hero,
body.theme-orange #hero,
body.theme-black #hero {
  background: transparent !important;
  background-image: none !important;
}

/* Remove any gradients from theme-specific content */
body.theme-black .hero-content,
body.theme-white .hero-content {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Ensure consistent animation visibility across viewport */
main {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* Remove any container backgrounds that might interfere */
.container {
  background: transparent !important;
}

/* Mobile fixes */
@media (max-width: 768px) {
  #bgCanvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
  }

  .hero-section,
  #hero {
    background: transparent !important;
  }
}