@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;
    }
}