/* animations.css - Custom animations and transitions */

/* Photo rustling animation */
@keyframes rustle {
    0%, 100% {
        transform: translate(var(--base-x), var(--base-y)) rotate(var(--base-rotation));
    }
    25% {
        transform: translate(calc(var(--base-x) + 5px), calc(var(--base-y) - 3px)) rotate(calc(var(--base-rotation) + 2deg));
    }
    50% {
        transform: translate(calc(var(--base-x) - 3px), calc(var(--base-y) + 5px)) rotate(calc(var(--base-rotation) - 1deg));
    }
    75% {
        transform: translate(calc(var(--base-x) + 2px), calc(var(--base-y) - 2px)) rotate(calc(var(--base-rotation) + 1deg));
    }
}

/* Scatter in like leaves - animation */
@keyframes leafFall {
    0% {
        transform: 
            translate(
                calc(var(--start-x) * 1px), 
                calc(var(--start-y) * 1px)
            ) 
            rotate(calc(var(--spin) * 1deg));
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

/* Pulse animation for buttons */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(139, 92, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
    }
}

/* Gradient shift animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Typing indicator animation */
@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
}

/* Smooth slide animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Bounce animation for CTAs */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Glitch effect for tech feel */
@keyframes glitch {
    0%, 100% {
        text-shadow: 
            2px 2px 0 rgba(139, 92, 246, 0.5),
            -2px -2px 0 rgba(37, 99, 235, 0.5);
    }
    25% {
        text-shadow: 
            -2px 2px 0 rgba(139, 92, 246, 0.5),
            2px -2px 0 rgba(37, 99, 235, 0.5);
    }
    50% {
        text-shadow: 
            2px -2px 0 rgba(139, 92, 246, 0.5),
            -2px 2px 0 rgba(37, 99, 235, 0.5);
    }
}

/* Message fade in */
@keyframes messageFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading dots animation */
@keyframes loadingDots {
    0% {
        content: '.';
    }
    33% {
        content: '..';
    }
    66% {
        content: '...';
    }
}

/* Apply animations */
.photo-item {
    animation: leafFall calc(var(--duration) * 1s) cubic-bezier(0.4, 0.6, 0.5, 1) forwards;
}

.photo-item.rustling {
    animation: rustle 4s ease-in-out infinite;
}

.cta-button:hover {
    animation: pulse 1.5s infinite;
}

.hero-title {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

.message {
    animation: messageFadeIn 0.3s ease;
}

.chat-sidebar.active {
    animation: slideInRight 0.3s ease;
}

.expertise-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.expertise-card:hover {
    animation: bounce 0.5s;
}

/* Loading spinner for async operations */
.loading::after {
    content: '';
    display: inline-block;
    animation: loadingDots 1.5s infinite;
}

/* Smooth transitions for interactive elements */
.photo-item,
.nav-link,
.cta-button,
.control-btn,
.viewer-btn,
.chat-send {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover lift effect */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}