/* ============================================================
   Auth motion — login & signup (Genesa)
   Micro-interactions 150–300ms, ease-out; page entrance ≤ 480ms.
   Everything is disabled under prefers-reduced-motion.
   ============================================================ */

:root {
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 300ms;
  --motion-stagger: 45ms;
  --ease-out-soft: cubic-bezier(.22, .8, .28, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ── View transitions (step / screen change) ── */
.m-view-fwd  { animation: m-view-fwd  var(--motion-slow) var(--ease-out-soft) both; }
.m-view-back { animation: m-view-back var(--motion-slow) var(--ease-out-soft) both; }
@keyframes m-view-fwd  { from { opacity: 0; transform: translateX(20px); }  to { opacity: 1; transform: none; } }
@keyframes m-view-back { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }

/* ── Staggered entrance ── */
.m-rise {
  animation: m-rise var(--motion-slow) var(--ease-out-soft) both;
  animation-delay: calc(var(--i, 0) * var(--stagger, var(--motion-stagger)));
}
@keyframes m-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Feedback ── */
.m-shake  { animation: m-shake 320ms var(--ease-out-soft); }
@keyframes m-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-7px); }
  36% { transform: translateX(6px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(2px); }
}
.m-reveal { animation: m-reveal var(--motion-base) var(--ease-out-soft) both; }
@keyframes m-reveal { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.m-pop    { animation: m-pop var(--motion-base) var(--ease-spring); }
@keyframes m-pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }

/* ── Buttons & fields ── */
.m-press {
  transition: transform var(--motion-fast) var(--ease-out-soft), background-color var(--motion-fast),
    border-color var(--motion-fast), box-shadow var(--motion-base), color var(--motion-fast);
}
.m-press:hover:not(:disabled)  { transform: translateY(-1px); }
.m-press:active:not(:disabled) { transform: translateY(0) scale(.98); }
.m-arrow { transition: transform var(--motion-base) var(--ease-out-soft); }
.m-press:hover:not(:disabled) .m-arrow { transform: translateX(3px); }
.m-field { transition: border-color var(--motion-fast), box-shadow var(--motion-base), background-color var(--motion-fast); }

.m-spinner {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border-radius: 9999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: m-spin .7s linear infinite;
}
@keyframes m-spin { to { transform: rotate(360deg); } }

/* ── Stepper bar fill ── */
.m-bar { position: relative; overflow: hidden; background-color: var(--muted); }
.m-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--primary-base);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-slow) var(--ease-out-soft);
}
.m-bar[data-on="true"]::after { transform: scaleX(1); }

/* ── Brand panel ── */
.m-float { animation: m-float 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.55s); }
@keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.m-tilt { transition: transform var(--motion-base) var(--ease-spring); }
.m-tilt:hover { transform: translateY(-4px) rotate(-3deg) scale(1.06); }

/* ── Success check (SVG: circle r=24 + check path) ── */
.m-check circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: m-draw 420ms var(--ease-out-soft) forwards; }
.m-check path   { stroke-dasharray: 36;  stroke-dashoffset: 36;  animation: m-draw 260ms 360ms var(--ease-out-soft) forwards; }
@keyframes m-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .m-view-fwd, .m-view-back, .m-rise, .m-shake, .m-reveal, .m-pop, .m-float, .m-spinner { animation: none !important; }
  .m-check circle, .m-check path { animation: none !important; stroke-dashoffset: 0 !important; }
  .m-press, .m-press:hover, .m-press:active, .m-tilt:hover, .m-arrow { transform: none !important; transition: none !important; }
  .m-bar::after { transition: none !important; }
}

/* ============================================================
   Brand panel (kanan) — login & signup
   Gradien 3 hijau logo METRIKA + glow mint & emas + lingkaran konsentris halus + watermark mark.
   ============================================================ */
.auth-brand-panel {
  color: #fff;
  background:
    radial-gradient(55% 45% at 88% 8%, rgb(54 201 154 / .38), transparent 70%),
    radial-gradient(45% 38% at 6% 96%, rgb(255 214 75 / .20), transparent 70%),
    linear-gradient(160deg, #0B7E60 0%, #005B44 55%, #003F30 100%);
  isolation: isolate;
}
.auth-brand-rings {
  /* Lingkaran konsentris halus dari belakang ikon modul ("satu platform, semua terhubung") */
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 34% 54%,
    rgb(255 255 255 / .085) 0 1px, transparent 1.5px 72px);
  -webkit-mask-image: radial-gradient(circle at 34% 54%, #000 0%, #000 35%, transparent 72%);
          mask-image: radial-gradient(circle at 34% 54%, #000 0%, #000 35%, transparent 72%);
}
.auth-brand-mark {
  position: absolute; right: -8%; bottom: -10%; z-index: -1; pointer-events: none;
  width: 62%; aspect-ratio: 1;
  background: #fff; opacity: .06;
  -webkit-mask: url('../images/metrika-mark.svg') center / contain no-repeat;
          mask: url('../images/metrika-mark.svg') center / contain no-repeat;
}
/* Konten di atas latar gelap */
.auth-brand-panel .auth-badge { border-color: rgb(255 255 255 / .22); background: rgb(255 255 255 / .10); color: #fff; backdrop-filter: blur(6px); }
.auth-brand-panel .auth-title { color: #fff; }
.auth-brand-panel .auth-sub { color: rgb(255 255 255 / .78); }
.auth-brand-panel .auth-points li { color: rgb(255 255 255 / .9); }
.auth-brand-panel .auth-chip { background: rgb(255 255 255 / .12); color: #A7F3D0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
/* Kartu fitur & catatan (signup) di atas latar gelap */
.auth-brand-panel .auth-card {
  background: rgb(255 255 255 / .10);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 8px 24px -16px rgb(0 0 0 / .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff;
}
.auth-brand-panel .auth-card .text-font-secondary { color: rgb(255 255 255 / .72); }
.auth-brand-panel .auth-note { color: rgb(255 255 255 / .78); }
.auth-brand-panel .auth-note i { color: #A7F3D0; }

/* ── Stepper pendaftaran: bar bersegmen + label ── */
.step { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.step-bar { position: relative; height: 6px; border-radius: 9999px; background: var(--base-neutral-200); overflow: hidden; }
.step-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-slow) var(--ease-out-soft); }
.step-label { display: flex; align-items: center; gap: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-label-md); color: var(--text-color-secondary); }
.step-label i { color: var(--primary); font-size: .9375rem; flex: none; }
.step[data-step-state="done"] .step-bar::after,
.step[data-step-state="active"] .step-bar::after { transform: scaleX(1); }
.step[data-step-state="done"] .step-label { color: var(--text-color-primary); }
.step[data-step-state="active"] .step-label { font-weight: 600; color: var(--text-color-primary); }
@media (prefers-reduced-motion: reduce) { .step-bar::after { transition: none !important; } }