/* ==========================================================================
   MAO Workforce marketing site — shared styles
   Global reset, brand keyframes, and the transition helpers shared by the
   landing / features / faq / blog pages. All layout & color values live
   inline on the elements (per the design); this file only holds what can't be
   expressed inline: resets, @keyframes, ::selection, the chat scrollbar, the
   named transition hooks, and the reduced-motion escape hatch.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Public Sans', system-ui, sans-serif;
  background: #fdfaf4;
  color: #2a2825;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(191,75,46,0.22); }

/* ── Ambient / hero motion ─────────────────────────────────────────────── */
@keyframes floatA    { 0%,100% { transform: translate(0,0); } 50% { transform: translate(24px,-30px); } }
@keyframes floatB    { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-28px,26px); } }
@keyframes gridDrift { from { background-position: 0 0; } to { background-position: 44px 44px; } }
@keyframes sweep     { 0% { transform: translateX(-120%) skewX(-18deg); } 60%,100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes marquee   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink     { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes stampIn   { 0% { opacity: 0; transform: rotate(-14deg) scale(1.7); } 60% { opacity: 1; transform: rotate(-9deg) scale(0.94); } 100% { opacity: 1; transform: rotate(-9deg) scale(1); } }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); } 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
@keyframes travelPulse { 0% { left:0%; opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { left:100%; opacity:0; } }

/* ── Chat widget (Maomao) ─────────────────────────────────────────────── */
@keyframes mmBounce  { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
@keyframes popIn     { from { opacity:0; transform: translateY(14px) scale(0.96); } to { opacity:1; transform: translateY(0) scale(1); } }
#mm-messages::-webkit-scrollbar { width: 4px; }
#mm-messages::-webkit-scrollbar-thumb { background: #e5e0d5; border-radius: 4px; }

/* ── Named transition hooks (JS toggles inline transforms on these) ────── */
.fx-btn { transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), background 0.2s, box-shadow 0.25s; }
.feat   { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s, border-color 0.3s; }
.price  { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s; }
.chip   { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background 0.2s, color 0.2s, border-color 0.2s; }

/* ── Respect reduced-motion everywhere ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}