/* Collection rewards: the portrait stays still while its border comes alive. */
:is(.avatar,.frame-sample):is(.frame-ripple,.frame-firefly,.frame-tides,.frame-borealis,.frame-constellation,.frame-royal){position:relative;isolation:isolate;--ring-a:#85ddc5;--ring-b:#d6fff0;border-color:var(--ring-a);box-shadow:0 0 0 2px color-mix(in srgb,var(--ring-a) 18%,transparent),0 3px 14px #0002}
.frame-sample:is(.frame-ripple,.frame-firefly,.frame-tides,.frame-borealis,.frame-constellation,.frame-royal){display:grid;place-items:center;overflow:hidden;color:var(--ring-a);background:var(--club-bg);border:3px solid var(--ring-a)}
.frame-ripple{animation:frame-breathe 3.6s ease-in-out infinite}
:is(.avatar,.frame-sample):is(.frame-firefly,.frame-tides,.frame-borealis,.frame-constellation,.frame-royal)::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;border:2px solid transparent;box-sizing:border-box}
.frame-firefly{--ring-a:#c7d98c!important;--ring-b:#fff1aa!important}.frame-firefly::after{background:radial-gradient(circle at 50% 3px,#fff3bd 0 2px,transparent 3px),radial-gradient(circle at 50% calc(100% - 3px),#fff3bd 0 2px,transparent 3px);animation:frame-orbit 7s linear infinite}
.frame-tides{--ring-a:#79cbd2!important;--ring-b:#acadee!important}.frame-tides::after{border-top-color:#d5fcff!important;border-bottom-color:#bdbeff!important;animation:frame-orbit 6s linear infinite}.frame-tides::before{content:'';position:absolute;inset:4px;border:1px solid transparent;border-left-color:#c1deff;border-right-color:#c1deff;border-radius:inherit;pointer-events:none;animation:frame-orbit 8s linear infinite reverse}
.frame-borealis{--ring-a:#a6a1ed!important;--ring-b:#93e4cf!important}.frame-borealis::after{border-top-color:#d3bbff!important;border-bottom-color:#91eaca!important;border-left-color:#e4a8d5!important;animation:frame-orbit 9s linear infinite;filter:drop-shadow(0 0 3px #b0b4f4)}
.frame-constellation{--ring-a:#b5b8fb!important;--ring-b:#f6dda3!important}.frame-constellation::after{border:2px dashed #eee0bc!important;animation:frame-orbit 20s linear infinite;box-shadow:inset 0 0 8px #b8adff88}.frame-constellation::before{content:'';position:absolute;inset:4px;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 20% 15%,#fff3bf 0 2px,transparent 3px),radial-gradient(circle at 85% 75%,#fff3bf 0 2px,transparent 3px);animation:frame-stars 3s ease-in-out infinite}
.frame-royal{--ring-a:#edc373!important;--ring-b:#fff1b0!important;animation:frame-breathe 4s ease-in-out infinite}.frame-royal::after{border:3px double #fff0b4!important;animation:frame-orbit 18s linear infinite;box-shadow:inset 0 0 9px #ffc87799}.frame-royal::before{content:'♛';position:absolute;top:-3px;left:50%;transform:translateX(-50%);font-size:clamp(10px,1.2em,20px);line-height:1.1;color:#ffedb1;text-shadow:0 1px 3px #6e472d;z-index:3;pointer-events:none;animation:frame-stars 4s ease-in-out infinite}
@keyframes frame-orbit{to{transform:rotate(360deg)}}
@keyframes frame-breathe{0%,100%{box-shadow:0 0 0 2px color-mix(in srgb,var(--ring-a) 18%,transparent),0 3px 14px #0002}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ring-a) 25%,transparent),0 0 18px color-mix(in srgb,var(--ring-b) 40%,transparent)}}
@keyframes frame-stars{0%,100%{opacity:.55}50%{opacity:1}}
html[data-motion=reduced] :is(.avatar,.frame-sample),html[data-motion=reduced] :is(.avatar,.frame-sample)::before,html[data-motion=reduced] :is(.avatar,.frame-sample)::after{animation:none!important}
@media(prefers-reduced-motion:reduce){:is(.avatar,.frame-sample),:is(.avatar,.frame-sample)::before,:is(.avatar,.frame-sample)::after{animation:none!important}}