/* Анимированная волна-разделитель между блоками главной.
   Базируется на той, что между slider и categories в index.php — но без negative margin,
   чтобы работать как полноценный разделитель в потоке. 3 SVG-слоя движутся с разной скоростью. */

.dusha-wave {
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 60px;
    margin-top: -30px;     /* нахлёст на блок выше — экономим высоту */
    margin-bottom: -10px;  /* лёгкий нахлёст на блок ниже */
    line-height: 0;
    pointer-events: none;
    background: transparent;
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.dusha-wave svg {
    position: absolute; left: 0; top: 0;
    display: block; width: 200%; height: 60px;
}
.dusha-wave .wave-back  { animation: dushaWaveSlide 14s linear infinite reverse; opacity: 0.7; }
.dusha-wave .wave-mid   { animation: dushaWaveSlide 18s linear infinite; }
.dusha-wave .wave-front { animation: dushaWaveSlide 11s linear infinite; opacity: 0.55; }

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

/* Нахлёст — для волн, что должны частично перекрывать предыдущий блок */
.dusha-wave--overlap-up   { margin-top: -40px; }
.dusha-wave--overlap-down { margin-bottom: -40px; }

/* Mobile — компактнее */
@media (max-width: 768px) {
    .dusha-wave { height: 44px; margin-top: -22px; margin-bottom: -8px; }
    .dusha-wave svg { height: 44px; }
}