/**
 * AIAgens Motion System
 * Version: 2.0.0
 * Last Updated: 2025-11-15
 *
 * Modern animations and transitions for enterprise UI
 * Includes: fade-in, stagger, hover effects, page transitions
 */

/* ========================================================================
   FADE IN ANIMATIONS
   ======================================================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

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

/* Fade In Classes */
.fade-in {
  animation: fadeIn var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

.fade-in-up {
  animation: fadeInUp var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

.fade-in-down {
  animation: fadeInDown var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

.fade-in-left {
  animation: fadeInLeft var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

.fade-in-right {
  animation: fadeInRight var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

/* ========================================================================
   SCALE ANIMATIONS
   ======================================================================== */

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

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

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

.scale-in {
  animation: scaleIn var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

.scale-out {
  animation: scaleOut var(--duration-normal, 300ms) var(--ease-in, ease-in) forwards;
}

.pulse {
  animation: pulse 2s var(--ease-in-out, ease-in-out) infinite;
}

/* ========================================================================
   SLIDE ANIMATIONS
   ======================================================================== */

@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-in-up {
  animation: slideInUp var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

.slide-in-down {
  animation: slideInDown var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

.slide-in-left {
  animation: slideInLeft var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

.slide-in-right {
  animation: slideInRight var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

/* ========================================================================
   STAGGER ANIMATIONS
   ======================================================================== */

.stagger-item {
  opacity: 0;
  animation: fadeInUp var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 50ms; }
.stagger-item:nth-child(3) { animation-delay: 100ms; }
.stagger-item:nth-child(4) { animation-delay: 150ms; }
.stagger-item:nth-child(5) { animation-delay: 200ms; }
.stagger-item:nth-child(6) { animation-delay: 250ms; }
.stagger-item:nth-child(7) { animation-delay: 300ms; }
.stagger-item:nth-child(8) { animation-delay: 350ms; }
.stagger-item:nth-child(9) { animation-delay: 400ms; }
.stagger-item:nth-child(10) { animation-delay: 450ms; }

/* Longer stagger delays for lists */
.stagger-list-item {
  opacity: 0;
  animation: fadeInUp var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

.stagger-list-item:nth-child(1) { animation-delay: 0ms; }
.stagger-list-item:nth-child(2) { animation-delay: 75ms; }
.stagger-list-item:nth-child(3) { animation-delay: 150ms; }
.stagger-list-item:nth-child(4) { animation-delay: 225ms; }
.stagger-list-item:nth-child(5) { animation-delay: 300ms; }
.stagger-list-item:nth-child(6) { animation-delay: 375ms; }
.stagger-list-item:nth-child(7) { animation-delay: 450ms; }
.stagger-list-item:nth-child(8) { animation-delay: 525ms; }
.stagger-list-item:nth-child(9) { animation-delay: 600ms; }
.stagger-list-item:nth-child(10) { animation-delay: 675ms; }

/* ========================================================================
   SHIMMER/SKELETON LOADING
   ======================================================================== */

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-200, #e5e7eb) 0%,
    var(--color-gray-100, #f3f4f6) 50%,
    var(--color-gray-200, #e5e7eb) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
  border-radius: var(--radius-md, 0.5rem);
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-title {
  height: 2em;
  width: 70%;
  margin-bottom: 1em;
}

.skeleton-paragraph {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-paragraph:last-child {
  width: 60%;
}

/* ========================================================================
   SPIN/LOADING ANIMATIONS
   ======================================================================== */

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

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

.ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.bounce {
  animation: bounce 1s infinite;
}

/* ========================================================================
   HOVER EFFECTS
   ======================================================================== */

/* Lift on Hover */
.hover-lift {
  transition: transform var(--duration-fast, 200ms) var(--ease-out, ease-out),
              box-shadow var(--duration-fast, 200ms) var(--ease-out, ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl, 0 8px 24px rgba(0, 0, 0, 0.06));
}

/* Subtle Lift */
.hover-lift-subtle {
  transition: transform var(--duration-fast, 200ms) var(--ease-out, ease-out),
              box-shadow var(--duration-fast, 200ms) var(--ease-out, ease-out);
}

.hover-lift-subtle:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.04));
}

/* Scale on Hover */
.hover-scale {
  transition: transform var(--duration-fast, 200ms) var(--ease-out, ease-out);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-scale-sm {
  transition: transform var(--duration-fast, 200ms) var(--ease-out, ease-out);
}

.hover-scale-sm:hover {
  transform: scale(1.02);
}

/* Brightness on Hover */
.hover-brightness {
  transition: filter var(--duration-fast, 200ms) var(--ease-out, ease-out);
}

.hover-brightness:hover {
  filter: brightness(1.1);
}

/* Glow on Hover */
.hover-glow {
  transition: box-shadow var(--duration-fast, 200ms) var(--ease-out, ease-out);
}

.hover-glow:hover {
  box-shadow: var(--shadow-primary, 0 8px 24px rgba(99, 102, 241, 0.12));
}

/* Underline on Hover */
.hover-underline {
  position: relative;
  text-decoration: none;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--duration-fast, 200ms) var(--ease-out, ease-out);
}

.hover-underline:hover::after {
  width: 100%;
}

/* ========================================================================
   BUTTON ANIMATIONS
   ======================================================================== */

.button-press {
  transition: transform var(--duration-instant, 100ms) var(--ease-out, ease-out);
}

.button-press:active {
  transform: scale(0.96);
}

.button-ripple {
  position: relative;
  overflow: hidden;
}

.button-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width var(--duration-slow, 500ms) var(--ease-out, ease-out),
              height var(--duration-slow, 500ms) var(--ease-out, ease-out);
}

.button-ripple:active::before {
  width: 300px;
  height: 300px;
}

/* ========================================================================
   CARD ANIMATIONS
   ======================================================================== */

.card-enter {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: cardEnter var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

@keyframes cardEnter {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.card-hover {
  transition: transform var(--duration-fast, 200ms) var(--ease-out, ease-out),
              box-shadow var(--duration-fast, 200ms) var(--ease-out, ease-out),
              border-color var(--duration-fast, 200ms) var(--ease-out, ease-out);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl, 0 8px 24px rgba(0, 0, 0, 0.06));
  border-color: var(--color-primary, #4F46E5);
}

/* ========================================================================
   PAGE TRANSITIONS
   ======================================================================== */

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

.page-enter {
  animation: pageEnter var(--duration-slow, 500ms) var(--ease-out, ease-out) forwards;
}

/* ========================================================================
   MODAL/DIALOG ANIMATIONS
   ======================================================================== */

@keyframes modalBackdropEnter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalContentEnter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-backdrop-enter {
  animation: modalBackdropEnter var(--duration-fast, 200ms) var(--ease-out, ease-out) forwards;
}

.modal-content-enter {
  animation: modalContentEnter var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

/* ========================================================================
   NOTIFICATION/TOAST ANIMATIONS
   ======================================================================== */

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

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

.toast-enter {
  animation: toastSlideIn var(--duration-normal, 300ms) var(--ease-out, ease-out) forwards;
}

.toast-exit {
  animation: toastSlideOut var(--duration-normal, 300ms) var(--ease-in, ease-in) forwards;
}

/* ========================================================================
   DROPDOWN ANIMATIONS
   ======================================================================== */

@keyframes dropdownEnter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-enter {
  animation: dropdownEnter var(--duration-fast, 200ms) var(--ease-out, ease-out) forwards;
}

/* ========================================================================
   PROGRESS BAR ANIMATIONS
   ======================================================================== */

@keyframes progressIndeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.progress-indeterminate {
  position: relative;
  overflow: hidden;
}

.progress-indeterminate::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-primary, #4F46E5),
    transparent
  );
  animation: progressIndeterminate 1.5s infinite linear;
}

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */

/* Disable animations */
.no-animation,
.no-animation * {
  animation: none !important;
  transition: none !important;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================================================
   ENTRANCE ANIMATION DELAYS
   ======================================================================== */

.delay-0 { animation-delay: 0ms; }
.delay-50 { animation-delay: 50ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }
.delay-700 { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }

/* ========================================================================
   GRADIENT ANIMATIONS
   ======================================================================== */

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-animate {
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

/* ========================================================================
   BLUR/FOCUS ANIMATIONS
   ======================================================================== */

@keyframes blurIn {
  from {
    filter: blur(10px);
    opacity: 0;
  }
  to {
    filter: blur(0);
    opacity: 1;
  }
}

.blur-in {
  animation: blurIn var(--duration-slow, 500ms) var(--ease-out, ease-out) forwards;
}

/* ========================================================================
   HERO SECTION ANIMATIONS
   ======================================================================== */

/* Hero Fade In (staggered entrance) */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-fade-in {
  opacity: 0;
  animation: heroFadeIn 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform;
}

/* Hero CTA Button Animations */
.hero-cta-primary {
  position: relative;
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-cta-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-cta-primary:hover::before {
  left: 100%;
}

/* Hero Trust Chip Glow */
.hero-trust-chip {
  transition: all 300ms ease;
}

.hero-trust-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Gradient Animation for CTAs */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero-gradient-animated {
  background-size: 200% 200%;
  animation: gradientFlow 3s ease infinite;
}

/* Mesh Gradient Background Animation */
.mesh-gradient-bg {
  background: 
    radial-gradient(at 0% 0%, rgba(139, 92, 246, 0.3) 0px, transparent 50%),
    radial-gradient(at 50% 0%, rgba(99, 102, 241, 0.3) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.3) 0px, transparent 50%);
  animation: meshGradientMove 15s ease-in-out infinite;
}

@keyframes meshGradientMove {
  0%, 100% {
    background-position: 0% 0%, 50% 0%, 100% 0%;
  }
  50% {
    background-position: 0% 100%, 50% 100%, 100% 100%;
  }
}

/* Hero Image/Visual Placeholder Animation */
.hero-visual-fade {
  opacity: 0;
  animation: heroVisualFade 1200ms cubic-bezier(0.16, 1, 0.3, 1) 700ms forwards;
}

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

/* Mobile Optimizations */
@media (max-width: 768px) {
  .hero-fade-in {
    animation-duration: 600ms;
  }
  
  .mesh-gradient-bg {
    animation-duration: 10s;
  }
}

/* Accessibility: Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hero-fade-in,
  .hero-visual-fade,
  .mesh-gradient-bg {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================================================
   PREMIUM SCROLL REVEAL (opt-in)
   Usage:
     - Add class "reveal-on-scroll" to any element
     - JS will toggle: will-reveal -> is-visible
   ======================================================================== */

body[data-premium-motion="on"] .reveal-on-scroll {
  opacity: 1;
  translate: 0 0;
}

body[data-premium-motion="on"] .reveal-on-scroll.will-reveal {
  opacity: 0;
  translate: 0 12px;
}

body[data-premium-motion="on"] .reveal-on-scroll.will-reveal,
body[data-premium-motion="on"] .reveal-on-scroll.is-visible {
  transition:
    opacity var(--duration-normal, 320ms) cubic-bezier(0.16, 1, 0.3, 1),
    translate var(--duration-normal, 320ms) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, translate;
}

body[data-premium-motion="on"] .reveal-on-scroll.is-visible {
  opacity: 1;
  translate: 0 0;
}

body[data-premium-motion="on"] .reveal-delay-1 { transition-delay: 80ms; }
body[data-premium-motion="on"] .reveal-delay-2 { transition-delay: 160ms; }
body[data-premium-motion="on"] .reveal-delay-3 { transition-delay: 240ms; }

/* ========================================================================
   NAVBAR POLISH (opt-in, no backdrop-filter)
   ======================================================================== */

body[data-premium-motion="on"] .navbar.navbar-scrolled {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

body[data-theme="dark"][data-premium-motion="on"] .navbar.navbar-scrolled {
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

/* ========================================================================
   ANCHOR HIGHLIGHT (opt-in)
   ======================================================================== */

@keyframes anchorGlow {
  0% { opacity: 0; transform: scale(0.99); }
  25% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

body[data-premium-motion="on"] .anchor-highlight {
  position: relative;
}

body[data-premium-motion="on"] .anchor-highlight::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 18px;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14);
  opacity: 0;
  pointer-events: none;
  animation: anchorGlow 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}