/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./components/login-product-scene.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
.login-ctx {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: login-ctx-fade 27s linear infinite;
}

.login-ctx-2 { animation-delay: 4.5s; }
.login-ctx-3 { animation-delay: 9s; }
.login-ctx-4 { animation-delay: 13.5s; }
.login-ctx-5 { animation-delay: 18s; }
.login-ctx-6 { animation-delay: 22.5s; }

.login-ctx-line {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-ligatures: none;
}

.login-ctx-line-1,
.login-ctx-line-2 {
  width: 0;
  box-shadow: 1.5px 0 0 transparent;
  animation: login-ctx-type 27s linear infinite;
}

.login-ctx-line-2 { animation-delay: 4.5s; }

.login-ctx-reveal { opacity: 0; animation: login-ctx-reveal 27s linear infinite; }
.login-ctx-reveal-3 { animation-delay: 9s; }
.login-ctx-reveal-4 { animation-delay: 13.5s; }
.login-ctx-reveal-6 { animation-delay: 22.5s; }

.login-ctx-check { opacity: 0.35; animation: login-ctx-check 27s linear infinite; }
.login-ctx-check-1 { animation-delay: 18s; }
.login-ctx-check-2 { animation-delay: 18.45s; }
.login-ctx-check-3 { animation-delay: 18.9s; }

.login-ctx-dot {
  height: 0.3rem;
  width: 0.3rem;
  border-radius: 9999px;
  background: rgb(148 163 184 / 0.45);
  animation: login-ctx-dot 27s linear infinite;
}

.login-ctx-dot-2 { animation-delay: 4.5s; }
.login-ctx-dot-3 { animation-delay: 9s; }
.login-ctx-dot-4 { animation-delay: 13.5s; }
.login-ctx-dot-5 { animation-delay: 18s; }
.login-ctx-dot-6 { animation-delay: 22.5s; }

.login-scene[data-paused='true'] .login-ctx,
.login-scene[data-paused='true'] .login-ctx-line,
.login-scene[data-paused='true'] .login-ctx-reveal,
.login-scene[data-paused='true'] .login-ctx-check,
.login-scene[data-paused='true'] .login-ctx-dot {
  animation-play-state: paused;
}

@keyframes login-ctx-fade {
  0% { opacity: 0; }
  2%,
  14.5% { opacity: 1; }
  16.6%,
  100% { opacity: 0; }
}

@keyframes login-ctx-type {
  0%,
  3% { width: 0; box-shadow: 1.5px 0 0 #6366f1; }
  12% { width: calc(var(--type-ch) * 1ch); box-shadow: 1.5px 0 0 #6366f1; }
  12.6% { width: calc(var(--type-ch) * 1ch); box-shadow: 1.5px 0 0 transparent; }
  14.5% { width: calc(var(--type-ch) * 1ch); box-shadow: 1.5px 0 0 transparent; }
  16.6%,
  100% { width: 0; box-shadow: 1.5px 0 0 transparent; }
}

@keyframes login-ctx-reveal {
  0%,
  4% { opacity: 0; }
  8%,
  14.5% { opacity: 1; }
  16.6%,
  100% { opacity: 0; }
}

@keyframes login-ctx-check {
  0%,
  2% { opacity: 0.35; }
  5%,
  14.5% { opacity: 1; }
  16.6%,
  100% { opacity: 0.35; }
}

@keyframes login-ctx-dot {
  0%,
  14.5% {
    width: 0.9rem;
    background: #6366f1;
  }
  16.6%,
  100% {
    width: 0.3rem;
    background: rgb(148 163 184 / 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-ctx,
  .login-ctx-line,
  .login-ctx-reveal,
  .login-ctx-check,
  .login-ctx-dot {
    animation: none;
  }

  .login-ctx { opacity: 0; }
  .login-ctx-1 { opacity: 1; }
  .login-ctx-line,
  .login-ctx-reveal,
  .login-ctx-check { width: auto; opacity: 1; }
  .login-ctx-dot-1 {
    width: 0.9rem;
    background: #6366f1;
  }
}