/* ============================================
   CONSOLIDATED KEYFRAME ANIMATIONS
   All shared @keyframes in one place.
   Source: scroll-animations.css + duplicates
   extracted from main.css, store.css,
   dashboard.css, dashboard-premium.css,
   tutorial-enhanced.css
   ============================================ */

/* ============================================
   GENERIC / UTILITY ANIMATIONS
   ============================================ */

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(30px);
  }

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

@keyframes shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

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

  100% {
    background-position: -100% 0;
  }
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg) scale(0.3);
  }
}

@keyframes checkPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  60% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

/* ============================================
   FLOATING / MOVEMENT ANIMATIONS
   (from scroll-animations.css)
   ============================================ */

@keyframes floatUpDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes floatAndRotate {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-10px) rotate(3deg);
  }

  50% {
    transform: translateY(-15px) rotate(0deg);
  }

  75% {
    transform: translateY(-10px) rotate(-3deg);
  }
}

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.6;
  }

  90% {
    opacity: 0.6;
  }

  100% {
    transform: translateY(-100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ============================================
   GLOW / PULSE ANIMATIONS
   (from scroll-animations.css)
   ============================================ */

@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.3);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

@keyframes pulseEffect {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 49, 49, 0.4);
  }

  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 15px rgba(255, 49, 49, 0);
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 49, 49, 0.2);
  }

  50% {
    box-shadow: 0 0 40px rgba(255, 49, 49, 0.5), 0 0 60px rgba(255, 49, 49, 0.3);
  }
}

/* ============================================
   GRADIENT / VISUAL EFFECT ANIMATIONS
   (from scroll-animations.css)
   ============================================ */

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

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes morphShape {

  0%,
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }

  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }

  50% {
    border-radius: 50% 50% 40% 60% / 40% 70% 60% 30%;
  }

  75% {
    border-radius: 40% 60% 50% 50% / 60% 40% 50% 60%;
  }
}

/* ============================================
   SCROLL INDICATOR ANIMATIONS
   (from scroll-animations.css)
   ============================================ */

@keyframes scrollWheel {

  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(8px);
    opacity: 0.3;
  }
}

@keyframes scrollArrow {

  0%,
  100% {
    opacity: 0.3;
    transform: rotate(45deg) translateY(0);
  }

  50% {
    opacity: 1;
    transform: rotate(45deg) translateY(3px);
  }
}

/* ============================================
   LANDING PAGE HERO ANIMATIONS
   (from scroll-animations.css)
   ============================================ */

@keyframes heroGradientRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes heroTitleGradient {

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

  50% {
    background-position: 100% 50%;
  }
}

@keyframes badgeSparkle {
  0% {
    left: -100%;
  }

  50%,
  100% {
    left: 100%;
  }
}

@keyframes phoneMockupFloat {

  0%,
  100% {
    transform: translateY(0) rotateY(-5deg) rotateX(5deg);
  }

  25% {
    transform: translateY(-10px) rotateY(0deg) rotateX(3deg);
  }

  50% {
    transform: translateY(-15px) rotateY(5deg) rotateX(0deg);
  }

  75% {
    transform: translateY(-10px) rotateY(0deg) rotateX(-3deg);
  }
}

@keyframes phoneScreenGlow {
  0% {
    opacity: 0.5;
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes statEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }

  60% {
    transform: translateY(-5px) scale(1.05);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes iconBounce {

  0%,
  100% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.3);
  }

  60% {
    transform: scale(0.9);
  }
}

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

  100% {
    background-position: 200% 50%;
  }
}

@keyframes avatarPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.1);
    opacity: 0;
  }
}

@keyframes featuredGlow {

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

  50% {
    background-position: 100% 50%;
  }
}

@keyframes ctaPulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.5;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.3;
  }
}

@keyframes footerLineGlow {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

/* ============================================
   MOBILE OVERRIDES
   (from scroll-animations.css)
   ============================================ */

@media (max-width: 768px) {
  @keyframes floatUpDown {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-10px);
    }
  }

  @keyframes phoneMockupFloatMobile {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-10px);
    }
  }
}

/* ============================================
   Reduced Motion
   Kill infinite/decorative animations for
   users who prefer reduced motion.
   The global catch-all in reset.css shortens
   duration to 0.01ms, but infinite animations
   still consume CPU/GPU — explicitly disable.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .confetti-piece,
  .floating-particle,
  .phone-mockup,
  .scroll-indicator,
  .scroll-arrow,
  [class*="pulse"],
  [class*="float"],
  [class*="glow"],
  [class*="sparkle"],
  [class*="morph"],
  [class*="gradient-shift"],
  [class*="avatar-pulse"],
  [class*="icon-bounce"],
  [class*="badge-sparkle"] {
    animation: none !important;
  }
}