/* Floating labels */
.label {
  position: absolute; font-size: .58rem; letter-spacing: 1.35px;
  text-transform: uppercase; color: var(--label-color);
  z-index: 6; font-weight: 700; cursor: pointer; pointer-events: auto;
  padding: 5px 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
}

.label:hover {
  animation-play-state: paused;
  background: transparent;
  box-shadow: none;
  color: #fff;
  opacity: 1 !important;
  text-shadow:
    0 0 5px rgb(255 255 255 / 88%),
    0 0 14px rgb(100 180 255 / 95%),
    0 0 28px rgb(100 180 255 / 70%) !important;
  transform: scale(1.12) translateY(-3px) !important;
}

/* Tooltips */
.label .tip {
  position: absolute; left: 50%;
  transform: translate(-50%, 8px);
  width: max-content; max-width: 160px;
  white-space: normal; text-align: center; line-height: 1.5;
  font-size: .56rem; color: var(--tip-color); letter-spacing: .7px;
  text-transform: none; font-weight: 400;
  background: transparent; padding: 7px 10px; border-radius: 0;
  border: 0;
  box-shadow: none;
  opacity: 0; visibility: hidden;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.label.top .tip { top: calc(100% + 10px); }
.label.bot .tip { bottom: calc(100% + 10px); }
.label:hover .tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Positions */
.l1 { top: 16%; left: 10%; }
.l2 { bottom: 16%; right: 10%; }
.l3 { top: 18%; right: 12%; }
.l4 { bottom: 20%; left: 12%; }
.l5 { top: 46%; left: 5%; }
.l6 { top: 46%; right: 5%; }
.l7 { top: 28%; left: 18%; }
.l8 { bottom: 7%; left: 34%; }
.l9 { bottom: 8%; right: 34%; }

/* Entrance and motion */
.label {
  opacity: 0;
  animation: fade-in .5s ease forwards, drift 6s ease-in-out infinite, blink 5s infinite;
}

.l1 { animation-delay: .4s, .4s, 0s; --dd: 6s; }
.l2 { animation-delay: .55s, .55s, 1.5s; --dd: 7.5s; }
.l3 { animation-delay: .7s, .7s, .5s; --dd: 7s; }
.l4 { animation-delay: .85s, .85s, 2s; --dd: 5.5s; }
.l5 { animation-delay: 1s, 1s, 1s; --dd: 8s; }
.l6 { animation-delay: 1.15s, 1.15s, .3s; --dd: 6.5s; }
.l7 { animation-delay: 1.3s, 1.3s, 1.8s; --dd: 7.2s; }
.l8 { animation-delay: 1.45s, 1.45s, .8s; --dd: 6.8s; }
.l9 { animation-delay: 1.6s, 1.6s, 2.3s; --dd: 7.8s; }

.l1, .l2, .l3, .l4, .l5, .l6, .l7, .l8, .l9 {
  animation-duration: .5s, var(--dd), 5s;
}