/* ===========================
   ClicPro Mx - animations.css
=========================== */

.cp-btn-primary,
.cp-btn-ghost,
.cp-service-card,
.cp-portfolio-item,
.cp-testimonial,
.cp-location-card,
.cp-step,
.cp-hero-card,
.cp-chip,
.cp-tag {
    transition:
        transform 0.25s ease-out,
        box-shadow 0.25s ease-out,
        background-color 0.25s ease-out,
        border-color 0.25s ease-out,
        color 0.25s ease-out,
        opacity 0.25s ease-out;
}

/* Hover */

.cp-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
}

.cp-btn-ghost:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.75);
}

.cp-service-card:hover,
.cp-portfolio-item:hover,
.cp-testimonial:hover,
.cp-location-card:hover,
.cp-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.14);
}

/* Keyframes */

@keyframes cp-fade-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cp-float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

@keyframes cp-glow {
    0%   { box-shadow: 0 0 0 rgba(255, 75, 154, 0); }
    50%  { box-shadow: 0 0 25px rgba(255, 75, 154, 0.55); }
    100% { box-shadow: 0 0 0 rgba(255, 75, 154, 0); }
}

/* Utility classes */

.cp-animate-fade-up {
    animation: cp-fade-up 0.7s ease-out both;
}

.cp-animate-fade-in {
    animation: cp-fade-in 0.5s ease-out both;
}

.cp-animate-float {
    animation: cp-float 4s ease-in-out infinite;
}

.cp-animate-glow {
    animation: cp-glow 2.5s ease-in-out infinite;
}

.cp-delay-1 { animation-delay: 0.1s; }
.cp-delay-2 { animation-delay: 0.2s; }
.cp-delay-3 { animation-delay: 0.3s; }
.cp-delay-4 { animation-delay: 0.4s; }
.cp-delay-5 { animation-delay: 0.5s; }