:root {
    --bg-red: 255 0 0;
}

@-webkit-keyframes ripple-white {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
            0 0 0 10px rgba(255, 255, 255, 0.1),
            0 0 0 20px rgba(255, 255, 255, 0.1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
            0 0 0 10px rgba(255, 255, 255, 0.1),
            0 0 0 20px rgba(255, 255, 255, 0.1);
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1),
            0 0 0 20px rgba(255, 255, 255, 0.1),
            0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1),
            0 0 0 20px rgba(255, 255, 255, 0.1),
            0 0 0 30px rgba(255, 255, 255, 0);
    }
}

@keyframes ripple-white {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
            0 0 0 10px rgba(255, 255, 255, 0.1),
            0 0 0 20px rgba(255, 255, 255, 0.1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
            0 0 0 10px rgba(255, 255, 255, 0.1),
            0 0 0 20px rgba(255, 255, 255, 0.1);
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1),
            0 0 0 20px rgba(255, 255, 255, 0.1),
            0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1),
            0 0 0 20px rgba(255, 255, 255, 0.1),
            0 0 0 30px rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes ripple-yellow {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(249 217 33 / 0.1),
            0 0 0 10px rgba(249 217 33 / 0.1), 0 0 0 20px rgba(249 217 33 / 0.1);
        box-shadow: 0 0 0 0 rgba(249 217 33 / 0.1),
            0 0 0 10px rgba(249 217 33 / 0.1), 0 0 0 20px rgba(249 217 33 / 0.1);
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(249 217 33 / 0.1),
            0 0 0 20px rgba(249 217 33 / 0.1), 0 0 0 30px rgba(249 217 33 / 0);
        box-shadow: 0 0 0 10px rgba(249 217 33 / 0.1),
            0 0 0 20px rgba(249 217 33 / 0.1), 0 0 0 30px rgba(249 217 33 / 0);
    }
}

@keyframes ripple-red {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgb(var(--bg-red) / 0.1),
            0 0 0 10px rgb(var(--bg-red) / 0.1),
            0 0 0 20px rgb(var(--bg-red) / 0.1);
        box-shadow: 0 0 0 0 rgb(var(--bg-red) / 0.1),
            0 0 0 10px rgb(var(--bg-red) / 0.1),
            0 0 0 20px rgb(var(--bg-red) / 0.1);
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgb(var(--bg-red) / 0.1),
            0 0 0 20px rgb(var(--bg-red) / 0.1),
            0 0 0 30px rgb(var(--bg-red) / 0.1);
        box-shadow: 0 0 0 10px rgb(var(--bg-red) / 0.1),
            0 0 0 20px rgb(var(--bg-red) / 0.1),
            0 0 0 30px rgb(var(--bg-red) / 0);
    }
}

.btn-play {
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-white 1s linear infinite;
}

@keyframes zoom-in {
    from {
        transform: scale(0.95);
    }
    to {
        transform: scale(1.05);
    }
}

.btn-play-youtube {
    -webkit-animation: zoom-in 1s ease-in-out infinite alternate;
    animation: zoom-in 1s ease-in-out infinite alternate;
}