/* Custom Animations for DevOps Website */

/* Button Hover Effects */
.blc-btn {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.blc-btn:hover {
    transform: translateY(-5px);
}

.blc-btn:hover .btn-shape {
    animation: pulse 1.5s infinite;
}

/* Hero Section Image Animations */
.shape img {
    transition: all 0.5s ease;
}

.shape--one img:hover {
    filter: drop-shadow(0 0 10px rgba(174, 109, 254, 0.5));
    transform: scale(1.03) rotate(1deg);
}

.shape--two img:hover {
    animation: float 3s ease-in-out infinite;
}

/* Brand Logo Animations */
.cs-brand-item .xb-inner {
    transition: all 0.3s ease;
    overflow: hidden;
}

.cs-brand-item .xb-inner:hover {
    transform: translateY(-8px);
}

.cs-brand-item .xb-inner:hover .xb-img img {
    animation: pulse-light 1.5s infinite;
}

/* Feature Icons Animation */
.cs-feature-item .xb-item--icons {
    transition: all 0.4s ease;
    transform-origin: center;
}

.cs-feature-item:hover .xb-item--icons {
    transform: rotateY(180deg);
}

/* Testimonial Image Animation */
.cs-tes-item .xb-item--img {
    transition: all 0.5s ease;
    overflow: hidden;
}

.cs-tes-item .xb-item--img img {
    transition: all 0.5s ease;
}

.cs-tes-item:hover .xb-item--img img {
    transform: scale(1.1);
}

/* About Section Image Animation */
.cs-about_right .xb-img {
    transition: all 0.5s ease;
    overflow: hidden;
}

.cs-about_right:hover .xb-img img {
    animation: subtle-shake 2s infinite;
}

/* Backtotop Animation */
.xb-backtotop a {
    transition: all 0.3s ease;
}

.xb-backtotop a:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(67, 29, 171, 0.3);
}

.xb-backtotop a:hover i {
    animation: bounce 1s infinite;
}

/* Custom Keyframes */
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

@keyframes pulse-light {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.2);
    }
    100% {
        filter: brightness(1);
    }
}

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

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes subtle-shake {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(1deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-1deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Additional Interactive Elements */

/* Service Items */
.cs-service-item {
    transition: all 0.4s ease;
}

.cs-service-item:hover {
    transform: translateY(-10px);
}

.cs-service-item:hover .xb-item--icon img {
    animation: spin-slow 6s linear infinite;
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* SVG Button Shapes Animation */
.blc-btn:hover svg path {
    animation: glow 1.5s infinite alternate;
}

@keyframes glow {
    from {
        filter: drop-shadow(0 0 2px rgba(174, 109, 254, 0.5));
    }
    to {
        filter: drop-shadow(0 0 8px rgba(174, 109, 254, 0.8));
    }
}

/* Preloader Animation Enhancement */
.xb-dual-ring {
    transition: all 0.5s ease;
}

.xb-loader:hover .xb-dual-ring {
    transform: scale(1.1);
}