/* auth.css — owned by WP-SHELL. Tokens only (docs/vfx-master-spec.md §1 rule 5).
   Sign-in success and OTP entry states. Every animated rule ends at identity;
   each state also has a non-motion form (class, ring, hidden toggle). */

/* Pip at the door: the .pip--md host of spec §3.5, sized here so the greeter
   does not depend on apps.css landing. */
.auth-greeter--pip { width: 112px; height: 132px; }
.auth-greeter--pip canvas, .auth-greeter--pip img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center bottom; }

/* The application mark on the sign-in screen. Success is a state first: the
   ring says "signed in" even where no check can be drawn. */
.auth-mark { position: relative; }
.auth-mark.is-ok { box-shadow: 0 0 0 3px var(--fc-success), 0 14px 36px -12px rgba(30, 60, 10, .4); }
.auth-mark.is-ok > svg:not(.vfx-check) { opacity: 0; transition: opacity var(--fc-m-quick) var(--fc-ease-out); }
/* The overlay the check draws in: base surface over the app colour so the
   success-green stroke reads on every one of the nine tile colours. */
.auth-check { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
  background: var(--bg-base); color: var(--fc-success); }
.auth-check > svg { display: block; }

/* OTP / MFA entry. Each digit pops as it lands — one spring, back to identity —
   and the box also changes border, so a filled digit reads without motion. */
.otp-row { display: flex; align-items: center; justify-content: center; gap: var(--fc-s-3); }
.otp-row > .otp { flex: none; }
.otp input.is-filled { border-color: var(--fc-green-500); animation: shOtpPop var(--fc-m-fast) var(--fc-ease-spring); }
@keyframes shOtpPop { 0% { transform: none; } 50% { transform: scale(1.08); } 100% { transform: none; } }
/* The slot the success check draws into, beside the boxes — hidden until the
   code is accepted, and a plain green tick where vfx is not available. */
.otp-check { width: 44px; height: 44px; display: grid; place-items: center; color: var(--fc-success); flex: none; }
.otp-check > svg { display: block; }
/* Six MFA digits plus the check slot have to fit a 375 px phone: the boxes
   shrink to the width they are given instead of the four-digit 48 px. */
.otp input.otp-mfa { flex: 1 1 0; min-width: 36px; max-width: 48px; height: 50px; font-size: 19px; }

@media (prefers-reduced-motion: reduce) {
  .otp input.is-filled { animation: none; }
}