/* Волна от клика мышью: вокруг курсора расходится круг, как от капли в воде. */

.click-ripple {
    position: fixed;
    z-index: 100000;
    width: 0;
    height: 0;
    pointer-events: none;
}

.click-ripple__wave {
    /*
        Задаём box-sizing явно: на сайте глобальный border-box, и без этой строки
        центровка зависела бы от того, входит рамка в width или нет.
        С border-box рамка внутри width — значит центр это ровно минус половина width.
    */
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 0 solid #cf006f;
    border-radius: 50%;
    opacity: 0;
    animation: click-ripple-wave 700ms ease-out forwards;
}

/*
    Круг растёт и одновременно утончается — так волна читается как расходящаяся,
    а не как раздувающийся бублик. Отрицательный margin держит центр в точке клика:
    ровно половина width, толщина рамки в расчёт не входит (см. box-sizing выше).
*/
@keyframes click-ripple-wave {
    from {
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        border-width: 4px;
        opacity: 0.9;
    }

    to {
        width: 70px;
        height: 70px;
        margin: -35px 0 0 -35px;
        border-width: 1px;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .click-ripple {
        display: none;
    }
}