/* voir notes/motion.notes.md §1 */

:root {
  --m-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* voir notes/motion.notes.md §2 */
  --m-progress: 12500ms;
  --m-fill: 1400ms;
  --m-spin: 700ms;
  --m-caret: 1000ms;
  --m-shine: 1100ms;
}

/* --- La barre de lecture sous l'onglet actif ------------------------------ */
.tab { position: relative; overflow: hidden; }
.m-progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform-origin: left center; transform: scaleX(0);
  background: var(--accent);
  animation: mProgress var(--m-progress) linear forwards;
}
@keyframes mProgress { to { transform: scaleX(1); } }

/* --- Le spinner de travail ------------------------------------------------ */
.m-spin {
  display: inline-block; width: 12px; height: 12px; flex: none;
  border: 1.5px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mSpin var(--m-spin) linear infinite;
}
@keyframes mSpin { to { transform: rotate(360deg); } }

/* voir notes/motion.notes.md §3 */
.m-dot {
  display: inline-block; width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- Le curseur de saisie ------------------------------------------------- */
.m-caret {
  display: inline-block; width: 1.5px; height: 1em; vertical-align: -0.15em;
  background: var(--accent);
  animation: mCaret var(--m-caret) step-end infinite;
}
@keyframes mCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* voir notes/motion.notes.md §4 */
.m-fill {
  position: relative; overflow: hidden;
}
/* Le remplissage se fait en scaleX et non en width : la nappe est un aplat, donc
   le rendu est le meme au pixel, sans mise en page a chaque image. */
.m-fill::after {
  content: ''; position: absolute; inset: 0;
  transform: scaleX(0); transform-origin: left center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  pointer-events: none;
  animation: mFill var(--m-fill) var(--m-ease) forwards;
}
@keyframes mFill {
  0% { transform: scaleX(0); opacity: 1; }
  62% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* --- Le balayage lumineux sur un element qui vient d'arriver -------------- */
.m-shine {
  position: relative; overflow: hidden;
}
.m-shine::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%,
    color-mix(in srgb, var(--accent) 14%, transparent) 45%, transparent 70%);
  background-size: 220% 100%;
  animation: mShine var(--m-shine) ease-in-out 2;
  pointer-events: none;
}
@keyframes mShine { from { background-position-x: 180%; } to { background-position-x: -80%; } }

/* --- Etats de travail : le vocabulaire visuel commun ---------------------- */
.m-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 550; white-space: nowrap;
}
.m-state.is-wait { color: var(--faint); }
.m-state.is-ok { color: var(--ok); }
.m-state.is-new { color: var(--accent-strong); }

/* voir notes/motion.notes.md §5 */
.m-check {
  display: inline-block; width: 13px; height: 13px; flex: none;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.6 6.4 12.4 13.4 5.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 8.6 6.4 12.4 13.4 5.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  font-size: 0; line-height: 0; color: inherit;
}
.m-state .m-check { width: 11px; height: 11px; }

/* --- Entrees : une seule courbe pour toute la page ------------------------ */
.m-in { animation: mIn 420ms var(--m-ease) both; }
@keyframes mIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.m-in-left { animation: mInLeft 420ms var(--m-ease) both; }
@keyframes mInLeft { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.m-in-right { animation: mInRight 420ms var(--m-ease) both; }
@keyframes mInRight { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* --- Les chiffres qui montent : jamais un saut ---------------------------- */
.m-num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .m-progress, .m-spin, .m-caret, .m-fill::after, .m-shine::before,
  .m-in, .m-in-left, .m-in-right { animation: none !important; }
  .m-progress { transform: scaleX(1); opacity: .35; }
  .m-fill::after { display: none; }
  .m-in, .m-in-left, .m-in-right { opacity: 1; transform: none; }
}