/* ECU animated website background - Modernized Neon Green Theme */

:root {
  --ecu-green: 158, 224, 0;
  --ecu-lime: 181, 240, 0;
  --ecu-dark: 5, 8, 6;
  --ecu-blue: 158, 224, 0;
  --ecu-cyan: 181, 240, 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: #050806;
  color: #f5f7f3;
}

body.body-full {
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}

.ecu-animated-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #050806;
}

.ecu-background-image {
  position: absolute;
  inset: -3%;
  background-image: url("ecu-background.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.03);
  animation: ecu-camera-drift 24s ease-in-out infinite alternate;
  will-change: transform;
  opacity: 1;
  filter: contrast(1.10) brightness(1.04);
}

.ecu-background-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 50% 30%,
      rgba(158, 224, 0, 0.04) 0%,
      rgba(5, 8, 6, 0.15) 45%,
      rgba(2, 6, 3, 0.52) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 8, 6, 0.15) 0%,
      rgba(2, 6, 3, 0.38) 100%
    );
}

.ecu-signal-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

.signal-track {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: url(#ecu-glow);
}

.signal-track-a,
.signal-track-c {
  stroke: rgba(var(--ecu-green), 0.50);
  stroke-width: 2;
  stroke-dasharray: 2 16 42 22;
  animation: ecu-flow-forward 7s linear infinite;
}

.signal-track-b,
.signal-track-d {
  stroke: rgba(var(--ecu-lime), 0.38);
  stroke-width: 1.6;
  stroke-dasharray: 4 22 65 26;
  animation: ecu-flow-reverse 9s linear infinite;
}

.signal-dot {
  fill: rgb(var(--ecu-lime));
}

.signal-dot-a {
  opacity: 0.95;
}

.signal-dot-b {
  opacity: 0.85;
}

.signal-dot-c,
.signal-dot-d {
  opacity: 0.80;
}

.ecu-sparks {
  position: absolute;
  inset: 0;
}

.ecu-spark {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background: rgba(var(--ecu-lime), 0.95);
  box-shadow:
    0 0 8px rgba(var(--ecu-lime), 0.95),
    0 0 20px rgba(var(--ecu-green), 0.65);
  opacity: 0;
  animation: ecu-spark-pulse var(--duration) ease-in-out var(--delay) infinite;
}

.ecu-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 65% 65% at 50% 50%,
      rgba(2, 6, 3, 0.08) 0%,
      rgba(2, 6, 3, 0.30) 65%,
      rgba(0, 0, 0, 0.70) 100%
    );
}

.navBar,
.ecufile-header,
.hero-section,
.ecufile-main,
.video-wrap,
main.body-full {
  position: relative;
  z-index: 1;
}

@keyframes ecu-camera-drift {
  0% {
    transform: scale(1.03) translate3d(-0.4%, -0.2%, 0);
  }

  100% {
    transform: scale(1.08) translate3d(0.65%, 0.35%, 0);
  }
}

@keyframes ecu-flow-forward {
  to {
    stroke-dashoffset: -180;
  }
}

@keyframes ecu-flow-reverse {
  to {
    stroke-dashoffset: 210;
  }
}

@keyframes ecu-spark-pulse {
  0%,
  82%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }

  87% {
    opacity: 0.95;
    transform: scale(1.15);
  }

  93% {
    opacity: 0.28;
    transform: scale(2.2);
  }
}

@media (max-width: 768px) {
  .ecu-background-image {
    animation-duration: 26s;
  }

  .ecu-signal-map {
    opacity: 0.62;
  }

  .ecu-spark:nth-child(n + 9) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecu-background-image,
  .signal-track,
  .ecu-spark {
    animation: none !important;
  }

  .ecu-signal-map {
    opacity: 0.35;
  }
}