/* Additional styles for GSAP animations */

/* Ensure smooth animations */
* {
    box-sizing: border-box;
}

/* Animation classes for GSAP */
.animate-card {
    /* These will be animated by GSAP */
}

.animate-header {
    /* These will be animated by GSAP */
}

.animate-text {
    /* These will be animated by GSAP */
}

.animate-icon {
    /* These will be animated by GSAP */
}

.animate-message {
    /* These will be animated by GSAP */
}

.hover-card {
    /* Hover effects handled by GSAP */
}

.hover-button {
    /* Hover effects handled by GSAP */
}

.click-button {
    /* Click effects handled by GSAP */
}

.loading-button {
    /* Loading effects handled by GSAP */
}

.scroll-fade {
    /* Scroll animations handled by GSAP */
}

.scroll-slide-left {
    /* Scroll animations handled by GSAP */
}

.scroll-slide-right {
    /* Scroll animations handled by GSAP */
}

/* Ensure GSAP animations work smoothly */
.gsap-marker-scroller-start,
.gsap-marker-scroller-end,
.gsap-marker-start,
.gsap-marker-end {
    display: none;
}

/* Performance optimizations for animations */
.animate-card,
.hover-card,
.hover-button {
    will-change: transform, opacity;
}

/* Ensure proper stacking context for animations */
.animate-message {
    z-index: 1000;
}

/* Smooth transitions for form elements */
input, textarea, select {
    transition: all 0.2s ease;
}

/* Ensure buttons maintain their state during animations */
button:disabled {
    pointer-events: none;
}

/* Loading state for buttons */
.loading-button.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Ensure proper spacing for animated elements */
.animate-card + .animate-card {
    margin-top: 1rem;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .animate-card {
        /* Reduce animation intensity on mobile for better performance */
    }
    
    .hover-card:hover {
        /* Disable hover effects on touch devices */
        transform: none;
    }
}