/* 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. */
/* A picture is round whatever shape the photo is: a portrait photo must not stretch its frame into an oval. */
.avatar-effect-host { position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 1; }
.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. */
/* A picture from the size of a directory row up lets the effect out of its
   frame, so the aura shows around it. The flames and the shaded surfaces are
   drawn for that size and swamp anything smaller, so the navbar button 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%; }

/* The Pirate Hat (issue #930, given with La Buse): not a shader but a tricorne worn on the picture, a little
   tilted, its edge resting on the top of the circle (images/effects/pirate-hat.svg). Nothing to mount, so the
   effect engine leaves the host empty and the hat is all it shows. */
.rfx.avatar-rarity-effect[data-effect="pirate-hat"] { overflow: visible; isolation: auto; }
.rfx.avatar-rarity-effect[data-effect="pirate-hat"]::after {
    content: "";
    position: absolute;
    left: -10%;
    top: -38%;
    width: 120%;
    aspect-ratio: 240 / 130;
    transform: rotate(-6deg);
    transform-origin: 50% 90%;
    background: url("../images/effects/pirate-hat.svg") center / contain no-repeat;
    filter: drop-shadow(0 3px 3px rgb(0 0 0 / .35));
    pointer-events: none;
}