/* Основная анимация волны */
@keyframes pulse-wave {
    0% {
        transform: translate(-50%, -50%) scale(0); /* Начинаем из центра точки, scale 0 */
        opacity: 0;
    }
    50% {
        opacity: 0.5; /* В середине анимации волна видна */
    }
    100% {
        transform: translate(-50%, -50%) scale(20); /* Расширяемся (масштаб 20 - подбери значение) */
        opacity: 0; /* Исчезаем */
    }
}

.wave {
    /* Изначальные стили: маленькие, невидимые, позиционированы */
    width: 10px; /* Начальный размер волны */
    height: 10px; /* Начальный размер волны */
    top: 0;       /* Позиционируем относительно waves-container */
    left: 0;      /* Позиционируем относительно waves-container */
    transform: translate(-50%, -50%); /* Центрируем круг относительно top/left 0,0 */
    transform-origin: center center; /* Убеждаемся, что масштабирование идет от центра */
    animation: pulse-wave 2s ease-out infinite; /* Применяем анимацию: 2с длительность, плавно, бесконечно */
}

/* CSS классы для разных состояний (для JS) */
.waves-state-1 .wave { /* Далеко */
    border-color: green;
    animation-duration: 3s; /* Волны медленнее */
    /* animation-timing-function: linear; */
}

.waves-state-2 .wave { /* Средне */
    border-color: yellow;
    animation-duration: 2s; /* Волны быстрее */
}

.waves-state-3 .wave { /* Близко */
    border-color: orange;
    animation-duration: 1.5s; /* Еще быстрее */
}

.waves-state-4 .wave { /* Очень близко (На грани) */
    border-color: red;
    animation-duration: 1s; /* Самые быстрые волны */
    /*animation-name: pulse-wave-fast; // Можно определить отдельную @keyframes для этого состояния*/
}
body {
    background-image: url('img/carbon.jpg');
    background-repeat: repeat;
    background-color: #333;
    background-attachment: fixed;
}