/* Fade-in animation */
.animate {
  opacity: 0;
  display: inline-block; /* allow transform to affect text only */
  animation: fadeIn 0.8s ease forwards;
}

.animate:nth-of-type(1) { animation-delay: 0.3s; }
.animate:nth-of-type(2) { animation-delay: 0.8s; }
.animate:nth-of-type(3) { animation-delay: 1.2s; }
.animate:nth-of-type(4) { animation-delay: 1.6s; }

@keyframes fadeIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Lift text on hover / touch */
.lift-text {
  display: inline-block;       /* necessary for transform */
  transition: transform 0.25s ease;
  cursor: default;             /* keep normal text cursor */
  user-select: none;           /* prevent caret on mobile */
}

.lift-text:hover,
.lift-text:active {
  transform: translateY(-4px);
}

/* Image zoom effect */
.image_boxes .image_box img,
.image_boxes .imgs img {
    transition: transform 0.6s ease, filter 0.6s ease;
    transform-origin: center center;
}

/* Zoom on hover or touch */
.image_boxes .image_box:hover img,
.image_boxes .imgs:hover img,
.image_boxes .image_box.one:hover img,
.image_boxes .imgs:active img {
    transform: scale(1.06);
    filter: brightness(1.05);
}



/* ===========================
   SCROLL SLIDE ANIMATION
   =========================== */

/* Animation keyframes */
@keyframes slideFromLeft {
    0% {
      opacity: 0;
      transform: translateX(-60px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideFromRight {
    0% {
      opacity: 0;
      transform: translateX(60px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* Scroll timeline for smooth trigger */
  @scroll-timeline aboutScroll {
    source: auto;
    orientation: block;
    scroll-offsets: 0% 60%;
  }
  
  /* LEFT-side zoom-fade image */
  .image_boxes .image_box.one {
    animation: slideFromLeft 6s ease both;
    animation-timeline: aboutScroll;
  }
  
  /* RIGHT-side two small images */
  .image_boxes .image_box .imgs:nth-child(1) {
    animation: slideFromRight 6s ease both;
    animation-timeline: aboutScroll;
  }
  
  .image_boxes .image_box .imgs:nth-child(2) {
    animation: slideFromRight 1.2s ease both;
    animation-timeline: aboutScroll;
  }
  
  /* Experience badge */
  .image_boxes .image_content_inner {
    animation: slideFromLeft 6s ease both;
    animation-timeline: aboutScroll;
    animation-delay: .8s;
  }
  
  /* ===========================
     HOVER ZOOM EFFECT
     =========================== */
  .image_boxes img {
    transition: transform .8s ease, filter .6s ease;
  }
  
  .image_boxes:hover img,
  .image_boxes .image_box:hover img,
  .image_boxes .imgs:hover img,
  .image_boxes .image_box.one:hover img {
    transform: scale(1.06);
    filter: brightness(1.05);
  }
/* initial hidden state */
.scroll-slide-left,
.scroll-slide-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 1.6s ease;   /* slower animation */
}

.scroll-slide-left {
    transform: translateX(-60px);
}

/* active (when visible on scroll) */
.scroll-active {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* hover zoom */
.image_boxes img {
    transition: transform .6s ease, filter .6s ease;
}

.image_boxes:hover img,
.image_boxes .image_box:hover img,
.image_boxes .imgs:hover img {
    transform: scale(1.06);
    filter: brightness(1.05);
}


  /* TEXT SLIDE ANIMATION (slow & smooth) */

/* start hidden */
.scroll-text {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* when visible */
.scroll-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* optional: stagger children */
.scroll-text h2 {
    transition-delay: .2s;
}
.scroll-text p {
    transition-delay: .35s;
}
.scroll-text .extra_content {
    transition-delay: .55s;
}




/* vision */

.icon_box_new_box {
    transition: all 0.3s ease;
    transform: translateY(0);
}

.icon_box_new_box:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}