/* JoinIn Animation Keyframes
 * Copyright (c) 2026 JoinIn AI, Inc. All rights reserved.
 */

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide up */
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Scale in */
@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Animated gradient background - 60s alternate */
@keyframes floatGradient {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-12%, -4%, 0) scale(1.08);
  }
  100% {
    transform: translate3d(8%, 6%, 0) scale(1.03);
  }
}

/* Floating orb animations */
@keyframes floatOrb1 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(12px, 18px, 0);
  }
  100% {
    transform: translate3d(-16px, -10px, 0);
  }
}

@keyframes floatOrb2 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-10px, -18px, 0);
  }
  100% {
    transform: translate3d(16px, 8px, 0);
  }
}

@keyframes floatOrb3 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(10px, -4px, 0);
  }
  100% {
    transform: translate3d(-6px, 12px, 0);
  }
}

/* Waveform slide animation for hero sections */
@keyframes slideWave {
  0% {
    transform: translateX(-20%);
  }
  100% {
    transform: translateX(20%);
  }
}

/* Audio bar pulse animation */
@keyframes pulseBar {
  0% {
    transform: scaleY(0.24);
    opacity: 0.4;
  }
  20% {
    transform: scaleY(0.9);
    opacity: 0.9;
  }
  45% {
    transform: scaleY(0.5);
    opacity: 0.7;
  }
  60% {
    transform: scaleY(1.2);
    opacity: 1;
  }
  80% {
    transform: scaleY(0.4);
    opacity: 0.6;
  }
  100% {
    transform: scaleY(0.7);
    opacity: 0.8;
  }
}

/* Floating particle animation */
@keyframes floatParticle {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.9;
  }
  50% {
    transform: translate3d(4px, -6px, 0);
    opacity: 0.6;
  }
  100% {
    transform: translate3d(-4px, 4px, 0);
    opacity: 0.9;
  }
}

/* Insight card arrival — entrance flash + throb (info/cyan) */
@keyframes insightArrival {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(1.04);
    background: rgba(72, 211, 253, 0.4);
    box-shadow: 0 0 28px 10px rgba(72, 211, 253, 0.55), inset 0 0 24px rgba(72, 211, 253, 0.2);
  }
  6% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    background: rgba(72, 211, 253, 0.3);
    box-shadow: 0 0 32px 12px rgba(72, 211, 253, 0.45), inset 0 0 20px rgba(72, 211, 253, 0.15);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1);
    background: rgba(72, 211, 253, 0.12);
    box-shadow: 0 0 12px 4px rgba(72, 211, 253, 0.2);
  }
  20% { background: rgba(226, 230, 243, 0.25); box-shadow: none; }
  34% { box-shadow: 0 0 28px 10px rgba(72, 211, 253, 0.5); background: rgba(72, 211, 253, 0.2); }
  48% { box-shadow: none; background: rgba(226, 230, 243, 0.25); }
  60% { box-shadow: 0 0 22px 8px rgba(72, 211, 253, 0.35); background: rgba(72, 211, 253, 0.14); }
  74% { box-shadow: none; background: rgba(226, 230, 243, 0.25); }
  85% { box-shadow: 0 0 16px 6px rgba(72, 211, 253, 0.22); background: rgba(72, 211, 253, 0.08); }
  100% { box-shadow: none; background: rgba(226, 230, 243, 0.25); }
}

/* Insight card arrival — attention/amber variant */
@keyframes insightArrivalAttention {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(1.04);
    background: rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 28px 10px rgba(245, 158, 11, 0.55), inset 0 0 24px rgba(245, 158, 11, 0.2);
  }
  6% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    background: rgba(245, 158, 11, 0.3);
    box-shadow: 0 0 32px 12px rgba(245, 158, 11, 0.45), inset 0 0 20px rgba(245, 158, 11, 0.15);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1);
    background: rgba(245, 158, 11, 0.12);
    box-shadow: 0 0 12px 4px rgba(245, 158, 11, 0.2);
  }
  20% { background: rgba(226, 230, 243, 0.25); box-shadow: none; }
  34% { box-shadow: 0 0 28px 10px rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.2); }
  48% { box-shadow: none; background: rgba(226, 230, 243, 0.25); }
  60% { box-shadow: 0 0 22px 8px rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.14); }
  74% { box-shadow: none; background: rgba(226, 230, 243, 0.25); }
  85% { box-shadow: 0 0 16px 6px rgba(245, 158, 11, 0.22); background: rgba(245, 158, 11, 0.08); }
  100% { box-shadow: none; background: rgba(226, 230, 243, 0.25); }
}

/* Insight card arrival — action/red variant */
@keyframes insightArrivalAction {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(1.04);
    background: rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 28px 10px rgba(239, 68, 68, 0.55), inset 0 0 24px rgba(239, 68, 68, 0.2);
  }
  6% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    background: rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 32px 12px rgba(239, 68, 68, 0.45), inset 0 0 20px rgba(239, 68, 68, 0.15);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1);
    background: rgba(239, 68, 68, 0.12);
    box-shadow: 0 0 12px 4px rgba(239, 68, 68, 0.2);
  }
  20% { background: rgba(226, 230, 243, 0.25); box-shadow: none; }
  34% { box-shadow: 0 0 28px 10px rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.2); }
  48% { box-shadow: none; background: rgba(226, 230, 243, 0.25); }
  60% { box-shadow: 0 0 22px 8px rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.14); }
  74% { box-shadow: none; background: rgba(226, 230, 243, 0.25); }
  85% { box-shadow: 0 0 16px 6px rgba(239, 68, 68, 0.22); background: rgba(239, 68, 68, 0.08); }
  100% { box-shadow: none; background: rgba(226, 230, 243, 0.25); }
}

/* Loading dots pulse */
@keyframes loadingPulse {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Sound wave for speaking indicator */
@keyframes wave {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

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

/* Reduced motion — disable all non-essential animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}