/* Base skill bars (start small, invisible) */
.skill-bar {
  width: 10%;
  height: 100%;
  background-color: var(--site-color-01);
  opacity: 0;
}

/* Fade + Grow animations */
.pybash.animate {
  animation: growPybash 2s ease forwards, fadeIn 1s ease forwards;
  animation-delay: 0s, 0s;
}

.cicd.animate {
  animation: growCicd 2s ease forwards, fadeIn 1s ease forwards;
  animation-delay: 0.2s, 0.2s;
}

.infra.animate {
  animation: growInfra 2s ease forwards, fadeIn 1s ease forwards;
  animation-delay: 0.4s, 0.4s;
}

.container.animate {
  animation: growContainer 2s ease forwards, fadeIn 1s ease forwards;
  animation-delay: 0.6s, 0.6s;
}

.aws.animate {
  animation: growAws 2s ease forwards, fadeIn 1s ease forwards;
  animation-delay: 0.8s, 0.8s;
}

.monitor.animate {
  animation: growMonitor 2s ease forwards, fadeIn 1s ease forwards;
  animation-delay: 1s, 1s;
}

/* Keyframes for growth */
@keyframes growPybash { from { width: 10%; } to { width: 85%; } }
@keyframes growCicd    { from { width: 10%; } to { width: 70%; } }
@keyframes growInfra   { from { width: 10%; } to { width: 70%; } }
@keyframes growContainer { from { width: 10%; } to { width: 90%; } }
@keyframes growAws     { from { width: 10%; } to { width: 80%; } }
@keyframes growMonitor { from { width: 10%; } to { width: 70%; } }

/* Shared fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Animation for category boxes */
/* Initial state */
.index-category-box {
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.9s ease-out, opacity 0.9s ease-out;
}

/* Final state on scroll */
.index-category-box.animate {
  transform: translateY(0);
  opacity: 1;
}


main {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

main.animate {
  opacity: 1;
  transform: translateY(0);
}