/* ==========================================================================
   SCROLL & TRANSITION ANIMATIONS
   Scroll-triggered effects, page transitions, and parallax animations
   ========================================================================== */

/* Scroll Progress Indicators */
@keyframes progressBar {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

/* Parallax Effects */
@keyframes parallaxFloat {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-20px) translateX(10px);
    }
}

@keyframes parallaxSlow {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50px);
    }
}

@keyframes parallaxFast {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100px);
    }
}

/* Scroll-Triggered Animations */
@keyframes slideInOnScroll {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes scaleInOnScroll {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateInOnScroll {
    0% {
        opacity: 0;
        transform: rotate(-10deg) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* Card Animations */
@keyframes cardSlideIn {
    0% {
        opacity: 0;
        transform: translateY(50px) rotateX(10deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

@keyframes cardSlideLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px) rotateY(20deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
    }
}

@keyframes cardSlideRight {
    0% {
        opacity: 0;
        transform: translateX(100px) rotateY(-20deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
    }
}

/* Text Reveal Animations */
@keyframes textReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
        clip-path: inset(100% 0 0 0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes textSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes textKinetic {
    0% {
        opacity: 0;
        transform: translateY(50px) rotateX(90deg);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-10px) rotateX(-10deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

/* Typing Animations */
@keyframes typing {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes typeWriter {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@keyframes blink {
    0%, 50% { border-color: transparent; }
    51%, 100% { border-color: #6366f1; }
}

@keyframes cursorBlink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

@keyframes moveCursor {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}

/* Counter Animations */
@keyframes countUp {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes numberCount {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes metricCount {
    0% {
        transform: translateY(10px) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Progress Bar Animations */
@keyframes barFill {
    0% {
        width: 0%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: var(--progress-width, 100%);
        opacity: 1;
    }
}

@keyframes growBar {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes skillFill {
    0% {
        width: 0%;
    }
    100% {
        width: var(--skill-level, 100%);
    }
}

@keyframes chartGrow {
    0% {
        height: 0%;
        opacity: 0;
    }
    100% {
        height: var(--chart-height, 100%);
        opacity: 1;
    }
}

@keyframes chartBarGrow {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

/* Drawing Animations */
@keyframes drawLine {
    0% {
        stroke-dasharray: 0 100;
    }
    100% {
        stroke-dasharray: 100 0;
    }
}

@keyframes drawCircle {
    0% {
        stroke-dasharray: 0 628;
    }
    100% {
        stroke-dasharray: 628 0;
    }
}

/* Scene Sequence Animation */
@keyframes sceneSequence {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(50px);
    }
    20% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    80% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
}

/* Step Progress Animation */
@keyframes stepProgress {
    0% {
        width: 0%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}

/* Highlight and Sweep Effects */
@keyframes highlightSweep {
    0% {
        background-size: 0% 100%;
    }
    100% {
        background-size: 100% 100%;
    }
}

@keyframes patternReveal {
    0% {
        clip-path: circle(0% at 50% 50%);
    }
    100% {
        clip-path: circle(100% at 50% 50%);
    }
}

/* Trail and Movement Effects */
@keyframes trailMove {
    0% {
        transform: translateX(-100px) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(100px) scale(0);
        opacity: 0;
    }
}

/* Utility Classes for Scroll Effects */
.scroll-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.scroll-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease;
}

.scroll-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.scroll-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease;
}

.scroll-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.scroll-scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s ease;
}

.scroll-scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

.scroll-rotate-in {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
    transition: all 0.8s ease;
}

.scroll-rotate-in.visible {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Staggered Animation Delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }
.stagger-7 { animation-delay: 0.7s; }
.stagger-8 { animation-delay: 0.8s; }
.stagger-9 { animation-delay: 0.9s; }
.stagger-10 { animation-delay: 1s; }