/* ============================================================
   V9 "Obsidian Terminal" — Sign-in / Bootstrap surface.

   Two-column: brand hero (BB logo + diagonal Pokémon-card marquee +
   status strip) on the left, form pane on the right. A re-skin of the
   V8 "Holo" surface onto V9 tokens — sits on the #060608 obsidian
   canvas and re-tints with the active theme. The auth logic in
   app/views/auth.js (login / bootstrap) is untouched.

   Used by:
     - app/views/auth.js renderLogin (returning sellers)
     - app/views/auth.js renderBootstrap (first-run owner setup)
   ============================================================ */
.v9-signin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--v9-bg);
  color: var(--v9-text);
  font-family: var(--v9-font-ui);
}

/* ─── Left: hero ─────────────────────────────────────────── */
.v9-signin-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--v9-space-8);
  border-right: 1px solid var(--v9-line);
  background:
    radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--v9-accent) 5%, transparent), transparent 55%),
    linear-gradient(180deg, #08080b, var(--v9-bg) 60%, #08080b);
}
/* faint terminal grid backdrop, masked toward the center */
.v9-signin-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
/* subtle accent glow behind the marquee (accent stays rationed — kept low) */
.v9-signin-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--v9-accent) 18%, transparent), transparent 60%);
  filter: blur(70px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  animation: v9SigninGlow 9s ease-in-out infinite;
}
@keyframes v9SigninGlow {
  0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.26; transform: translate(-50%, -50%) scale(1.06); }
}
.v9-signin-brand {
  position: relative;
  z-index: 2;
  display: flex;
  animation: v9SigninUp 0.9s var(--v9-ease) both;
  animation-delay: 0.35s;
}
.v9-signin-logo {
  display: block;
  height: 4rem;
  width: auto;
  align-self: flex-start;
}
.v9-signin-bottom {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  animation: v9SigninUp 0.9s var(--v9-ease) both;
  animation-delay: 0.55s;
}
.v9-signin-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 var(--v9-text-xs) var(--v9-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v9-text-faint);
}
.v9-signin-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v9-pos);
  box-shadow: 0 0 8px var(--v9-pos);
  animation: v9SigninPulse 2.4s ease-in-out infinite;
}
@keyframes v9SigninPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ─── Card marquee (diagonal scrolling rows) ─────────────── */
.v9-signin-marquee {
  position: absolute;
  inset: -25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  pointer-events: none;
  transform: rotate(-12deg);
  transform-origin: center;
  z-index: 1;
  animation: v9SigninMarquee 1.2s var(--v9-ease) both;
  animation-delay: 0.15s;
}
@keyframes v9SigninMarquee {
  from { opacity: 0; transform: rotate(-12deg) translateY(20px); }
  to   { opacity: 1; transform: rotate(-12deg) translateY(0); }
}
.v9-signin-mrow { display: flex; align-items: center; }
.v9-signin-mtrack {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: v9SigninScrollL 80s linear infinite;
  will-change: transform;
}
.v9-signin-mrow:nth-child(2) .v9-signin-mtrack { animation: v9SigninScrollR 65s linear infinite; }
.v9-signin-mrow:nth-child(3) .v9-signin-mtrack { animation-duration: 95s; }
@keyframes v9SigninScrollL { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes v9SigninScrollR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.v9-signin-mtile {
  height: 11rem;
  width: auto;
  border-radius: var(--v9-r-md);
  border: 1px solid var(--v9-line-strong);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  flex-shrink: 0;
}

/* ─── Right: form pane ───────────────────────────────────── */
.v9-signin-pane {
  position: relative;
  background: var(--v9-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--v9-space-8);
}
.v9-signin-form-inner {
  width: 100%;
  max-width: 22rem;
  animation: v9SigninUp 0.55s var(--v9-ease) both;
  animation-delay: 0.2s;
}
@keyframes v9SigninUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.v9-signin-eyebrow {
  display: inline-block;
  font: 600 var(--v9-text-xs) var(--v9-font-mono);
  letter-spacing: var(--v9-track-eyebrow);
  text-transform: uppercase;
  color: var(--v9-accent);
  margin-bottom: var(--v9-space-3);
}
.v9-signin-title {
  margin: 0 0 var(--v9-space-2);
  font: var(--v9-weight-display) var(--v9-text-xl) / 1.12 var(--v9-font-ui);
  letter-spacing: var(--v9-track-display);
  color: var(--v9-text);
}
.v9-signin-subtitle {
  margin: 0 0 var(--v9-space-6);
  font: 400 var(--v9-text-sm) var(--v9-font-ui);
  line-height: 1.5;
  color: var(--v9-text-mute);
}
.v9-signin-form {
  display: flex;
  flex-direction: column;
  gap: var(--v9-space-4);
}
.v9-signin-field { display: flex; flex-direction: column; gap: var(--v9-space-2); }
.v9-signin-field label {
  font: 500 var(--v9-text-xs) var(--v9-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v9-text-faint);
}
.v9-signin-field input {
  width: 100%;
  height: 2.75rem;
  padding: 0 var(--v9-space-3);
  background: var(--v9-surface);
  border: 1px solid var(--v9-line-strong);
  border-radius: var(--v9-r-sm);
  color: var(--v9-text);
  font: 400 var(--v9-text-md) var(--v9-font-ui);
  transition: border-color var(--v9-t-micro) var(--v9-ease), box-shadow var(--v9-t-micro) var(--v9-ease);
}
.v9-signin-field input::placeholder { color: var(--v9-text-faint); }
.v9-signin-field input:hover { border-color: var(--v9-text-faint); }
.v9-signin-field input:focus {
  outline: none;
  border-color: var(--v9-accent);
  box-shadow: var(--v9-focus-glow);
}

/* CTA — THE one yellow primary action, with a subtle arrow slide */
.v9-signin-cta {
  margin-top: var(--v9-space-2);
  height: 2.75rem;
  background: var(--v9-accent);
  color: var(--v9-accent-ink);
  border: 0;
  border-radius: var(--v9-r-sm);
  font: 600 var(--v9-text-md) var(--v9-font-ui);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: filter var(--v9-t-micro) var(--v9-ease), transform var(--v9-t-micro) var(--v9-ease);
}
.v9-signin-cta:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.v9-signin-cta:active:not(:disabled) { transform: translateY(0); }
.v9-signin-cta:disabled { opacity: 0.6; cursor: not-allowed; }
.v9-signin-cta svg { width: 14px; height: 14px; transition: transform var(--v9-t-micro) var(--v9-ease); }
.v9-signin-cta:hover:not(:disabled) svg { transform: translateX(3px); }

.v9-signin-error {
  margin-top: var(--v9-space-2);
  padding: var(--v9-space-2) var(--v9-space-3);
  background: color-mix(in srgb, var(--v9-neg) 12%, var(--v9-surface));
  border: 1px solid color-mix(in srgb, var(--v9-neg) 35%, var(--v9-line));
  border-radius: var(--v9-r-sm);
  color: var(--v9-neg);
  font: 400 var(--v9-text-sm) var(--v9-font-ui);
  line-height: 1.5;
}

/* ─── Responsive: stack ──────────────────────────────────── */
@media (max-width: 820px) {
  .v9-signin { grid-template-columns: 1fr; }
  .v9-signin-hero { min-height: 38vh; padding: var(--v9-space-6); border-right: 0; border-bottom: 1px solid var(--v9-line); }
  .v9-signin-pane { padding: var(--v9-space-6) var(--v9-space-5) var(--v9-space-8); }
  .v9-signin-mtile { height: 8rem; }
  .v9-signin-mrow:nth-child(3) { display: none; }
}
@media (max-width: 520px) {
  .v9-signin-hero { min-height: 30vh; }
  .v9-signin-mrow:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v9-signin-glow,
  .v9-signin-status-dot,
  .v9-signin-marquee,
  .v9-signin-mtrack,
  .v9-signin-brand,
  .v9-signin-bottom,
  .v9-signin-form-inner { animation: none; }
}