/* avatar.css - hyper-real procedural portrait styling */

.hyper-avatar {
  width: 100%;
  height: 100%;
}

#avatar-sprite {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: radial-gradient(
      115% 140% at 50% 0%,
      rgba(59, 130, 246, 0.42),
      rgba(124, 58, 237, 0.15) 42%,
      rgba(15, 23, 42, 0.94) 100%
    ),
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), transparent 55%);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 35px 90px rgba(15, 23, 42, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform-style: preserve-3d;
  transform: translateY(var(--avatar-translate, 0px)) rotateX(var(--avatar-tilt-y, 0deg))
    rotateY(var(--avatar-tilt-x, 0deg));
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 1.2s ease,
    filter 1.2s ease;
  will-change: transform, box-shadow;
  backdrop-filter: blur(4px);
  --avatar-tilt-x: 0deg;
  --avatar-tilt-y: 0deg;
  --avatar-translate: 0px;
  --avatar-glow-strength: 0.55;
  --avatar-highlight: 48%;
}

:where(.dark, .dark *) #avatar-sprite {
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 35px 120px rgba(2, 6, 23, 0.85), inset 0 0 0 1px rgba(148, 163, 184, 0.14);
  background: radial-gradient(
      115% 140% at 50% 0%,
      rgba(59, 130, 246, 0.32),
      rgba(79, 70, 229, 0.18) 42%,
      rgba(2, 6, 23, 0.96) 100%
    ),
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 60%);
}

#avatar-sprite::before,
#avatar-sprite::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#avatar-sprite::before {
  inset: -18% -24% 42% -24%;
  background: radial-gradient(
    70% 60% at 50% 42%,
    rgba(59, 130, 246, 0.55),
    rgba(45, 212, 191, 0.18) 55%,
    transparent 100%
  );
  opacity: calc(var(--avatar-glow-strength, 0.55) + 0.15);
  filter: blur(42px);
  z-index: 0;
}

#avatar-sprite::after {
  inset: 58% -28% -24% -28%;
  background: radial-gradient(
    75% 60% at 50% 0%,
    rgba(79, 70, 229, 0.35),
    rgba(236, 72, 153, 0.12) 62%,
    transparent 100%
  );
  opacity: calc(var(--avatar-glow-strength, 0.55) * 0.9);
  filter: blur(56px);
  z-index: 0;
}

#avatar-sprite .hyper-avatar__halo,
#avatar-sprite .hyper-avatar__sheen,
#avatar-sprite .hyper-avatar__grid,
#avatar-sprite .hyper-avatar__scanline,
#avatar-sprite .hyper-avatar__noise,
#avatar-sprite .hyper-avatar__orb {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#avatar-sprite .hyper-avatar__halo {
  inset: -12% -8% 36% -8%;
  z-index: 1;
  background: radial-gradient(
    120% 85% at 50% var(--avatar-highlight, 48%),
    rgba(96, 165, 250, 0.68),
    rgba(79, 70, 229, 0.42) 45%,
    rgba(15, 23, 42, 0) 80%
  );
  opacity: calc(var(--avatar-glow-strength, 0.55) + 0.3);
  mix-blend-mode: screen;
  filter: blur(18px);
}

#avatar-sprite .hyper-avatar__sheen {
  inset: -18% 6% 40% 6%;
  z-index: 2;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(253, 230, 138, 0.28) 35%,
    rgba(59, 130, 246, 0) 68%
  );
  opacity: calc(0.18 + var(--avatar-glow-strength, 0.55) * 0.45);
  mix-blend-mode: screen;
  filter: blur(22px);
  transform: translateZ(30px) rotateZ(2deg);
}

#avatar-sprite .hyper-avatar__portrait {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  transform: translateZ(50px) translateY(var(--avatar-translate, 0px));
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), filter 1.2s ease;
  filter: drop-shadow(0 24px 60px rgba(15, 23, 42, 0.45));
}

#avatar-sprite .hyper-avatar__grid {
  inset: 12%;
  z-index: 4;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background-image: linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.3;
  mix-blend-mode: screen;
  transform: translateZ(38px);
}

#avatar-sprite .hyper-avatar__scanline {
  z-index: 5;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12) 0px,
    rgba(255, 255, 255, 0.12) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.16;
  mix-blend-mode: screen;
  animation: avatar-scan 6s linear infinite;
}

#avatar-sprite .hyper-avatar__noise {
  z-index: 6;
  background-image: repeating-conic-gradient(
    from 45deg,
    rgba(255, 255, 255, 0.05) 0deg 6deg,
    transparent 6deg 12deg
  );
  background-size: 160% 160%;
  opacity: 0.18;
  mix-blend-mode: soft-light;
  animation: avatar-noise 18s linear infinite;
}

#avatar-sprite .hyper-avatar__orb {
  z-index: 1;
  width: 52%;
  aspect-ratio: 1 / 1;
  inset: auto;
  bottom: -18%;
  right: -12%;
  top: auto;
  left: auto;
  border-radius: 999px;
  background: radial-gradient(
    circle at 32% 32%,
    rgba(236, 72, 153, 0.55),
    rgba(99, 102, 241, 0.22) 62%,
    transparent 88%
  );
  opacity: calc(0.25 + var(--avatar-glow-strength, 0.55) * 0.35);
  filter: blur(14px);
  transform: translateZ(28px);
}

@media (hover: hover) and (pointer: fine) {
  #avatar-sprite:hover {
    box-shadow: 0 45px 140px rgba(59, 130, 246, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    filter: saturate(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  #avatar-sprite {
    transition: none;
    transform: none;
  }
  #avatar-sprite .hyper-avatar__portrait {
    transform: none;
    transition: none;
  }
  #avatar-sprite .hyper-avatar__scanline,
  #avatar-sprite .hyper-avatar__noise {
    animation: none;
  }
}

@keyframes avatar-scan {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 16px;
  }
}

@keyframes avatar-noise {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200% 200%;
  }
}