/* css/waves.css
   Cluster Wellen: CSS-Keyframes für die .Welle-Ebenen im Strand-SVG
   (transform + opacity, wie in der Vorlage). Das Pausieren außerhalb
   des Viewports regelt js/waves.js über animation-play-state. */

@keyframes waves-drift {
    0% {
        transform: translate(20px, -20px);
        opacity: 0;
    }
    70%,
    95% {
        opacity: 0.25;
    }
    100% {
        transform: translate(-10px, 10px);
        opacity: 0;
    }
}

/* backwards: Während der Startverzögerung gilt schon der 0-%-Zustand
   (opacity 0). Ohne das stehen die Ebenen nach dem Laden mit ihrer
   Grunddeckkraft im Bild und verschwinden dann abrupt, sobald die
   Animation beginnt. */
.waves-layer {
    animation: waves-drift 20s infinite backwards;
}

/* Wie in der Vorlage: versetzte Phasen, damit die Wellen nicht
   synchron anlaufen. Die fünfte Ebene startet ohne zusätzliche Pause. */
.waves-layer:nth-child(1) { animation-delay: 2s; }
.waves-layer:nth-child(2) { animation-delay: 0s; }
.waves-layer:nth-child(3) { animation-delay: 3s; }
.waves-layer:nth-child(4) { animation-delay: 1s; }