/* Scroll Animations */

/* Base animation variables */
:root {
    --animation-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --animation-duration: 0.8s;
    --fade-in-duration: 1s;
    --slide-in-duration: 1s;
}

/* Section animations */
.animate-section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity var(--animation-duration) var(--animation-timing),
                transform var(--animation-duration) var(--animation-timing);
}

.section-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Element animations */
.animate-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--animation-duration) var(--animation-timing),
                transform var(--animation-duration) var(--animation-timing);
    transition-delay: var(--animation-delay, 0s);
}

.element-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Skill item animations */
.animate-skill {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s var(--animation-timing),
                transform 0.5s var(--animation-timing);
    transition-delay: var(--animation-delay, 0s);
}

.element-visible.animate-skill {
    opacity: 1;
    transform: translateX(0);
}

/* Hero section special animations */
.hero-content.animate-element {
    transform: translateY(40px) scale(0.95);
}

.hero-content.element-visible {
    transform: translateY(0) scale(1);
}

.hero-image.animate-element {
    transform: translateY(30px) scale(0.9);
    transition-delay: 0.2s;
}

.hero-image.element-visible {
    transform: translateY(0) scale(1);
}

/* Timeline animations */
.modern-timeline-item.animate-element {
    transform: translateX(-30px);
}

.modern-timeline-item.element-visible {
    transform: translateX(0);
}

/* Skill category animations */
.modern-skill-category.animate-element {
    transform: translateY(40px) scale(0.95);
}

.modern-skill-category.element-visible {
    transform: translateY(0) scale(1);
}

/* Different animation for different sections */
#about.animate-section {
    transform: translateY(60px);
    transition-delay: 0.1s;
}

#skills.animate-section {
    transform: translateY(70px);
    transition-delay: 0.2s;
}

#contact.animate-section {
    transform: translateY(80px);
    transition-delay: 0.3s;
}

/* Custom animations for sections */
#home.animate-section {
    transform: translateY(0) scale(0.98);
    opacity: 0;
}

#home.section-visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}

#about.animate-section {
    transform: translateY(40px);
}

#skills.animate-section {
    transform: translateX(-40px);
}

#skills.section-visible {
    transform: translateX(0);
}

#contact.animate-section {
    transform: translateY(50px) scale(0.95);
}

/* Ensure animation doesn't play if user prefers reduced motion */
/* Additional animation for section transitions */
section {
    transition: transform 0.6s ease-out;
}

section:not(.section-visible) + section.section-visible {
    transform: translateY(-20px);
}

/* Accessibility - respect user preferences */
@media (prefers-reduced-motion: reduce) {
    .animate-section,
    .animate-element,
    .animate-skill,
    section {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}