/* Motion system — site + painel + portais + OS
   Só transform/opacity. Respeita prefers-reduced-motion. */

:root {
  --ms-ease-out: cubic-bezier(.22, 1, .36, 1);
  --ms-ease-in: cubic-bezier(.55, 0, 1, .45);
  --ms-dur: 420ms;
  --ms-dur-exit: 220ms;
  --ms-gold: #C9A24B;
}

/* ── Progress (topo) ── */
.ms-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  background: transparent;
  transition: opacity .2s var(--ms-ease-out);
}
.ms-progress.on {
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--ms-gold), transparent);
  background-size: 40% 100%;
  animation: ms-prog 1.1s linear infinite;
}
@keyframes ms-prog {
  0% { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

/* ── Skeleton ── */
.ms-skel {
  border-radius: 10px;
  min-height: 72px;
  margin: 0 0 12px;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,.03) 30%,
    rgba(201,162,75,.08) 50%,
    rgba(255,255,255,.03) 70%
  );
  background-size: 200% 100%;
  animation: ms-skel 1.4s var(--ms-ease-out) infinite;
}
.ms-skel.sm { min-height: 28px; }
.ms-skel.lg { min-height: 160px; }
@keyframes ms-skel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Reveal (entrada) ── */
.ms-reveal,
[data-ms-reveal] {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
  transition:
    opacity var(--ms-dur) var(--ms-ease-out),
    transform var(--ms-dur) var(--ms-ease-out),
    filter var(--ms-dur) var(--ms-ease-out);
  will-change: opacity, transform, filter;
}
.ms-reveal.ms-in,
[data-ms-reveal].ms-in {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* ── Exit helper (modais/toasts) ── */
.ms-exit {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  filter: blur(3px) !important;
  transition:
    opacity var(--ms-dur-exit) var(--ms-ease-in),
    transform var(--ms-dur-exit) var(--ms-ease-in),
    filter var(--ms-dur-exit) var(--ms-ease-in) !important;
}

/* ── Press feedback (botões) ── */
.ms-press:active,
button.ms-press:active,
a.ms-press:active {
  transform: scale(0.97);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ms-reveal,
  [data-ms-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .ms-skel { animation: none; background: rgba(255,255,255,.04); }
  .ms-progress.on { animation: none; opacity: .7; }
  .ms-exit { transition: none !important; }
  .ms-press:active { transform: none; }
}

html.reduce-motion .ms-reveal,
html.reduce-motion [data-ms-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}