/* Fast CSS Animations - Optimized for Performance */

/* Base animation states for scroll-triggered elements */
.ServiceCard, .PortfolioItem, .TestimonialCard, .StatItem {
    opacity: 0;
    transform: translateY(20px) translateZ(0);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Animated state for scroll-triggered elements */
.ServiceCard.animate-in, 
.PortfolioItem.animate-in, 
.TestimonialCard.animate-in, 
.StatItem.animate-in {
    opacity: 1;
    transform: translateY(0) translateZ(0);
    will-change: auto;
}

/* Staggered animation delays for multiple elements */
.ServiceCard:nth-child(1) { transition-delay: 0ms; }
.ServiceCard:nth-child(2) { transition-delay: 100ms; }
.ServiceCard:nth-child(3) { transition-delay: 200ms; }
.ServiceCard:nth-child(4) { transition-delay: 300ms; }

.PortfolioItem:nth-child(1) { transition-delay: 0ms; }
.PortfolioItem:nth-child(2) { transition-delay: 80ms; }
.PortfolioItem:nth-child(3) { transition-delay: 160ms; }
.PortfolioItem:nth-child(4) { transition-delay: 240ms; }
.PortfolioItem:nth-child(5) { transition-delay: 320ms; }
.PortfolioItem:nth-child(6) { transition-delay: 400ms; }

/* Hero section animations - triggered by .hero-animated class */
.hero-animated .HeroBadge,
.hero-animated .HeadingLine,
.hero-animated .HeroSubheading,
.hero-animated .HeroCTAButtons,
.hero-animated .HeroStats,
.hero-animated .ScrollIndicator {
    opacity: 0;
    transform: translateY(10px);
    animation: heroFadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Staggered hero animations */
.hero-animated .HeroBadge { animation-delay: 0.1s; }
.hero-animated .HeadingLine:nth-child(1) { animation-delay: 0.2s; }
.hero-animated .HeadingLine:nth-child(2) { animation-delay: 0.3s; }
.hero-animated .HeadingLine:nth-child(3) { animation-delay: 0.4s; }
.hero-animated .HeroSubheading { animation-delay: 0.5s; }
.hero-animated .HeroCTAButtons { animation-delay: 0.6s; }
.hero-animated .HeroStats { animation-delay: 0.7s; }
.hero-animated .ScrollIndicator { animation-delay: 0.8s; }

@keyframes heroFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Button ripple effect using CSS */
.PrimaryButton, .SecondaryButton {
    position: relative;
    overflow: hidden;
    transform: translateZ(0); /* Force hardware acceleration */
}

.PrimaryButton::before, .SecondaryButton::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    pointer-events: none;
    opacity: 0;
}

.PrimaryButton:active::before, .SecondaryButton:active::before {
    width: 300px;
    height: 300px;
    opacity: 1;
    transition: width 0.1s ease, height 0.1s ease, opacity 0.1s ease;
}

/* Loader animation */
.loader {
    opacity: 1;
    transition: opacity 0.3s ease;
    animation: loaderFadeOut 0.3s ease 1s forwards;
}

@keyframes loaderFadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Floating orbs optimized animation */
.FloatingOrb {
    animation: floatOptimized 6s ease-in-out infinite;
    will-change: transform;
}

.FloatingOrb:nth-child(1) { animation-delay: 0s; }
.FloatingOrb:nth-child(2) { animation-delay: 2s; }
.FloatingOrb:nth-child(3) { animation-delay: 4s; }

@keyframes floatOptimized {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-10px) rotate(120deg);
    }
    66% {
        transform: translateY(5px) rotate(240deg);
    }
}

/* Parallax effect using CSS custom properties */
.HeroContainer {
    --mouse-x: 0.5;
    --mouse-y: 0.5;
}

.FloatingOrb {
    transform: translate(
        calc((var(--mouse-x) - 0.5) * 10px),
        calc((var(--mouse-y) - 0.5) * 10px)
    );
    transition: transform 0.1s ease-out;
}

.FloatingOrb:nth-child(2) {
    transform: translate(
        calc((var(--mouse-x) - 0.5) * 15px),
        calc((var(--mouse-y) - 0.5) * 15px)
    );
}

.FloatingOrb:nth-child(3) {
    transform: translate(
        calc((var(--mouse-x) - 0.5) * 20px),
        calc((var(--mouse-y) - 0.5) * 20px)
    );
}

/* Performance optimizations */
.ServiceCard, .PortfolioItem, .TestimonialCard, .StatItem,
.HeroBadge, .HeadingLine, .HeroSubheading, .HeroCTAButtons,
.HeroStats, .ScrollIndicator, .FloatingOrb {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* CSS-based parallax effects for floating elements */
.FloatingElement {
    animation: floatParallax 20s ease-in-out infinite;
    will-change: transform;
}

.FloatingElement:nth-child(1) { animation-delay: 0s; animation-duration: 15s; }
.FloatingElement:nth-child(2) { animation-delay: 5s; animation-duration: 18s; }
.FloatingElement:nth-child(3) { animation-delay: 10s; animation-duration: 22s; }

@keyframes floatParallax {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(90deg);
    }
    50% {
        transform: translateY(-30px) rotate(180deg);
    }
    75% {
        transform: translateY(-15px) rotate(270deg);
    }
}

/* CSS-based parallax for orbs */
.Orb {
    animation: orbParallax 25s linear infinite;
    will-change: transform;
}

.Orb:nth-child(1) { animation-delay: 0s; animation-duration: 20s; }
.Orb:nth-child(2) { animation-delay: 7s; animation-duration: 25s; }
.Orb:nth-child(3) { animation-delay: 14s; animation-duration: 30s; }

@keyframes orbParallax {
    0% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.1);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}

/* Floating cards with CSS animations */
.FloatingCard {
    animation: cardFloat 8s ease-in-out infinite;
    will-change: transform;
}

.FloatingCard:nth-child(1) { animation-delay: 0s; }
.FloatingCard:nth-child(2) { animation-delay: 2s; }
.FloatingCard:nth-child(3) { animation-delay: 4s; }

@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0px) rotateX(0deg) rotateY(0deg);
    }
    33% {
        transform: translateY(-10px) rotateX(2deg) rotateY(1deg);
    }
    66% {
        transform: translateY(5px) rotateX(-1deg) rotateY(-2deg);
    }
}

/* Main card subtle animation */
.MainCard {
    animation: mainCardFloat 12s ease-in-out infinite;
    will-change: transform;
}

@keyframes mainCardFloat {
    0%, 100% {
        transform: translateY(-10px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: translateY(-15px) rotateX(1deg) rotateY(1deg);
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .ServiceCard, .PortfolioItem, .TestimonialCard, .StatItem,
    .HeroBadge, .HeadingLine, .HeroSubheading, .HeroCTAButtons,
    .HeroStats, .ScrollIndicator, .FloatingOrb, .FloatingElement,
    .Orb, .FloatingCard, .MainCard {
        animation: none !important;
        transition: opacity 0.2s ease;
    }

    .hero-animated .HeroBadge,
    .hero-animated .HeadingLine,
    .hero-animated .HeroSubheading,
    .hero-animated .HeroCTAButtons,
    .hero-animated .HeroStats,
    .hero-animated .ScrollIndicator {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .FloatingOrb, .FloatingElement, .Orb, .FloatingCard, .MainCard {
        transform: none !important;
    }
}