/* ===== Motion system — Epic-style, calm, professional ===== */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade + rise entrance */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.9); } 60% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }

.anim-fade-up { animation: fadeUp 0.45s var(--ease-out) both; }
.anim-fade-in { animation: fadeIn 0.35s var(--ease-soft) both; }
.anim-fade-down { animation: fadeDown 0.4s var(--ease-out) both; }
.anim-pop { animation: popIn 0.4s var(--ease-out) both; }

/* staggered list entrance */
.anim-stagger > * { animation: fadeUp 0.45s var(--ease-out) both; }
.anim-stagger > *:nth-child(1) { animation-delay: 0.02s; }
.anim-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.anim-stagger > *:nth-child(3) { animation-delay: 0.14s; }
.anim-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.anim-stagger > *:nth-child(5) { animation-delay: 0.26s; }
.anim-stagger > *:nth-child(6) { animation-delay: 0.32s; }

/* Epic-style spinner */
.epic-spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(0, 55, 152, 0.14);
  border-top-color: #003798;
  border-radius: 50%;
  animation: epicspin 0.7s linear infinite;
}
@keyframes epicspin { to { transform: rotate(360deg); } }

/* In-button spinner */
.btn-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: epicspin 0.7s linear infinite;
  margin-right: 8px;
  vertical-align: -3px;
  display: inline-block;
}

/* Breathing dot (live status) */
@keyframes breathe { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }
.live-dot { animation: breathe 2.2s ease-in-out infinite; }

/* Shimmer skeleton bar */
@keyframes shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.skeleton {
  background: linear-gradient(90deg, #f2f2f2 25%, #e9ecef 37%, #f2f2f2 63%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 4px;
}

/* Status sequence: dot + text that cross-fades */
.status-line { display: flex; align-items: center; gap: 0.6rem; justify-content: center; }
.status-line .spinner-sm {
  width: 18px; height: 18px; border: 2px solid rgba(0,55,152,0.2);
  border-top-color: #003798; border-radius: 50%; animation: epicspin 0.8s linear infinite;
}
.status-text { transition: opacity 0.3s var(--ease-soft); color: #565656; font-size: 0.9rem; }

/* error card slide-in */
.alert-card { animation: fadeDown 0.4s var(--ease-out) both; }

/* smooth page viewports for step containers */
.view-swap { transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft); }
.view-swap.leaving { opacity: 0; transform: translateY(8px); }

/* code input elegant focus */
.code-input { transition: border-color 0.2s var(--ease-soft), box-shadow 0.2s var(--ease-soft), transform 0.15s var(--ease-out); }
.code-input:focus { transform: translateY(-1px); }
.code-input.filled { border-color: #003798; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}