/* ============================================================
   Surgr Design System — Motion Primitives
   Shared keyframes + utility classes used by app, landing, and
   preview cards. Import after colors_and_type.css.
   ============================================================ */

/* ─── Keyframes ───────────────────────────────────────────── */

/* Pulse — opacity-only. The default ambient signal.
   Used on dots, status indicators, "online" pips. */
@keyframes surgr-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Breathe — scale + opacity. Used on glow blobs, ambient halos. */
@keyframes surgr-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

/* Ring — outward expanding ring. Used on "live" badges and CTA halos. */
@keyframes surgr-ring {
  0%   { box-shadow: 0 0 0 0 var(--ring, rgba(200,255,0,0.45)); }
  70%  { box-shadow: 0 0 0 14px rgba(200,255,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,255,0,0); }
}

/* Bob — for typing indicators, subtle vertical bobs. */
@keyframes surgr-bob {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.45; }
  30%           { transform: translateY(-3px); opacity: 1;    }
}

/* Lift — entrance for cards, sheets, screens. */
@keyframes surgr-lift {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Reveal — entrance for big text. Slight blur clears. */
@keyframes surgr-reveal {
  from { opacity: 0; transform: translateY(6px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0);   }
}

/* Marquee shimmer — for loading skeletons. */
@keyframes surgr-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Count — numbers tick up (with content + counter-reset on parent). */
@keyframes surgr-count {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ─── Utility classes ─────────────────────────────────────── */

.surgr-anim-pulse   { animation: surgr-pulse   var(--surgr-dur-amb) var(--surgr-ease-in-out) infinite; }
.surgr-anim-breathe { animation: surgr-breathe 9s var(--surgr-ease-in-out) infinite; }
.surgr-anim-ring    { animation: surgr-ring    var(--surgr-dur-amb) var(--surgr-ease-out) infinite; }
.surgr-anim-bob     { animation: surgr-bob     1.2s var(--surgr-ease-in-out) infinite; }
.surgr-anim-lift    { animation: surgr-lift    var(--surgr-dur-slow) var(--surgr-ease-out) both; }
.surgr-anim-reveal  { animation: surgr-reveal  var(--surgr-dur-slow) var(--surgr-ease-out) both; }

/* Stagger helpers — apply on a parent and children inherit delay */
.surgr-stagger > *:nth-child(1) { animation-delay: 0ms; }
.surgr-stagger > *:nth-child(2) { animation-delay: 60ms; }
.surgr-stagger > *:nth-child(3) { animation-delay: 120ms; }
.surgr-stagger > *:nth-child(4) { animation-delay: 180ms; }
.surgr-stagger > *:nth-child(5) { animation-delay: 240ms; }
.surgr-stagger > *:nth-child(6) { animation-delay: 300ms; }

/* Reduced motion — respect OS setting */
@media (prefers-reduced-motion: reduce) {
  .surgr-anim-pulse,
  .surgr-anim-breathe,
  .surgr-anim-ring,
  .surgr-anim-bob,
  .surgr-anim-lift,
  .surgr-anim-reveal { animation: none !important; }
}