/* Hux login signal field: atmosphere stays inside the welcome region. */

.auth-gate-layout {
  position: relative;
  grid-template-columns: minmax(0, 1.42fr) minmax(400px, 0.72fr);
  background: #0d0d0f;
}

.auth-gate-intro {
  position: relative;
  isolation: isolate;
  min-height: 600px;
  overflow: hidden;
  background: #0b0b0d;
}

.auth-gate-intro::before,
.auth-gate-intro::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
}

.auth-gate-intro::before {
  background:
    radial-gradient(ellipse at 24% 43%, transparent 0%, rgb(8 8 10 / 6%) 48%, rgb(8 8 10 / 24%) 88%),
    linear-gradient(90deg, rgb(8 8 10 / 10%) 0%, rgb(8 8 10 / 16%) 58%, rgb(8 8 10 / 34%) 100%),
    linear-gradient(180deg, rgb(8 8 10 / 6%) 0%, transparent 54%, rgb(8 8 10 / 42%) 100%);
}

.auth-gate-intro::after {
  opacity: 0.08;
  background-image:
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(115deg, #000 0%, rgb(0 0 0 / 78%) 46%, transparent 88%);
}

.auth-gate-signal-field,
.auth-gate-signal-fallback,
.auth-gate-signal-field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.auth-gate-signal-field {
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.auth-gate-signal-fallback {
  background:
    linear-gradient(124deg, #050506 0 31%, #27070c 40%, #ff343d 52%, #4e0a12 64%, #08080a 76% 100%);
  background-size: 140% 140%;
  animation: auth-gradient-fallback 28s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.auth-gate-signal-field canvas {
  display: block;
  opacity: 1;
  filter: saturate(1.02) contrast(1.01);
}

.auth-gate-signal-field.is-fallback canvas {
  display: none;
}

.auth-gate-intro > :not(.auth-gate-signal-field) {
  position: relative;
  z-index: 2;
}

.auth-gate-intro .section-kicker {
  text-shadow: 0 0 24px rgb(255 77 77 / 24%);
}

.auth-gate-intro h1 {
  max-width: 680px;
  margin-top: 26px;
  text-wrap: balance;
  text-shadow: 0 4px 32px rgb(0 0 0 / 82%), 0 0 80px rgb(0 0 0 / 42%);
}

.auth-gate-intro > p {
  color: #c1c1c6;
  text-shadow: 0 2px 16px rgb(0 0 0 / 88%);
}

.auth-gate-flow {
  border: 1px solid rgb(255 255 255 / 11%);
  background: rgb(8 8 10 / 74%);
  box-shadow: 0 18px 48px rgb(0 0 0 / 18%);
  backdrop-filter: blur(14px);
}

@keyframes auth-gradient-fallback {
  0% { background-position: 2% 8%; }
  100% { background-position: 15% 18%; }
}

.auth-gate-flow li {
  align-content: center;
  min-height: 104px;
  padding: 22px 20px;
}

.auth-gate-flow li + li {
  padding-left: 20px;
  border-left-color: rgb(255 255 255 / 11%);
}

.auth-gate-card {
  min-height: 600px;
  border-left: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 1.6%), transparent 34%),
    #111113;
}

@media (max-width: 980px) {
  .auth-gate-layout {
    grid-template-columns: 1fr;
  }

  .auth-gate-intro {
    min-height: 540px;
  }

  .auth-gate-card {
    min-height: auto;
  }

  .auth-gate-intro::before {
    background:
      linear-gradient(90deg, rgb(8 8 10 / 8%), rgb(8 8 10 / 46%) 100%),
      linear-gradient(180deg, rgb(8 8 10 / 8%) 0%, rgb(8 8 10 / 10%) 58%, rgb(8 8 10 / 76%) 100%);
  }
}

@media (max-width: 620px) {
  .auth-gate-intro {
    min-height: 500px;
  }

  .auth-gate-intro::after {
    background-size: 40px 40px;
  }

  .auth-gate-flow {
    margin-top: 42px;
  }

  .auth-gate-flow li {
    min-height: 0;
    padding: 17px 18px;
  }

  .auth-gate-flow li + li {
    padding-left: 18px;
    border-top-color: rgb(255 255 255 / 11%);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-gate-signal-fallback {
    animation: none;
  }

  .auth-gate-signal-field canvas {
    opacity: 0.88;
  }
}