/* ====== Keyframe Definitions ====== */

@keyframes zoomOut {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes zoomOutFadeIn {
  0% {
    transform: scale(1.1);
    opacity: 0.001;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0.001;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0.001;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeftSmooth {
  0% {
    opacity: 0.001;
    transform: translateX(60px);
  }
  50% {
    opacity: 0.001;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRightSmooth {
  0% {
    opacity: 0.001;
    transform: translateX(-60px);
  }
  50% {
    opacity: 0.001;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ====== Animation Utility Classes ====== */

.zoomOut {
  transform: scale(1.1);
}

.fadeInRightSmooth {
  animation: 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards fadeInRightSmooth;
}

.zoomOut.animated {
  animation: 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards zoomOut;
}

.zoomOutFadeInBg:after {
  transform: scale(1.1);
  opacity: 0.001;
}

.zoomOutFadeInBg.animated::after {
  animation: 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards zoomOutFadeIn;
}

.fadeIn {
  opacity: 0.001;
  animation-fill-mode: forwards;
}

.fadeIn.animated {
  animation: 2s ease forwards fadeIn;
}

.fadeUp {
  opacity: 0.001;
  animation-fill-mode: forwards;
}

.fadeUp.animated {
  animation: 1.2s ease forwards fadeInUp;
}

.animation-container {
  position: relative;
  overflow: hidden;
}

.animated-img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  transform: translateY(-50%) scale(1.1);
  /* animation: moveAndScale 5s ease-in-out infinite alternate; */
  animation: moveAndScale 5s ease-in-out forwards alternate;
}

.animation-container-move img {
  width: 110%;
  height: 110%;
  object-fit: cover;
}

[data-js="img-bg"].gm-fade-in {
  animation: moveAndScaleBG 25s ease-in-out forwards alternate;
}

[data-js="img-bg-out"].gm-fade-out {
  animation: moveAndScaleOutBG 25s ease-in-out forwards alternate;
}

@keyframes moveAndScaleBG {
  0% {
    transform: translate(0%, 0%) scale(1);
  }
  50% {
    transform: translate(5%, 5%) scale(1.1);
  }
  100% {
    transform: translate(0%, 0%) scale(1);
  }
}

@keyframes moveAndScaleOutBG {
  0% {
    transform: translate(5%, 5%) scale(1.1);
  }
  50% {
    transform: translate(0%, 0%) scale(1);
  }
  100% {
    transform: translate(5%, 5%) scale(1.1);
  }
}

@keyframes moveAndScale {
  0% {
    left: 0;
    transform: translateY(-50%) scale(1.1);
  }
  100% {
    left: 100%;
    transform: translate(-100%, -50%) scale(1);
  }
}

/* Split text */
*[data-js="splittext"] {
  display: inline-flex;
  position: relative;
  flex-wrap: wrap;
  text-transform: none;
}

*[data-js="splittext"].start {
  justify-content: flex-start;
}
*[data-js="splittext"].end {
  justify-content: flex-end;
}
*[data-js="splittext"].center {
  justify-content: center;
}
*[data-js="splittext"].full {
  width: 100%;
}

@media only screen and (max-width: 767px) {
  *[data-js="splittext"].tb-center {
    justify-content: center;
  }
  *[data-js="splittext"].tb-full {
    width: 100%;
  }
}

.front-page h2*[data-js="splittext"] {
  text-transform: none;
  display: flex;
  justify-content: center;
}

*[data-js="splittext"] span.original-text {
  visibility: hidden;
}

/* *[data-js="splittext"]::after {
      content: "";
      width: 100%;
      height: 1px;
      background-color: #e1dcd9;
      position: absolute;
      top: -10px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 1.5s ease 1s;
    } */

*[data-js="splittext"].animated::after {
  transform: scaleX(1);
}

*[data-js="splittext"] .word {
  display: inline-block;
  white-space: nowrap;
}

*[data-js="splittext"] span.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease-out forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}