.login-onboarding {
  padding: var(--spacer-16);
  display: flex;
  flex-direction: column;
}

.login-onboarding-error {
  margin: 0 0 var(--spacer-16);
}

.login-onboarding-screen {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacer-32);
  overflow: hidden;
  pointer-events: none;
}

.login-onboarding-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--login-onboarding-bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 520ms ease;
}

.login-onboarding-screen > * {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 420ms ease;
}

.login-onboarding-screen.is-active {
  z-index: 2;
  pointer-events: auto;
}

.login-onboarding-screen.is-exiting {
  z-index: 1;
}

.login-onboarding-screen.is-active::before,
.login-onboarding-screen.is-active > * {
  opacity: 1;
}

.login-onboarding-screen-bg1 {
  --login-onboarding-bg: url(../img/onboarding/onboarding-1-bg.jpg);
}

.login-onboarding-screen-bg2 {
  --login-onboarding-bg: url(../img/onboarding/onboarding-2-bg.jpg);
}

.login-onboarding-screen-bg3 {
  --login-onboarding-bg: url(../img/onboarding/onboarding-3-bg.jpg);
}

.login-onboarding-screen[hidden] {
  display: none;
}

.login-onboarding-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: var(--spacer-16);
}

.login-onboarding-copy h2 {
  margin: 0;
  color: var(--white100);
}

.login-onboarding-copy p {
  margin: 0;
  color: var(--muted-soft);
  font-size: var(--spacer-16);
  line-height: 1.45;
}

.login-onboarding-actions {
  display: grid;
  gap: var(--spacer-12);
}

.login-onboarding-action {
  position: absolute;
  bottom: var(--spacer-32);
  left: var(--spacer-16);
  right: var(--spacer-16);
  width: calc(100vw - 32px);
}

.login-onboarding-debug {
  min-height: var(--spacer-48);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-soft);
}

.login-onboarding-page1-img {
  display: grid;
  grid-template-columns: auto auto;
  margin: 0 auto;
  width: min(84vw, 360px);
  place-items: center;
}

.login-onboarding-page1-img img {
  width: 100%;
  height: auto;
  transform-origin: center;
  will-change: transform;
  animation: onboardingTileFloat var(--float-duration, 4200ms) ease-in-out infinite alternate;
  animation-delay: var(--float-delay, 0ms);
}

.login-onboarding-cups {
  align-self: center;
  width: min(78vw, 360px);
  height: auto;
  transform-origin: center;
  will-change: transform;
  animation: onboardingCupsRotate 8000ms linear infinite;
}

@keyframes onboardingTileFloat {
  from {
    transform:
      translate(var(--float-from-x, 0%), var(--float-from-y, 0%))
      scale(var(--float-from-scale, 1))
      rotate(var(--float-from-rotate, 0deg));
  }

  to {
    transform:
      translate(var(--float-to-x, 0%), var(--float-to-y, 0%))
      scale(var(--float-to-scale, 1))
      rotate(var(--float-to-rotate, 0deg));
  }
}

@keyframes onboardingCupsRotate {
  to {
    transform: rotateZ(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-onboarding-screen::before,
  .login-onboarding-screen > * {
    transition: none;
  }

  .login-onboarding-page1-img img {
    animation: none;
    transform:
      translate(var(--float-to-x, 0%), var(--float-to-y, 0%))
      scale(var(--float-to-scale, 1))
      rotate(var(--float-to-rotate, 0deg));
  }

  .login-onboarding-cups {
    animation: none;
  }
}