/* ==========================================================================
   ACCRUME - CUSTOM ANIMATIONS
   Description: Keyframe animations, hovering float actions, and transition effects.
   ========================================================================== */

/* --- 1. Keyframes --- */

/* Floating animation for shapes */
@keyframes floatShape {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
  100% {
    transform: translateY(0px) rotate(360deg);
  }
}

/* Floating animation for stats cards */
@keyframes floatCard1 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes floatCard2 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Partner Logo Marquee Loop */
@keyframes marqueeLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Glowing pulse for active elements */
@keyframes glowPulse {
  0% {
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.5);
  }
  100% {
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.2);
  }
}

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

/* --- 2. Application Classes --- */

/* Background shapes floating */
.hero-shape-1 {
  animation: floatShape 25s infinite linear;
}

.hero-shape-2 {
  animation: floatShape 30s infinite linear;
}

/* Floating Stats Cards in Hero */
.floating-card-1 {
  animation: floatCard1 6s ease-in-out infinite;
}

.floating-card-2 {
  animation: floatCard2 6s ease-in-out infinite;
}

/* Marquee continuous scroll */
.marquee-track-animated {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: marqueeLoop 25s linear infinite;
}

.marquee-track-animated:hover {
  animation-play-state: paused;
}

/* Glowing features */
.glow-card-active {
  animation: glowPulse 3s infinite ease-in-out;
}

/* Card hover glow and lifts */
.hover-lift {
  transition: var(--transition-smooth);
}
.hover-lift:hover {
  transform: translateY(-8px);
}

.glow-glow {
  position: relative;
}
.glow-glow::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: var(--transition-smooth);
}
.glow-glow:hover::before {
  opacity: 0.3;
}

/* Shimmer placeholder styling */
.shimmer-bg {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}