/* Two flat layered waves that ease a rose block into the charcoal footer.
   Place inside a positioned container with overflow: hidden. */

.waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  pointer-events: none;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  animation: wave-drift 28s linear infinite;
}

.wave-back {
  fill: var(--rose-deep);
  opacity: 0.45;
  animation-duration: 40s;
}

.wave-front { fill: var(--charcoal); }

@keyframes wave-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (min-width: 768px) {
  .waves { height: 110px; }
}