.honorary-frame{
    --honorary-contour-radius:50%;
    --honorary-halo-border:rgb(120 235 255 / .5);
    --honorary-halo-glow:rgb(80 213 255 / .32);
    --honorary-reflection-bright:rgb(238 254 255 / .94);
    --honorary-reflection-soft:rgb(105 230 255 / .55);
    position:relative;
    isolation:isolate;
    overflow:visible;
}

.honorary-frame--square{
    --honorary-contour-radius:21%;
}

.honorary-frame::before,
.honorary-frame::after{
    position:absolute;
    border-radius:var(--honorary-contour-radius);
    content:"";
    pointer-events:none;
}

.honorary-frame::before{
    z-index:0;
    inset:-12%;
    border:2px solid var(--honorary-halo-border);
    background:rgb(74 198 255 / .08);
    box-shadow:0 0 18px var(--honorary-halo-glow), 0 0 34px rgb(73 137 255 / .16);
    animation:honorary-frame-halo 4.8s ease-in-out infinite;
}

.honorary-frame::after{
    z-index:3;
    inset:-8%;
    padding:3px;
    background:conic-gradient(from 0deg, transparent 0 38%, var(--honorary-reflection-bright) 46%, var(--honorary-reflection-soft) 51%, transparent 59% 100%);
    -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,linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:honorary-frame-reflection 8s linear infinite;
}

.honorary-frame .saints-avatar__image,
.honorary-frame .avatar-with-frame__image{
    position:relative;
    z-index:1;
    border-color:rgb(142 236 255 / .72);
    box-shadow:0 0 18px rgb(86 211 255 / .3);
}

.honorary-frame .honorary-frame__decoration{
    z-index:4;
    animation:honorary-frame-breathe 4.8s ease-in-out infinite;
}

.honorary-frame__sparkles{
    position:absolute;
    z-index:5;
    inset:-9%;
    border-radius:var(--honorary-contour-radius);
    background:
        radial-gradient(circle at 9% 24%, #f4feff 0 1px, transparent 2px),
        radial-gradient(circle at 88% 13%, #d8fbff 0 1.2px, transparent 2.2px),
        radial-gradient(circle at 94% 76%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 18% 91%, #c8f8ff 0 1.2px, transparent 2.2px);
    pointer-events:none;
    animation:honorary-frame-sparkles 5.6s ease-in-out infinite;
}

.honorary-frame--aqua .honorary-frame__decoration{
    filter:drop-shadow(0 0 5px rgb(117 230 255 / .72));
}

.honorary-frame--azure{
    --honorary-halo-border:rgb(120 235 255 / .4);
    --honorary-halo-glow:rgb(80 213 255 / .24);
    --honorary-reflection-bright:rgb(238 254 255 / .8);
    --honorary-reflection-soft:rgb(105 230 255 / .42);
}

.honorary-frame--azure::after{
    animation-duration:9s;
}

.honorary-frame--azure .honorary-frame__decoration{
    filter:drop-shadow(0 0 4px rgb(117 230 255 / .54));
}

.honorary-frame--azure .honorary-frame__sparkles{
    animation-delay:-2.1s;
}

.honorary-frame--square::after{
    inset:-3% auto auto 41%;
    width:18%;
    height:3px;
    padding:0;
    border-radius:999px;
    background:linear-gradient(90deg, transparent, var(--honorary-reflection-bright), var(--honorary-reflection-soft), transparent);
    -webkit-mask:none;
    mask:none;
    offset-path:inset(-10% round var(--honorary-contour-radius));
    offset-rotate:0deg;
    animation-name:honorary-frame-square-reflection;
}

@keyframes honorary-frame-halo{
    0%,100%{ opacity:.52; transform:scale(.96); }
    50%{ opacity:.9; transform:scale(1.035); }
}

@keyframes honorary-frame-reflection{
    to{ transform:rotate(1turn); }
}

@keyframes honorary-frame-square-reflection{
    to{ offset-distance:100%; }
}

@keyframes honorary-frame-breathe{
    0%,100%{ opacity:.94; transform:scale(.99); }
    50%{ opacity:1; transform:scale(1.015); }
}

@keyframes honorary-frame-sparkles{
    0%,24%,100%{ opacity:0; transform:scale(.96); }
    34%,46%{ opacity:.95; transform:scale(1.02); }
    58%{ opacity:0; transform:scale(.98); }
}

@media (prefers-reduced-motion:reduce){
    .honorary-frame::before,
    .honorary-frame::after,
    .honorary-frame__decoration,
    .honorary-frame__sparkles{
        animation:none;
    }

    .honorary-frame::before{ opacity:.66; transform:none; }
    .honorary-frame::after{ opacity:.34; transform:none; }
    .honorary-frame__decoration{ opacity:1; transform:none; }
    .honorary-frame__sparkles{ opacity:.65; transform:none; }
}
