/* Text Animation Styles for Hero Section */
.hero__slide-content,
.hero__logo-box,
.hero__title,
.hero__subtitle,
.hero__button,
.hero__content > * {
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* Existing animations */
.hero__slide-content.fadeInUp,
.hero__logo-box.animated.fadeInUp,
.hero__title.animated.fadeInUp,
.hero__subtitle.animated.fadeInUp,
.hero__button.animated.fadeInUp,
.hero__content > *.animated.fadeInUp {
  animation-name: fadeInUp;
}

.hero__slide-content.fadeInDown,
.hero__logo-box.animated.fadeInDown,
.hero__title.animated.fadeInDown,
.hero__subtitle.animated.fadeInDown,
.hero__button.animated.fadeInDown,
.hero__content > *.animated.fadeInDown {
  animation-name: fadeInDown;
}

.hero__slide-content.fadeInLeft,
.hero__logo-box.animated.fadeInLeft,
.hero__title.animated.fadeInLeft,
.hero__subtitle.animated.fadeInLeft,
.hero__button.animated.fadeInLeft,
.hero__content > *.animated.fadeInLeft {
  animation-name: fadeInLeft;
}

.hero__slide-content.fadeInRight,
.hero__logo-box.animated.fadeInRight,
.hero__title.animated.fadeInRight,
.hero__subtitle.animated.fadeInRight,
.hero__button.animated.fadeInRight,
.hero__content > *.animated.fadeInRight {
  animation-name: fadeInRight;
}

.hero__slide-content.fadeIn,
.hero__logo-box.animated.fadeIn,
.hero__title.animated.fadeIn,
.hero__subtitle.animated.fadeIn,
.hero__button.animated.fadeIn,
.hero__content > *.animated.fadeIn {
  animation-name: fadeIn;
}

/* New smooth animations */
.hero__slide-content.animated.zoomIn,
.hero__logo-box.animated.zoomIn,
.hero__title.animated.zoomIn,
.hero__subtitle.animated.zoomIn,
.hero__button.animated.zoomIn,
.hero__content > *.animated.zoomIn {
  animation-name: zoomIn;
}

.hero__slide-content.animated.slideInUp,
.hero__logo-box.animated.slideInUp,
.hero__title.animated.slideInUp,
.hero__subtitle.animated.slideInUp,
.hero__button.animated.slideInUp,
.hero__content > *.animated.slideInUp {
  animation-name: slideInUp;
}

.hero__slide-content.animated.slideInDown,
.hero__logo-box.animated.slideInDown,
.hero__title.animated.slideInDown,
.hero__subtitle.animated.slideInDown,
.hero__button.animated.slideInDown,
.hero__content > *.animated.slideInDown {
  animation-name: slideInDown;
}

.hero__slide-content.animated.slideInLeft,
.hero__logo-box.animated.slideInLeft,
.hero__title.animated.slideInLeft,
.hero__subtitle.animated.slideInLeft,
.hero__button.animated.slideInLeft,
.hero__content > *.animated.slideInLeft {
  animation-name: slideInLeft;
}

.hero__slide-content.animated.slideInRight,
.hero__logo-box.animated.slideInRight,
.hero__title.animated.slideInRight,
.hero__subtitle.animated.slideInRight,
.hero__button.animated.slideInRight,
.hero__content > *.animated.slideInRight {
  animation-name: slideInRight;
}

/* Flip animations */
.hero__slide-content.animated.flipInX,
.hero__logo-box.animated.flipInX,
.hero__title.animated.flipInX,
.hero__subtitle.animated.flipInX,
.hero__button.animated.flipInX,
.hero__content > *.animated.flipInX {
  animation-name: flipInX;
  backface-visibility: visible;
}

.hero__slide-content.animated.flipInY,
.hero__logo-box.animated.flipInY,
.hero__title.animated.flipInY,
.hero__subtitle.animated.flipInY,
.hero__button.animated.flipInY,
.hero__content > *.animated.flipInY {
  animation-name: flipInY;
  backface-visibility: visible;
}

/* Keyframes for existing animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(50px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Keyframes for new animations */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 0.8);
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Flip animations */
@keyframes flipInX {
  from {
    opacity: 0;
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    opacity: 1;
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    opacity: 0;
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
  }
  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    opacity: 1;
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
  }
  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px);
  }
}

/* Animation delays for staggered effects */
.animated {
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

.animated.delay-1 {
  animation-delay: 0.1s;
}

.animated.delay-2 {
  animation-delay: 0.2s;
}

.animated.delay-3 {
  animation-delay: 0.3s;
}

.animated.delay-4 {
  animation-delay: 0.4s;
}

.animated.delay-5 {
  animation-delay: 0.5s;
}