/* ==========================================================================
   NovaPOS — auth.css
   Sign-in, password reset, two-factor and forced password change screens.
   ========================================================================== */

.auth-root { min-height: 100dvh; display: grid; place-items: center; padding: var(--s4); position: relative; overflow: hidden; }
.auth-root[hidden] { display: none; }

.auth-bg { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(1100px 600px at 12% -10%, rgba(99, 102, 241, .22), transparent 60%),
    radial-gradient(900px 520px at 105% 15%, rgba(13, 148, 136, .18), transparent 58%),
    radial-gradient(700px 500px at 50% 120%, rgba(99, 102, 241, .14), transparent 60%),
    var(--bg); }
[data-theme="dark"] .auth-bg { background:
    radial-gradient(1100px 600px at 12% -10%, rgba(79, 70, 229, .34), transparent 60%),
    radial-gradient(900px 520px at 105% 15%, rgba(13, 148, 136, .22), transparent 58%),
    var(--bg); }

.auth-shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s8); width: min(1060px, 100%); align-items: center; }

.auth-pitch { color: var(--text); }
.auth-pitch__mark { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.auth-pitch__mark .mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--brand-500), var(--brand-700)); color: #fff; box-shadow: 0 6px 18px rgba(79,70,229,.4); }
.auth-pitch__mark .name { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; }
.auth-pitch h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; letter-spacing: -.03em; margin-bottom: var(--s3); }
.auth-pitch p.lede { color: var(--text-muted); font-size: var(--fs-lg); max-width: 46ch; margin-bottom: var(--s6); }
.auth-pitch__list { display: grid; gap: var(--s3); }
.auth-feature { display: flex; gap: var(--s3); align-items: flex-start; }
.auth-feature__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); color: var(--brand-600); flex: 0 0 34px; }
.auth-feature__icon svg { width: 18px; height: 18px; }
.auth-feature__text strong { display: block; font-size: var(--fs-md); }
.auth-feature__text span { font-size: var(--fs-sm); color: var(--text-muted); }

.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: var(--s7); width: 100%; }
.auth-card__head { margin-bottom: var(--s5); }
.auth-card__head h2 { font-size: var(--fs-2xl); letter-spacing: -.02em; }
.auth-card__head p { color: var(--text-muted); font-size: var(--fs-md); margin-top: var(--s2); }
.auth-card form { display: grid; gap: var(--s4); }
.auth-card__foot { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border); display: grid; gap: var(--s3); }
.auth-error { animation: shake 320ms ease-in-out both; }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 30%, 70% { transform: translateX(3px); } 50% { transform: translateX(-3px); } }

.auth-demo { background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); padding: var(--s4); }
.auth-demo__title { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--s3); }
.auth-demo__grid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.demo-user { display: flex; align-items: center; gap: var(--s2); padding: var(--s2); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; text-align: left; transition: all var(--t-fast); }
.demo-user:hover { border-color: var(--brand-400); background: var(--brand-50); }
[data-theme="dark"] .demo-user:hover { background: rgba(99,102,241,.14); }
.demo-user__name { font-size: var(--fs-sm); font-weight: 650; }
.demo-user__role { font-size: 11px; color: var(--text-subtle); }
.auth-note { font-size: var(--fs-xs); color: var(--text-subtle); text-align: center; }

.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); max-width: 280px; margin: 0 auto; }
.pin-pad button { min-height: 58px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  font-size: var(--fs-xl); font-weight: 700; cursor: pointer; }
.pin-pad button:hover { background: var(--surface-hover); border-color: var(--brand-400); }
.pin-pad button:active { background: var(--brand-50); }
.pin-dots { display: flex; gap: var(--s3); justify-content: center; margin-bottom: var(--s4); }
.pin-dots span { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--border-strong); }
.pin-dots span.is-filled { background: var(--brand-600); border-color: var(--brand-600); }

.totp-input { font-family: var(--font-mono); font-size: var(--fs-2xl); letter-spacing: .34em; text-align: center; font-weight: 700; }

.auth-links { display: flex; gap: var(--s4); justify-content: space-between; flex-wrap: wrap; font-size: var(--fs-sm); }

@media (max-width: 940px) {
  .auth-shell { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .auth-pitch { display: none; }
  .auth-card { padding: var(--s6); max-width: 480px; margin: 0 auto; }
}
@media (max-width: 420px) {
  .auth-card { padding: var(--s5); border-radius: var(--r-lg); }
  .auth-card__head h2 { font-size: var(--fs-xl); }
}

/* ---------------------------------------------------- StoreWise brand lockup */
.auth-pitch__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: var(--s5); }
.auth-logo {
  width: min(620px, 100%); max-width: 100%; height: auto; display: block;
  filter: drop-shadow(0 14px 30px rgba(15, 40, 90, .16));
}
[data-theme="dark"] .auth-logo { filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .5)); }
.auth-tagline {
  margin-left: 8px; font-size: var(--fs-md); font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--text-muted);
}

/* ==========================================================================
   v2.1 — animated sign-in.
   Aurora orbs, drifting grid, gradient ring, cursor spotlight, staggered
   reveals, glossy CTA. Decorative layers are aria-hidden; everything is
   disabled under prefers-reduced-motion.
   ========================================================================== */

.auth-bg { overflow: hidden; }
.auth-bg i { position: absolute; pointer-events: none; display: block; }

/* --- aurora orbs --------------------------------------------------------- */
.auth-orb { border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
.auth-orb--a { width: 46vmax; height: 46vmax; left: -12vmax; top: -16vmax;
  background: radial-gradient(circle at 35% 35%, rgba(99,102,241,.55), rgba(99,102,241,0) 65%);
  animation: orb-drift-a 26s ease-in-out infinite alternate; }
.auth-orb--b { width: 40vmax; height: 40vmax; right: -10vmax; top: -6vmax;
  background: radial-gradient(circle at 60% 40%, rgba(13,148,136,.42), rgba(13,148,136,0) 65%);
  animation: orb-drift-b 32s ease-in-out infinite alternate; }
.auth-orb--c { width: 38vmax; height: 38vmax; left: 28vmax; bottom: -18vmax;
  background: radial-gradient(circle at 50% 50%, rgba(139,92,246,.34), rgba(139,92,246,0) 65%);
  animation: orb-drift-c 22s ease-in-out infinite alternate; }
[data-theme="dark"] .auth-orb { opacity: .6; filter: blur(80px); }
@keyframes orb-drift-a { to { transform: translate3d(9vmax, 6vmax, 0) scale(1.14); } }
@keyframes orb-drift-b { to { transform: translate3d(-7vmax, 9vmax, 0) scale(.9); } }
@keyframes orb-drift-c { to { transform: translate3d(6vmax, -8vmax, 0) scale(1.2); } }

/* --- drifting grid veil --------------------------------------------------- */
.auth-grid { inset: -20%;
  background-image:
    linear-gradient(rgba(99,102,241,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(closest-side at 50% 42%, #000 28%, transparent 78%);
  mask-image: radial-gradient(closest-side at 50% 42%, #000 28%, transparent 78%);
  animation: grid-pan 26s linear infinite; }
[data-theme="dark"] .auth-grid { background-image:
    linear-gradient(rgba(129,140,248,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129,140,248,.11) 1px, transparent 1px); }
@keyframes grid-pan { to { background-position: 46px 46px, 46px 46px; } }

/* --- floating motes -------------------------------------------------------- */
.auth-motes { inset: 0; }
.auth-motes::before, .auth-motes::after { content: ''; position: absolute; left: 0; top: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.95), rgba(99,102,241,0) 70%);
  box-shadow:
    12vw 18vh 0 0 rgba(13,148,136,.55), 28vw 62vh 0 1px rgba(99,102,241,.5),
    47vw 30vh 0 0 rgba(139,92,246,.45), 63vw 74vh 0 1px rgba(13,148,136,.45),
    78vw 22vh 0 0 rgba(99,102,241,.55), 88vw 55vh 0 1px rgba(139,92,246,.4);
  opacity: .5; animation: mote-float 15s ease-in-out infinite alternate; }
.auth-motes::after { animation-duration: 21s; animation-direction: alternate-reverse; }
@keyframes mote-float { from { transform: translateY(2.4vh); } to { transform: translateY(-2.8vh); } }

/* --- film grain (inline SVG, no network) ----------------------------------- */
.auth-noise { inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="dark"] .auth-noise { opacity: .06; }

/* --- card: entrance, gradient ring, spotlight, breathing glow -------------- */
.auth-card { position: relative; isolation: isolate; border-color: transparent;
  box-shadow: var(--sh-3), 0 24px 70px -30px rgba(79,70,229,.35);
  animation: card-in 560ms cubic-bezier(.2,.9,.25,1) both, glow-breathe 7.5s ease-in-out 700ms infinite; }
.auth-card > * { position: relative; z-index: 1; }
@keyframes card-in { from { opacity: 0; transform: translateY(22px) scale(.98); } }
@keyframes glow-breathe {
  0%, 100% { box-shadow: var(--sh-3), 0 24px 70px -30px rgba(79,70,229,.38); }
  50% { box-shadow: var(--sh-3), 0 30px 90px -30px rgba(13,148,136,.42); } }

.auth-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: 2;
  background: linear-gradient(135deg, rgba(99,102,241,.8), rgba(13,148,136,.55) 45%, rgba(139,92,246,.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .55; pointer-events: none; }

.auth-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 72%) var(--my, -8%), rgba(99,102,241,.15), transparent 62%);
  opacity: 0; transition: opacity 450ms ease; }
.auth-card:hover::after { opacity: 1; }

/* --- pitch side ------------------------------------------------------------ */
.auth-pitch { animation: pitch-in 700ms cubic-bezier(.2,.9,.25,1) both; }
@keyframes pitch-in { from { opacity: 0; transform: translateX(-18px); } }

.auth-logo { animation: logo-in 800ms cubic-bezier(.2,.9,.25,1) both, logo-float 8.5s ease-in-out 1.3s infinite; }
@keyframes logo-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.auth-tagline { animation: tag-in 900ms cubic-bezier(.2,.9,.25,1) 250ms both; }
@keyframes tag-in { from { opacity: 0; letter-spacing: .1em; } to { opacity: 1; letter-spacing: .24em; } }

.auth-reveal .word { display: inline-block; margin-right: .26em;
  animation: word-in 520ms cubic-bezier(.2,.9,.25,1) both; }
@keyframes word-in { from { opacity: 0; transform: translateY(58%) rotate(1.6deg); filter: blur(4px); } }

.auth-pitch .lede { animation: fade-up 700ms ease 540ms both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }

.auth-feature { animation: fade-up 600ms cubic-bezier(.2,.9,.25,1) both; transition: transform var(--t-fast) ease; }
.auth-feature:hover { transform: translateX(4px); }
.auth-feature__icon { transition: all var(--t-fast) ease; }
.auth-feature:hover .auth-feature__icon { border-color: var(--brand-400); color: var(--brand-500);
  box-shadow: 0 8px 20px -8px rgba(79,70,229,.5); transform: translateY(-2px) scale(1.06); }

/* --- form choreography ------------------------------------------------------- */
.auth-card__head { animation: fade-up 520ms ease 80ms both; }
.auth-card form > * { animation: field-in 520ms cubic-bezier(.2,.9,.25,1) both; }
.auth-card form > *:nth-child(1) { animation-delay: 150ms; }
.auth-card form > *:nth-child(2) { animation-delay: 210ms; }
.auth-card form > *:nth-child(3) { animation-delay: 270ms; }
.auth-card form > *:nth-child(4) { animation-delay: 330ms; }
.auth-card form > *:nth-child(5) { animation-delay: 390ms; }
.auth-card form > *:nth-child(6) { animation-delay: 450ms; }
@keyframes field-in { from { opacity: 0; transform: translateY(12px); } }

.auth-card .input { transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast); }
.auth-card .field:focus-within .field__label { color: var(--brand-600); }
.auth-card .input:focus { animation: focus-pulse 750ms ease; }
@keyframes focus-pulse {
  0% { box-shadow: var(--focus-ring), 0 0 0 0 rgba(99,102,241,.38); }
  100% { box-shadow: var(--focus-ring), 0 0 0 10px rgba(99,102,241,0); } }

.auth-card .alert { animation: alert-in 320ms cubic-bezier(.2,.9,.25,1) both; }
@keyframes alert-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .auth-card__head h2 {
    background: linear-gradient(94deg, var(--text) 52%, var(--brand-600) 98%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    background-size: 220% 100%; background-position: 0% 0;
    animation: h2-sheen 1.4s ease 500ms both; }
  @keyframes h2-sheen { from { background-position: 90% 0; } to { background-position: 0% 0; } }
}

/* --- glossy CTA -------------------------------------------------------------- */
.auth-card .btn--primary { position: relative; overflow: hidden;
  background-image: linear-gradient(100deg, var(--brand-600), var(--brand-500) 42%, var(--accent-600) 118%);
  background-size: 190% 100%; background-position: 0% 0;
  transition: background-position 550ms ease, transform 120ms ease, box-shadow 250ms ease, filter 250ms ease; }
.auth-card .btn--primary:hover { background-position: 100% 0; filter: saturate(1.08);
  box-shadow: 0 14px 32px -12px rgba(79,70,229,.6); }
.auth-card .btn--primary:active { transform: scale(.985); }
.auth-card .btn--primary span:last-child { display: inline-flex; transition: transform 260ms cubic-bezier(.2,.9,.25,1); }
.auth-card .btn--primary:hover span:last-child { transform: translateX(4px); }
.auth-card .btn--primary::before { content: ''; position: absolute; top: 0; left: -85%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg); transition: left 620ms ease; }
.auth-card .btn--primary:hover::before { left: 135%; }

/* --- links & demo panel ------------------------------------------------------- */
.auth-links a { position: relative; }
.auth-links a::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 260ms ease; }
.auth-links a:hover::after { transform: scaleX(1); }

.auth-demo { animation: fade-up 600ms ease 520ms both; }
.demo-user { position: relative; overflow: hidden; animation: tile-in 520ms cubic-bezier(.2,.9,.25,1) both;
  transition: transform var(--t-fast) ease, border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); }
@keyframes tile-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.demo-user::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(99,102,241,.14), rgba(13,148,136,.12));
  opacity: 0; transition: opacity 240ms ease; }
.demo-user:hover { transform: translateY(-2px); border-color: var(--brand-400);
  box-shadow: 0 10px 24px -12px rgba(79,70,229,.45); }
.demo-user:hover::after { opacity: 1; }
.demo-user:active { transform: translateY(0) scale(.98); }
.demo-user .avatar { transition: transform 280ms cubic-bezier(.3,1.5,.5,1); }
.demo-user:hover .avatar { transform: scale(1.12) rotate(-4deg); }

/* --- theme button flourish ----------------------------------------------------- */
.auth-root > .icon-btn { transition: transform 250ms cubic-bezier(.2,.9,.25,1), background-color var(--t-fast); }
.auth-root > .icon-btn:hover { transform: scale(1.08); }
.auth-root > .icon-btn.is-spin { animation: spin-once 520ms cubic-bezier(.2,.9,.25,1); }
@keyframes spin-once {
  from { transform: rotate(0deg) scale(.82); }
  60% { transform: rotate(210deg) scale(1.1); }
  to { transform: rotate(360deg) scale(1); } }

/* --- two-factor screen ---------------------------------------------------------- */
.auth-card .totp-input { transition: letter-spacing 300ms ease, border-color var(--t-fast), box-shadow var(--t-fast); }
.auth-card .totp-input:focus { letter-spacing: .42em; }

/* --- accessibility: calm mode ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .auth-root *, .auth-root *::before, .auth-root *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .auth-orb, .auth-motes, .auth-grid { display: none; }
}