/* Profile pictures wear the same effects cards do, the same way cards wear them.

   A card does not wrap its art: the effect host is an empty overlay sitting on
   top of the print, masked to it, blending down onto it. A picture gets the
   identical treatment, so every shader and sweep the card renderer draws
   applies unchanged — including its motion handling, which follows Bouzopp's
   own reduced-motion setting rather than the browser's.

   Selectors carry `.rfx` too, so these rules beat the shared host defaults
   whichever order the two stylesheets happen to load in. */
.avatar-effect-host { position: relative; display: block; width: 100%; height: 100%; }
.rfx.avatar-rarity-effect {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: auto;
    height: auto;
    /* Not clipped: the flames rise past the picture and the shaded surfaces are
       drawn larger than what they wrap, exactly as they do around a badge. A
       card clips because its print is the whole subject; a round picture is
       not. */
    overflow: visible;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}
.rfx.avatar-rarity-effect > .rfx-layer { z-index: 0; }

/* The prismatic finish sits on the picture rather than around it: the host
   carries the blend so the canvas reaches the photo underneath. */
.rfx.avatar-rarity-effect[data-effect="prismatic"] { isolation: auto; mix-blend-mode: hard-light; }
.rfx.avatar-rarity-effect[data-effect="prismatic"] > .prismatic-surface { mix-blend-mode: normal; }

/* Whatever frames a picture normally clips it to a circle. An effect has to
   escape that frame — flames rise past the photo, shaded surfaces are drawn
   larger than it — so the round clip moves onto the picture itself and its
   container stops cutting. Without :has() support this simply keeps today's
   clipped look. */
/* Only a portrait-sized picture lets the effect out of its frame: the flames
   and the shaded surfaces are drawn for that size and swamp a thumbnail, so a
   navbar button or a directory row keeps clipping them. */
.profile-avatar-public:has(> .avatar-effect-host),
.profile-avatar-frame:has(> .avatar-effect-host) { overflow: visible; }
.avatar-effect-host > img,
.avatar-effect-host > .avatar-initial { border-radius: 50%; }

/* The navbar button and the profile card already position their picture; the
   host only needs to become a positioning context for the overlay. A hidden
   photo leaves an initial behind, and that wears the effect just the same. */
.profile-button-avatar, .profile-dropdown-avatar, .profile-avatar-frame { position: relative; }
.avatar-effect-host > .avatar-initial {
    display: grid; place-items: center; width: 100%; height: 100%;
    border-radius: 50%; font-weight: 1000;
}
.avatar-effect-host > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-frame { display: grid; place-items: center; overflow: hidden; }
.profile-avatar-frame > img, .profile-avatar-frame > .avatar-effect-host { width: 100%; height: 100%; }