/* --- PROFESSIONAL MOTION DESIGN SYSTEM (MODERNIZED v3.0) --- */

/* 1. Reveal Blur Up (Modern Text/Content) - Replaces standard Fade Up */
@keyframes revealBlurUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.anim-blur-up {
    opacity: 0;
    will-change: transform, opacity, filter;
}

.anim-blur-up.visible {
    animation: revealBlurUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. Slide In From Side (Headings) */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.anim-slide-left {
    opacity: 0;
}

.anim-slide-left.visible {
    animation: slideInLeft 1.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.anim-slide-right {
    opacity: 0;
}

.anim-slide-right.visible {
    animation: slideInRight 1.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 3. Reveal Fade Up (Legacy Support but Smoother) */
@keyframes revealFadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

.anim-text-reveal {
    opacity: 0;
}

.anim-text-reveal.visible,
.anim-fade-up.visible {
    /* Legacy hook */
    animation: revealBlurUp 1.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    /* Upgraded to BlurUp for all */
}

/* Force standard Fade Up if legacy class is used without .visible yet */
body .anim-fade-up {
    opacity: 0;
    transform: translateY(20px);
}

/* 4. Soft Image Scale In (Images) */
@keyframes imageScaleIn {
    from {
        opacity: 0;
        transform: scale(1.1);
        filter: blur(10px) grayscale(100%);
    }

    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) grayscale(0%);
    }
}

.anim-img-scale {
    opacity: 0;
    overflow: hidden;
    will-change: transform, opacity, filter;
}

.anim-img-scale.visible {
    animation: imageScaleIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 5. Section Fade (Backgrounds/Containers) */
@keyframes sectionFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.anim-section-fade {
    opacity: 0;
}

.anim-section-fade.visible {
    animation: sectionFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 6. Staggered Delays */
.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}

.delay-600 {
    animation-delay: 0.6s;
}

.delay-800 {
    animation-delay: 0.8s;
}

/* 7. Hover Interactions */
.btn-hover {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    display: inline-block;
}

.btn-hover:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.hover-lift {
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* 8. Specific Overrides */
/* Upgrade Hero Text to Slide In */
body .anim-hero-text {
    opacity: 0;
}

.anim-hero-text.visible {
    animation: slideInLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.anim-hero-img {
    opacity: 0;
}

.anim-hero-img.visible {
    animation: imageScaleIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Card Entry */
.anim-card-enter,
.project-card,
.service-card,
.testi-card {
    opacity: 0;
}

.anim-card-enter.visible,
.project-card.visible,
.service-card.visible,
.testi-card.visible {
    animation: revealBlurUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Project Section Titles */
.section-header h3 {
    opacity: 0;
}

.section-header h3.visible {
    animation: slideInRight 1.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Ensure mobile compatibility by defaulting to visible if JS fails (optional fallback, 
   but with our JS observer it should be fine. The key is NOT hiding it via !important like before) */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}