/*
 * bh-avatar.css (28.10.2026) — rama de abonament a avatarului, aceeasi peste tot (componenta x-avatar si bhAva() din JS).
 * Directia: resources/art/PROFIL_RAME_ART.md. Rama sta IN AFARA imaginii (inset negativ), nu muta layout-ul.
 * PRIME   = chenar violet lucios cu reflex alb care se roteste incet + ametistul sus;
 * PRIME+  = chenar holografic care se roteste + lumina colorata in spate + coroana holografica sus + sclipire.
 * Doar transform / opacity / un unghi animat; nimic animat pe liste nu foloseste blur mare (lumina e doar la md / lg).
 */
@property --bha { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.bh-ava {
    --ava-r: 50%;
    --ava-w: 2px;
    --ava-gap: 2px;
    position: relative; display: inline-flex; flex: none; vertical-align: middle;
    border-radius: var(--ava-r); isolation: isolate;
}
.bh-ava > img { position: relative; z-index: 1; display: block; margin: 0; border-radius: var(--ava-r); }
.bh-ava--md { --ava-w: 3px; --ava-gap: 2px; }
.bh-ava--lg { --ava-w: 3.5px; --ava-gap: 3px; }

.bh-ava__ring {
    position: absolute; z-index: 0; pointer-events: none;
    inset: calc(-1 * (var(--ava-w) + var(--ava-gap)));
    border-radius: calc(var(--ava-r) + var(--ava-w) + var(--ava-gap));
    padding: var(--ava-w);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* la cercuri raza in procente ramane procent (inset-ul nu o strica) */
.bh-ava:not([style*="--ava-r"]) .bh-ava__ring { border-radius: 50%; }

.bh-ava--prime .bh-ava__ring {
    background: conic-gradient(from var(--bha), #3a1696, #8a5cff 14%, #efe6ff 22%, #8a5cff 30%, #5a2fe0 50%, #b9a2ff 66%, #fff 71%, #8a5cff 77%, #3a1696);
    animation: bha-spin 9s linear infinite;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}
.bh-ava--primeplus .bh-ava__ring {
    background: conic-gradient(from var(--bha), #ff7ad9, #ffd36b, #b8ff8a, #5ce1ff, #9b6bff, #ff7ad9);
    animation: bha-spin 5s linear infinite;
}
/* luciul interior al ramei: o linie subtire alba pe interior, ca la un inel de metal */
.bh-ava--prime::after, .bh-ava--primeplus::after {
    content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none; border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 6px 10px -8px rgba(255, 255, 255, .55);
}
.bh-ava:not([style*="--ava-r"])::after { border-radius: 50%; }

/* lumina din spate: doar la md / lg (pe liste lungi nu punem blur) */
.bh-ava--md.bh-ava--primeplus::before, .bh-ava--lg.bh-ava--primeplus::before,
.bh-ava--md.bh-ava--prime::before, .bh-ava--lg.bh-ava--prime::before {
    content: ""; position: absolute; inset: -9px; z-index: -1; pointer-events: none; border-radius: calc(var(--ava-r) + 9px);
    filter: blur(12px); opacity: .5;
}
.bh-ava--md.bh-ava--prime::before, .bh-ava--lg.bh-ava--prime::before { background: radial-gradient(closest-side, #8a5cff, transparent); }
.bh-ava--md.bh-ava--primeplus::before, .bh-ava--lg.bh-ava--primeplus::before {
    background: conic-gradient(from var(--bha), #ff7ad9, #ffd36b, #b8ff8a, #5ce1ff, #9b6bff, #ff7ad9);
    animation: bha-spin 5s linear infinite; opacity: .55;
}
.bh-ava:not([style*="--ava-r"])::before { border-radius: 50% !important; }


@keyframes bha-spin { to { --bha: 360deg; } }

@media (prefers-reduced-motion: reduce) {
    .bh-ava__ring, .bh-ava::before { animation: none !important; }
}