/* Animations for Portfolio Website */

/* Typing Animation */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* Blink Caret Animation */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--first-color) }
}

/* Fade In Animation */
@keyframes fadeIn {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Down Animation */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Up Animation */
@keyframes fadeInUp {
    from { 
        opacity: 0;
        transform: translateY(30px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale In Animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Gradient Flow Animation */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Float Image Animation */
@keyframes floatImage {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% { transform: translateY(0) translateX(-50%); }
    50% { transform: translateY(-10px) translateX(-50%); }
}

/* Line Grow Animation */
@keyframes lineGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Skill Fill Animation */
@keyframes skillFill {
    from { width: 0; }
    to { width: var(--skill-level); }
}

/* Slide In Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Card Entry Animation */
@keyframes cardEntry {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animation Classes */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.scale-in {
    animation: scaleIn 1s ease-out forwards;
}

.float {
    animation: floatImage 4s ease-in-out infinite;
}

.bounce {
    animation: bounce 2s infinite;
}

.slide-in {
    animation: slideIn 1s ease-out forwards;
}

.card-entry {
    animation: cardEntry 0.8s ease-out forwards;
}

/* Animation Delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Base Animation Properties */
[class*="animate-"] {
    opacity: 0;
    animation-fill-mode: both;
}

/* Utility Animation Classes */
.animate-once {
    animation-iteration-count: 1;
}

.animate-infinite {
    animation-iteration-count: infinite;
}

.animate-fast {
    animation-duration: 0.5s;
}

.animate-slow {
    animation-duration: 1.5s;
}