#header-avatar-wrap {
  width: 5rem;
  height: 5rem;
  transition: width 0.35s ease, height 0.35s ease;
}

.hal-9000-avatar-link {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.hal-9000-avatar {
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 22.5%;
  border: 1px solid rgba(224, 229, 232, 0.14);
  background:
    linear-gradient(180deg, #16191c, #08090a);
  box-shadow:
    0 18px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 180ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 220ms ease,
    filter 220ms ease;
}

.hal-9000-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 34%),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: auto, 100% 4px;
  opacity: 0.75;
  pointer-events: none;
}

.hal-9000-avatar-link:hover .hal-9000-avatar {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 22px 30px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(159, 179, 189, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hal-9000-avatar-link:active .hal-9000-avatar {
  transform: scale(0.96);
}

.hal-9000-frame {
  position: absolute;
  inset: 12.5%;
  border-radius: 17.5%;
}

.hal-9000-eye {
  position: relative;
  width: 52.5%;
  height: 52.5%;
  border-radius: 999px;
  background:
    radial-gradient(circle, #ff4b34 0%, #8b0000 42%, #110004 74%);
  box-shadow:
    0 0 0 5px rgba(8, 9, 10, 0.95),
    0 0 14px rgba(184, 92, 79, 0.22),
    inset 0 0 0 1px rgba(255, 214, 214, 0.08);
  overflow: hidden;
}

.hal-9000-eye::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.hal-9000-lens {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38%;
  height: 38%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 30%, #fff4de 0%, #fff4de 14%, transparent 15%),
    radial-gradient(circle, #ffb46a 0%, #ff5f39 38%, #840000 72%);
  box-shadow:
    0 0 8px rgba(255, 95, 57, 0.34),
    inset 0 0 0 1px rgba(255, 232, 216, 0.12);
  transform: translate(-50%, -50%);
  will-change: transform;
}

.hal-9000-pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 31.25%;
  height: 31.25%;
  border-radius: 999px;
  background:
    radial-gradient(circle, #170002, #000 76%);
  box-shadow: none;
  transform: translate(-50%, -50%);
}

.hal-9000-glare {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  mix-blend-mode: screen;
}

.hal-9000-glare-main {
  top: 12.5%;
  left: 12.5%;
  width: 37.5%;
  height: 37.5%;
  background: #fff4de;
}

.hal-9000-glare-secondary {
  right: 12.5%;
  bottom: 12.5%;
  width: 25%;
  height: 25%;
  background: rgba(255, 218, 199, 0.6);
}

.hal-9000-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
}

.hal-9000-ring-inner {
  inset: 14%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 220, 0.12);
}

.hal-9000-ring-outer {
  inset: 5%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.34);
}

.hal-9000-eyelid {
  position: absolute;
  left: 0;
  width: 100%;
  height: 52%;
  background:
    linear-gradient(180deg, #08090a, #140606);
  transform: scaleY(0);
  transition: transform 140ms ease;
  pointer-events: none;
}

.hal-9000-eyelid-top {
  top: 0;
  transform-origin: top;
}

.hal-9000-eyelid-bottom {
  bottom: 0;
  transform-origin: bottom;
}

@media (prefers-reduced-motion: reduce) {
  .hal-9000-avatar,
  .hal-9000-eyelid {
    transition: none;
  }

  .hal-9000-avatar-link:hover .hal-9000-avatar {
    transform: none;
  }
}