/* Independent color-led frames. Transparent centers, no reused ornaments. */
.avatar-frame-shell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;flex:0 0 60px;vertical-align:middle;isolation:isolate}
.public-avatar-wrap>.avatar-frame-shell{width:100%;height:100%;display:flex}
.avatar-frame-shell>.public-avatar{width:100%;height:100%}
body .avatar-frame-shell .premium-avatar-frame{border:0!important;box-shadow:none!important;outline:none!important}
.avatar-frame-shell[data-frame-color=forest]{--frame-low:#567861;--frame-high:#bbcab0;--frame-warm:#8b7156}
.avatar-frame-shell[data-frame-color=midnight]{--frame-low:#526c94;--frame-high:#c2d0db;--frame-warm:#8296bd}
.avatar-frame-shell[data-frame-color=sunset]{--frame-low:#925548;--frame-high:#ddb28e;--frame-warm:#c28162}
body .avatar-frame-shell.frame-enabled::before,body .avatar-frame-shell.frame-enabled::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:2;background-color:transparent;box-shadow:none}
body .avatar-frame-shell.frame-enabled::before{inset:-4px;background:conic-gradient(from 25deg,var(--frame-low),var(--frame-high) 25%,var(--frame-warm) 48%,var(--frame-low) 75%,var(--frame-high));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px))}
body .avatar-frame-shell.frame-enabled::after{inset:-8px;background:conic-gradient(from 32deg,transparent 0 12%,var(--frame-high) 12% 24%,transparent 24% 62%,var(--frame-warm) 62% 74%,transparent 74%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - .5px));mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - .5px));opacity:.8}
body .frame-showcase .avatar-frame-shell{width:96px;height:96px;flex-basis:96px;margin:16px 8px}
body .frame-showcase .avatar-frame-shell>img,body .frame-showcase .premium-initial{width:96px;height:96px;font-size:28px}
body .frame-showcase .premium-preview-head{gap:24px;align-items:center}

/* Living frames: matching background textures inside a transparent annulus. */
.avatar-frame-shell{overflow:visible}
.avatar-frame-shell .frame-effects{display:none}
body .avatar-frame-shell.frame-enabled::before{inset:-8px;opacity:.8;animation:none;background:linear-gradient(135deg,var(--frame-high),var(--frame-low) 40%,var(--frame-warm) 70%,var(--frame-high));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 100%);mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 100%)}
body .avatar-frame-shell.frame-enabled::after{inset:-1px;background:var(--frame-high);opacity:.6;animation:none;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 100%);mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 100%)}
body .avatar-frame-shell.frame-enabled .frame-effects{display:block;position:absolute;inset:-8px;border-radius:50%;pointer-events:none;z-index:2;overflow:hidden;animation:none;background:linear-gradient(135deg,var(--frame-base),var(--frame-end));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px))}
.frame-effects i{display:none}
.frame-effects::before,.frame-effects::after{content:"";position:absolute;inset:0;pointer-events:none}
.frame-effects::before{background:conic-gradient(from 0deg,transparent,var(--frame-low),var(--frame-high),transparent 40%,var(--frame-warm),transparent 75%);opacity:.8;animation:frame-light-flow 8s linear infinite}
.frame-effects::after{background-size:60px 60px;background-repeat:repeat;animation:frame-texture-flow 2.5s linear infinite}
.avatar-frame-shell[data-frame-color=forest]{--frame-base:#122d23;--frame-end:#385538;--frame-low:#476f43;--frame-high:#c1d394;--frame-warm:#91b888}
.avatar-frame-shell[data-frame-color=midnight]{--frame-base:#142137;--frame-end:#384367;--frame-low:#58699b;--frame-high:#c3d7e8;--frame-warm:#809dcc}
.avatar-frame-shell[data-frame-color=sunset]{--frame-base:#3e1820;--frame-end:#733629;--frame-low:#a64b41;--frame-high:#e3a06b;--frame-warm:#d77a66}
[data-frame-color=forest] .frame-effects::after{background-image:radial-gradient(circle at 5px 6px,#c1d394 0 1px,transparent 2px),radial-gradient(circle at 30px 12px,#c1d394 0 1px,transparent 2px),radial-gradient(circle at 52px 35px,#c1d394 0 1px,transparent 2px),radial-gradient(circle at 19px 40px,#c1d394 0 1.5px,transparent 3px),radial-gradient(circle at 42px 56px,#c1d394 0 1px,transparent 2px),radial-gradient(circle at 19px 40px,#94be7688,transparent 7px)}
[data-frame-color=midnight] .frame-effects::after{background-image:radial-gradient(ellipse 1px 4px at 12px 14px,#c3d7e8 55%,transparent),radial-gradient(ellipse 4px 1px at 12px 14px,#c3d7e8 55%,transparent),radial-gradient(ellipse 1px 3px at 45px 42px,#c3d7e8 55%,transparent),radial-gradient(ellipse 3px 1px at 45px 42px,#c3d7e8 55%,transparent),radial-gradient(circle at 28px 7px,#b5c6d7 1px,transparent 2px),radial-gradient(circle at 55px 26px,#b5c6d7 1px,transparent 2px),radial-gradient(circle at 18px 53px,#b5c6d7 1px,transparent 2px)}
[data-frame-color=sunset] .frame-effects::after{background-image:radial-gradient(ellipse 1.5px 4px at 8px 11px,#e3a06b 25%,#c97a4677 55%,transparent),radial-gradient(ellipse 1px 3px at 38px 26px,#d79763 30%,transparent),radial-gradient(ellipse 2px 5px at 22px 47px,#dc955c 20%,#ba664477 55%,transparent),radial-gradient(ellipse 1px 3px at 54px 53px,#d8a077 30%,transparent)}
@keyframes frame-texture-flow{to{background-position:0 -60px}}
@keyframes frame-light-flow{to{transform:rotate(360deg)}}
body.premium-motion-paused .frame-effects::before,body.premium-motion-paused .frame-effects::after{animation-play-state:paused!important}

/* A circle formed by light, with no drawn outline or solid band. */
body .avatar-frame-shell.frame-enabled::before,body .avatar-frame-shell.frame-enabled::after{display:none}
body .avatar-frame-shell.frame-enabled .frame-effects{inset:-11px;border-radius:50%;overflow:visible;background:none;mask:none;-webkit-mask:none;animation:frame-light-flow 24s linear infinite}
body .frame-effects::before{inset:-3px;border-radius:50%;background:conic-gradient(transparent,var(--frame-low),transparent 30%,var(--frame-warm),transparent 65%,var(--frame-low),transparent);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 15px),#0008 calc(100% - 9px),transparent 100%);mask:radial-gradient(farthest-side,transparent calc(100% - 15px),#0008 calc(100% - 9px),transparent 100%);filter:blur(2px);opacity:.8;animation:frame-light-flow 12s linear infinite reverse}
body .frame-effects::after{display:none}
body .frame-effects i{display:block;position:absolute;inset:0;transform:rotate(var(--angle));pointer-events:none}
body .frame-effects i::before{content:"";position:absolute;left:50%;top:4px;width:var(--size);height:var(--size);border-radius:50%;background:var(--frame-high);box-shadow:0 0 4px 1px var(--frame-high),0 0 8px var(--frame-low);animation:frame-shimmer 3s ease-in-out infinite;animation-delay:var(--delay)}
body .frame-effects i:nth-child(3n)::before{top:0;animation-duration:4s}
body .frame-effects i:nth-child(4n)::before{top:8px}
body [data-frame-color=midnight] .frame-effects i:nth-child(4n+1)::before{width:8px;height:8px;border-radius:0;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);filter:drop-shadow(0 0 3px #c3d7e8)}
body [data-frame-color=sunset] .frame-effects i::before{width:2.5px;height:6px;border-radius:70% 30% 60% 40%;background:#efb08c;box-shadow:0 0 4px #f6986b,0 0 8px #d65a4c}
body [data-frame-color=forest] .frame-effects i::before{background:#d0e9a5;box-shadow:0 0 4px 1px #b6d782,0 0 9px #669b58}
@keyframes frame-shimmer{0%,100%{opacity:.5;transform:translateY(0) scale(.8)}50%{opacity:1;transform:translateY(-2px) scale(1.2)}}
body.premium-motion-paused .frame-effects,body.premium-motion-paused .frame-effects i::before{animation-play-state:paused!important}

/* Clearer color and tighter light: retain the existing motion and silhouette. */
body .frame-effects::before{filter:blur(1px);opacity:.55}
body .frame-effects i::before{box-shadow:0 0 2px var(--frame-high),0 0 4px var(--frame-low)}
body [data-frame-color=forest] .frame-effects i::before{background:#a9ed77;box-shadow:0 0 2px #81d951,0 0 4px #45974d}
body [data-frame-color=midnight] .frame-effects i::before{background:#badfff;box-shadow:0 0 2px #82bfff,0 0 4px #5b80d0}
body [data-frame-color=midnight] .frame-effects i:nth-child(4n+1)::before{filter:drop-shadow(0 0 1px #8bcaff)}
body [data-frame-color=sunset] .frame-effects i::before{background:#ff9773;box-shadow:0 0 2px #fa704f,0 0 4px #db4941}
@keyframes frame-shimmer{0%,100%{opacity:.7;transform:translateY(0) scale(.8)}50%{opacity:1;transform:translateY(-2px) scale(1.2)}}

/* Upward flow in screen coordinates, never orbital motion. */
body .avatar-frame-shell.frame-enabled .frame-effects{animation:none}
body .frame-effects::before{animation:none}
body .frame-effects i{transform:none}
body .frame-effects i::before{display:none}
body .frame-effects i{inset:auto;left:var(--particle-x);top:var(--particle-y);width:var(--size);height:var(--size);border-radius:50%;background:var(--particle-color);box-shadow:0 0 2px var(--particle-color);animation:frame-rise 3.2s linear infinite;animation-delay:var(--delay)}
body [data-frame-color=forest] .frame-effects{--particle-color:#a9ed77}
body [data-frame-color=midnight] .frame-effects{--particle-color:#badfff}
body [data-frame-color=sunset] .frame-effects{--particle-color:#ff9773}
body [data-frame-color=midnight] .frame-effects i:nth-child(4n+1){width:8px;height:8px;border-radius:0;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%)}
body [data-frame-color=sunset] .frame-effects i{width:2.5px;height:6px;border-radius:70% 30% 60% 40%}
@keyframes frame-rise{0%{transform:translate(-50%,4px) scale(.8);opacity:0}20%{opacity:1}75%{opacity:1}100%{transform:translate(-50%,-8px) scale(1.1);opacity:0}}
body.premium-motion-paused .frame-effects i{animation-play-state:paused!important}