@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @keyframes slideDown {
    0% { transform: translateY(-40px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

  @keyframes slideUp {
    0% { transform: translateY(40px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

  @keyframes slideRight {
    0% { transform: translateX(60px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
  }

  .animate-slideDown {
    animation: slideDown 0.8s ease-out forwards;
  }
  
  .animate-slideUp {
    animation: slideUp 0.8s ease-out forwards;
  }
  
  .animate-slideRight {
    animation: slideRight 0.8s ease-out forwards;
  }
}

/* extend: {
  keyframes: {
    fill: {
      "0%": { transform: "scaleX(0)" },
      "100%": { transform: "scaleX(1)" }
    },
    circle: {
      "0%": { strokeDashoffset: "472" },
      "100%": { strokeDashoffset: "calc(472 - 4.72 * var(--value))" }
    }
  },
  animation: {
    "fill-90": "fill 1s forwards, circle 1s forwards",
    "fill-60": "fill 1s forwards",
    "fill-85": "fill 1s forwards",
    "fill-50": "fill 1s forwards",
    "progress-90": "circle 1s forwards",
    "progress-65": "circle 1s forwards",
    "progress-75": "circle 1s forwards",
    "progress-85": "circle 1s forwards",
  }
} */




@layer utilities {

  /* Progress Bar Animation */
  @layer utilities {
    @keyframes fill {
      0% {
        transform: scaleX(0);
      }

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

    .animate-fill {
      animation: fill 1.5s ease forwards;
    }
  }


  .animate-fill-90 {
    animation: fill 1.5s ease forwards;
  }

  .animate-fill-60 {
    animation: fill 1.5s ease forwards;
  }

  .animate-fill-85 {
    animation: fill 1.5s ease forwards;
  }

  .animate-fill-50 {
    animation: fill 1.5s ease forwards;
  }

  /* Radial Skill Animation */
  @keyframes circle {
    0% {
      stroke-dashoffset: 472;
    }

    100% {
      stroke-dashoffset: calc(472 - (472 * var(--value) / 100));
    }
  }

  .animate-progress-90 {
    --value: 90;
    stroke-dasharray: 472;
    animation: circle 1.5s ease forwards;
  }

  .animate-progress-65 {
    --value: 65;
    stroke-dasharray: 472;
    animation: circle 1.5s ease forwards;
  }

  .animate-progress-75 {
    --value: 75;
    stroke-dasharray: 472;
    animation: circle 1.5s ease forwards;
  }

  .animate-progress-85 {
    --value: 85;
    stroke-dasharray: 472;
    animation: circle 1.5s ease forwards;
  }
}

/* ---professional------------ */

@layer utilities {
  @keyframes circle {
    0% {
      stroke-dashoffset: 472;
    }

    100% {
      stroke-dashoffset: calc(472 - (472 * var(--value) / 100));
    }
  }

  .progress-ring {
    stroke-dasharray: 472;
    animation: circle 1.6s ease forwards;
  }
}









@layer utilities {

  @keyframes radial90 {
    from {
      stroke-dashoffset: 251.2;
    }

    to {
      stroke-dashoffset: 25.12;
    }
  }

  .animate-radial-90 {
    animation: radial90 2s ease forwards;
  }



  @keyframes radial65 {
    from {
      stroke-dashoffset: 251.2;
    }

    to {
      stroke-dashoffset: 87.92;
    }
  }

  @keyframes radial75 {
    from {
      stroke-dashoffset: 251.2;
    }

    to {
      stroke-dashoffset: 62.8;
    }
  }

  @keyframes radial85 {
    from {
      stroke-dashoffset: 251.2;
    }

    to {
      stroke-dashoffset: 37.68;
    }
  }
  .animate-radial-65 {
    animation: radial65 2s ease forwards;
  }

  .animate-radial-75 {
    animation: radial75 2s ease forwards;
  }

  .animate-radial-85 {
    animation: radial85 2s ease forwards;
  }


}



/* custom css */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}