/* CloudForce Solutions - Animations Stylesheet */

/* Fade-in animation for elements */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Scale-in animation for cards */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide-in animation from left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

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

/* Slide-in animation from right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

/* Rotate-in animation for icons */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-30deg) scale(0.8);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* Animation classes that can be applied to elements */
.animate {
    animation-duration: 0.7s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.fade-in {
    animation-name: fadeIn;
}

.scale-in {
    animation-name: scaleIn;
}

.slide-in-left {
    animation-name: slideInLeft;
}

.slide-in-right {
    animation-name: slideInRight;
}

.rotate-in {
    animation-name: rotateIn;
}

/* Stagger animations for multiple items */
.card:nth-child(1),
.portfolio-item:nth-child(1) {
    animation-delay: 0.1s;
    animation-name: scaleIn;
}

.card:nth-child(2),
.portfolio-item:nth-child(2) {
    animation-delay: 0.2s;
    animation-name: scaleIn;
}

.card:nth-child(3),
.portfolio-item:nth-child(3) {
    animation-delay: 0.3s;
    animation-name: scaleIn;
}

.card:nth-child(4),
.portfolio-item:nth-child(4) {
    animation-delay: 0.4s;
    animation-name: scaleIn;
}

.card:nth-child(5),
.portfolio-item:nth-child(5) {
    animation-delay: 0.5s;
    animation-name: scaleIn;
}

.card:nth-child(6),
.portfolio-item:nth-child(6) {
    animation-delay: 0.6s;
    animation-name: scaleIn;
}

/* Animation for the hero section elements */
.hero-content h1 {
    animation: slideInLeft 1s ease-out;
}

.hero-content p {
    animation: slideInLeft 1s ease-out 0.3s;
    animation-fill-mode: both;
}

.hero-buttons {
    animation: fadeIn 1s ease-out 0.6s;
    animation-fill-mode: both;
}

.hero-image {
    animation: slideInRight 1s ease-out;
}

/* Continuous subtle animations for certain elements */
.card-icon i {
    transition: transform 0.5s ease;
}

.card:hover .card-icon i {
    transform: rotateY(180deg);
}

/* Pulse animation for CTA buttons */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(1, 118, 211, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(1, 118, 211, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(1, 118, 211, 0);
    }
}

.cta .btn {
    animation: pulse 2s infinite;
}

/* Counter animation for statistics */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.stat-value {
    animation: countUp 1s ease-out;
}

/* Animation for form success message */
@keyframes bounceIn {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }

    60% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.form-success-message:not(.hidden) {
    animation: bounceIn 0.8s ease;
}