/* ==========================================================================
   TeleTonicMD — motion kit (shared). Five movements, done once:
   1) hero arrival   2) reveal primitive   3) modal enter/exit symmetry
   4) tab cross-fade + sliding indicator   5) reduced-motion parity
   Consumes brand-tokens.css (--ease-luxe, --dur-*, --reveal-*).
   ========================================================================== */

/* 1 — hero arrival: staggered rise of [data-arrive] children on load */
[data-arrive] > * {
  opacity: 0;
  transform: translateY(14px);
  animation: m-arrive var(--dur-slow) var(--ease-luxe) forwards;
}
[data-arrive] > *:nth-child(1) { animation-delay: 60ms; }
[data-arrive] > *:nth-child(2) { animation-delay: 160ms; }
[data-arrive] > *:nth-child(3) { animation-delay: 260ms; }
[data-arrive] > *:nth-child(4) { animation-delay: 360ms; }
[data-arrive] > *:nth-child(5) { animation-delay: 460ms; }
[data-arrive] > *:nth-child(n+6) { animation-delay: 540ms; }
@keyframes m-arrive { to { opacity: 1; transform: none; } }

/* 2 — reveal primitive: elements rise in as they enter the viewport */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-rise, 12px));
  transition: opacity var(--dur-slow) var(--ease-luxe), transform var(--dur-slow) var(--ease-luxe);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* 3 — modal enter/exit symmetry (used with .is-open / .is-closing) */
.m-modal { animation: m-fade var(--dur-base) ease both; }
.m-modal .m-modal-panel { animation: m-panel-in var(--dur-base) var(--ease-luxe) both; }
.m-modal.is-closing { animation: m-fade var(--dur-fast) ease reverse both; }
.m-modal.is-closing .m-modal-panel { animation: m-panel-in var(--dur-fast) var(--ease-luxe) reverse both; }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-panel-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

/* 4 — tab set with a sliding indicator + panel cross-fade */
.m-tabs { position: relative; }
.m-tab-indicator {
  position: absolute; bottom: 0; height: 2px; background: var(--action);
  transition: left var(--dur-base) var(--ease-luxe), width var(--dur-base) var(--ease-luxe);
}
.m-panel { animation: m-panel-fade var(--dur-base) var(--ease-luxe) both; }
@keyframes m-panel-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* press micro-physics */
.m-press { transition: transform var(--dur-fast) var(--ease-luxe); }
.m-press:active { transform: scale(0.97); }

/* toast layer (runtime in motion.js — TTMD.toast). Shared site + portal. */
.p-toast-region { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; pointer-events: none; }
.p-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 0.7rem;
  background: var(--ink); color: var(--cream); padding: 0.85rem 1.25rem;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
  font-size: 0.92rem; max-width: 90vw;
  animation: p-toast-in var(--dur-base) var(--ease-luxe) both;
}
.p-toast.is-leaving { animation: p-toast-out var(--dur-fast) var(--ease-luxe) both; }
.p-toast .icon { width: 18px; height: 18px; color: var(--sage-deep); }
.p-toast--error .icon { color: #E9A79F; }
@keyframes p-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes p-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* designed success ending — swaps into a modal body in place of alert() */
.m-success { text-align: center; padding: 1rem 0.5rem 0.5rem; animation: m-panel-in var(--dur-base) var(--ease-luxe) both; }
.m-success-badge {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 1.5rem;
  background: var(--success-bg); color: var(--action);
  display: flex; align-items: center; justify-content: center;
}
.m-success-badge .icon { width: 34px; height: 34px; }
.m-success h3 { font-family: var(--serif); font-size: 1.6rem; color: var(--ink); margin: 0 0 0.6rem; }
.m-success p { color: var(--text-secondary); margin: 0 auto 1rem; max-width: 34rem; }
.m-success-ref {
  display: inline-block; margin: 0.25rem 0 1.5rem; padding: 0.5rem 1.1rem;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  font-family: var(--serif); font-variant-numeric: lining-nums; color: var(--ink); letter-spacing: 0.02em;
}
.m-success-badge .checkdraw { stroke-dasharray: 26; stroke-dashoffset: 26; animation: m-check-draw 0.5s var(--ease-luxe) 0.2s forwards; }
@keyframes m-check-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .p-toast, .m-success { animation-duration: 0.01ms !important; }
  .m-success-badge .checkdraw { animation: none; stroke-dashoffset: 0; }
}

/* 5 — reduced-motion parity: everything resolves to its end state, instantly */
@media (prefers-reduced-motion: reduce) {
  [data-arrive] > *, .reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .m-modal, .m-modal .m-modal-panel, .m-panel { animation-duration: 0.01ms !important; }
  .m-tab-indicator { transition: none !important; }
}