.bx-ava {
    position: relative;
     
    --bx-ava-ring: transparent;
    --bx-ava-gap: var(--ws-surface, #fff);
    --bx-ava-ring-w: 2px;
    --bx-ava-glow: 0s;
}

.bx-ava[data-rank] {
    box-shadow:
        0 0 0 2px var(--bx-ava-gap),
        0 0 0 calc(2px + var(--bx-ava-ring-w)) var(--bx-ava-ring);
}

.bx-ava--lg {
    --bx-ava-ring-w: 2.5px;
}

.bx-ava[data-rank="rank-seeker"]       { --bx-ava-ring: color-mix(in srgb, var(--rank-seeker) 55%, transparent); }
.bx-ava[data-rank="rank-practitioner"] { --bx-ava-ring: color-mix(in srgb, var(--rank-practitioner) 55%, transparent); }
.bx-ava[data-rank="rank-pro"]          { --bx-ava-ring: color-mix(in srgb, var(--rank-pro) 55%, transparent); }
.bx-ava[data-rank="rank-expert"]       { --bx-ava-ring: color-mix(in srgb, var(--rank-expert) 55%, transparent); }
.bx-ava[data-rank="rank-visionary"]    { --bx-ava-ring: color-mix(in srgb, var(--rank-visionary) 55%, transparent); }

.bx-ava--lg[data-streak-tier="warm"]   { --bx-ava-glow: 3.6s; }
.bx-ava--lg[data-streak-tier="hot"]    { --bx-ava-glow: 2.8s; }
.bx-ava--lg[data-streak-tier="blaze"]  { --bx-ava-glow: 2.2s; }
.bx-ava--lg[data-streak-tier="legend"] { --bx-ava-glow: 1.7s; }

.bx-ava--lg[data-rank][data-streak-tier="warm"],
.bx-ava--lg[data-rank][data-streak-tier="hot"],
.bx-ava--lg[data-rank][data-streak-tier="blaze"],
.bx-ava--lg[data-rank][data-streak-tier="legend"] {
    animation: bxAvaGlow var(--bx-ava-glow) ease-in-out infinite;
}

@keyframes bxAvaGlow {
    0%, 100% {
        box-shadow:
            0 0 0 2px var(--bx-ava-gap),
            0 0 0 calc(2px + var(--bx-ava-ring-w)) var(--bx-ava-ring),
            0 0 0 0 color-mix(in srgb, var(--bx-ava-ring) 30%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 2px var(--bx-ava-gap),
            0 0 0 calc(2px + var(--bx-ava-ring-w)) var(--bx-ava-ring),
            0 0 14px 2px color-mix(in srgb, var(--bx-ava-ring) 30%, transparent);
    }
}

.bx-ava--lg[data-rank][data-streak-tier="legend"] {
    animation-name: bxAvaGlowLegend;
}

@keyframes bxAvaGlowLegend {
    0%, 100% {
        box-shadow:
            0 0 0 2px var(--bx-ava-gap),
            0 0 0 calc(2px + var(--bx-ava-ring-w)) var(--bx-ava-ring),
            0 0 0 0 color-mix(in srgb, var(--bx-ava-ring) 38%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 2px var(--bx-ava-gap),
            0 0 0 calc(3px + var(--bx-ava-ring-w)) var(--bx-ava-ring),
            0 0 18px 3px color-mix(in srgb, var(--bx-ava-ring) 38%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bx-ava--lg[data-rank] {
        animation: none !important;
    }
}