/* Animations */

@keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0) translateX(-50%);
    }
    40% {
      transform: translateY(-20px) translateX(-50%);
    }
    60% {
      transform: translateY(-10px) translateX(-50%);
    }
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  
  @keyframes stat-fill {
    from {
      stroke-dashoffset: 251.2;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  .fade-in {
    opacity: 0;
    animation: fade-in 1s forwards;
  }
  
  .fade-in-delay {
    opacity: 0;
    animation: fade-in 1s 0.3s forwards;
  }
  
  .fade-in-delay-2 {
    opacity: 0;
    animation: fade-in 1s 0.6s forwards;
  }
  
  /* .reveal-left {
    opacity: 0;
    transform: translateX(0);
    transition: all 0.8s ease;
  } */
  
  .reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s ease;
  }
  
  .reveal-bottom {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
  }
  
  .reveal-left.active,
  .reveal-right.active,
  .reveal-bottom.active {
    opacity: 1;
    transform: translate(0);
  }
  
  /* For creating the circular progress effect */
  .stat-circle[data-value="100"]::after {
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0);
    animation: rotate-full 1.5s ease-in-out forwards;
  }
  
  .stat-circle[data-value="70"]::after {
    clip-path: polygon(50% 50%, 50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 50% 50%);
    animation: rotate-partial 1.5s ease-in-out forwards;
  }
  
  @keyframes rotate-full {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes rotate-partial {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(252deg); /* 70% of 360 degrees */
    }
  }
  
  /* Menu toggle animation */
  .menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }