.autoShow{
    animation: text-appear both;
    animation-timeline: view();
    animation-range: entry 20% cover 100vh;
    transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    
}

@keyframes text-appear {
    from {
     opacity: 0;
     transform: translateY(60px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
}

.imageReveal{
    animation: imageReveal both;
    animation-timeline: view(10% 5%);
    animation-range: entry 20% cover 100vh;
}
@keyframes imageReveal {
    0%{
        filter: saturate(0) contrast(4) brightness(.1) blur(5px);
        opacity: 0;
        scale: .95;
        translate: 0 4rem;
    }

    100%{
      filter:none;
      opacity: 1;
      scale: 1;
      translate: 0 0;
    }
}

.fadeup{
    animation:fadeup both;
    animation-timeline: view();

    
}
.service-box:nth-child(1):nth-child(1){
       animation-range: entry 20% cover 40%;
    }
    .service-box:nth-child(2):nth-child(2){
       animation-range: entry 40% cover 60%;
    }
    .service-box:nth-child(3):nth-child(3){
       animation-range: entry 60% cover 80%;
    }
    .service-box:nth-child(4):nth-child(4){
       animation-range: entry 90% cover 100%;
    }

@keyframes fadeup{
    from{
     opacity:0;
     transform: translateY(10px) scale(0.5);
    }
    to{
     opacity:1;
     transform: translateY(10px) scale(1);
    }
}

.fadein{
    animation: fadein both;
    animation-timeline: view();
}
@keyframes fadein {
    from{
        scale : 0.7;
        opacity: 0;
    }

    to{
         scale : 1;
        opacity: 1;
    }
    }
.fadeinleft{
    animation:fadeinleft both;
    animation-timeline: view();
    animation-range: entry 20% cover 100vh;
}

@keyframes fadeinleft {
            40% {
                opacity: 0;
                transform: translateX(30px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
}
.slide-box {
  opacity: 0;
  transform: translateX(-40px);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
              opacity 0.3s cubic-bezier(0.4,0,0.2,1);
  will-change: transform, opacity;
}

.slide-box.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-box {
    opacity: 0;
    transform: translateX(-60px);
    animation: smoothSlide 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes smoothSlide {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }
    80% {
        transform: translateX(8px); /* soft overshoot */
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.box {
    opacity: 0;
    transform: translateY(40px);
}

/* Smooth animation */
@keyframes slideUpSmooth {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    80% {
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animation */
.slide-up {
    animation: slideUpSmooth 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.5s; }