/* Advanced Animation Systems - Moyra Capsules Inspired */

/* Page Load Animation System */
.page-load-hidden {
    opacity: 0;
    visibility: hidden;
}

.logo-reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: logoFadeIn var(--duration-spring) var(--ease-spring-out) forwards;
}

.hero-content-reveal {
    opacity: 0;
    transform: translateY(30px);
}

.title-line-reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: titleLineReveal var(--duration-spring) var(--ease-spring-out) forwards;
}

.hero-spring-in {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    animation: heroSpringIn var(--duration-spring) var(--ease-spring-out) forwards;
}

/* Page Load Keyframes */
@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes heroSpringIn {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Floating Animations for Icons (Desktop Only) */
@media (min-width: 1024px) {
    .float-icon {
        animation: floatUp var(--float-duration) ease-in-out infinite;
    }
    
    .float-icon--delay-1 {
        animation-delay: var(--float-delay-1);
    }
    
    .float-icon--delay-2 {
        animation-delay: var(--float-delay-2);
    }
    
    .float-icon--delay-3 {
        animation-delay: var(--float-delay-3);
    }
    
    .float-icon--delay-4 {
        animation-delay: var(--float-delay-4);
    }
}

@keyframes floatUp {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(calc(-1 * var(--float-distance)));
    }
}

/* Enhanced Scroll Reveal Animations */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity var(--duration-parallax) var(--ease-spring-out),
                transform var(--duration-parallax) var(--ease-spring-out);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal--slide-left {
    transform: translateX(-50px);
}

.scroll-reveal--slide-left.revealed {
    transform: translateX(0);
}

.scroll-reveal--slide-right {
    transform: translateX(50px);
}

.scroll-reveal--slide-right.revealed {
    transform: translateX(0);
}

.scroll-reveal--scale {
    transform: scale(0.9);
}

.scroll-reveal--scale.revealed {
    transform: scale(1);
}

/* Staggered Animations */
.stagger-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--duration-spring) var(--ease-spring-out),
                transform var(--duration-spring) var(--ease-spring-out);
}

.stagger-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.stagger-item:nth-child(1) { transition-delay: 0ms; }
.stagger-item:nth-child(2) { transition-delay: var(--duration-stagger); }
.stagger-item:nth-child(3) { transition-delay: calc(var(--duration-stagger) * 2); }
.stagger-item:nth-child(4) { transition-delay: calc(var(--duration-stagger) * 3); }
.stagger-item:nth-child(5) { transition-delay: calc(var(--duration-stagger) * 4); }
.stagger-item:nth-child(6) { transition-delay: calc(var(--duration-stagger) * 5); }

/* Enhanced Button Hover Animations */
.btn {
    position: relative;
    transform: translateZ(0); /* Force GPU acceleration */
    transition: var(--transition-hover);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity var(--duration-micro) var(--ease-spring-gentle);
    pointer-events: none;
}

.btn:hover {
    transform: translateY(var(--hover-lift-small)) scale(var(--hover-scale-small));
}

.btn:hover::before {
    opacity: 1;
}

.btn--primary:hover {
    box-shadow: var(--shadow-hover-md), var(--shadow-glow-primary);
    transform: translateY(var(--hover-lift-small)) scale(var(--hover-scale));
}

.btn--secondary:hover {
    box-shadow: var(--shadow-hover-sm);
    border-color: var(--color-primary-light);
}

.btn--large:hover {
    transform: translateY(var(--hover-lift)) scale(var(--hover-scale));
}

.btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: var(--duration-75);
}

/* Pulse Animation for CTA Buttons */
.btn-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
    }
}

/* Enhanced Card Hover Animations */
.service-card,
.package-card,
.category-card,
.testimonial-card {
    transform: translateZ(0); /* Force GPU acceleration */
    transition: var(--transition-hover);
}

.service-card:hover {
    transform: translateY(var(--hover-lift)) scale(var(--hover-scale-small));
    box-shadow: var(--shadow-hover-lg);
}

.package-card:hover {
    transform: translateY(var(--hover-lift)) scale(var(--hover-scale-small));
    box-shadow: var(--shadow-hover-lg);
}

.package-card--featured:hover {
    transform: translateY(var(--hover-lift-large)) scale(1.03);
    box-shadow: var(--shadow-hover-lg), var(--shadow-glow-primary);
}

.category-card:hover {
    transform: translateY(var(--hover-lift-small)) scale(var(--hover-scale));
    box-shadow: var(--shadow-hover-md);
}

/* Icon Hover Animations */
.service-card__icon,
.category-card__icon,
.process-step__number {
    transition: var(--transition-spring);
}

.service-card:hover .service-card__icon {
    transform: scale(1.1) rotate(5deg);
}

.category-card:hover .category-card__icon {
    transform: scale(1.05) translateY(-2px);
}

.process-step__number {
    transition: var(--transition-bounce);
}

.process-step:hover .process-step__number {
    transform: scale(1.1);
    box-shadow: var(--shadow-hover-sm), var(--shadow-glow-primary);
}

/* Parallax Effects */
.parallax-element {
    transform: translateZ(0); /* Force GPU acceleration */
    transition: transform var(--duration-parallax) linear;
}

.hero__bg-gradient {
    transition: transform var(--duration-parallax) linear;
}

/* Enhanced Testimonials Carousel */
.testimonial-card {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity var(--duration-parallax) var(--ease-spring-out),
                transform var(--duration-parallax) var(--ease-spring-out);
}

.testimonial-card--active {
    opacity: 1;
    transform: translateX(0);
}

.testimonials__nav-btn {
    transition: var(--transition-spring);
}

.testimonials__nav-btn:hover {
    transform: scale(1.2);
    box-shadow: var(--shadow-hover-sm);
}

.testimonials__nav-btn--active {
    transform: scale(1.1);
}

/* Link Hover Animations */
.nav-link,
.footer__link {
    position: relative;
    transition: var(--transition-colors);
}

.nav-link::after {
    transition: transform var(--duration-spring) var(--ease-spring-out);
}

.nav-link:hover::after {
    transform: scaleX(1);
}

/* Social Media Hover Effects */
.footer__social-link {
    transition: var(--transition-spring);
}

.footer__social-link:hover {
    transform: translateY(var(--hover-lift-small)) scale(var(--hover-scale));
    box-shadow: var(--shadow-hover-sm);
}

/* Modal Animations */
.modal {
    transition: opacity var(--duration-spring) var(--ease-spring-out),
                visibility var(--duration-spring) var(--ease-spring-out);
}

.modal__content {
    transition: transform var(--duration-spring) var(--ease-spring-out);
}

.modal.active .modal__content {
    transform: scale(1);
}

/* Form Input Animations */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.newsletter__input:focus {
    transform: scale(1.01);
    transition: var(--transition-spring);
}

/* Loading Animation Enhancement */
.spinner {
    animation: spin var(--duration-1000) linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Notification Slide Animation */
.notification {
    animation: slideInRight var(--duration-spring) var(--ease-spring-out);
}

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

/* Mobile Menu Animation Enhancement */
.mobile-menu {
    transition: transform var(--duration-spring) var(--ease-spring-out);
}

.mobile-menu.active {
    transform: translateY(0);
}

/* Header Scroll Animation */
.header {
    transition: transform var(--duration-spring) var(--ease-spring-out),
                background-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

/* Micro-interactions for Form Elements */
.form-group label {
    transition: var(--transition-colors);
}

.form-group input:focus + label,
.form-group select:focus + label,
.form-group textarea:focus + label {
    color: var(--color-primary);
    transform: scale(1.02);
}

/* Accessibility: Reduced Motion Overrides */
@media (prefers-reduced-motion: reduce) {
    .float-icon {
        animation: none;
    }
    
    .btn-pulse {
        animation: none;
    }
    
    .parallax-element {
        transform: none !important;
    }
    
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .stagger-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    /* Maintain basic hover states but remove complex animations */
    .btn:hover,
    .service-card:hover,
    .package-card:hover,
    .category-card:hover {
        transform: none;
    }
}

/* Performance: GPU Acceleration for Animation Elements */
.btn,
.service-card,
.package-card,
.category-card,
.testimonial-card,
.process-step__number,
.nav-link,
.footer__social-link,
.modal__content,
.header {
    will-change: transform;
}

/* Clean up will-change after animations complete */
.scroll-reveal.revealed {
    will-change: auto;
}

.stagger-item.revealed {
    will-change: auto;
}