@tailwind base;
@tailwind components;
@tailwind utilities;
html {
  scroll-behavior: smooth;
}
@keyframes slide-loop {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes show-list-language {
  0% {
    opacity: 0;
    transform: translateY(-80%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

@keyframes show-list-line {
  0% {
    opacity: 0;
    width: 0%;
  }
  100% {
    opacity: 1;
    width: 100%;
  }
}

.animate-show {
  transition: all 0.3s ease;
}
.animate-show-list-language {
  transition: animation 0.5s ease;
  animation: show-list-language 0.3s ease;
}
.animate-show-line {
  animation: show-list-line 0.3s ease;
}
.animate-slide-loop {
  animation-name: slide-loop;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@layer utilities {
  .rotateY {
    transform: rotateY(180deg);
  }
}

.back-to-top {
  position: fixed;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.back-to-top.visible {
  opacity: 1;
}

/* .animation__showLine {
  animation: showline 2s linear;
}

@keyframes showline {
  0% {
    max-height: 0;
    opacity: 0;
  }
  100% {
    opacity: 1;

    max-height: 100vh;
  }
} */

[data-aos="animation__showLine"] {
  opacity: 0;
  max-height: 0px;
  transition-property: max-height, opacity;
}

[data-aos="animation__showLine"].aos-animate {
  opacity: 1;
  max-height: 100vh;
}

@keyframes TopToBottom {
  0% {
    transform: translate(50%, -20px);
    opacity: 0;
  }
  100% {
    transform: translate(50%, 0);
    opacity: 1;
  }
}
@keyframes cursor {
  50% {
    border-color: transparent;
  }
}
