/* Specific flight animation for image6 items */
.banner__about-items > div.banner__about-item-fly {
  animation: flyUpFade 5s linear infinite;
  opacity: 0;
}

/* Randomize delays for flying items to look like rising bubbles/particles */
.banner__about-items > div.banner__about-item-fly:nth-child(6) { animation-duration: 4s; animation-delay: 0s; }
.banner__about-items > div.banner__about-item-fly:nth-child(7) { animation-duration: 6s; animation-delay: 2s; }
.banner__about-items > div.banner__about-item-fly:nth-child(8) { animation-duration: 5s; animation-delay: 1s; }
.banner__about-items > div.banner__about-item-fly:nth-child(9) { animation-duration: 7s; animation-delay: 0.5s; }
.banner__about-items > div.banner__about-item-fly:nth-child(20) { animation-duration: 5.5s; animation-delay: 3s; }
.banner__about-items > div.banner__about-item-fly:nth-child(21) { animation-duration: 4.5s; animation-delay: 1.5s; }
.banner__about-items > div.banner__about-item-fly:nth-child(22) { animation-duration: 6.5s; animation-delay: 2.5s; }


@keyframes flyUpFade {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translateY(0px);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px);
    opacity: 0;
  }
}

/* Specific drop and fade animation for image7, 8, 16, 11 */
.banner__about-items > div.banner__about-item-drop {
  animation: dropFade 6s ease-in-out infinite;
  opacity: 0;
}

/* Randomize delays for drop items */
.banner__about-items > div.banner__about-item-drop:nth-child(10) { animation-duration: 5.5s; animation-delay: 0.5s; } /* image7 */
.banner__about-items > div.banner__about-item-drop:nth-child(11) { animation-duration: 6.5s; animation-delay: 1.5s; } /* image8 */
.banner__about-items > div.banner__about-item-drop:nth-child(13) { animation-duration: 5.8s; animation-delay: 2s; }   /* image16 */
.banner__about-items > div.banner__about-item-drop:nth-child(15) { animation-duration: 6.2s; animation-delay: 1s; }    /* image11 */

@keyframes dropFade {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  30% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

/* Gentle float for main image (image1) */
.banner__about-items > div.banner__about-item-main {
  animation: gentleFloat 5s ease-in-out infinite;
  opacity: 1;
}

@keyframes gentleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Image 5: Fade In/Out */
.banner__about-items > div.banner__about-item-fade {
  animation: fadePulse 4s ease-in-out infinite;
}

@keyframes fadePulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* Image 3: Gentle float from left */
.banner__about-items > div.banner__about-item-left {
  animation: floatLeft 5s ease-in-out infinite;
  opacity: 1; /* Ensure visible */
}

@keyframes floatLeft {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}

/* Image 4: Gentle float from right */
.banner__about-items > div.banner__about-item-right {
  animation: floatRight 5s ease-in-out infinite;
  opacity: 1; /* Ensure visible */
}

@keyframes floatRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-10px); }
}

/* --- About Page Banner Animation --- */