/* Large, faint waves that spill past the viewport edges. */
html {
  overflow-x: clip;
}
.home-page main > section,
.footer,
.inner-page main {
  isolation: isolate;
}
.edge-wave {
  position: absolute;
  z-index: -1;
  left: -58vw;
  width: 216vw;
  height: 220px;
  pointer-events: none;
  overflow: visible;
  opacity: 0.18;
}
.edge-wave-motion {
  display: block;
  width: 132%;
  height: 145%;
  margin-left: -16%;
  margin-top: -8%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  animation: edge-wave-drift 26s ease-in-out infinite alternate;
}
.edge-wave-a .edge-wave-motion { background-image: url("../images/waves/wave-ribbon.svg"); }
.edge-wave-b .edge-wave-motion { background-image: url("../images/waves/wave-fill.svg"); }
.edge-wave-c .edge-wave-motion { background-image: url("../images/waves/wave-soft.svg"); }
.edge-wave-top { top: -88px; }
.edge-wave-bottom { bottom: -96px; }
.edge-wave-bottom .edge-wave-motion { animation-duration: 32s; animation-direction: alternate-reverse; }
.home-page main > section:nth-child(3n) .edge-wave-a .edge-wave-motion,
.home-page main > section:nth-child(3n+1) .edge-wave-b .edge-wave-motion {
  transform: scaleX(-1);
}
.overview .edge-wave { opacity: 0.12; }
.features .edge-wave,
.instagram .edge-wave,
.temporary-care .edge-wave,
.faq .edge-wave,
.schedule .edge-wave {
  opacity: 0.15;
}
.footer .edge-wave { opacity: 0.14; }
.footer .edge-wave-top { top: -60px; }
.inner-page main .edge-wave { height: 160px; opacity: 0.12; }
@keyframes edge-wave-drift {
  from { translate: 0 0; }
  to { translate: -4% 10px; }
}
@media (max-width: 760px) {
  .edge-wave { height: 140px; left: -72vw; width: 244vw; opacity: 0.14; }
  .edge-wave-top { top: -48px; }
  .edge-wave-bottom { bottom: -52px; }
}
@media (prefers-reduced-motion: reduce) {
  .edge-wave-motion { animation: none; }
}
@media print {
  .edge-wave { display: none; }
}