/* =============================================
   FlowBridge Animations & Transitions
   ============================================= */

/* ── Page transitions ──────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── Utility animation classes ─────────────── */
.anim-fade-in     { animation: fadeIn      var(--ease-slow) both; }
.anim-fade-in-up  { animation: fadeInUp    var(--ease-slow) both; }
.anim-fade-in-down{ animation: fadeInDown  var(--ease-slow) both; }
.anim-fade-in-scale { animation: fadeInScale var(--ease-slow) both; }
.anim-slide-right { animation: slideInRight var(--ease-slow) both; }
.anim-slide-left  { animation: slideInLeft  var(--ease-slow) both; }
.anim-slide-up    { animation: slideUp 350ms cubic-bezier(0.34,1.56,0.64,1) both; }

/* Staggered children */
.anim-stagger > *:nth-child(1) { animation-delay: 0ms; }
.anim-stagger > *:nth-child(2) { animation-delay: 60ms; }
.anim-stagger > *:nth-child(3) { animation-delay: 120ms; }
.anim-stagger > *:nth-child(4) { animation-delay: 180ms; }
.anim-stagger > *:nth-child(5) { animation-delay: 240ms; }
.anim-stagger > *:nth-child(6) { animation-delay: 300ms; }
.anim-stagger > *:nth-child(7) { animation-delay: 360ms; }
.anim-stagger > *:nth-child(8) { animation-delay: 420ms; }

/* ── Skeleton loading ──────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-border-light) 25%,
    var(--color-bg) 50%,
    var(--color-border-light) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.skeleton--text {
  height: 1em;
  width: 60%;
  border-radius: var(--radius-sm);
}

.skeleton--circle {
  border-radius: 50%;
}

/* ── Pulse / breathing ─────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.anim-pulse { animation: pulse 2s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* ── Spinner ───────────────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner--sm { width: 0.875rem; height: 0.875rem; border-width: 1.5px; }
.spinner--lg { width: 2rem;     height: 2rem;     border-width: 3px; }

/* ── Count-up ready ────────────────────────── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-count-up {
  animation: countUp 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Floating label effect ─────────────────── */
@keyframes floatUp {
  from { transform: translateY(0); opacity: 0.7; }
  to   { transform: translateY(-2px); opacity: 1; }
}

/* ── Indeterminate progress ────────────────── */
@keyframes indeterminate {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* ── Ripple (click feedback) ───────────────── */
@keyframes ripple {
  from { transform: scale(0); opacity: 0.4; }
  to   { transform: scale(2.5); opacity: 0; }
}

/* ── Step connector animation ──────────────── */
@keyframes drawLine {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── Notification dot ──────────────────────── */
@keyframes notifyPulse {
  0%   { box-shadow: 0 0 0 0 rgba(79,70,229,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(79,70,229,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,70,229,0); }
}

.anim-notify-pulse { animation: notifyPulse 2s ease-out infinite; }

/* ── View transition helpers ───────────────── */
.view-enter {
  animation: fadeInUp 300ms ease both;
}

.view-exit {
  animation: fadeIn 200ms ease reverse both;
}

/* ── Interactive card ──────────────────────── */
.card-interactive {
  transition:
    box-shadow var(--ease-base),
    transform var(--ease-base),
    border-color var(--ease-base);
}

.card-interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--color-primary-glow);
}

/* ── Chatbot slide ─────────────────────────── */
@keyframes chatSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes chatSlideDown {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(20px) scale(0.96); }
}

.chat-enter { animation: chatSlideUp 350ms cubic-bezier(0.34,1.56,0.64,1) both; }
.chat-exit  { animation: chatSlideDown 200ms ease both; }