/* Animations derived from Cargon site - Cleaned up */

/* Navbar Sticky Transition */
.navbar-scrolled {
    @apply bg-white shadow-md transition-all duration-300;
}

/* Service Card Hover */
.service-card {
    @apply transition-all duration-500 transform hover:-translate-y-2 hover:shadow-xl;
}

/* Hero Text Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade-in-up {
    opacity: 0;
    /* Default hidden */
    animation-fill-mode: forwards;
}

.fade-in-up.animate-active {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Hero Text Fade In Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade-in-left {
    opacity: 0;
    /* Default hidden */
    animation-fill-mode: forwards;
}

.fade-in-left.animate-active {
    animation: fadeInLeft 0.8s ease-out forwards;
}

/* Image Scale Reveal */
@keyframes scaleReveal {
    from {
        transform: scale(1.1);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.scale-reveal {
    opacity: 0;
    /* Default hidden */
    animation-fill-mode: forwards;
}

.scale-reveal.animate-active {
    animation: scaleReveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Decoration Elements Floating */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.floating {
    animation: float 6s ease-in-out infinite;
}

/* Truck/Car Movement */
@keyframes driveRight {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.drive-in {
    animation: driveRight 1.5s ease-out forwards;
}