/* Isolated login artwork. The vehicle scene is local and never leaves the app. */
@media (min-width: 821px) {
  .ux-v2 .login-stage {
    grid-template-columns: minmax(420px, 42%) minmax(0, 58%);
  }

  .ux-v2 .login-access-content {
    width: min(100%, 520px);
    align-content: start;
    padding: clamp(52px, 6.4vh, 70px) 32px 34px;
  }

  .ux-v2 .login-story {
    background-color: #08111f;
    background-image:
      linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
    background-size: 42px 42px;
  }

  .ux-v2 .login-story::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 75% 45%, rgba(49, 87, 119, .11), transparent 42%),
      linear-gradient(110deg, transparent 58%, rgba(188, 143, 43, .055));
  }

  .ux-v2 .login-story-header,
  .ux-v2 .login-story-main,
  .ux-v2 .login-story-signals {
    position: relative;
    z-index: 2;
  }

  .ux-v2 .login-story-header {
    padding-inline: 7%;
    color: #9aa7b9;
  }

  .ux-v2 .login-story-main {
    grid-template-rows: auto minmax(320px, 1fr);
    align-content: center;
    padding: clamp(48px, 5.8vh, 66px) 7% 18px;
  }

  .ux-v2 .login-story-copy {
    max-width: 650px;
  }

  .ux-v2 .login-story-copy::before {
    content: "";
    width: 38px;
    height: 3px;
    display: block;
    margin-bottom: 22px;
    border-radius: 3px;
    background: #d6b153;
    box-shadow: 0 0 22px rgba(214, 177, 83, .2);
  }

  .ux-v2 .login-story-kicker {
    margin-bottom: 12px;
    color: #a7b1c1;
    letter-spacing: .13em;
  }

  .ux-v2 .login-story h2 {
    max-width: 640px;
    font-family: Geist, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(3.35rem, 5vw, 4.5rem);
    font-weight: 790;
    line-height: .98;
    letter-spacing: 0;
    text-wrap: balance;
  }

  .ux-v2 .login-story-copy > p:last-child {
    max-width: 500px;
    margin-top: 18px;
    color: #aab4c3;
  }

  .ux-v2 .login-signal-field {
    position: relative;
    min-height: 320px;
    margin-top: 26px;
    isolation: isolate;
  }

  .ux-v2 .login-signal-field > svg {
    display: none;
  }

  .ux-v2 .login-drive-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(184, 202, 224, .18);
    border-radius: 8px;
    background-color: #07101b;
    background-image: url("assets/login-night-highway.png");
    background-position: 50% 62%;
    background-size: cover;
    box-shadow: 0 30px 88px rgba(0, 0, 0, .38);
    pointer-events: none;
  }

  .ux-v2 .login-drive-field::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(4, 10, 17, .14) 0%, rgba(4, 10, 17, .06) 40%, rgba(4, 10, 17, .9) 100%),
      linear-gradient(90deg, rgba(4, 10, 17, .5), transparent 42%, rgba(4, 10, 17, .18));
  }

  .ux-v2 .login-drive-field::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    opacity: .14;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
  }

  .ux-v2 .login-drive-horizon {
    position: absolute;
    z-index: 3;
    top: 49%;
    left: 5%;
    width: 90%;
    height: 1px;
    opacity: .62;
    background: linear-gradient(90deg, transparent, rgba(229, 199, 119, .72) 38%, rgba(75, 209, 138, .45) 70%, transparent);
    box-shadow: 0 0 20px rgba(216, 182, 94, .22);
  }

  .ux-v2 .login-drive-road,
  .ux-v2 .login-drive-lane,
  .ux-v2 .login-drive-lamp {
    display: none;
  }

  .ux-v2 .login-drive-beam {
    position: absolute;
    z-index: 4;
    bottom: -15%;
    width: 40%;
    height: 58%;
    transform-origin: bottom center;
    clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
    filter: blur(18px);
    mix-blend-mode: screen;
    background: linear-gradient(180deg, rgba(251, 232, 174, 0), rgba(251, 232, 174, .1) 62%, rgba(255, 244, 206, .3));
  }

  .ux-v2 .login-drive-beam-left {
    left: 4%;
    transform: rotate(-4deg);
  }

  .ux-v2 .login-drive-beam-right {
    right: 4%;
    transform: rotate(4deg);
  }

  .ux-v2 .login-drive-scan {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: -20%;
    width: 34%;
    height: 1px;
    opacity: .34;
    background: linear-gradient(90deg, transparent, rgba(94, 218, 155, .78), transparent);
    box-shadow: 0 0 16px rgba(75, 209, 138, .34);
  }

  .ux-v2 .login-drive-caption {
    position: absolute;
    z-index: 6;
    left: 20px;
    top: 18px;
    display: grid;
    gap: 3px;
    margin: 0;
    padding-left: 11px;
    border-left: 2px solid #d6b153;
  }

  .ux-v2 .login-drive-caption strong {
    color: #eef3f8;
    font-size: .66rem;
    font-weight: 780;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .ux-v2 .login-drive-caption span {
    color: #9ca9ba;
    font-size: .62rem;
  }

  .ux-v2 .login-system-card {
    z-index: 8;
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    border-color: rgba(196, 211, 228, .18);
    border-radius: 7px;
    background: rgba(4, 10, 17, .82);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
    backdrop-filter: blur(18px) saturate(120%);
  }

  .ux-v2 .login-system-card-head {
    min-height: 38px;
    padding-inline: 14px;
  }

  .ux-v2 .login-system-flow-item {
    min-height: 66px;
    padding: 12px 14px;
  }

  .ux-v2 .login-system-flow-item small {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ux-v2 .login-system-card-foot {
    display: none;
  }

  .ux-v2 .login-story-signals {
    justify-content: flex-start;
    padding-inline: 7%;
    background: rgba(4, 9, 16, .54);
  }
}

@media (max-width: 1180px) and (min-width: 821px) {
  .ux-v2 .login-stage {
    grid-template-columns: minmax(390px, 44%) minmax(0, 56%);
  }

  .ux-v2 .login-access-content,
  .ux-v2 .login-story-main {
    padding-top: 42px;
  }

  .ux-v2 .login-story-main {
    grid-template-rows: auto minmax(288px, 1fr);
  }

  .ux-v2 .login-system-flow-item {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    padding-inline: 10px;
  }
}

@media (min-width: 821px) and (max-height: 760px) {
  .ux-v2 .login-access-content,
  .ux-v2 .login-story-main {
    padding-top: 24px;
  }

  .ux-v2 .login-access-content {
    padding-bottom: 18px;
  }

  .ux-v2 .login-heading {
    margin-bottom: 18px;
  }

  .ux-v2 .login-heading h1 {
    font-size: 2.72rem;
  }

  .ux-v2 .login-heading > p:last-child {
    margin-top: 12px;
  }

  .ux-v2 .login-card {
    gap: 9px;
  }

  .ux-v2 .login-access-footer {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .ux-v2 .login-story-main {
    grid-template-rows: auto minmax(245px, 1fr);
  }

  .ux-v2 .login-story-copy::before {
    margin-bottom: 16px;
  }

  .ux-v2 .login-story h2 {
    font-size: clamp(3rem, 4.7vw, 3.85rem);
  }

  .ux-v2 .login-story-copy > p:last-child {
    margin-top: 12px;
  }

  .ux-v2 .login-signal-field {
    min-height: 245px;
    margin-top: 14px;
  }

  .ux-v2 .login-system-flow-item {
    min-height: 58px;
    padding-block: 9px;
  }

  .ux-v2 .login-story-signals {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ux-v2 .login-drive-field *,
  .ux-v2 .login-drive-field *::before,
  .ux-v2 .login-drive-field *::after {
    animation: none !important;
    transition: none !important;
  }
}