/* ECU animated website background */

:root {
  --ecu-blue: 90, 190, 255;
  --ecu-cyan: 105, 225, 255;
}

* {
  box-sizing: border-box;
}

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

body {
  background: #020b12;
  color: #fff;
}

body.body-full {
  position: relative;
  overflow-x: hidden;
}

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

.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 20s ease-in-out infinite alternate;
  will-change: transform;
}

.ecu-background-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(2, 12, 21, 0.03) 0%,
      rgba(2, 12, 21, 0.1) 43%,
      rgba(0, 7, 13, 0.36) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 7, 13, 0.1) 0%,
      rgba(0, 7, 13, 0.22) 100%
    );
}

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

.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-blue), 0.46);
  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-cyan), 0.34);
  stroke-width: 1.6;
  stroke-dasharray: 4 22 65 26;
  animation: ecu-flow-reverse 9s linear infinite;
}

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

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

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

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

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

.ecu-spark {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background: rgba(var(--ecu-cyan), 0.95);
  box-shadow:
    0 0 8px rgba(var(--ecu-cyan), 0.95),
    0 0 22px rgba(var(--ecu-blue), 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 42% 48% at 50% 46%,
      rgba(2, 14, 25, 0.34) 0%,
      rgba(2, 14, 25, 0.18) 44%,
      rgba(2, 14, 25, 0) 76%
    );
}

.navBar,
.hero-section,
.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;
  }
}