/* ==========================================================================
   WAVE DIVIDERS
   The three wave layers are defined once in an SVG sprite (#waves) and
   reused with <use>. Each layer has its own opacity and bobbing rhythm for
   an organic swell. The colour comes from the divider (currentColor) and
   matches the section that FOLLOWS.

   Anti-seam: the container is 25% taller than the visible area, so a layer
   translating upwards never reveals a gap showing the previous section.
   ========================================================================== */
.wave-divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1px - (var(--wave-height) * 0.25));
    height: calc(var(--wave-height) * 1.25);
    line-height: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

.wave-divider svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.wave-layer { fill: currentColor; }

/* back layer: most transparent, longest wavelength, widest swing */
.wave-layer--1 {
    fill-opacity: 0.32;
    animation: wave-bob-lg 8s ease-in-out infinite;
}

/* middle layer: offset phase for a more organic motion */
.wave-layer--2 {
    fill-opacity: 0.6;
    animation: wave-bob-md 6s ease-in-out infinite;
    animation-delay: -2s;
}

/* front layer: solid colour, shorter and faster ripples */
.wave-layer--3 {
    fill-opacity: 1;
    animation: wave-bob-sm 4.5s ease-in-out infinite;
    animation-delay: -1s;
}

@keyframes wave-bob-lg {
    0%, 100% { transform: translateY(-10px); }
    50% { transform: translateY(20px); }
}

@keyframes wave-bob-md {
    0%, 100% { transform: translateY(14px); }
    50% { transform: translateY(-16px); }
}

@keyframes wave-bob-sm {
    0%, 100% { transform: translateY(-9px); }
    50% { transform: translateY(13px); }
}

@media (prefers-reduced-motion: reduce) {
    .wave-layer {
        animation: none;
    }
}

/* wave colour = background of the FOLLOWING section */
.wave-divider--to-teal-200 { color: var(--teal-200); }
.wave-divider--to-teal-300 { color: var(--teal-300); }