/* Drifting waves behind every Scrum Tools page: three soft layers in the page's greens that slide
   slowly sideways at different speeds and directions. Markup: <div class="waves" aria-hidden="true">
   <i></i><i></i><i></i></div> as the first child of <body>. Motion stops for prefers-reduced-motion. */

.waves {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.waves > i {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    background-repeat: repeat-x;
    background-size: 50% 100%;
    will-change: transform;
}

.waves > i:nth-child(1) {
    height: 42vh;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 90 C 240 44, 480 44, 720 90 S 1200 136, 1440 90 V320 H0 Z' fill='%23DEE5DC'/%3E%3C/svg%3E");
    opacity: 0.9;
    animation: waves-left 140s linear infinite;
}

.waves > i:nth-child(2) {
    height: 32vh;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 110 C 240 70, 480 70, 720 110 S 1200 150, 1440 110 V320 H0 Z' fill='%23D0D9CE'/%3E%3C/svg%3E");
    opacity: 0.9;
    animation: waves-right 100s linear infinite;
}

.waves > i:nth-child(3) {
    height: 22vh;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 120 C 240 86, 480 86, 720 120 S 1200 154, 1440 120 V320 H0 Z' fill='%23C2CCC1'/%3E%3C/svg%3E");
    animation: waves-left 75s linear infinite;
}

@keyframes waves-left {
    to { transform: translateX(-50%); }
}

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

@media (prefers-reduced-motion: reduce) {
    .waves > i:nth-child(n) { animation: none; }
}