@keyframes blink-caret {
  to {
    opacity: 0;
  }
}

.rkit-animated-heading p {
  position: relative;
  /* Menentukan posisi relatif untuk memposisikan pseudo-elemen */
}

.rkit-animated-heading {
  position: relative;
}

.text-writing {
  display: inline-block;
}

.text-writing::after {
  content: "|";
  display: inline-block;
  vertical-align: top;
  animation: blink-caret 600ms infinite alternate;
}

.rkit-animated-heading p {
  margin-bottom: 0;
}

@keyframes typing-cursor {
  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: #000000;
  }
}

.text-flipping {
  transition: 0.5s;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  display: inline-block;
}

.flip-out {
  transform: perspective(400px) rotateX(90deg);
  animation-name: flipOut;
  transform-origin: bottom;
  opacity: 0;
}

.flip-in {
  transform: perspective(400px) rotateX(0deg);
  animation-name: flipIn;
  transform-origin: bottom;
  opacity: 1;
}

@keyframes flipOut {
  0% {
    transform: perspective(400px) rotateX(0deg);
    transform-origin: bottom;
    opacity: 1;
  }

  40% {
    transform: perspective(400px) rotateX(-20deg);
    transform-origin: bottom;
  }

  100% {
    transform: perspective(400px) rotateX(90deg);
    transform-origin: bottom;
    opacity: 0;
  }
}

@keyframes flipIn {
  0% {
    transform: perspective(400px) rotateX(-90deg);
    transform-origin: bottom;
    opacity: 0;
  }

  60% {
    transform: perspective(400px) rotateX(-20deg);
    transform-origin: bottom;
  }

  100% {
    transform: perspective(400px) rotateX(0deg);
    transform-origin: bottom;
    opacity: 1;
  }
}

.text-sliding_up,
.text-sliding_down {
  overflow: hidden;
  transition: opacity 0.5s;
  display: inline-flex;
}

.text-sliding_down.slide-down_in {
  height: auto;
  animation: slideDown_In 0.5s;
}

.text-sliding_down.slide-down_out {
  height: auto;
  animation: slideDown_Out 0.5s;
}

.text-sliding_up.slide-up_in {
  height: auto;
  animation: slideUp_In 0.5s;
}

.text-sliding_up.slide-up_out {
  height: auto;
  animation: slideUp_Out 0.5s;
}

@keyframes slideUp_In {
  0% {
    transform: translateY(15px);
    opacity: 0;
  }

  60% {
    transform: translateY(-5px);
    opacity: 0.8;
  }

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

@keyframes slideUp_Out {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }

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

@keyframes slideDown_In {
  0% {
    transform: translateY(-15px);
    opacity: 0;
  }

  60% {
    transform: translateY(5px);
    opacity: 0.8;
  }

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

@keyframes slideDown_Out {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }

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

@keyframes handdrawn {
  0% {
    stroke-dashoffset: 1500;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes opacity {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.rkit-animated-heading__text svg {
  fill: none;
  stroke: black;
  stroke-width: 12px;
  stroke-miterlimit: 10;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  stroke-linecap: round;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 20px);
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: -1;
  height: calc(100% + 15px);
  overflow: visible;
}

.rkit-animated-heading__text {
  color: #00cea6;
}

.rkit-highlighted.in_front svg {
  z-index: 2 !important;
}
 


.highlighted_in svg {
  animation: handdrawn 1s forwards;
}

.highlighted_out svg {
  stroke-dashoffset: 0;
  animation: opacity 1s;
}

.rkit-highlighted {
  display: inline-flex;
}

.text-drop-in,
.text-drop-out {
  overflow: hidden;
  display: inline-flex;
}

.text-drop-in.drop-in_out {
  animation: dropIn_Out 0.5s;
  opacity: 0;
}

.text-drop-in.drop-in_in {
  animation: dropIn_In 0.5s;
  opacity: 1;
}

@keyframes dropIn_Out {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.4);
    opacity: 0;
  }
}

@keyframes dropIn_In {
  0% {
    transform: scale(1.3);
    opacity: 0;
  }

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

.text-drop-out.drop-out_out {
  animation: dropOut_Out 0.5s;
  opacity: 0;
}

.text-drop-out.drop-out_in {
  animation: dropOut_In 0.5s;
  opacity: 1;
}

@keyframes dropOut_Out {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes dropOut_In {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }

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