:root {
  --avatar-x: 0;
  --avatar-y: 0;
  --avatar-tilt-x: 0deg;
  --avatar-tilt-y: 0deg;
}

.blender-avatar {
  position: absolute;
  right: clamp(-70px, 2vw, 60px);
  bottom: clamp(-210px, -11vw, -130px);
  width: clamp(560px, 52vw, 980px);
  aspect-ratio: 1;
  z-index: 3;
  pointer-events: none;
  perspective: 1200px;
  isolation: isolate;
}

.blender-avatar,
.blender-avatar * { box-sizing: border-box; }

/* ---- rotating conic halo ring ---- */
.blender-avatar__halo {
  position: absolute; left: 50%; top: 47%; width: 90%; aspect-ratio: 1;
  transform: translate(-50%, -50%); z-index: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 6%, rgba(var(--accent2-rgb, 124,92,255), .55) 15%, transparent 31%,
    rgba(var(--accent3-rgb, 34,211,238), .42) 49%, transparent 63%,
    rgba(var(--accent-rgb, 167,139,250), .55) 81%, transparent 97%);
  filter: blur(17px); opacity: .6;
  -webkit-mask: radial-gradient(circle, transparent 0 50%, #000 53%, #000 66%, transparent 71%);
  mask: radial-gradient(circle, transparent 0 50%, #000 53%, #000 66%, transparent 71%);
  animation: avHaloSpin 19s linear infinite;
}
@keyframes avHaloSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---- thin techy orbit rings ---- */
.blender-avatar__rings { position: absolute; left: 50%; top: 47%; width: 76%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 0; }
.blender-avatar__rings span { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(var(--accent-rgb, 167,139,250), .22); animation: avRingSpin 28s linear infinite; }
.blender-avatar__rings span:nth-child(2) { inset: 12%; border-style: dotted; border-color: rgba(var(--accent3-rgb, 34,211,238), .16); animation-duration: 38s; animation-direction: reverse; }
@keyframes avRingSpin { to { transform: rotate(360deg); } }

/* ---- orbiting glow particles (each layer rotates, ::before is the dot) ---- */
.blender-avatar__orbit { position: absolute; left: 50%; top: 46%; width: 84%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 1; }
.blender-avatar__orbit i { position: absolute; inset: 0; animation: avOrbit 22s linear infinite; }
.blender-avatar__orbit i::before {
  content: ''; position: absolute; top: -1.6%; left: 50%; width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; background: var(--accent, #a78bfa); box-shadow: 0 0 18px 3px rgba(var(--accent-rgb, 167,139,250), .85);
}
.blender-avatar__orbit i:nth-child(2) { animation-duration: 28s; animation-delay: -5.5s; }
.blender-avatar__orbit i:nth-child(2)::before { width: 8px; height: 8px; margin-left: -4px; background: #22d3ee; box-shadow: 0 0 18px 3px rgba(34, 211, 238, .85); }
.blender-avatar__orbit i:nth-child(3) { animation-duration: 17s; animation-delay: -11s; }
.blender-avatar__orbit i:nth-child(3)::before { width: 7px; height: 7px; margin-left: -3.5px; }
.blender-avatar__orbit i:nth-child(4) { animation-duration: 33s; animation-delay: -17s; }
.blender-avatar__orbit i:nth-child(4)::before { width: 8px; height: 8px; margin-left: -4px; background: #c8b4ff; box-shadow: 0 0 18px 3px rgba(200, 180, 255, .8); top: -1%; }
@keyframes avOrbit { to { transform: rotate(360deg); } }

/* ---- figure stage (tilt from JS vars + breathing float + pulsing glow) ---- */
.blender-avatar__stage {
  position: absolute; inset: 0; z-index: 2;
  transform-style: preserve-3d;
  transform:
    translate3d(calc(var(--avatar-x) * 28px), calc(var(--avatar-y) * 18px), 0)
    rotateX(var(--avatar-tilt-x))
    rotateY(var(--avatar-tilt-y));
  filter:
    drop-shadow(0 48px 76px rgba(0, 0, 0, .66))
    drop-shadow(-16px 10px 48px rgba(124, 92, 255, .3));
  animation: blenderAvatarFloat 5.6s ease-in-out infinite, avStageGlow 4.6s ease-in-out infinite;
}
.blender-avatar__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  transform: translateZ(92px) scale(1.08);
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.blender-avatar__shine {
  position: absolute; inset: 4% 6% 8%; border-radius: 42%; z-index: 2;
  background:
    radial-gradient(circle at calc(46% + var(--avatar-x) * 14%) calc(24% + var(--avatar-y) * 9%), rgba(255,255,255,.26), transparent 0 5%, transparent 19%),
    linear-gradient(105deg, transparent 20%, rgba(255,255,255,.10) 34%, transparent 47%);
  mix-blend-mode: screen; opacity: .2; transform: translateZ(120px);
  -webkit-mask-image: radial-gradient(circle at 48% 42%, black 0 52%, transparent 70%);
  mask-image: radial-gradient(circle at 48% 42%, black 0 52%, transparent 70%);
}
/* periodic light glint sweeping across the figure (masked to the body so it never bands the transparent corners) */
.blender-avatar__sweep {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; transform: translateZ(110px);
  background: linear-gradient(115deg, transparent 40%, rgba(220,210,255,.18) 49%, rgba(255,255,255,.3) 51%, transparent 61%);
  background-size: 250% 100%; background-position: 200% 0;
  -webkit-mask: radial-gradient(58% 70% at 50% 44%, #000 28%, transparent 72%);
  mask: radial-gradient(58% 70% at 50% 44%, #000 28%, transparent 72%);
  animation: avSweep 6.5s ease-in-out infinite;
}

.blender-avatar__aurora {
  position: absolute; border-radius: 999px; pointer-events: none; z-index: -1; mix-blend-mode: screen;
  transform: translate3d(calc(var(--avatar-x) * -42px), calc(var(--avatar-y) * -28px), 0);
}
.blender-avatar__aurora--one {
  width: 70%; aspect-ratio: 1 / .54; left: 18%; bottom: 11%;
  background: radial-gradient(ellipse, rgba(139, 75, 255, .82), rgba(139, 75, 255, .26) 46%, transparent 74%);
  filter: blur(36px); animation: avatarGlow 5.2s ease-in-out infinite;
}
.blender-avatar__aurora--two {
  width: 20%; aspect-ratio: 1; right: 18%; top: 20%;
  background: radial-gradient(circle, rgba(238, 202, 255, .78), rgba(157, 72, 255, .34) 45%, transparent 76%);
  filter: blur(22px); animation: avatarOrb 5.8s ease-in-out infinite;
}

@keyframes blenderAvatarFloat { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 -16px; scale: 1.014; } }
@keyframes avStageGlow {
  0%, 100% { filter: drop-shadow(0 48px 76px rgba(0,0,0,.66)) drop-shadow(-14px 8px 42px rgba(124,92,255,.24)); }
  50%      { filter: drop-shadow(0 54px 86px rgba(0,0,0,.7))  drop-shadow(-20px 12px 66px rgba(124,92,255,.55)); }
}
@keyframes avatarGlow {
  0%, 100% { opacity: .55; transform: scale(.94) translate3d(calc(var(--avatar-x) * -42px), calc(var(--avatar-y) * -28px), 0); }
  50%      { opacity: .95; transform: scale(1.1)  translate3d(calc(var(--avatar-x) * -42px), calc(var(--avatar-y) * -28px), 0); }
}
@keyframes avatarOrb { 0%, 100% { opacity: .66; } 50% { opacity: 1; } }
@keyframes avSweep { 0%, 60% { background-position: 200% 0; } 86%, 100% { background-position: -70% 0; } }

@media (max-width: 940px) {
  .blender-avatar { right: 50%; transform: translateX(50%); bottom: -190px; width: min(112vw, 760px); opacity: .86; }
}

@media (prefers-reduced-motion: reduce) {
  .blender-avatar__stage, .blender-avatar__aurora, .blender-avatar__halo,
  .blender-avatar__orbit i, .blender-avatar__rings span, .blender-avatar__sweep { animation: none; }
}