/* Cycle wave edge, see waves.html. Link after motion.css. */
.cy-waves { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(90px, 13vw, 190px); pointer-events: none; z-index: 3; }
.cy-wave { position: absolute; left: -4%; bottom: 0; width: 108%; height: 100%; display: block; }
.cy-wave-berry path { fill: #e86f9e; fill-opacity: 0.62; }
.cy-wave-jade path { fill: #a6cf76; fill-opacity: 0.62; }
.cy-wave-violet path { fill: #a97bf0; fill-opacity: 0.62; }
.cy-wave-blue path { fill: #7fb2f5; fill-opacity: 0.62; }
.cy-wave-front { height: 62%; }
.cy-wave-front path { fill: var(--wave-next, #fbf3ea); }
/* Wave on top of a band (flipped use): add .cy-waves-top to put the hills at the top edge of a dark scene. */
.cy-waves-top { bottom: auto; top: -1px; transform: scaleY(-1); }