/*
* HiOne Bus - Animations Stylesheet
* Author: HiOne Bus
* Version: 1.0
*/

/* Rainbow Text Animation */
.rainbow-text {
  background-image: linear-gradient(90deg,
      #2563eb 0%,
      #7c3aed 20%,
      #db2777 40%,
      #ef4444 60%,
      #f97316 80%,
      #eab308 100%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: rainbow-text 6s linear infinite;
}

/* Logo Wave Animation */
.logo-text {
  padding: 1rem;
  font-size: 2rem;
  font-weight: 800;
  background-image: linear-gradient(90deg,
      #2563eb 0%,
      #7c3aed 20%,
      #db2777 40%,
      #ef4444 60%,
      #f97316 80%,
      #eab308 100%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: rainbow-text 6s linear infinite;
  display: inline-block;
}

.logo-text span {
  background: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet, red);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowShift 5s linear infinite;
  display: inline-block;
}

@keyframes rainbowShift {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

@keyframes wave {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}



.logo-text span:nth-child(2) {
  animation-delay: 0.1s;
}

.logo-text span:nth-child(3) {
  animation-delay: 0.2s;
}

.logo-text span:nth-child(4) {
  animation-delay: 0.3s;
}

.logo-text span:nth-child(5) {
  animation-delay: 0.4s;
}

.logo-text span:nth-child(6) {
  animation-delay: 0.5s;
}

.logo-text span:nth-child(7) {
  animation-delay: 0.6s;
}

.logo-text span:nth-child(8) {
  animation-delay: 0.7s;
}

@keyframes rainbow-text {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

@keyframes wave-letter {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Fade In Animation */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Slide In Animations */
.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-left.visible,
.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale Animation */
.scale-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Bounce Animation for Button Hover */
.btn:hover {
  animation: btn-bounce 0.4s ease;
}

@keyframes btn-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

/* Pulse Animation for Important Elements */
.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

/* Rotating Animation */
.rotate {
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Shimmer Effect for Loading States */
.shimmer {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* Pop In Animation for Elements */
.pop-in {
  animation: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Floating Animation */
.float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* Wave Animation */
.wave {
  animation: wave 1.5s infinite;
}

@keyframes wave {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(15deg);
  }

  75% {
    transform: rotate(-15deg);
  }
}

/* Testimonial Carousel Animation */
.testimonial-slide {
  opacity: 0;
  transition: opacity 0.5s ease;
  position: absolute;
  width: 100%;
}

.testimonial-slide.active {
  opacity: 1;
  position: relative;
}

/* Chatbot Typing Animation */
.typing {
  display: flex;
  align-items: center;
  padding: var(--space-sm);
}

.typing span {
  width: 8px;
  height: 8px;
  background-color: var(--text-medium);
  border-radius: 50%;
  margin: 0 2px;
  opacity: 0.6;
}

.typing span:nth-child(1) {
  animation: typing 1s infinite 0s;
}

.typing span:nth-child(2) {
  animation: typing 1s infinite 0.2s;
}

.typing span:nth-child(3) {
  animation: typing 1s infinite 0.4s;
}

@keyframes typing {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

/* Media Queries for Animations */
@media (prefers-reduced-motion: reduce) {

  .rainbow-text,
  .fade-in,
  .slide-in-left,
  .slide-in-right,
  .scale-in,
  .pulse,
  .rotate,
  .shimmer,
  .float,
  .wave {
    animation: none !important;
    transition: none !important;
  }

  .fade-in,
  .slide-in-left,
  .slide-in-right,
  .scale-in {
    opacity: 1;
    transform: none;
  }
}