/* =========================================================================
   Auth screens — login, forgot password, reset password
   -------------------------------------------------------------------------
   Spec   : mockup 5a "Login — 121 CRM sign-in" (animated split layout)
   Owner  : design-system-agent
   Depends: tokens.css (must load first), components.css

   SCREEN css, not KIT css. Anything here that turns out to be reusable across
   screens gets promoted into components.css by design-system-agent — it does
   not get copy-pasted into a second screen.

   Motion note: tokens.css already neutralises every animation under
   prefers-reduced-motion with !important. Every keyframe below is therefore
   written so its FINAL frame is the correct static state — a reduced-motion
   user lands on a fully drawn, fully visible, correctly positioned screen
   rather than a half-painted one.
   ========================================================================= */

/* ---------------------------------------------------------------- shell -- */

/* The panel is placed explicitly rather than by source order: the form comes
   FIRST in the DOM so keyboard and screen-reader users reach the password
   field without walking through three decorative marketing cards. */
.auth {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg-alt);
}

.auth__panel {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-invert);
}

.auth__main {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  background: var(--bg-alt);
}

.auth__form-col {
  width: 100%;
  max-width: 400px;
}

/* ------------------------------------------------------- panel: ambience -- */

.auth__orbs,
.auth__paths {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.auth__orb {
  position: absolute;
  border-radius: 50%;
}

.auth__orb--one {
  top: -120px;
  left: -100px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(0, 169, 89, .38), transparent 70%);
  animation: authOrb 11s var(--ease) infinite;
}

.auth__orb--two {
  right: -70px;
  bottom: -90px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(0, 169, 89, .22), transparent 70%);
  animation: authOrb2 14s var(--ease) infinite;
}

.auth__paths {
  width: 100%;
  height: 100%;
}

.auth__path {
  fill: none;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: authDash 2.4s .5s var(--ease) forwards;
}

.auth__path--brand {
  stroke: rgba(0, 169, 89, .5);
  stroke-width: 2.5;
}

.auth__path--faint {
  stroke: rgba(255, 255, 255, .12);
  stroke-width: 1.5;
  animation-duration: 2.8s;
  animation-delay: .8s;
}

/* ---------------------------------------------------------- panel: brand -- */

/* 44px is on the 4px grid but has no named step in the DS scale; the mockup's
   asymmetric 44/48 is deliberate, so it stays a literal rather than a fake token. */
.auth__brand {
  position: relative;
  padding: 44px var(--space-12) 0;
}

.auth__wordmark {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 22px;
  font-weight: 800;
  color: var(--fg-on-dark);
}

.auth__wordmark-accent,
.auth__wordmark .lu {
  color: var(--green-300);
}

.auth__wordmark .lu {
  transform: translateY(1px);
}

/* A logo configured in Krayin settings is drawn for a light background; on the
   near-black panel it would disappear. The chip guarantees it reads. */
.auth__wordmark-img {
  display: block;
  height: 40px;
  width: auto;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--white);
}

.auth__tagline {
  margin-top: var(--space-1);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-400);
}

/* ---------------------------------------------------------- panel: pitch -- */

.auth__pitch {
  position: relative;
  padding: 52px var(--space-12) 0;
}

.auth__headline {
  max-width: 400px;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--fg-on-dark);
}

/* Decorative: aria-hidden in the markup. An infinite loop of rotating
   marketing copy announced by a screen reader is noise, not information. */
.auth__ticker {
  height: 26px;
  margin-top: var(--space-4);
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  color: var(--green-300);
}

.auth__ticker-track {
  animation: authTicker 9s var(--ease) infinite;
}

.auth__ticker-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
}

/* ---------------------------------------------------------- panel: cards -- */

.auth__proof {
  position: relative;
  flex: 1;
  margin: 36px var(--space-12) 44px;
}

.auth__card {
  position: absolute;
  padding: var(--space-4) 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(8px);
}

.auth__card--funded {
  top: 0;
  left: 0;
  width: 250px;
  animation: authFloat 6s ease-in-out infinite;
}

.auth__card--pipeline {
  top: 110px;
  right: 0;
  width: 230px;
  animation: authFloat2 7.5s .8s ease-in-out infinite;
}

.auth__card--reply {
  bottom: 0;
  left: 40px;
  width: 240px;
  padding: var(--space-3) 17px;
  animation: authFloat 8s 1.4s ease-in-out infinite;
}

.auth__card-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.auth__card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-on-dark);
}

.auth__card-sub {
  font-size: 10.5px;
  color: var(--ink-400);
}

.auth__card-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--green-300);
}

.auth__card-badge {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--brand);
  color: var(--fg-on-brand);
}

.auth__card-badge--round {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-800);
}

.auth__card-stage {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-on-dark);
}

.auth__meter {
  display: flex;
  gap: 3px;
  margin-top: var(--space-3);
}

.auth__meter span {
  height: 6px;
  border-radius: var(--radius-pill);
}

.auth__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-400);
  animation: authPulse 2s infinite;
}

/* ----------------------------------------------------------------- form -- */

.auth__title {
  font-size: 26px;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--fg-strong);
}

.auth__subtitle {
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--fg-muted);
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: 28px;
}

.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.auth__link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green-700);
  text-decoration: none;
}

.auth__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth__link:focus-visible {
  outline: 2px solid var(--focus-outline, #00763d);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* The mockup's bare eye <span> is a real button here — a control a keyboard
   user cannot reach is not a control. */
.auth__reveal {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-subtle);
  cursor: pointer;
  border-radius: var(--radius-xs);
}

.auth__reveal:hover {
  color: var(--fg);
}

.auth__reveal:focus-visible {
  outline: 2px solid var(--focus-outline, #00763d);
  outline-offset: 2px;
}

.auth__submit {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* The mockup draws this as a flat 60px block, which reads as a rendering
   artifact rather than a highlight once it is actually moving. Feathered to a
   gradient so it sweeps. */
.auth__shine {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, .28) 50%,
    transparent 100%
  );
  animation: authShine 3.2s 1.2s ease-in-out infinite;
  pointer-events: none;
}

.auth__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
  font-size: 11px;
  color: var(--fg-subtle);
}

.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--divider);
}

.auth__back {
  text-align: center;
}

.auth__back .auth__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* x-admin::form.control-group.error merges Tailwind utilities onto its <p>.
   These win on specificity and load after app.css, bringing the message into
   the DS type scale instead of the stock red italic. */
.auth .auth__field-error {
  margin-top: var(--space-1);
  font-size: 11px;
  font-style: normal;
  color: #c92a2a;
}

.auth__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--fg-subtle);
}

.auth__trust .lu {
  color: var(--green-700);
}

/* Krayin's <v-field> control merges its own Tailwind utilities onto the input.
   Neutralise them inside the DS input group so the group owns the border,
   radius and focus ring — one ring around the icon + field, per mockup 5a. */
.auth .input-group__input {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 500 13.5px var(--font-body);
  color: var(--ink-900);
  box-shadow: none;
}

.auth .input-group__input:focus {
  outline: none;
  box-shadow: none;
}

.auth .input-group {
  padding: 12px 15px;
  border-radius: 12px;
}

/* vee-validate flags the input itself; lift the state onto the group so the
   whole control reads as invalid rather than a ring inside a ring. */
.auth .input-group:has(.border-red-600) {
  border-color: #e8a0a0;
  background: #fffafa;
}

.auth .input-group:has(.border-red-600):focus-within {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(216, 65, 58, .16);
}

.auth .input-group__input.border-red-600 {
  border: 0 !important;
}

/* ------------------------------------------------------------- entrance -- */

/* Staggered reveal, mockup 5a. `both` so the final frame is the resting state:
   under reduced motion the element lands visible and in place. */
.auth [data-enter] {
  animation: authIn .5s var(--ease) both;
}

.auth [data-enter="1"] { animation-delay: .10s; }
.auth [data-enter="2"] { animation-delay: .15s; }
.auth [data-enter="3"] { animation-delay: .25s; }
.auth [data-enter="4"] { animation-delay: .35s; }
.auth [data-enter="5"] { animation-delay: .45s; }
.auth [data-enter="6"] { animation-delay: .55s; }
.auth [data-enter="7"] { animation-delay: .65s; }
.auth [data-enter="8"] { animation-delay: .85s; }

/* ----------------------------------------------------------- responsive -- */

/* 5a is drawn at 1400px. Below 900 the panel keeps its brand and pitch but
   drops the floating proof cards — they need absolute space that isn't there. */
@media (max-width: 900px) {
  .auth {
    grid-template-columns: 1fr;
    /* Keep filling the viewport: the band sizes to its content and the form
       column takes the rest, so the page never ends in a strip of body grey. */
    grid-template-rows: auto 1fr;
  }

  .auth__panel {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: var(--space-8);
  }

  .auth__main {
    grid-column: 1;
    grid-row: 2;
    padding: var(--space-10) var(--space-6);
  }

  .auth__brand,
  .auth__pitch {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  .auth__brand { padding-top: var(--space-8); }
  .auth__pitch { padding-top: var(--space-6); }

  .auth__headline { max-width: none; }

  .auth__proof { display: none; }
}

@media (max-width: 560px) {
  .auth__brand,
  .auth__pitch {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  .auth__main { padding: var(--space-8) var(--space-5); }

  .auth__ticker { display: none; }

  .auth__title { font-size: 22px; }
}

/* ------------------------------------------------------------ keyframes -- */

@keyframes authIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes authOrb {
  0%, 100% { transform: none; }
  50%      { transform: translate3d(30px, 24px, 0) scale(1.06); }
}

@keyframes authOrb2 {
  0%, 100% { transform: none; }
  50%      { transform: translate3d(-26px, -20px, 0) scale(1.08); }
}

@keyframes authDash {
  to { stroke-dashoffset: 0; }
}

@keyframes authFloat {
  0%, 100% { transform: none; }
  50%      { transform: translateY(-10px); }
}

@keyframes authFloat2 {
  0%, 100% { transform: none; }
  50%      { transform: translateY(8px); }
}

@keyframes authPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}

@keyframes authShine {
  0%      { transform: translateX(-80px) skewX(-18deg); opacity: 0; }
  35%     { opacity: 1; }
  70%     { transform: translateX(420px) skewX(-18deg); opacity: 0; }
  100%    { transform: translateX(420px) skewX(-18deg); opacity: 0; }
}

@keyframes authTicker {
  0%, 22%   { transform: none; }
  28%, 55%  { transform: translateY(-26px); }
  61%, 88%  { transform: translateY(-52px); }
  94%, 100% { transform: translateY(-78px); }
}