/* =========================
   KEYFRAMES
========================= */
@keyframes wave-drift-a {
  0%   { transform: translateX(-25%); }
  100% { transform: translateX(-27%); }
}
@keyframes wave-drift-b {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(-45%); }
}
@keyframes wave-drift-c {
  0%   { transform: translateX(-58%); }
  100% { transform: translateX(-53%); }
}

/* =========================
   HEADER WAVES
========================= */
.top__wave {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 720px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.top__wave .wave-img        { width: max(300%, 4320px); height: 100%; display: block; margin-left: 50%; }
.top__wave--lilac          { color: var(--lilac); }
.top__wave--lilac .wave-img { animation: wave-drift-a 30s ease-in-out infinite alternate; }
.top__wave--purple         { top: 220px; height: 500px; color: var(--purple); }
.top__wave--purple .wave-img{ animation: wave-drift-b 10s ease-in-out infinite alternate; }

/* =========================
   SECTION FILL WAVES — shared base
========================= */
.wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}
.wave .wave-img {
  width: max(300%, 4320px);
  height: 100%;
  display: block;
  margin-left: 50%;
}

/* Sections that host a fill wave */
.section--green,
.section--purple,
.footer {
  position: relative;
  overflow-x: clip;
}

.footer .container {
  position: relative;
  z-index: 10;
}

/* =========================
   INDIVIDUAL WAVES
========================= */
.wave--thisyear {
  top: -250px;
  color: var(--green);
}
.wave--thisyear .wave-img { animation: wave-drift-c 30s ease-in-out infinite alternate; }

.wave--getinvolved {
  top: -150px;
  color: var(--lilac);
}
.wave--getinvolved .wave-img { animation: wave-drift-b 60s ease-in-out infinite alternate; }

.wave--footer {
  top: -240px;
  color: var(--purple);
}
.wave--footer .wave-img { animation: wave-drift-a 75s ease-in-out infinite alternate; }