/* =================
   Animation Definitions - Scoped to CUM page
   ================= */

/* Entrance animations */
@keyframes cumFadeIn {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes cumFadeInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes cumSlideInLeft {
    from {
      opacity: 0;
      transform: translateX(-40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes cumSlideInRight {
    from {
      opacity: 0;
      transform: translateX(40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes cumBounceIn {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
    70% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes cumPulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes cumGlow {
    0% {
      box-shadow: 0 0 5px rgba(52, 152, 219, 0.2);
    }
    50% {
      box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
    }
    100% {
      box-shadow: 0 0 5px rgba(52, 152, 219, 0.2);
    }
  }
  
  @keyframes cumHighlight {
    0% {
      opacity: 0;
      text-shadow: 0 0 0 rgba(52, 152, 219, 0);
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      text-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
      transform: translateY(0);
    }
  }
  
  /* =================
     Pre-Animation States
     ================= */
  
  /* Base states for all animatable elements */
  .cum-page .cum-hero-title-dark, 
  .cum-page .cum-logo-dark, 
  .cum-page .cum-hero-tagline,
  .cum-page .cum-section-title-dark,
  .cum-page .cum-about-text,
  .cum-page .cum-vice-item,
  .cum-page .cum-tokenomics-item,
  .cum-page .cum-step-dark,
  .cum-page .cum-social-button,
  .cum-page .cum-contract-card-dark,
  .cum-page .cum-gallery-item {
    opacity: 0;
    will-change: transform, opacity;
    transition: none;
  }
  
  /* =================
     Active Animation States
     ================= */
  
  /* Main titles */
  .cum-page .cum-hero-title-dark.active,
  .cum-page .cum-hero-title-dark.cum-force-visible {
    animation: cumFadeInUp 0.9s ease-out forwards;
  }
  
  /* Logo animation */
  .cum-page .cum-logo-dark.active,
  .cum-page .cum-logo-dark.cum-force-visible {
    animation: cumBounceIn 0.9s ease-out forwards;
  }
  
  /* Tagline */
  .cum-page .cum-hero-tagline.active,
  .cum-page .cum-hero-tagline.cum-force-visible {
    animation: cumFadeIn 0.9s ease-out 0.2s forwards; /* delay for sequential effect */
  }
  
  /* Section titles */
  .cum-page .cum-section-title-dark.active,
  .cum-page .cum-section-title-dark.animate,
  .cum-page .cum-section-title-dark.cum-force-visible {
    animation: cumHighlight 0.8s ease-out forwards;
  }
  
  /* About text paragraphs */
  .cum-page .cum-about-text.active,
  .cum-page .cum-about-text.animate,
  .cum-page .cum-about-text.cum-force-visible {
    animation: cumFadeIn 0.8s ease-out forwards;
  }
  
  /* Vice items (grid boxes) */
  .cum-page .cum-vice-item.active,
  .cum-page .cum-vice-item.animate,
  .cum-page .cum-vice-item.cum-force-visible {
    animation: cumBounceIn 0.7s ease-out forwards;
  }
  
  /* Vice icons always pulse when parent is active */
  .cum-page .cum-vice-item.active .cum-vice-icon,
  .cum-page .cum-vice-item.animate .cum-vice-icon,
  .cum-page .cum-vice-item.cum-force-visible .cum-vice-icon {
    animation: cumPulse 3s ease-in-out infinite;
  }
  
  /* Tokenomics items */
  .cum-page .cum-tokenomics-item.active,
  .cum-page .cum-tokenomics-item.animate,
  .cum-page .cum-tokenomics-item.cum-force-visible {
    animation: cumSlideInRight 0.7s ease-out forwards;
  }
  
  /* Buy section steps */
  .cum-page .cum-step-dark.active,
  .cum-page .cum-step-dark.animate,
  .cum-page .cum-step-dark.cum-force-visible {
    animation: cumSlideInLeft 0.7s ease-out forwards;
  }
  
  /* Social buttons */
  .cum-page .cum-social-button.active,
  .cum-page .cum-social-button.animate,
  .cum-page .cum-social-button.cum-force-visible {
    animation: cumBounceIn 0.6s ease-out forwards;
  }
  
  /* Contract card */
  .cum-page .cum-contract-card-dark.active,
  .cum-page .cum-contract-card-dark.animate,
  .cum-page .cum-contract-card-dark.cum-force-visible {
    animation: cumFadeIn 0.8s ease-out forwards, cumGlow 3s ease-in-out infinite 0.8s;
  }
  
  /* Gallery items */
  .cum-page .cum-gallery-item.active,
  .cum-page .cum-gallery-item.animate,
  .cum-page .cum-gallery-item.cum-force-visible {
    animation: cumFadeIn 0.8s ease-out forwards;
  }
  
  /* =================
     Ensure hover effects work properly
     ================= */
  
  /* Clear transition conflicts for hovered elements */
  .cum-page .cum-vice-item,
  .cum-page .cum-tokenomics-item,
  .cum-page .cum-step-dark,
  .cum-page .cum-contract-card-dark,
  .cum-page .cum-gallery-item,
  .cum-page .cum-social-button {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !important;
  }
  
  /* Fix for force visible elements to maintain hover states */
  .cum-page .cum-force-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  
  /* Enable hover effects for active/animated elements */
  .cum-page .cum-vice-item.active:hover,
  .cum-page .cum-vice-item.animate:hover,
  .cum-page .cum-vice-item.cum-force-visible:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25) !important;
  }
  
  .cum-page .cum-tokenomics-item.active:hover,
  .cum-page .cum-tokenomics-item.animate:hover,
  .cum-page .cum-tokenomics-item.cum-force-visible:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25) !important;
  }
  
  .cum-page .cum-step-dark.active:hover,
  .cum-page .cum-step-dark.animate:hover,
  .cum-page .cum-step-dark.cum-force-visible:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25) !important;
  }
  
  .cum-page .cum-contract-card-dark.active:hover,
  .cum-page .cum-contract-card-dark.animate:hover,
  .cum-page .cum-contract-card-dark.cum-force-visible:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(52, 152, 219, 0.3) !important;
  }
  
  .cum-page .cum-gallery-item.active:hover,
  .cum-page .cum-gallery-item.animate:hover,
  .cum-page .cum-gallery-item.cum-force-visible:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;
  }
  
  .cum-page .cum-social-button.active:hover,
  .cum-page .cum-social-button.animate:hover,
  .cum-page .cum-social-button.cum-force-visible:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
  }
  
  /* Add staggered animation delays */
  .cum-page .cum-vice-item:nth-child(1) { animation-delay: 0.1s; }
  .cum-page .cum-vice-item:nth-child(2) { animation-delay: 0.2s; }
  .cum-page .cum-vice-item:nth-child(3) { animation-delay: 0.3s; }
  .cum-page .cum-vice-item:nth-child(4) { animation-delay: 0.4s; }
  
  .cum-page .cum-tokenomics-item:nth-child(1) { animation-delay: 0.1s; }
  .cum-page .cum-tokenomics-item:nth-child(2) { animation-delay: 0.2s; }
  .cum-page .cum-tokenomics-item:nth-child(3) { animation-delay: 0.3s; }
  
  .cum-page .cum-step-dark:nth-child(1) { animation-delay: 0.1s; }
  .cum-page .cum-step-dark:nth-child(2) { animation-delay: 0.2s; }
  .cum-page .cum-step-dark:nth-child(3) { animation-delay: 0.3s; }
  
  .cum-page .cum-gallery-item:nth-child(1) { animation-delay: 0.1s; }
  .cum-page .cum-gallery-item:nth-child(2) { animation-delay: 0.2s; }
  .cum-page .cum-gallery-item:nth-child(3) { animation-delay: 0.3s; }
  
  .cum-page .cum-social-button:nth-child(1) { animation-delay: 0.1s; }
  .cum-page .cum-social-button:nth-child(2) { animation-delay: 0.2s; }