/* ============================================

   CABLYS Website - Animations

   Smooth, Professional Animations

   ============================================ */



/* Keyframe Animations */

@keyframes float {

    0%, 100% {

        transform: translateY(0) rotate(0deg);

    }

    33% {

        transform: translateY(-20px) rotate(5deg);

    }

    66% {

        transform: translateY(10px) rotate(-5deg);

    }

}



@keyframes slideInRight {

    from {

        opacity: 0;

        transform: translateX(30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideInLeft {

    from {

        opacity: 0;

        transform: translateX(-30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes slideInDown {

    from {

        opacity: 0;

        transform: translateY(-30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}



@keyframes fadeInScale {

    from {

        opacity: 0;

        transform: scale(0.9);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}



@keyframes pulse {

    0%, 100% {

        opacity: 1;

        transform: scale(1);

    }

    50% {

        opacity: 0.7;

        transform: scale(1.1);

    }

}



@keyframes progressFill {

    from {

        width: 0;

    }

}



@keyframes shimmer {

    0% {

        background-position: -1000px 0;

    }

    100% {

        background-position: 1000px 0;

    }

}



@keyframes bounce {

    0%, 100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}



@keyframes spin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}



@keyframes gradient {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}



/* Animation Classes */

.animate-fade-in {

    animation: fadeIn 0.6s ease-out;

}



.animate-slide-in-right {

    animation: slideInRight 0.8s ease-out;

}



.animate-slide-in-left {

    animation: slideInLeft 0.8s ease-out;

}



.animate-slide-in-up {

    animation: slideInUp 0.8s ease-out;

}



.animate-slide-in-down {

    animation: slideInDown 0.8s ease-out;

}



.animate-fade-in-scale {

    animation: fadeInScale 0.6s ease-out;

}



.animate-pulse {

    animation: pulse 2s ease-in-out infinite;

}



.animate-bounce {

    animation: bounce 1s ease-in-out infinite;

}



.animate-spin {

    animation: spin 1s linear infinite;

}



/* Hover Effects */

.hover-lift {

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.hover-lift:hover {

    transform: translateY(-4px);

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

}



.hover-scale {

    transition: transform 0.3s ease;

}



.hover-scale:hover {

    transform: scale(1.05);

}



.hover-glow {

    transition: box-shadow 0.3s ease;

}



.hover-glow:hover {

    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);

}



/* Scroll Animations */

.scroll-reveal {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.6s ease, transform 0.6s ease;

}



.scroll-reveal.revealed {

    opacity: 1;

    transform: translateY(0);

}



/* Loading States */

.loading {

    position: relative;

    pointer-events: none;

    opacity: 0.6;

}



.loading::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 20px;

    height: 20px;

    margin: -10px 0 0 -10px;

    border: 2px solid #f3f4f6;

    border-top-color: #3b82f6;

    border-radius: 50%;

    animation: spin 0.6s linear infinite;

}



/* Skeleton Loading */

.skeleton {

    background: linear-gradient(

        90deg,

        #f3f4f6 0%,

        #e5e7eb 50%,

        #f3f4f6 100%

    );

    background-size: 200% 100%;

    animation: shimmer 1.5s ease-in-out infinite;

    border-radius: 0.5rem;

}



/* Transition Groups */

.transition-all {

    transition: all 0.3s ease;

}



.transition-colors {

    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;

}



.transition-transform {

    transition: transform 0.3s ease;

}



.transition-opacity {

    transition: opacity 0.3s ease;

}



/* Stagger Animations */

.stagger-item {

    opacity: 0;

    transform: translateY(20px);

    animation: slideInUp 0.6s ease-out forwards;

}



.stagger-item:nth-child(1) { animation-delay: 0.1s; }

.stagger-item:nth-child(2) { animation-delay: 0.2s; }

.stagger-item:nth-child(3) { animation-delay: 0.3s; }

.stagger-item:nth-child(4) { animation-delay: 0.4s; }

.stagger-item:nth-child(5) { animation-delay: 0.5s; }

.stagger-item:nth-child(6) { animation-delay: 0.6s; }



/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}