/* Shared three-second opening for customer, merchant and manager pages. */
.launch-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: #fffaf5;
  color: #593627;
  pointer-events: auto;
  animation: launch-reveal 3s cubic-bezier(0.45, 0, 0.2, 1) both;
}
.launch-intro img {
  width: 160px;
  max-width: 45vw;
  height: auto;
  animation: launch-logo 3s ease-in-out both;
}
.launch-intro span {
  font-size: 0.95rem;
  animation: launch-caption 0.5s 0.35s ease both;
}
@keyframes launch-logo {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  24% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  62% {
    opacity: 1;
    transform: translateY(3vh) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(-16vh) scale(1);
  }
}
@keyframes launch-caption {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes launch-reveal {
  0%,
  62% {
    transform: translateY(0);
    visibility: visible;
  }
  99% {
    visibility: visible;
  }
  100% {
    transform: translateY(-100%);
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .launch-intro {
    display: none;
  }
}

/* Only the introduction is visible before the initial page reveal. */
html.launch-pending:not(.launch-uncovering) body > :not(.launch-intro) {
  visibility: hidden !important;
}

.launch-intro[hidden] {
  display: none;
}

/* Keep controls inactive until the opening has completely finished. */
html.launch-pending body > :not(.launch-intro) {
  pointer-events: none !important;
}