/* ===================================
   KEYFRAME ANIMATIONS
   =================================== */

@keyframes bubbleFloat {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-110vh) translateX(30px);
        opacity: 0;
    }
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(20px, -20px);
    }
    50% {
        transform: translate(-10px, 10px);
    }
    75% {
        transform: translate(15px, 15px);
    }
}

@keyframes waveSlide {
    0% {
        transform: translateX(-50%) rotate(-2deg);
    }
    100% {
        transform: translateX(0%) rotate(-2deg);
    }
}

@keyframes pulseDot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

@keyframes ringPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.02);
    }
}

@keyframes scanLine {
    0% {
        top: 10%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: 90%;
        opacity: 0;
    }
}

@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
}

@keyframes slowSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ===================================
   SCROLL ANIMATIONS
   =================================== */

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-up-delay-1 {
    transition-delay: 0.15s;
}

.fade-in-up-delay-2 {
    transition-delay: 0.3s;
}

/* ===================================
   HOVER MICRO-INTERACTIONS
   =================================== */

.service-card,
.testimonial-card,
.eco-stat-card,
.value-card,
.team-card,
.pricing-card,
.tech-spec-card {
    will-change: transform;
}

/* Button press effect */
.btn:active {
    transform: translateY(0) scale(0.98);
}

/* Link hover underline animation */
.nav-link,
.service-card-link,
.footer-links a {
    will-change: color;
}