/* A quiet orbital motion layer. All movement stays within its own artwork. */
.brand .logo-mark {
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  transform-origin: 50% 50%;
  animation: lili-logo-orbit 44s linear infinite;
}

.logo-star {
  fill: currentColor;
}

.logo-bar {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  animation: lili-logo-bob 4.8s ease-in-out infinite;
}

.logo-bar-one { animation-delay: -.4s; }
.logo-bar-two { animation-duration: 5.5s; animation-delay: -2.1s; }
.logo-bar-three { animation-duration: 5.1s; animation-delay: -3.2s; }
.logo-bar-four { animation-duration: 5.8s; animation-delay: -1.3s; }

.brand-copy {
  position: relative;
  display: block;
  min-width: 0;
}

.brand #completion-credit {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  margin: 0;
  color: #b6aa94;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .15px;
  white-space: nowrap;
  pointer-events: none;
}

.login-orb .orb-line {
  transform-origin: 50% 50%;
  animation: lili-orbit-precession 36s linear infinite;
}

.login-orb .orb-star {
  /* Its existing -10deg tilt is intentionally retained. */
  animation: lili-core-twinkle 7.6s ease-in-out infinite;
}

.login-orb .orbit-spark {
  text-shadow: 0 0 13px #e8cc942e;
  animation: lili-spark-twinkle 5.2s ease-in-out infinite;
}

.login-orb .spark-one {
  animation-delay: -1.7s;
}

.login-orb .spark-two {
  animation-duration: 6.8s;
  animation-delay: -4.3s;
}

@keyframes lili-logo-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes lili-logo-bob {
  0%, 100% { transform: translateY(-1.5px); }
  50% { transform: translateY(1.5px); }
}

@keyframes lili-orbit-precession {
  0% { transform: rotate(-30deg) scaleY(.50); opacity: .78; }
  25% { transform: rotate(60deg) scaleY(.57); opacity: .93; }
  50% { transform: rotate(150deg) scaleY(.50); opacity: .78; }
  75% { transform: rotate(240deg) scaleY(.43); opacity: .65; }
  100% { transform: rotate(330deg) scaleY(.50); opacity: .78; }
}

@keyframes lili-core-twinkle {
  0%, 100% { opacity: .82; }
  38% { opacity: 1; }
  68% { opacity: .72; }
}

@keyframes lili-spark-twinkle {
  0%, 100% { opacity: .56; }
  45% { opacity: 1; }
  72% { opacity: .70; }
}

@media (max-width: 800px) {
  .brand #completion-credit {
    top: calc(100% + 4px);
    font-size: 8px;
    letter-spacing: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand .logo-mark,
  .logo-bar,
  .login-orb .orb-line,
  .login-orb .orb-star,
  .login-orb .orbit-spark {
    animation: none;
  }
  .login-orb .orb-line { transform: rotate(-30deg) scaleY(.5); opacity: .85; }
  .login-orb .orb-star,
  .login-orb .orbit-spark { opacity: 1; }
}