.sound-waves {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 3rem 0;
}

.wave-bar {
    width: 8px;
    background: #E8C547;
    border-radius: 4px;
    animation: waveAnimation 1s ease-in-out infinite;
}

.wave-bar:nth-child(1) { height: 40px; animation-delay: 0s; }
.wave-bar:nth-child(2) { height: 60px; animation-delay: 0.1s; }
.wave-bar:nth-child(3) { height: 80px; animation-delay: 0.2s; }
.wave-bar:nth-child(4) { height: 100px; animation-delay: 0.3s; }
.wave-bar:nth-child(5) { height: 120px; animation-delay: 0.4s; }
.wave-bar:nth-child(6) { height: 100px; animation-delay: 0.5s; }
.wave-bar:nth-child(7) { height: 80px; animation-delay: 0.6s; }
.wave-bar:nth-child(8) { height: 60px; animation-delay: 0.7s; }
.wave-bar:nth-child(9) { height: 40px; animation-delay: 0.8s; }

@keyframes waveAnimation {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1.2); }
}

.river-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    background: #0a1628;
    padding: 2rem 0;
    overflow: hidden;
}

.wave-row {
    width: 100%;
    height: 60px;
    position: relative;
    overflow: hidden;
}

.wave-row svg {
    position: absolute;
    width: 200%;
    height: 100%;
    left: 0;
    top: 0;
}

.wave-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wave-row:nth-child(1) svg { animation: flowRight 8s linear infinite; }
.wave-row:nth-child(2) svg { animation: flowRight 7s linear infinite; animation-delay: -1s; }
.wave-row:nth-child(3) svg { animation: flowRight 9s linear infinite; animation-delay: -2s; }
.wave-row:nth-child(4) svg { animation: flowRight 6s linear infinite; animation-delay: -0.5s; }
.wave-row:nth-child(5) svg { animation: flowRight 8.5s linear infinite; animation-delay: -3s; }
.wave-row:nth-child(6) svg { animation: flowRight 7.5s linear infinite; animation-delay: -1.5s; }
.wave-row:nth-child(7) svg { animation: flowRight 9.5s linear infinite; animation-delay: -4s; }
.wave-row:nth-child(8) svg { animation: flowRight 6.5s linear infinite; animation-delay: -2.5s; }
.wave-row:nth-child(9) svg { animation: flowRight 8s linear infinite; animation-delay: -0.8s; }
.wave-row:nth-child(10) svg { animation: flowRight 7s linear infinite; animation-delay: -3.5s; }
.wave-row:nth-child(11) svg { animation: flowRight 9s linear infinite; animation-delay: -1.2s; }
.wave-row:nth-child(12) svg { animation: flowRight 6.8s linear infinite; animation-delay: -2.8s; }

@keyframes flowRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}

.wave-row:nth-child(1) .wave-path { stroke: #1a3a5c; stroke-width: 3; }
.wave-row:nth-child(2) .wave-path { stroke: #234b6e; stroke-width: 4; }
.wave-row:nth-child(3) .wave-path { stroke: #2d5d82; stroke-width: 3; }
.wave-row:nth-child(4) .wave-path { stroke: #3d7ea6; stroke-width: 5; }
.wave-row:nth-child(5) .wave-path { stroke: #4a9bc4; stroke-width: 4; }
.wave-row:nth-child(6) .wave-path { stroke: #5bb4d6; stroke-width: 3; }
.wave-row:nth-child(7) .wave-path { stroke: #4a9bc4; stroke-width: 4; }
.wave-row:nth-child(8) .wave-path { stroke: #3d7ea6; stroke-width: 5; }
.wave-row:nth-child(9) .wave-path { stroke: #2d5d82; stroke-width: 3; }
.wave-row:nth-child(10) .wave-path { stroke: #234b6e; stroke-width: 4; }
.wave-row:nth-child(11) .wave-path { stroke: #1a3a5c; stroke-width: 3; }
.wave-row:nth-child(12) .wave-path { stroke: #0f2942; stroke-width: 4; }

.wave-row:nth-child(odd) { opacity: 0.8; }
.wave-row:nth-child(even) { opacity: 1; }

.wave-row:nth-child(5) .wave-path,
.wave-row:nth-child(6) .wave-path,
.wave-row:nth-child(7) .wave-path {
    filter: drop-shadow(0 0 8px rgba(91, 180, 214, 0.5));
}
</style>