/* ============================================================
   Motion system — shared tokens + entrance/micro-interaction/
   mechanics animations. Loaded last so it can layer on top of
   the other stylesheets. Respects prefers-reduced-motion globally
   (see bottom of file) so no per-rule gating is required elsewhere.
   ============================================================ */

:root {
  --motion-ease: cubic-bezier(.4, 0, .2, 1);
  --motion-ease-out: cubic-bezier(0, 0, .2, 1);
  --motion-ease-in: cubic-bezier(.4, 0, 1, 1);
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
}

/* ---------- Template picker: staggered card entrance ---------- */
.template-card {
  opacity: 0;
  animation: card-in .5s var(--motion-ease-out) both;
}
.template-card:nth-child(1) { animation-delay: .05s; }
.template-card:nth-child(2) { animation-delay: .12s; }
.template-card:nth-child(3) { animation-delay: .19s; }
.template-card:nth-child(4) { animation-delay: .26s; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Tasteful official-document flourish on the seal/logo icon. */
.logo-icon {
  display: inline-block;
  animation: seal-glow 3.2s ease-in-out infinite;
}
@keyframes seal-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(99, 102, 241, 0); }
  50% { text-shadow: 0 0 14px rgba(99, 102, 241, .5); }
}

/* ---------- View crossfade (start <-> editor) ---------- */
.view.view-out {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  animation: view-fade-out var(--motion-base) var(--motion-ease) forwards;
}
@keyframes view-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

/* ---------- Tactile buttons ---------- */
.btn {
  transition: transform var(--motion-fast) var(--motion-ease),
              background var(--transition), border-color var(--transition),
              box-shadow var(--motion-fast) var(--motion-ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.96); }
.btn-icon { transition: color var(--transition), transform var(--motion-fast) var(--motion-ease); }
.btn-icon:active { transform: scale(.82); }

.btn.btn-success-pulse { animation: btn-success .5s var(--motion-ease-out); }
@keyframes btn-success {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); border-color: var(--success); color: var(--success); }
  100% { transform: scale(1); }
}

/* ---------- Input focus glow ---------- */
.form-input, .section-content-input, .subsection-input, .assist-input, .inline-assist-input {
  transition: border-color var(--transition), box-shadow var(--motion-base) var(--motion-ease);
}

/* ---------- Editor sections: entrance only for the newly-added card ---------- */
.section-card { animation: none; }
.section-card.section-card-new {
  animation: section-in .35s var(--motion-ease-out) both;
}
@keyframes section-in {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Auto-numbering ripple ---------- */
.section-number-display.num-pulse {
  animation: num-pulse .5s var(--motion-ease-out);
}
@keyframes num-pulse {
  0% { color: var(--primary-hover); transform: scale(1.18); }
  100% { color: var(--primary); transform: scale(1); }
}

/* ---------- Autosave indicator ---------- */
.save-indicator {
  font-size: .72rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  opacity: .65;
  transition: opacity var(--transition), color var(--transition);
}
.save-indicator .save-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  transition: background var(--transition);
}
.save-indicator.pulse { animation: save-pulse .7s var(--motion-ease-out); }
@keyframes save-pulse {
  0% { opacity: .65; transform: scale(1); }
  30% { opacity: 1; color: var(--success); transform: scale(1.05); }
  100% { opacity: .65; color: var(--text-muted); transform: scale(1); }
}

/* ---------- Preview: settle instead of hard repaint flash ---------- */
.bill-preview-document.bp-settle {
  animation: bp-settle .3s var(--motion-ease-out);
}
@keyframes bp-settle {
  from { opacity: .5; transform: translateY(5px) scale(.996); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- AI Assist: typing dots tied to the real fetch lifecycle ---------- */
.typing-dots { display: inline-flex; gap: 4px; align-items: center; padding: .1rem 0; }
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-secondary);
  animation: typing-bounce 1s var(--motion-ease) infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.assist-msg { animation: msg-in .25s var(--motion-ease-out) both; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Accessibility gate — collapses every animation/transition to
   effectively-instant for users who request reduced motion.
   Kept as a single global rule so nothing above needs per-rule
   duplication, and JS animationend/transitionend listeners still
   fire (just immediately) so state cleanup keeps working.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}