/* Ping is a decorative sonar marker. Its color is inherited from the host. */
.octopus-ping {
    display: block;
    overflow: visible;
    color: inherit;
    pointer-events: none;
}

.octopus-ping__ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: octopus-ping-sonar 2.8s cubic-bezier(.2, .65, .3, 1) infinite;
}

.octopus-ping__ring--second { animation-delay: -1.4s; }
.octopus-ping[data-active] .octopus-ping__ring { animation-duration: 1.8s; }
.octopus-ping[data-active] .octopus-ping__ring--second { animation-delay: -.9s; }

@keyframes octopus-ping-sonar {
    0% { transform: scale(.45); opacity: .95; }
    35% { opacity: .9; }
    75%, 100% { transform: scale(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .octopus-ping__ring { animation: none; transform: scale(1); opacity: .65; }
    .octopus-ping__ring--second { display: none; }
}