.coll-banner{
    --delay-tooltip:1.3s;
    --delay-2nd-ring:0.5s;
    --delay-tooltip-on-demand:5s;
}
.banner-card .launch-ring.ring-2{
    background-color: #374481;
    width: 75%;
    z-index: 2;
}
.banner-card .launch-ring.ring-3{
    background-color: #ff7643;
    width: 45%;
    z-index: 3;
}
.banner-card .launch-ring{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    width: 100%;
    aspect-ratio: 1/1;
    z-index: 1;
    background-color: #242a62;
    border-radius: 999px;
}
.coll-banner.animating-pulse .banner-card .tooltip-icon::before,
.coll-banner.animating-pulse .banner-card .tooltip-icon::after{
    animation: launch-pulse 1s cubic-bezier(0.2, 0.65, 0.3, 1) 0s both;
}
.banner-card .tooltip-icon::before{
    animation-delay: var(--delay-2nd-ring) !important;
}
.coll-banner.coll-banner.on-demand-class .banner-card .tooltip-icon::before,
.coll-banner.coll-banner.on-demand-class .banner-card .tooltip-icon::after {
    animation: launch-pulse-on-demand 10s cubic-bezier(0.2, 0.65, 0.3, 1) infinite !important;
    animation-delay: 3s !important;
}
.coll-banner.coll-banner.on-demand-class .banner-card .tooltip-icon::before{
    animation-delay: 3.7s !important;
}
.banner-card .tooltip-icon::before,
.banner-card .tooltip-icon::after{
    content: '';
    position: absolute;
    inset: 0px;
    z-index: 1;
    border: 1.5px solid rgba(255, 118, 67, 0.75);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
}
.banner-card .tooltip-icon{
    display: flex;
    width: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    aspect-ratio: 1/1;
    position: relative;
}
.coll-banner.on-demand-class.on-demand-class .banner-title{
    animation: launch-pulse-tooltip-on-demand 5s ease var(--delay-tooltip-on-demand) forwards !important;
}
.coll-banner.animating-pulse .banner-title{
    animation: launch-pulse-tooltip 5s ease var(--delay-tooltip) both;
}


@keyframes launch-pulse {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    15% {
        opacity: 0.65;
    }
    100% {
        opacity: 0;
        transform: scale(2.15);
    }
}
@keyframes launch-pulse-on-demand {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }

    2.5% {
        opacity: 0.65;
    }

    16.66% {
        opacity: 0;
        transform: scale(2.15);
    }

    100% {
        opacity: 0;
        transform: scale(2.15);
    }
}
@keyframes launch-pulse-tooltip {
    0% {
        opacity: 0;
        transform: translateX(-32px);
        visibility: hidden;
    }
    1% {
        visibility: visible;
    }
    12%, 90% {
        opacity: 1;
        transform: translateX(0);
        visibility: visible;
    }
    100% {
        opacity: 0;
        transform: translateX(-32px);
        visibility: hidden;
    }
}
@keyframes launch-pulse-tooltip-on-demand {
    0% {
        opacity: 0;
        transform: translateX(-32px);
        visibility: hidden;
    }
    1% {
        visibility: visible;
    }
    12%, 90% {
        opacity: 1;
        transform: translateX(0);
        visibility: visible;
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
        visibility: visible;
    }
}