:root {
    --attn-bell-spacing-base: 1ch;
}

.attn-bell-container {
    display: inline-grid;
    place-content: center;
}

.attn-bell {
    width: calc(var(--attn-bell-spacing-base) * 4);
    line-height: calc(var(--attn-bell-spacing-base) * 4);
    background: var(--section-title-darker-background-color);;
    border-radius: 50%;
    margin: var(--attn-bell-spacing-base);
    font-size: 0.8rem;
    display: grid;
    place-content: center;
}

.attn-bell--shockwave {
    animation: shockwaveJump 1s ease-out infinite;
}

.attn-bell--shockwave:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    animation: shockwave 1s 0.65s ease-out infinite;
}

.attn-bell--shockwave:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    animation: shockwave 1s 0.5s ease-out infinite;
}

@keyframes shockwaveJump {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.08);
    }
    50% {
        transform: scale(0.98);
    }
    55% {
        transform: scale(1.02);
    }
    60% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes shockwave {
    0% {
        transform: scale(1);
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.45), inset 0 0 1px rgba(0, 0, 0, 0.45);
    }
    95% {
        box-shadow: 0 0 50px rgba(0, 0, 0, 0), inset 0 0 30px rgba(0, 0, 0, 0);
    }
    100% {
        transform: scale(2.25);
    }
}