/* Shared five-element orbit appearance for the homepage and admin navigation. */
.tianni-five-elements {
  position: absolute;
  inset: -11px;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.tianni-element {
  --element-color: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0 12%, var(--element-color) 34% 58%, transparent 74%);
  box-shadow:
    0 0 5px var(--element-color),
    0 0 12px var(--element-color);
  opacity: .9;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.tianni-element-metal {
  --element-color: #f1e6b6;
}

.tianni-element-wood {
  --element-color: #65d48a;
}

.tianni-element-water {
  --element-color: #58bfff;
}

.tianni-element-fire {
  --element-color: #ff655d;
}

.tianni-element-earth {
  --element-color: #d8a94d;
}