/* Animations and Effects */

/* Fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.8s ease-in-out;
}

/* Slide-in from bottom animation */
@keyframes slideInBottom {
    from { 
        transform: translateY(50px);
        opacity: 0;
    }
    to { 
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-bottom {
    animation: slideInBottom 0.8s ease-out;
}

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

.slide-in-left {
    animation: slideInLeft 0.8s ease-out;
}

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

.slide-in-right {
    animation: slideInRight 0.8s ease-out;
}

/* Zoom-in animation */
@keyframes zoomIn {
    from { 
        transform: scale(0.9);
        opacity: 0;
    }
    to { 
        transform: scale(1);
        opacity: 1;
    }
}

.zoom-in {
    animation: zoomIn 0.8s ease-out;
}

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

.bounce {
    animation: bounce 1s;
}

/* Pulse animation */
@keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.05);}
    100% {transform: scale(1);}
}

.pulse {
    animation: pulse 1.5s infinite;
}

/* Shake animation */
@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-5px);}
    20%, 40%, 60%, 80% {transform: translateX(5px);}
}

.shake {
    animation: shake 0.8s;
}

/* Shadow pulse animation */
@keyframes shadowPulse {
    0% {box-shadow: 0 0 0 0 rgba(0, 68, 230, 0.4);}
    70% {box-shadow: 0 0 0 15px rgba(0, 68, 230, 0);}
    100% {box-shadow: 0 0 0 0 rgba(0, 68, 230, 0);}
}

.shadow-pulse {
    animation: shadowPulse 2s infinite;
}

/* Text focus blur animation */
@keyframes textFocusBlur {
    0% {filter: blur(12px); opacity: 0;}
    100% {filter: blur(0px); opacity: 1;}
}

.text-focus-blur {
    animation: textFocusBlur 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* Rotate animation */
@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.rotate {
    animation: rotate 2s linear infinite;
}

/* Bounce-in animation */
@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
    0% {opacity: 0; transform: scale3d(.3, .3, .3);}
    20% {transform: scale3d(1.1, 1.1, 1.1);}
    40% {transform: scale3d(.9, .9, .9);}
    60% {opacity: 1; transform: scale3d(1.03, 1.03, 1.03);}
    80% {transform: scale3d(.97, .97, .97);}
    100% {opacity: 1; transform: scale3d(1, 1, 1);}
}

.bounce-in {
    animation: bounceIn 0.8s;
}

/* Add scroll animations */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s, transform 0.8s;
}

.animate-on-scroll.fade-in-scroll {
    transform: translateY(20px);
}

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

.animate-on-scroll.slide-in-left-scroll {
    transform: translateX(-50px);
}

.animate-on-scroll.slide-in-left-scroll.visible {
    opacity: 1;
    transform: translateX(0);
}

.animate-on-scroll.slide-in-right-scroll {
    transform: translateX(50px);
}

.animate-on-scroll.slide-in-right-scroll.visible {
    opacity: 1;
    transform: translateX(0);
}

.animate-on-scroll.zoom-in-scroll {
    transform: scale(0.9);
}

.animate-on-scroll.zoom-in-scroll.visible {
    opacity: 1;
    transform: scale(1);
}

/* Animation Delay Utilities */
.delay-100 {animation-delay: 0.1s;}
.delay-200 {animation-delay: 0.2s;}
.delay-300 {animation-delay: 0.3s;}
.delay-400 {animation-delay: 0.4s;}
.delay-500 {animation-delay: 0.5s;}
.delay-600 {animation-delay: 0.6s;}
.delay-700 {animation-delay: 0.7s;}
.delay-800 {animation-delay: 0.8s;}
.delay-900 {animation-delay: 0.9s;}
.delay-1000 {animation-delay: 1s;}

/* Animation Duration Utilities */
.duration-300 {animation-duration: 0.3s;}
.duration-500 {animation-duration: 0.5s;}
.duration-700 {animation-duration: 0.7s;}
.duration-1000 {animation-duration: 1s;}
.duration-1500 {animation-duration: 1.5s;}
.duration-2000 {animation-duration: 2s;}

/* Apply animations to specific elements */
.hero h1 {
    animation: slideInBottom 0.8s ease-out;
}

.hero ul {
    animation: slideInBottom 0.8s ease-out 0.2s both;
}

.hero .btn {
    animation: slideInBottom 0.8s ease-out 0.4s both;
}

.phone {
    animation: pulse 1.5s infinite;
}

.request-button {
    animation: shadowPulse 2s infinite;
}

.section-title {
    animation: textFocusBlur 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}