/* Shared by the sign-in handoff, document bootstrap, and Angular loader. */
.xtoz-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  overflow: hidden;
  isolation: isolate;
  background: #0b0b0d;
  color: #f4f3ef;
  font-family: Arial, sans-serif;
  text-align: center;
}
.xtoz-intro::before {
  content: '';
  position: absolute;
  inset: -4%;
  z-index: -1;
  background: var(--intro-gradient) center / cover no-repeat;
  filter: blur(10px);
  animation: xtoz-intro-drift 16s ease-in-out infinite alternate;
}
.xtoz-intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.xtoz-intro-icon {
  display: block;
  width: 112px;
  height: 112px;
  margin: 0;
  background: transparent;
  border-radius: 23px;
}
.xtoz-intro-name {
  margin: -10px 0 0;
  font:
    26px/1.2 Arial,
    sans-serif;
  letter-spacing: -0.04em;
}
.xtoz-intro-tagline {
  margin: -8px 0 0;
  font:
    9px/1.4 Arial,
    sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.xtoz-intro-progress {
  position: relative;
  width: 84px;
  height: 1px;
  margin: 20px 28px;
  background: rgb(244 243 239 / 50%);
}
.xtoz-intro-progress::before,
.xtoz-intro-progress::after {
  position: absolute;
  top: -12px;
  font:
    22px/1.2 Arial,
    sans-serif;
}
.xtoz-intro-progress::before {
  content: 'X';
  left: -26px;
}
.xtoz-intro-progress::after {
  content: 'Z';
  right: -26px;
}
.xtoz-intro-progress i {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f4f3ef;
  box-shadow: 0 0 5px rgb(244 243 239 / 25%);
  animation: xtoz-intro-progress 2.4s ease-in-out infinite alternate;
}
@keyframes xtoz-intro-progress {
  to {
    left: calc(100% - 7px);
  }
}
@keyframes xtoz-intro-drift {
  to {
    transform: translate3d(2%, -2%, 0) scale(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .xtoz-intro::before,
  .xtoz-intro-progress i {
    animation: none;
  }
  .xtoz-intro-progress i {
    left: calc(50% - 3px);
  }
}