/* ==========================================================================
   Clinic Manager Pro — Animations
   ========================================================================== */

/* ── Scroll-reveal (cm-animate-up) ──────────────────────────────────────── */
.cm-animate-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.cm-animate-up.in-view { opacity: 1; transform: translateY(0); }

/* Delay classes */
.cm-animate-delay-1 { transition-delay: 0.1s; }
.cm-animate-delay-2 { transition-delay: 0.2s; }
.cm-animate-delay-3 { transition-delay: 0.3s; }
.cm-animate-delay-4 { transition-delay: 0.4s; }

/* ── Floating glow elements ──────────────────────────────────────────────── */
@keyframes cm-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-20px) rotate(5deg); }
}
@keyframes cm-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(37,99,235,.3); }
  50%       { box-shadow: 0 0 50px rgba(37,99,235,.7); }
}
@keyframes cm-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ── Count-up animation base state ─────────────────────────────────────── */
.cm-counter { display: inline; }

/* ── Gradient text ───────────────────────────────────────────────────────── */
.cm-gradient-text {
  background: linear-gradient(90deg, var(--cm-primary), var(--cm-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Pulse (for AI bubble new message indicator) ─────────────────────────── */
@keyframes cm-pulse-ring {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.2); opacity: 0;  }
}
.cm-pulse-ring::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--cm-primary);
  animation: cm-pulse-ring 1.8s ease-out infinite;
  z-index: -1;
}

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.cm-skeleton {
  background: linear-gradient(90deg,
    var(--cm-bg-3) 25%,
    rgba(255,255,255,.05) 50%,
    var(--cm-bg-3) 75%
  );
  background-size: 200% 100%;
  animation: cm-shimmer 1.5s infinite;
  border-radius: var(--cm-radius-sm);
}

/* ── Page transition overlay ────────────────────────────────────────────── */
.cm-page-transition {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--cm-primary);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.cm-page-transition.enter {
  animation: cm-page-enter .4s ease forwards;
}
.cm-page-transition.leave {
  animation: cm-page-leave .4s ease forwards;
}
@keyframes cm-page-enter { to { transform: scaleY(1); } }
@keyframes cm-page-leave { from { transform: scaleY(1); transform-origin: top; } to { transform: scaleY(0); transform-origin: top; } }