.auth {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(460px, 1fr);
  height: 100%;
  padding: var(--inset);
  gap: var(--inset);
}

/* ---------- Cinematic visual ---------- */
.auth-visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: #07060a;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.06), var(--shadow-3);
  animation: auth-visual-in 900ms var(--ease-out) both;
}
@keyframes auth-visual-in {
  from {
    opacity: 0;
    transform: scale(1.02);
  }
}

/* Poster: layered stage light, grain and a slowly turning aperture. It is
   what you see until the film decodes, so it has to stand on its own. */
.auth-poster {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 70% 20%, rgba(255, 168, 92, 0.2), transparent 60%),
    radial-gradient(80% 70% at 10% 90%, rgba(120, 92, 255, 0.22), transparent 65%),
    linear-gradient(170deg, #17141c 0%, #0b0a10 55%, #050407 100%);
}
.auth-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.16;
  mix-blend-mode: overlay;
}
.auth-poster-light {
  position: absolute;
  width: 60%;
  height: 55%;
  left: 40%;
  top: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 120, 0.22), transparent 65%);
  filter: blur(40px);
  animation: auth-light 18s var(--ease) infinite alternate;
}
.auth-poster-light--b {
  left: -10%;
  top: 50%;
  background: radial-gradient(circle, rgba(150, 120, 255, 0.2), transparent 65%);
  animation-duration: 23s;
  animation-delay: -6s;
}
@keyframes auth-light {
  to {
    transform: translate3d(-12%, 10%, 0) scale(1.12);
  }
}
.auth-poster-glyph {
  position: absolute;
  right: -8%;
  top: 8%;
  width: 62%;
  height: auto;
  aspect-ratio: 1;
  stroke-width: 0.14;
  color: rgba(255, 255, 255, 0.16);
  animation: spin 120s linear infinite;
}

.auth-visual video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.4s var(--ease), transform 6s var(--ease-out);
}
.auth-visual video.is-ready {
  opacity: 0.88;
  transform: none;
}
.auth-visual-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 4, 8, 0.5) 0%, rgba(5, 4, 8, 0) 28%),
    linear-gradient(0deg, rgba(5, 4, 8, 0.92) 0%, rgba(5, 4, 8, 0.4) 42%, rgba(5, 4, 8, 0) 68%);
}
.auth-visual-copy {
  position: absolute;
  left: clamp(28px, 4vw, 52px);
  right: clamp(28px, 4vw, 52px);
  bottom: clamp(28px, 4vw, 48px);
  color: #fff;
}
.auth-visual-brand {
  color: #fff;
  font-size: 18px;
  animation: rise-in var(--d-slow) var(--ease-out) 200ms both;
}
.auth-visual-brand svg {
  width: 30px;
  height: 30px;
}
.auth-visual-pitch {
  margin-top: 22px;
  font: 700 clamp(34px, 4vw, 54px) / 1.06 var(--font-display);
  letter-spacing: -0.035em;
  animation: rise-in 700ms var(--ease-out) 300ms both;
}
.auth-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  max-width: 420px;
}
.auth-features li {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 400 13.5px/1.45 var(--font);
  color: rgba(255, 255, 255, 0.64);
  animation: rise-in 600ms var(--ease-out) both;
  animation-delay: calc(450ms + var(--i) * 90ms);
}
.auth-features strong {
  display: block;
  font: 600 14.5px/1.35 var(--font);
  color: #fff;
}
.auth-feature-icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
}
.auth-feature-icon .icon {
  width: 18px;
  height: 18px;
}

/* ---------- Form column ---------- */
.auth-main {
  position: relative;
  display: flex;
  justify-content: center;
  overflow-y: auto;
  padding: 64px 12px 32px;
}
.auth-back {
  position: absolute;
  top: 12px;
  left: 12px;
  gap: 3px;
  padding-left: 8px;
}
.auth-card {
  width: min(420px, 100%);
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 30px 28px;
  border-radius: var(--r-2xl);
  box-shadow: var(--glass-highlight), 0 0 0 0.5px var(--glass-edge), var(--shadow-3);
  animation: pop-in var(--d-slow) var(--spring) both;
}
.auth-logo {
  display: block;
  align-self: flex-start;
  animation: float-y 6s var(--ease) infinite;
}
.auth-logo svg {
  display: block;
  filter: drop-shadow(0 8px 18px rgba(255, 120, 70, 0.28));
}
.auth-head h1 {
  font: var(--t-title1);
  letter-spacing: -0.025em;
}
.auth-head p {
  margin-top: 6px;
  font: var(--t-callout);
  color: var(--label-2);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Fields swapped in by the login channel switch ease in instead of jumping. */
.auth-swap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: auth-swap var(--d-slow) var(--ease-out);
}
@keyframes auth-swap {
  from {
    opacity: 0;
    transform: translateX(10px);
    filter: blur(3px);
  }
}
.auth-submit {
  margin-top: 6px;
  height: 46px;
  font-size: 15px;
}

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--red) 11%, transparent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--red) 30%, transparent);
  color: var(--red);
  font: 500 13.5px/1.4 var(--font);
  animation: shake 360ms var(--ease);
}
.auth-alert .icon {
  margin-top: 1px;
}

.auth-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}
/* Align the button with the input (label row is ~22px tall). */
.auth-code-row > .btn,
.auth-code-row > .auth-captcha {
  margin-top: 23px;
}
.auth-code-btn {
  min-width: 112px;
  height: var(--control-h-lg);
  padding: 0 14px;
  font-size: 13.5px;
  border-radius: var(--r-md);
}
.auth-captcha {
  width: 112px;
  height: var(--control-h-lg);
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--separator-strong);
  background: #f1ede4;
  transition: box-shadow var(--d-fast), transform var(--d) var(--spring);
}
.auth-captcha img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auth-captcha:hover {
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
.auth-captcha:active {
  transform: scale(0.96);
}

.auth-fine {
  margin-top: -4px;
  font: var(--t-footnote);
  color: var(--label-3);
}

.auth-password {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.auth-strength {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-meter {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--fill-3);
  overflow: hidden;
}
.auth-meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--label-4);
  transition: width var(--d-slow) var(--spring), background var(--d);
}
.auth-meter.is-weak i {
  background: var(--red);
}
.auth-meter.is-medium i {
  background: var(--orange);
}
.auth-meter.is-strong i {
  background: var(--green);
}
.auth-strength-label {
  min-width: 58px;
  text-align: right;
  font: 600 11.5px/1 var(--font);
  color: var(--label-3);
}
.auth-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.auth-rules li {
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--t-footnote);
  color: var(--label-3);
  transition: color var(--d);
}
.auth-rules li .icon {
  width: 14px;
  height: 14px;
  color: var(--label-4);
  transition: color var(--d), transform var(--d-slow) var(--spring);
}
.auth-rules li.is-ok {
  color: var(--label-2);
}
.auth-rules li.is-ok .icon {
  color: var(--green);
  transform: scale(1.12);
}

.auth-agree {
  align-items: center;
}
.auth-agree input {
  margin-top: 0;
}

.auth-switch {
  text-align: center;
  font: var(--t-callout);
  color: var(--label-2);
}

.auth-demo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 11px 11px 12px;
  border-radius: var(--r-lg);
  background: var(--fill-4);
  box-shadow: inset 0 0 0 0.5px var(--separator);
}
.auth-demo-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: var(--t-footnote);
  color: var(--label-2);
}
.auth-demo-text strong {
  font: 650 12.5px/1.3 var(--font);
  color: var(--label);
}
.auth-demo-text code {
  font: 500 11.5px/1 var(--font-mono);
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--fill-3);
  color: var(--label);
}

@media (max-width: 900px) {
  .auth {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
    overflow-y: auto;
  }
  body:has(.auth) {
    overflow: auto;
  }
  .auth-visual {
    flex: none;
    height: 190px;
  }
  .auth-visual-pitch {
    margin-top: 12px;
    font-size: 28px;
  }
  .auth-features {
    display: none;
  }
  .auth-visual-copy {
    bottom: 22px;
  }
  .auth-main {
    padding: 8px 0 24px;
    overflow: visible;
  }
  .auth-back {
    top: -176px;
    left: 12px;
    z-index: 2;
  }
  .auth-card {
    padding: 26px 20px 22px;
  }
  .auth-logo {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-poster-light,
  .auth-poster-glyph,
  .auth-logo {
    animation: none;
  }
}
:root[data-motion="reduced"] .auth-poster-light,
:root[data-motion="reduced"] .auth-poster-glyph,
:root[data-motion="reduced"] .auth-logo {
  animation: none;
}