:root { }

body {
  background: #000; /* fallback color while video loads */
  color: var(--text-color, #eaeef2);
}



.bgjujutsu,
.bgjujutsu-2,
.gifjujutsu {
  background-image: none !important;
  background: transparent !important;
}






/* Ensure full page height */
html, body {
  margin: 0;
  padding: 0;
}

/* Base for all pages */
body {
  position: relative;
  color: var(--text-color, #eaeef2);
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
  z-index: 0;
}

/* Gradient overlay for all pages */
body::before {
  content: "";
  position: fixed;       /* fixed ensures it stays behind content */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;  /* ensures it doesn’t block clicks */
  background: linear-gradient(to bottom, #000000, #1a001a); /* default, can override per page */
}


body.characters-page::before {
  background: linear-gradient(to bottom, #000000, #1a001a);
}

body.villains-page::before {
  background: linear-gradient(to bottom, #000000, #1a0000);
}

body.episode-page::before {
  background: linear-gradient(to bottom, #000000, #00001a);
}

body.gallery-page::before {
  background: linear-gradient(to bottom, #000000, #1a0010);
}

body.about-page::before {
  background: linear-gradient(to bottom, #000000, #001a1a);
}

body.contact-page::before {
  background: linear-gradient(to bottom, #000000, #001a00);
   min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.contact-page main.container {
  flex: 1; /* pushes footer down if content is short */
}

#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}


:where(header, main, footer, .container, .hero) {
  position: relative;
  z-index: 1;
}


.hero-bg{
  background: transparent !important;
  mix-blend-mode: normal !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}





.hero-wave{display:none !important}
.hero-wave path{fill:transparent !important}

@media (prefers-reduced-motion: reduce){
  body::after{opacity:0.9;filter:none}
}


@media (prefers-reduced-motion: reduce) {
  #bg-video { display: none; }
  body { background: #000; }
}

/* Base overlay for all pages */