/* ── Avatar frame & border effects ── */
.avatar-frame {
  --avatar-size: 120px;
  --fx-orbit: calc(var(--avatar-size) * 0.52);
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  margin: 0 auto;
}

.avatar-frame--preview {
  --avatar-size: 96px;
}

.avatar-frame .avatar-btn {
  display: block;
  width: 100%;
  height: 100%;
}

.avatar-frame .avatar,
.avatar-frame .edit-profile-form__avatar-preview {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-border-fx {
  position: absolute;
  inset: -24px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.avatar-frame .avatar-btn,
.avatar-frame > .edit-profile-form__avatar-preview {
  position: relative;
  z-index: 1;
}

.avatar-fx {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  overflow: visible;
}

.avatar-frame[data-border-style="electricity"] .avatar-fx--electricity,
.avatar-frame[data-border-style="cherry-blossoms"] .avatar-fx--cherry-blossoms,
.avatar-frame[data-border-style="nature"] .avatar-fx--nature,
.avatar-frame[data-border-style="fire"] .avatar-fx--fire {
  display: block;
}

/* ── Default ── */
.avatar-frame[data-border-style="default"] .avatar,
.avatar-frame[data-border-style="default"] .edit-profile-form__avatar-preview {
  border: 3px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.avatar-frame:not([data-border-style="default"]) .avatar,
.avatar-frame:not([data-border-style="default"]) .edit-profile-form__avatar-preview {
  border: 2px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

/* ══════════════════════════════════════
   ELECTRICITY — anime lightning aura
   ══════════════════════════════════════ */
.avatar-fx--electricity {
  color: var(--accent, #7dd3fc);
}

.avatar-fx__plasma-orbit {
  opacity: 0.75;
  stroke-dasharray: 18 82;
  animation: avatarPlasmaTravel 2.8s linear infinite;
}

.avatar-fx__bolt-main,
.avatar-fx__bolt-branch {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.avatar-fx__bolt-main {
  stroke-width: 2.4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.avatar-fx__bolt-branch {
  stroke-width: 1.6;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.avatar-fx__bolt-branch--thin {
  stroke-width: 1.1;
}

.avatar-fx__bolt--a .avatar-fx__bolt-main { animation: avatarBoltStrike 3.2s ease-in-out infinite; }
.avatar-fx__bolt--a .avatar-fx__bolt-branch:nth-of-type(2) { animation: avatarBoltBranch 3.2s ease-in-out infinite 0.08s; }
.avatar-fx__bolt--a .avatar-fx__bolt-branch:nth-of-type(3) { animation: avatarBoltBranch 3.2s ease-in-out infinite 0.14s; }

.avatar-fx__bolt--b .avatar-fx__bolt-main { animation: avatarBoltStrike 2.9s ease-in-out infinite 0.6s; }
.avatar-fx__bolt--b .avatar-fx__bolt-branch { animation: avatarBoltBranch 2.9s ease-in-out infinite 0.68s; }

.avatar-fx__bolt--c .avatar-fx__bolt-main { animation: avatarBoltStrike 3.4s ease-in-out infinite 1.2s; }
.avatar-fx__bolt--c .avatar-fx__bolt-branch { animation: avatarBoltBranch 3.4s ease-in-out infinite 1.28s; }

.avatar-fx__bolt--d .avatar-fx__bolt-main { animation: avatarBoltStrike 3.1s ease-in-out infinite 1.8s; }
.avatar-fx__bolt--d .avatar-fx__bolt-branch:nth-of-type(2) { animation: avatarBoltBranch 3.1s ease-in-out infinite 1.88s; }
.avatar-fx__bolt--d .avatar-fx__bolt-branch:nth-of-type(3) { animation: avatarBoltBranch 3.1s ease-in-out infinite 1.94s; }

.avatar-fx__bolt--e .avatar-fx__bolt-main { animation: avatarBoltStrike 2.2s ease-in-out infinite 0.3s; }
.avatar-fx__bolt--f .avatar-fx__bolt-main { animation: avatarBoltStrike 2.4s ease-in-out infinite 1.5s; }

.avatar-fx__bolt--micro .avatar-fx__bolt-main {
  stroke-width: 1.8;
}

.avatar-fx__sparks {
  transform-origin: 70px 70px;
}

.avatar-fx__spark {
  transform-origin: center;
  opacity: 0;
}

.avatar-fx__spark--a {
  --sx: 78px; --sy: 14px;
  animation: avatarSparkFlash 3.2s ease-in-out infinite;
}

.avatar-fx__spark--b {
  --sx: 124px; --sy: 70px;
  animation: avatarSparkFlash 2.9s ease-in-out infinite 0.6s;
}

.avatar-fx__spark--c {
  --sx: 58px; --sy: 126px;
  animation: avatarSparkFlash 3.4s ease-in-out infinite 1.2s;
}

.avatar-fx__spark--d {
  --sx: 14px; --sy: 66px;
  animation: avatarSparkFlash 3.1s ease-in-out infinite 1.8s;
}

.avatar-fx__spark--e {
  --sx: 96px; --sy: 28px;
  animation: avatarSparkFlash 2.2s ease-in-out infinite 0.9s;
}

@keyframes avatarPlasmaTravel {
  to { stroke-dashoffset: -100; }
}

@keyframes avatarBoltStrike {
  0%, 72%, 100% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  8%, 18% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  22%, 68% {
    stroke-dashoffset: 0;
    opacity: 0.15;
  }
}

@keyframes avatarBoltBranch {
  0%, 76%, 100% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  12%, 20% {
    stroke-dashoffset: 0;
    opacity: 0.95;
  }
  24%, 72% {
    stroke-dashoffset: 0;
    opacity: 0.1;
  }
}

@keyframes avatarSparkFlash {
  0%, 70%, 100% {
    opacity: 0;
    transform: translate(var(--sx, 70px), var(--sy, 70px)) scale(0.4);
  }
  10%, 16% {
    opacity: 1;
    transform: translate(var(--sx, 70px), var(--sy, 70px)) scale(1.2);
  }
  20%, 68% {
    opacity: 0;
    transform: translate(calc(var(--sx, 70px) + 4px), calc(var(--sy, 70px) - 6px)) scale(0.6);
  }
}

/* ══════════════════════════════════════
   CHERRY BLOSSOMS — drifting sakura
   ══════════════════════════════════════ */
.avatar-fx--cherry-blossoms {
  overflow: visible;
}

.avatar-fx__sakura {
  transform-origin: center;
  animation: avatarSakuraFloat 6s ease-in-out infinite;
}

.avatar-fx__sakura--a { animation-delay: 0s; }
.avatar-fx__sakura--b { animation-delay: -1.2s; }
.avatar-fx__sakura--c { animation-delay: -2.4s; }
.avatar-fx__sakura--d { animation-delay: -3.6s; }
.avatar-fx__sakura--e { animation-delay: -4.8s; }

.avatar-fx__petal-drift {
  transform-box: fill-box;
  transform-origin: center;
  animation: avatarPetalOrbit 14s linear infinite;
  animation-delay: calc(var(--i) * -1.15s);
  opacity: 0;
}

.avatar-fx__petal-drift:nth-child(odd) {
  animation-duration: 16s;
}

.avatar-fx__petal-drift:nth-child(3n) {
  animation-duration: 18s;
}

.avatar-fx__mote {
  fill: #fbcfe8;
  opacity: 0;
  animation: avatarMoteDrift 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.85s);
}

@keyframes avatarSakuraFloat {
  0%, 100% { transform: translate(var(--tx, 0), var(--ty, 0)) rotate(0deg) scale(1); }
  50% { transform: translate(calc(var(--tx, 0) + 2px), calc(var(--ty, 0) - 3px)) rotate(6deg) scale(1.04); }
}

.avatar-fx__sakura--a { --tx: 0px; --ty: 0px; }
.avatar-fx__sakura--b { --tx: 0px; --ty: 0px; }

@keyframes avatarPetalOrbit {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 30deg)) translateY(calc(var(--fx-orbit) * -1)) rotate(0deg) scale(0.7);
  }
  8% { opacity: 0.95; }
  50% {
    opacity: 0.85;
    transform: rotate(calc(var(--i) * 30deg + 55deg)) translate(8px, calc(var(--fx-orbit) * -0.88)) rotate(120deg) scale(0.95);
  }
  92% { opacity: 0.5; }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 30deg + 110deg)) translate(-6px, calc(var(--fx-orbit) * -0.72)) rotate(220deg) scale(0.65);
  }
}

@keyframes avatarMoteDrift {
  0%, 100% { opacity: 0; transform: translateY(0); }
  20%, 80% { opacity: 0.7; }
  50% { opacity: 0.35; transform: translateY(-5px); }
}

/* ══════════════════════════════════════
   NATURE — enchanted forest vines
   ══════════════════════════════════════ */
.avatar-fx--nature {
  overflow: visible;
}

.avatar-fx__vine {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  animation: avatarVineGrow 8s ease-in-out infinite;
}

.avatar-fx__vine--a {
  transform-origin: 18px 98px;
  animation: avatarVineGrow 8s ease-in-out infinite, avatarVineSwayA 5s ease-in-out infinite;
}

.avatar-fx__vine--b {
  transform-origin: 122px 94px;
  animation: avatarVineGrow 8s ease-in-out infinite 1s, avatarVineSwayB 5.5s ease-in-out infinite;
}

.avatar-fx__vine--c {
  stroke-width: 2;
  transform-origin: 52px 128px;
  animation: avatarVineGrow 8s ease-in-out infinite 2s, avatarVineSwayC 6s ease-in-out infinite;
}

.avatar-fx__twig {
  fill: none;
  stroke: #15803d;
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.85;
}

.avatar-fx__twig--a {
  transform-origin: 58px 58px;
  animation: avatarTwigSway 4s ease-in-out infinite;
}

.avatar-fx__twig--b {
  transform-origin: 80px 56px;
  animation: avatarTwigSway 4.5s ease-in-out infinite 0.5s;
}

.avatar-fx__leaf {
  transform-origin: center;
  animation: avatarLeafRustle 4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.4s);
}

.avatar-fx__leaf--a { animation-delay: 0s; }
.avatar-fx__leaf--b { animation-delay: -0.6s; }
.avatar-fx__leaf--c { animation-delay: -1.2s; }
.avatar-fx__leaf--d { animation-delay: -1.8s; }
.avatar-fx__leaf--e { animation-delay: -2.4s; }
.avatar-fx__leaf--f { animation-delay: -3s; }

.avatar-fx__pollen {
  fill: #fde68a;
  opacity: 0;
  animation: avatarPollenFloat 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.9s);
}

@keyframes avatarVineGrow {
  0%, 100% { stroke-dashoffset: 18; opacity: 0.75; }
  50% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes avatarVineSwayA {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2.5deg); }
}

@keyframes avatarVineSwayB {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-2.5deg); }
}

@keyframes avatarVineSwayC {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.8deg); }
}

@keyframes avatarTwigSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); }
}

@keyframes avatarLeafRustle {
  0%, 100% { transform: rotate(var(--lr, 0deg)) scale(1); }
  50% { transform: rotate(calc(var(--lr, 0deg) + 7deg)) scale(1.05); }
}

@keyframes avatarPollenFloat {
  0%, 100% {
    opacity: 0;
    transform: translate(0, 0);
  }
  15%, 85% { opacity: 0.85; }
  50% {
    opacity: 0.45;
    transform: translate(calc(var(--i) * 2px - 4px), -8px);
  }
}

/* ══════════════════════════════════════
   FIRE — stylised anime flames
   ══════════════════════════════════════ */
.avatar-fx--fire {
  overflow: visible;
}

.avatar-fx__flame-group {
  transform-origin: 0 0;
}

.avatar-fx__flame--outer {
  opacity: 0.75;
  animation: avatarFlameOuter 0.55s ease-in-out infinite;
}

.avatar-fx__flame--core {
  animation: avatarFlameCore 0.42s ease-in-out infinite;
}

.avatar-fx__flame-group--a .avatar-fx__flame--outer { animation-delay: 0s; }
.avatar-fx__flame-group--a .avatar-fx__flame--core { animation-delay: 0.05s; }
.avatar-fx__flame-group--b .avatar-fx__flame--outer { animation-delay: 0.12s; }
.avatar-fx__flame-group--b .avatar-fx__flame--core { animation-delay: 0.08s; }
.avatar-fx__flame-group--c .avatar-fx__flame--outer { animation-delay: 0.2s; }
.avatar-fx__flame-group--c .avatar-fx__flame--core { animation-delay: 0.15s; }
.avatar-fx__flame-group--d .avatar-fx__flame--outer { animation-delay: 0.08s; }
.avatar-fx__flame-group--d .avatar-fx__flame--core { animation-delay: 0.18s; }
.avatar-fx__flame-group--e .avatar-fx__flame--outer { animation-delay: 0.16s; }
.avatar-fx__flame-group--e .avatar-fx__flame--core { animation-delay: 0.1s; }
.avatar-fx__flame-group--f .avatar-fx__flame--outer { animation-delay: 0.24s; }
.avatar-fx__flame-group--f .avatar-fx__flame--core { animation-delay: 0.2s; }
.avatar-fx__flame-group--g .avatar-fx__flame--outer { animation-delay: 0.28s; }
.avatar-fx__flame-group--g .avatar-fx__flame--core { animation-delay: 0.22s; }

.avatar-fx__flame-group--side {
  opacity: 0.7;
}

.avatar-fx__flame-group--side .avatar-fx__flame--outer,
.avatar-fx__flame-group--side .avatar-fx__flame--core {
  animation-duration: 0.48s;
}

.avatar-fx__ember {
  opacity: 0;
  animation: avatarEmberRise 2.8s ease-out infinite;
  animation-delay: calc(var(--i) * -0.28s);
}

@keyframes avatarFlameOuter {
  0%, 100% {
    transform: scaleX(0.94) scaleY(0.9) skewX(-2deg);
    opacity: 0.65;
  }
  35% {
    transform: scaleX(1.06) scaleY(1.08) skewX(3deg);
    opacity: 0.85;
  }
  65% {
    transform: scaleX(0.98) scaleY(1.02) skewX(-1deg);
    opacity: 0.75;
  }
}

@keyframes avatarFlameCore {
  0%, 100% {
    transform: scaleX(0.92) scaleY(0.88);
    opacity: 0.9;
  }
  40% {
    transform: scaleX(1.04) scaleY(1.12);
    opacity: 1;
  }
  70% {
    transform: scaleX(0.96) scaleY(0.96);
    opacity: 0.85;
  }
}

@keyframes avatarEmberRise {
  0% {
    opacity: 0;
    transform: translate(var(--ex, 70px), 118px) scale(0.5);
  }
  12% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(var(--ex, 70px) + (var(--i) - 5) * 3px), 52px) scale(0.3);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .avatar-fx *,
  .avatar-fx {
    animation: none !important;
  }

  .avatar-fx__bolt-main,
  .avatar-fx__bolt-branch {
    stroke-dashoffset: 0;
    opacity: 0.85;
  }

  .avatar-fx__plasma-orbit {
    stroke-dashoffset: -40;
    opacity: 0.6;
  }

  .avatar-fx__petal-drift,
  .avatar-fx__mote,
  .avatar-fx__pollen,
  .avatar-fx__ember,
  .avatar-fx__spark {
    opacity: 0.5;
  }

  .avatar-fx__vine {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 480px) {
  .avatar-frame:not(.avatar-frame--preview) {
    --avatar-size: 100px;
  }

  .avatar-border-fx {
    inset: -18px;
  }
}