/* The public login previews only light colors; it never infers a project. */
.is-login .ring-trail { animation: ring-flow 16s linear infinite, login-light-one 12s ease-in-out infinite; }
.is-login .ring-trail[data-trail='1'] { animation-name: ring-flow, login-light-two; }
@keyframes login-light-one {
  0%, 15%, 100% { stroke: #9edee8; }
  50%, 65% { stroke: #f2f1e9; }
}
@keyframes login-light-two {
  0%, 15%, 100% { stroke: #c4a5e0; }
  50%, 65% { stroke: #b5b7b5; }
}
.ring-welcome {
  top: 50%; width: min(84vw, 660px); height: 0;
  transform: translateX(-50%);
}
.ring-welcome h2 {
  position: absolute; left: 0; right: 0;
  bottom: clamp(76px, 10vh, 105px); margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  animation: welcome-reveal var(--motion-greeting) ease both;
}
.ring-welcome p {
  position: absolute; left: 50%; top: 0;
  width: 100%; translate: -50% -50%; margin: 0;
  color: var(--design-text);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.035em;
  animation: welcome-reveal var(--motion-welcomeTitle) var(--motion-welcomeDelay) ease both;
}
.ring-welcome .welcome-skip {
  position: absolute; left: 50%; top: clamp(120px, 18vh, 165px);
  translate: -50% 0; margin: 0; white-space: nowrap;
  animation: welcome-reveal var(--motion-skipFade) var(--motion-skipDelay) ease both;
}
@keyframes welcome-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .is-login .ring-trail, .ring-welcome h2, .ring-welcome p,
  .ring-welcome .welcome-skip { animation: none; }
}