/* Electric aura around admin / superadmin avatars */
.avatar-electric {
  --avatar-radius: 9999px;
  --electric-inset: 48px;
  position: relative;
  isolation: isolate;
}

.avatar-electric-aura {
  position: absolute;
  inset: -17%;
  border-radius: var(--avatar-radius);
  background: conic-gradient(from 0deg, transparent 0 12%, #168cff 18%, #e9fbff 22%, transparent 29% 48%, #168cff 56%, transparent 64% 78%, #b9efff 86%, transparent 94%);
  filter: blur(13px);
  opacity: .8;
  animation: avatar-electric-spin 3.5s linear infinite, avatar-electric-pulse 1.2s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

.avatar-electric-canvas {
  position: absolute;
  inset: calc(var(--electric-inset) * -1);
  width: calc(100% + var(--electric-inset) * 2);
  height: calc(100% + var(--electric-inset) * 2);
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

.avatar-electric > .post-avatar-picture,
.avatar-electric > .avatar-electric-frame,
.avatar-electric.profile-avatar-wrapper > img,
.avatar-electric.profile-avatar-wrapper > .dropdown,
.avatar-electric.profile-avatar-wrapper > span:not(.avatar-electric-aura) {
  position: relative;
  z-index: 1;
}

.avatar-electric > .post-avatar-picture,
.avatar-electric > .avatar-electric-frame {
  border: 2px solid rgba(210, 244, 255, .95);
  box-shadow:
    0 0 6px #fff,
    0 0 14px #168cff,
    0 0 28px rgba(0, 145, 255, .55),
    inset 0 0 12px rgba(0, 145, 255, .25);
}

.avatar-electric.profile-avatar-wrapper {
  --avatar-radius: 1.5rem;
  overflow: visible;
  box-shadow:
    0 0 8px #fff,
    0 0 20px #168cff,
    0 0 36px rgba(0, 145, 255, .55);
}

.avatar-electric.profile-avatar-wrapper > img,
.avatar-electric.profile-avatar-wrapper > .dropdown > .dropdown-toggle > img,
.avatar-electric.profile-avatar-wrapper > .dropdown > button > img {
  box-shadow: inset 0 0 18px rgba(0, 145, 255, .25);
}

@keyframes avatar-electric-spin {
  to { transform: rotate(360deg); }
}

@keyframes avatar-electric-pulse {
  from { opacity: .45; transform: scale(.96); }
  to { opacity: .95; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-electric-aura {
    animation: none;
  }
}

@media (min-width: 640px) {
  .avatar-electric.profile-avatar-wrapper {
    --avatar-radius: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .avatar-electric.profile-avatar-wrapper {
    --avatar-radius: 2.5rem;
  }
}