/* Decorative wave leading into the story invitation section. */
.footer-wave {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 104px;
    overflow: hidden;
    background: var(--paper, #f7f5ef);
    pointer-events: none;
}

.footer-wave__layer {
    position: absolute;
    left: -4%;
    bottom: -1px;
    display: block;
    width: 108%;
    max-width: none;
    height: calc(100% + 2px);
    animation: footer-wave-drift var(--wave-duration, 24s) ease-in-out var(--wave-delay, 0s) infinite alternate;
    animation-play-state: paused;
}

.footer-wave__layer--back {
    --wave-duration: 25s;
    --wave-delay: -8s;
    fill: #e6e8df;
}

.footer-wave__layer--light {
    --wave-duration: 22s;
    --wave-delay: -4s;
    fill: #cdd2c0;
    animation-direction: alternate-reverse;
}

.footer-wave__layer--middle {
    --wave-duration: 24s;
    --wave-delay: -11s;
    fill: #9fa88d;
}

.footer-wave__layer--front {
    --wave-duration: 20s;
    --wave-delay: -6s;
    fill: var(--olive, #474e37);
    animation-direction: alternate-reverse;
}

.footer-wave.is-in-view .footer-wave__layer {
    animation-play-state: running;
}

/* Blend the same olive edge into the invitation's photo variant. */
.footer-wave + .cta-photo::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 72px;
    background: linear-gradient(var(--olive), transparent);
    pointer-events: none;
}

@keyframes footer-wave-drift {
    from { transform: translateX(-1.6%); }
    to { transform: translateX(1.6%); }
}

@media (max-width: 760px) {
    .footer-wave { height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    .footer-wave__layer {
        animation: none;
        transform: none;
    }
}