/* ════════════════════════════════════════
   CORNICI AVATAR — MetaLibro
════════════════════════════════════════ */
.avatar-frame {
    position: relative;
    display: inline-block;
    line-height: 0;
    /* Evita che l'anello fuoriesca e copra elementi vicini */
    isolation: isolate;
}
/* Wrapper per dare spazio all'anello nei contesti forum */
.avatar-frame-wrap {
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.avatar-frame .av-img {
    border-radius: 50%;
    display: block;
    object-fit: cover;
    position: relative;
    z-index: 1;
}
.avatar-frame .av-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    z-index: 0;          /* SOTTO l'immagine, non sopra */
    pointer-events: none;
}

/* ── Cornici statiche (bordo semplice) ── */
/* Oro */
.frame-gold .av-img {
    box-shadow: 0 0 0 3px #d4af37, 0 0 14px rgba(212,175,55,.55);
}
/* Argento */
.frame-silver .av-img {
    box-shadow: 0 0 0 3px #c0c0c0, 0 0 12px rgba(192,192,192,.45);
}
/* Bronzo */
.frame-bronze .av-img {
    box-shadow: 0 0 0 3px #cd7f32, 0 0 12px rgba(205,127,50,.4);
}

/* ── Cornici animate — usano ::before sull'immagine ── */
/* Tecnica: pseudo-elemento rotante DIETRO l'immagine */

.frame-fire .av-img,
.frame-ice .av-img,
.frame-aurora .av-img,
.frame-galaxy .av-img,
.frame-reader .av-img,
.frame-metalibro .av-img {
    position: relative;
    z-index: 1;
}

/* Contenitore rotante (l'anello animato) */
.frame-fire .av-ring,
.frame-ice .av-ring,
.frame-aurora .av-ring,
.frame-galaxy .av-ring,
.frame-reader .av-ring,
.frame-metalibro .av-ring {
    z-index: 0;
    border-radius: 50%;
}

/* Fuoco */
.frame-fire .av-ring {
    background: conic-gradient(#ff6a00, #ee0979, #ff6a00, #ee0979, #ff6a00);
    animation: ringRotate 2s linear infinite;
    box-shadow: 0 0 18px rgba(255,80,0,.6), 0 0 36px rgba(255,80,0,.2);
}
.frame-fire .av-img {
    box-shadow: 0 0 0 3px var(--bg, #111);
}

/* Ghiaccio */
.frame-ice .av-ring {
    background: conic-gradient(#a8edea, #fed6e3, #a8edea, #fed6e3, #a8edea);
    animation: icePulseRing 2.5s ease-in-out infinite;
    box-shadow: 0 0 18px rgba(100,220,255,.5), 0 0 36px rgba(100,200,255,.2);
}
.frame-ice .av-img {
    box-shadow: 0 0 0 3px var(--bg, #111);
}

/* Aurora */
.frame-aurora .av-ring {
    background: conic-gradient(#00c9ff, #92fe9d, #f7971e, #ffd200, #f953c6, #b91d73, #00c9ff);
    animation: ringRotate 3s linear infinite;
    box-shadow: 0 0 22px rgba(146,254,157,.35), 0 0 44px rgba(0,201,255,.2);
}
.frame-aurora .av-img {
    box-shadow: 0 0 0 4px var(--bg, #111);
}

/* Galattica */
.frame-galaxy .av-ring {
    background: conic-gradient(#302b63, #833ab4, #fd1d1d, #fcb045, #833ab4, #302b63);
    animation: ringRotate 4s linear infinite;
    box-shadow: 0 0 24px rgba(131,58,180,.5), 0 0 50px rgba(253,29,29,.15);
}
.frame-galaxy .av-img {
    box-shadow: 0 0 0 4px var(--bg, #111);
}

/* Gran Lettore */
.frame-reader .av-ring {
    background: conic-gradient(#f7971e, #ffd200, #d4af37, #ffd200, #f7971e);
    animation: readerPulseRing 2s ease-in-out infinite;
    box-shadow: 0 0 22px rgba(212,175,55,.6), 0 0 50px rgba(212,175,55,.25);
}
.frame-reader .av-img {
    box-shadow: 0 0 0 4px var(--bg, #111);
}

/* MetaLibro */
.frame-metalibro .av-ring {
    background: conic-gradient(#d4af37, #ffe066, #fff, #ffe066, #d4af37);
    animation: ringRotate 6s linear infinite, mlGlowRing 2.5s ease-in-out infinite;
    box-shadow: 0 0 28px rgba(212,175,55,.7), 0 0 65px rgba(212,175,55,.3), 0 0 110px rgba(212,175,55,.1);
}
.frame-metalibro .av-img {
    box-shadow: 0 0 0 5px var(--bg, #111);
}

/* ── Keyframes ── */
@keyframes ringRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes icePulseRing {
    0%,100% { box-shadow: 0 0 18px rgba(100,220,255,.5), 0 0 36px rgba(100,200,255,.2); }
    50%     { box-shadow: 0 0 30px rgba(100,220,255,.85), 0 0 55px rgba(100,200,255,.4); }
}
@keyframes readerPulseRing {
    0%,100% { box-shadow: 0 0 22px rgba(212,175,55,.6),  0 0 50px rgba(212,175,55,.25); }
    50%     { box-shadow: 0 0 36px rgba(212,175,55,.95), 0 0 70px rgba(212,175,55,.5); }
}
@keyframes mlGlowRing {
    0%,100% { box-shadow: 0 0 28px rgba(212,175,55,.7),  0 0 65px rgba(212,175,55,.3); }
    50%     { box-shadow: 0 0 44px rgba(212,175,55,1.0), 0 0 90px rgba(212,175,55,.55), 0 0 130px rgba(212,175,55,.2); }
}