/* ============================================================
   SXMeets Mobile — Motion library
   ------------------------------------------------------------
   Reusable @keyframes. Pair with .sx-motion-* utility classes
   or use directly in your own selectors with `animation:`.
   Per § 2 Layer 1 of MOBILE-OS-12-of-10-PLAN.md.
   ============================================================ */

/* fadeIn — screen mounts, subtle list-item appear */
@keyframes sx-fadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}

/* fadeBd — modal backdrop fade-in */
@keyframes sx-fadeBd{
  from{ opacity:0; }
  to  { opacity:1; }
}

/* slideUp — bottom-sheet enter */
@keyframes sx-slideUp{
  from{ transform:translateY(100%); }
  to  { transform:none; }
}

/* slideDown — bottom-sheet exit */
@keyframes sx-slideDown{
  from{ transform:none; }
  to  { transform:translateY(100%); }
}

/* beat — heartbeat / live-pill pulse */
@keyframes sx-beat{
  0%,100%{ transform:scale(1); }
  10%    { transform:scale(1.18); }
  20%    { transform:scale(1); }
  30%    { transform:scale(1.12); }
  40%    { transform:scale(1); }
}

/* pulse — gentle attention loop (notification dot, live status) */
@keyframes sx-pulse{
  0%  { transform:scale(1);   opacity:1; }
  70% { transform:scale(1.6); opacity:0; }
  100%{ transform:scale(1.6); opacity:0; }
}

/* ripple — touch feedback ring */
@keyframes sx-ripple{
  0%  { transform:scale(0);   opacity:.5; }
  100%{ transform:scale(2.4); opacity:0; }
}

/* draw — SVG path-draw (checkmark, progress arc) */
@keyframes sx-draw{
  from{ stroke-dashoffset: 100; }
  to  { stroke-dashoffset: 0;   }
}

/* rise — number / KPI count-up entrance */
@keyframes sx-rise{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

/* shimmer — skeleton loading */
@keyframes sx-shimmer{
  0%  { background-position: -200% 0; }
  100%{ background-position:  200% 0; }
}

/* slowSpin — ambient loaders (Higgsfield enhancing, queue spinner) */
@keyframes sx-slowSpin{
  to{ transform:rotate(360deg); }
}

/* breath — Wellness pre-session breathing visual */
@keyframes sx-breath{
  0%,100%{ transform:scale(1);   opacity:.7; }
  50%    { transform:scale(1.3); opacity:1;  }
}

/* shake — error / invalid input attention */
@keyframes sx-shake{
  0%,100%      { transform:translateX(0); }
  20%,60%      { transform:translateX(-6px); }
  40%,80%      { transform:translateX(6px); }
}

/* ============================================================
   Utility classes
   ============================================================ */

.sx-motion-fadeIn   { animation: sx-fadeIn   .2s var(--ease-out, ease-out); }
.sx-motion-rise     { animation: sx-rise     .3s var(--ease-out, ease-out); }
.sx-motion-beat     { animation: sx-beat     1.4s ease-in-out infinite; }
.sx-motion-pulse    { animation: sx-pulse    1.8s ease-out infinite; }
.sx-motion-slowSpin { animation: sx-slowSpin 2s linear infinite; }
.sx-motion-breath   { animation: sx-breath   4s ease-in-out infinite; }
.sx-motion-shake    { animation: sx-shake    .4s ease-in-out; }

/* Skeleton element — width + height set by host */
.sx-skeleton{
  background: linear-gradient(
    90deg,
    var(--surface-2, #152138) 25%,
    var(--surface-3, #1B2942) 50%,
    var(--surface-2, #152138) 75%
  );
  background-size: 200% 100%;
  animation: sx-shimmer 1.4s linear infinite;
  border-radius: var(--r-sm, 10px);
}

@media (prefers-reduced-motion: reduce){
  .sx-motion-fadeIn,
  .sx-motion-rise,
  .sx-motion-beat,
  .sx-motion-pulse,
  .sx-motion-slowSpin,
  .sx-motion-breath,
  .sx-motion-shake,
  .sx-skeleton{
    animation: none !important;
  }
}