.animated {
  position: absolute;
}
.animated.relative {
  position: relative;
}

.animated * {
  opacity: 0;
}

.animated.animate-in * {
  animation: hideText 0.6s 1s forwards;
}
.reveal_to_top {
  bottom: 0;
  position: relative;
  animation: hideImage 0.6s 1s forwards !important;
}
.animated.animate-in:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 10;
}

.animated.animate-in:before {
  background-color: var(--color-malibu);
  border-radius: 6px;
  overflow: hidden;
}

.animated.animation-LtoR.animate-in:before {
  animation: LtoRKeyframe 1.6s ease;
}

.animated.animation-LtoR.animate-in:after {
  animation: LtoRKeyframe 1s 0.6s ease;
}

.animated.animation-RtoL.animate-in:before {
  animation: RtoLKeyframe 1.8s ease;
}

.animated.animation-RtoL.animate-in:after {
  animation: RtoLKeyframe 1s 0.6s ease;
}

.animated.animation-TtoB.animate-in:before {
  animation: TtoBKeyframe 1.6s ease;
}

.animated.animation-BtoT.animate-in:before {
  animation: BtoTKeyframe 1.6s ease;
}

@keyframes hideText {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hideImage {
  0% {
    bottom: -40px;
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes LtoRKeyframe {
  0% {
    width: 0;
    left: 0;
  }
  65% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%;
  }
}

@keyframes RtoLKeyframe {
  0% {
    width: 0;
    right: 0;
  }
  65% {
    width: 100%;
    right: 0;
  }
  100% {
    width: 0;
    right: 100%;
  }
}

@keyframes TtoBKeyframe {
  0% {
    width: 100%;
    height: 0;
    left: 0;
    top: 0;
  }
  65% {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  100% {
    width: 100%;
    height: 0;
    left: 0;
    top: 100%;
  }
}

@keyframes BtoTKeyframe {
  0% {
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0%;
  }
  65% {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
  }
  100% {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: 0;
  }
}

.mask_reveal {
  overflow: hidden;
}
.animated.animate-in.height_mask:before {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  opacity: 1;
  top: auto;
  max-height: 86%;
}
.animated.full_height.animate-in.height_mask:before {
  max-height: 100%;
}
.animated.full_height img {
  height: 350px;
  width: 100%;
  position: absolute;
  object-fit: cover;
}
.animated.animate-in.height_mask img {
  position: relative;
  z-index: 1;
}