/* ============================================================
   auth.css — login + signup pages, 50/50 split
   ============================================================ */

.dx .auth { min-height: 100vh; padding: 32px 0; }
.dx .auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  min-height: calc(100vh - 64px);
  align-items: center;
}
@media (max-width: 980px) {
  .dx .auth-grid { grid-template-columns: 1fr; }
  .dx .auth-right { display: none; }
}

.dx .auth-left { display: flex; align-items: center; justify-content: center; }
.dx .auth-form-card {
  width: 100%;
  max-width: 420px;
  padding: 8px;
}
.dx .auth-h { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.dx .auth-sub { margin: 8px 0 32px; font-size: 15px; }

.dx .auth-form { display: flex; flex-direction: column; gap: 18px; }
.dx .auth-field { display: flex; flex-direction: column; }
.dx .auth-hint { font-size: 11px; margin: 6px 0 0; }
.dx .auth-submit { margin-top: 4px; }

.dx .auth-error {
  background: rgba(255, 77, 77, 0.08);
  border: 1px solid rgba(255, 77, 77, 0.3);
  color: #FF8B6B;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13.5px;
}

.dx .auth-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 24px 0 16px;
  color: var(--fg-dim);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.dx .auth-divider::before, .dx .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.dx .auth-oauth {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.dx .auth-oauth .btn { width: 100%; justify-content: center; }

.dx .auth-alt { margin: 28px 0 0; color: var(--fg-muted); font-size: 13.5px; }
.dx .auth-alt a { color: var(--orange); border-bottom: 1px solid var(--orange-tint); padding-bottom: 1px; }
.dx .auth-alt a:hover { border-color: var(--orange); }
.dx .auth-fine { margin: 12px 0 0; font-size: 11px; }

/* ─── Right showcase ─────────────────────────────────────── */
.dx .auth-right {
  background:
    radial-gradient(60% 50% at 70% 30%, var(--mesh-orange), transparent 70%),
    radial-gradient(40% 40% at 30% 80%, var(--mesh-violet), transparent 70%),
    var(--bg-inset);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: 32px;
  height: 560px;
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
}
.dx .auth-showcase { position: relative; width: 100%; height: 100%; }
.dx .auth-showcase-slide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0;
  transform: scale(0.96) translateY(14px);
  filter: blur(6px);
  transition:
    opacity   460ms cubic-bezier(0.16, 1, 0.3, 1) 60ms,
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1) 60ms,
    filter    340ms cubic-bezier(0.16, 1, 0.3, 1) 60ms;
  pointer-events: none;
  will-change: opacity, transform, filter;
}
.dx .auth-showcase-slide.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
  pointer-events: auto;
}
/* `exiting` is applied by auth.js for one tick on the outgoing slide so
   it lifts UP + scales slightly LARGER as it disappears, rather than
   reusing the entering-from-below state. Reads as "this card is leaving". */
.dx .auth-showcase-slide.exiting {
  opacity: 0;
  transform: scale(1.04) translateY(-10px);
  filter: blur(3px);
  transition:
    opacity   240ms ease-in,
    transform 320ms ease-in,
    filter    180ms ease-in;
}
.dx .auth-showcase-slide > * { width: 100%; max-width: 420px; }
.dx .auth-showcase-slide .terminal { width: 100%; }

.dx .auth-stat-card { text-align: center; }
.dx .auth-stat-num {
  font-size: 56px; font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--fg);
  margin: 18px 0 6px;
}
.dx .auth-stat-meta { font-size: 12px; }

.dx .auth-int-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px;
}
.dx .auth-int-item {
  padding: 14px 10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-muted);
}

/* Feature-list items inside the "WHAT YOU GET" slide stagger in when
   the slide becomes active. Each li transitions opacity + X-translate
   with a delay derived from --i (set in the HTML — see signup.html). */
.dx .auth-feat-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.dx .auth-feat-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--fg);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dx .auth-feat-list li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); flex-shrink: 0;
  box-shadow: 0 0 0 0 var(--orange-tint);
  transition: box-shadow 320ms var(--ease);
}
.dx .auth-showcase-slide.active .auth-feat-list li {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(220ms + var(--i, 0) * 90ms);
}
.dx .auth-showcase-slide.active .auth-feat-list li::before {
  box-shadow: 0 0 0 6px var(--orange-tint);
  transition-delay: calc(360ms + var(--i, 0) * 90ms);
}

/* Story-style progress dots — inactive dots stay small circles, the
   active one expands to a 28px pill with a fill that animates from
   0 → 100% width over the auto-advance interval (5.2s). Reads like
   an Instagram story indicator. */
.dx .auth-dots {
  position: absolute; left: 0; right: 0; bottom: 18px;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  z-index: 2;
}
.dx .auth-dot {
  position: relative;
  width: 6px; height: 6px;
  background: var(--fg-faint);
  border: none; padding: 0;
  border-radius: 100px;
  cursor: pointer;
  overflow: hidden;
  transition: width 360ms cubic-bezier(0.16, 1, 0.3, 1),
              background 200ms var(--ease);
}
.dx .auth-dot:hover { background: var(--fg-dim); }
.dx .auth-dot.active {
  width: 28px;
  background: var(--orange-tint);
}
/* The progress fill — animates 0 → 100% width over the slide duration */
.dx .auth-dot.active::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 100%;
  background: var(--orange);
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  animation: dx-auth-dot-fill 5.2s linear forwards;
}
@keyframes dx-auth-dot-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Pause both the fill animation AND auth.js's auto-advance (handled by JS
   listening for mouseenter on .auth-showcase) when the user hovers. */
.dx .auth-showcase:hover .auth-dot.active::after,
.dx .auth-showcase.dx-paused .auth-dot.active::after {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .dx .auth-showcase-slide,
  .dx .auth-showcase-slide.exiting,
  .dx .auth-feat-list li {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .dx .auth-dot.active::after { animation: none; transform: scaleX(1); }
}

/* ─── Password show/hide toggle ──────────────────────────────────
   Wraps the <input type="password"> so the eye button overlays the
   right edge of the field. JS in auth.js flips the input type and
   the visible icon when clicked. */
.dx .auth-pw-wrap {
  position: relative;
  display: block;
}
.dx .auth-pw-wrap .auth-pw-input {
  /* Reserve room on the right so typed characters never sit under
     the eye button. 44px = 28px icon + 16px breathing room. */
  padding-right: 44px;
  width: 100%;
}
.dx .auth-pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: color 160ms var(--ease), background 160ms var(--ease);
}
.dx .auth-pw-toggle:hover,
.dx .auth-pw-toggle:focus-visible {
  color: var(--fg);
  background: var(--bg-elev-2);
  outline: none;
}
.dx .auth-pw-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* The `hidden` HTML attribute applies display:none with very low
   specificity, so the rule above silently overrides it and both
   icons render on top of each other. Restore correct hide-behaviour
   for the inactive SVG with an explicit attribute selector. */
.dx .auth-pw-toggle svg[hidden] {
  display: none;
}