/* Einheitliches, nach Seltenheit gestaffeltes Animationssystem für Profilrahmen. */
.profile-frame[data-frame]:not([data-frame=developer]){position:relative;isolation:isolate;overflow:visible!important;transform:translateZ(0)}
.profile-frame[data-frame]:not([data-frame=developer])>i{position:relative;z-index:3}

/* Die Shop-Vorschau ist klein; im Profil bleibt jeder Rahmen korrekt 130 × 130 px. */
.profile-card .profile-avatar.profile-frame:not([data-frame=developer]){
  width:130px!important;height:130px!important;min-width:130px!important;min-height:130px!important;
  margin:0!important;object-fit:cover;box-sizing:border-box!important;
  outline-width:5px!important;outline-offset:5px!important;
  box-shadow:0 0 0 9px var(--frame-b),0 0 30px var(--frame-a),0 0 48px color-mix(in srgb,var(--frame-b) 48%,transparent)!important
}
.profile-card .profile-avatar.profile-frame.avatar-placeholder:not([data-frame=developer]){font-size:3rem!important}
.profile-card .profile-avatar.profile-frame:is([data-frame=aurora],[data-frame=sapphire],[data-frame=ember],[data-frame=jungle],[data-frame=frost],[data-frame=royal],[data-frame=neon],[data-frame=volcano],[data-frame=arctic],[data-frame=crown],[data-frame=dragon],[data-frame=diamond],[data-frame=galaxy],[data-frame=cosmos]){border-width:20px!important}
.profile-card .profile-avatar.profile-frame:not([data-frame=developer])::before{filter:drop-shadow(0 0 8px var(--frame-a)) drop-shadow(0 0 16px var(--frame-b))}

/* Gewöhnlich: hochwertiger, ruhiger Materialglanz. */
.profile-frame:is([data-frame=mint],[data-frame=ocean],[data-frame=sunset],[data-frame=forest],[data-frame=slate],[data-frame=coral]){
  animation:frame-common-breathe 4.8s ease-in-out infinite!important
}

/* Selten: ein feiner Lichtbogen läuft kontinuierlich um den Rahmen. */
.profile-frame:is([data-frame=aurora],[data-frame=sapphire],[data-frame=ember],[data-frame=jungle],[data-frame=frost])::before,
.profile-frame:is([data-frame=royal],[data-frame=neon],[data-frame=volcano],[data-frame=arctic])::before,
.profile-frame:is([data-frame=crown],[data-frame=dragon],[data-frame=diamond])::before,
.profile-frame:is([data-frame=galaxy],[data-frame=cosmos])::before{
  content:"";position:absolute;z-index:1;inset:-14px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 18%,var(--frame-a) 25%,#fff 29%,var(--frame-b) 34%,transparent 42% 68%,var(--frame-a) 77%,transparent 86%);
  -webkit-mask:radial-gradient(circle,transparent 0 58%,#000 61% 70%,transparent 73%);
  mask:radial-gradient(circle,transparent 0 58%,#000 61% 70%,transparent 73%);
  opacity:.72;filter:drop-shadow(0 0 5px var(--frame-a));animation:frame-orbit 7s linear infinite
}
.profile-frame:is([data-frame=aurora],[data-frame=sapphire],[data-frame=ember],[data-frame=jungle],[data-frame=frost]){
  animation:frame-rare-breathe 3.5s ease-in-out infinite!important
}

/* Episch: dichterer Ring, mehr Energie und schnellerer Umlauf. */
.profile-frame:is([data-frame=royal],[data-frame=neon],[data-frame=volcano],[data-frame=arctic])::before{
  inset:-16px;opacity:.9;filter:drop-shadow(0 0 7px var(--frame-a)) drop-shadow(0 0 12px var(--frame-b));
  animation-duration:3.8s
}
.profile-frame:is([data-frame=royal],[data-frame=neon],[data-frame=volcano],[data-frame=arctic]){
  animation:frame-epic-energy 2.7s ease-in-out infinite!important
}

/* Legendär: heller, mächtiger Lichtkranz. */
.profile-frame:is([data-frame=crown],[data-frame=dragon],[data-frame=diamond])::before{
  inset:-18px;opacity:1;
  background:conic-gradient(from 0deg,transparent 0 10%,var(--frame-a) 16%,#fff8c8 21%,var(--frame-b) 27%,transparent 35% 52%,var(--frame-a) 60%,#fff 65%,transparent 74%);
  filter:drop-shadow(0 0 8px var(--frame-a)) drop-shadow(0 0 17px var(--frame-b));
  animation-duration:2.8s
}
.profile-frame:is([data-frame=crown],[data-frame=dragon],[data-frame=diamond]){
  animation:frame-legendary-power 2.25s ease-in-out infinite!important
}

/* Galaxie: fließender Nebel, Sternenlicht und endlose Farbbewegung. */
.profile-frame[data-frame=galaxy]{
  --frame-a:#6e4bff;--frame-b:#20cfff;
  animation:galaxy-shell 5.5s ease-in-out infinite!important;
  background:
    radial-gradient(circle at 26% 22%,#fff 0 1%,transparent 2%),
    radial-gradient(circle at 72% 30%,#8ff 0 1.2%,transparent 2.2%),
    radial-gradient(circle at 60% 76%,#f8c 0 1%,transparent 2%),
    radial-gradient(circle at 35% 68%,#fff 0 .8%,transparent 1.8%),
    radial-gradient(circle at 45% 42%,#af4cff45,transparent 38%),
    #dbe5ef!important
}
.profile-frame[data-frame=galaxy]::before{
  inset:-20px;opacity:1;
  background:
    radial-gradient(ellipse at 25% 30%,#42e8ff 0 7%,transparent 27%),
    radial-gradient(ellipse at 72% 68%,#ff4ddd 0 9%,transparent 31%),
    radial-gradient(ellipse at 70% 22%,#7150ff 0 12%,transparent 35%),
    conic-gradient(from 0deg,#1de1ff,#6239ff,#f044de,#243bff,#1de1ff);
  -webkit-mask:radial-gradient(circle,transparent 0 54%,#000 58% 73%,transparent 77%);
  mask:radial-gradient(circle,transparent 0 54%,#000 58% 73%,transparent 77%);
  filter:blur(.35px) drop-shadow(0 0 10px #5a4dff) drop-shadow(0 0 22px #e342ff);
  animation:galaxy-nebula-spin 8s linear infinite
}
.profile-frame[data-frame=galaxy]::after{
  content:"✦";position:absolute;z-index:4;left:-9px;top:-12px;color:#fff;font-size:10px;line-height:1;
  text-shadow:67px 9px 0 #7ff,74px 57px 0 #fff,10px 76px 0 #f8f,39px -8px 0 #fff,67px 76px 0 #8ff;
  filter:drop-shadow(0 0 4px #fff);pointer-events:none;animation:galaxy-stars 2.6s ease-in-out infinite
}

/* Kosmos bleibt die intensivste, chaotischere mythische Variante. */
.profile-frame[data-frame=cosmos]::before{inset:-20px;opacity:1;animation-duration:2.9s;filter:drop-shadow(0 0 10px #78ffe6) drop-shadow(0 0 22px #d857ff)}

/* Kompakte Avatare behalten den Effekt, ohne Navigation oder Listen zu überdecken. */
:is(.header-avatar,.leader-avatar,.social-avatar).profile-frame[data-frame]:not([data-frame=developer])::before{inset:-8px}
:is(.header-avatar,.leader-avatar,.social-avatar).profile-frame[data-frame=galaxy]::after{
  left:-4px;top:-5px;font-size:6px;
  text-shadow:28px 4px 0 #7ff,31px 25px 0 #fff,5px 30px 0 #f8f,16px -3px 0 #fff,27px 30px 0 #8ff
}

@keyframes frame-common-breathe{0%,100%{filter:brightness(.98) saturate(.95)}50%{filter:brightness(1.1) saturate(1.12)}}
@keyframes frame-rare-breathe{0%,100%{filter:drop-shadow(0 0 5px var(--frame-a))}50%{filter:drop-shadow(0 0 11px var(--frame-a)) drop-shadow(0 0 15px var(--frame-b))}}
@keyframes frame-epic-energy{0%,100%{filter:brightness(1) drop-shadow(0 0 7px var(--frame-a))}50%{filter:brightness(1.16) drop-shadow(0 0 15px var(--frame-a)) drop-shadow(0 0 21px var(--frame-b))}}
@keyframes frame-legendary-power{0%,100%{filter:brightness(1) drop-shadow(0 0 8px var(--frame-a))}50%{filter:brightness(1.2) drop-shadow(0 0 18px var(--frame-a)) drop-shadow(0 0 28px var(--frame-b))}}
@keyframes frame-orbit{to{transform:rotate(360deg)}}
@keyframes galaxy-nebula-spin{0%{transform:rotate(0) scale(.98);filter:hue-rotate(0deg) blur(.35px) drop-shadow(0 0 10px #5a4dff) drop-shadow(0 0 22px #e342ff)}50%{transform:rotate(180deg) scale(1.06);filter:hue-rotate(55deg) blur(.7px) drop-shadow(0 0 15px #19dfff) drop-shadow(0 0 30px #b942ff)}100%{transform:rotate(360deg) scale(.98);filter:hue-rotate(0deg) blur(.35px) drop-shadow(0 0 10px #5a4dff) drop-shadow(0 0 22px #e342ff)}}
@keyframes galaxy-shell{0%,100%{box-shadow:0 0 0 5px #633cff,0 0 17px #4a55ff,0 0 28px #d73cff!important}45%{box-shadow:0 0 0 5px #1ed9ff,0 0 24px #20aaff,0 0 38px #b642ff!important}72%{box-shadow:0 0 0 5px #f145d5,0 0 22px #bc42ff,0 0 36px #315cff!important}}
@keyframes galaxy-stars{0%,100%{opacity:.35;transform:scale(.75) rotate(0)}45%{opacity:1;transform:scale(1.2) rotate(8deg)}70%{opacity:.62;transform:scale(.9) rotate(-4deg)}}

@media(prefers-reduced-motion:reduce){
  .profile-frame[data-frame]:not([data-frame=developer]),.profile-frame[data-frame]:not([data-frame=developer])::before,.profile-frame[data-frame=galaxy]::after{animation:none!important}
}
@media(max-width:650px){.profile-card .profile-avatar.profile-frame:not([data-frame=developer]){margin:auto!important}}
