* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#text-animation,
#text-animation-2,
span {
    font-family: 'Plus Jakarta Sans';
    line-height: 1; /* Menjaga konsistensi tinggi teks */
}

/* Animasi untuk teks pertama */
#text-animation {
    transition: transform 0.5s ease-out; /* Hanya transform, bukan all */
    color: transparent;
    text-shadow: 0 0 0px #F6871F;
    font-size: 56px;
    padding: 1px;
    overflow: hidden;
    display: block;
    position: relative;
    cursor: pointer;
    will-change: transform; /* Membantu performa */
}

#text-animation:before {
    content: "";
    position: absolute;
    width: 50%;
    left: -50%;
    top: 28px; 
    border-bottom: solid 4px #EC2227;
    transition: transform 0.75s cubic-bezier(1, -0.04, 0, 1.16);
}

#text-animation span {
    display: block;
    position: absolute;
    height: 50%;
    width: 100%;
    overflow: hidden;
}

#text-animation span:first-child:before,
#text-animation span:last-child:before {
    content: attr(data-text);
    color: #276FB7;
    display: block;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

/* Konsistensi posisi */
#text-animation span:first-child {
    top: 0;
}

#text-animation span:last-child {
    bottom: 0;
}

#text-animation span:first-child:before {
    transform: translateY(41px);
}

#text-animation span:last-child:before {
    transform: translateY(-95px);
}

/* Hover */
#text-animation:hover {
    text-shadow: none;
}

#text-animation:hover:before {
    transform: translateX(60vw);
}

#text-animation:hover span:first-child:before {
    transform: translateY(0);
}

#text-animation:hover span:last-child:before {
    transform: translateY(-28px);
}

/* Animasi untuk teks kedua */
#text-animation-2 {
    transition: transform 0.5s ease-out;
    color: transparent;
    text-shadow: 0 0 0px #F6871F;
    font-size: 24px;
    padding: 0.5px;
    overflow: hidden;
    display: block;
    position: relative;
    cursor: pointer;
    will-change: transform;
}

#text-animation-2:before {
    content: "";
    position: absolute;
    width: 50%;
    left: -50%;
    top: 10px; 
    border-bottom: solid 2px #EC2227;
    transition: transform 1s cubic-bezier(1, -0.04, 0, 1.16);
}

#text-animation-2 span {
    display: block;
    position: absolute;
    height: 50%;
    width: 100%;
    overflow: hidden;
}

#text-animation-2 span:first-child:before,
#text-animation-2 span:last-child:before {
    content: attr(data-text);
    color: #276FB7;
    display: block;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

/* Konsistensi posisi */
#text-animation-2 span:first-child {
    top: 0;
}

#text-animation-2 span:last-child {
    bottom: 0;
}

/* Perbaikan nilai translateY */
#text-animation-2 span:first-child:before {
    transform: translateY(25px);
}

#text-animation-2 span:last-child:before {
    transform: translateY(-25px);
}

/* Hover */
#text-animation-2:hover {
    text-shadow: none; /* Menghilangkan bayangan saat hover */
}

#text-animation-2:hover:before {
    transform: translateX(60vw);
}

#text-animation-2:hover span:first-child:before {
    transform: translateY(0);
}

#text-animation-2:hover span:last-child:before {
    transform: translateY(-13px);
}

/* Global reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Animasi Teks untuk Mobile */
#text-animation-mobile {
    transition: all ease-out 0.5s;
    color: transparent;
    text-shadow: 0 0 0px #F6871F;
    font-size: 32px; /* Ukuran font lebih kecil untuk mobile */
    padding: 1px;
    overflow: hidden;
    display: block;
    position: relative;
    cursor: pointer;
    line-height: 1;
    font-weight: 800;
}

#text-animation-mobile:before {
    content: "";
    position: absolute;
    width: 50%;
    left: -50%;
    top: 18px; /* Sesuaikan dengan ukuran font */
    border-bottom: solid 3px #EC2227;
    transition: transform 0.75s cubic-bezier(1, -0.04, 0, 1.16);
    padding: 1px;
}

#text-animation-mobile span {
    display: block;
    position: absolute;
    height: 50%;
    width: 100%;
    overflow: hidden;
}

#text-animation-mobile span:first-child:before,
#text-animation-mobile span:last-child:before {
    content: attr(data-text);
    color: #276FB7;
    display: block;
    transition: ease-out all 0.3s -0.1s;
}

#text-animation-mobile span:first-child {
    top: 0;
}

#text-animation-mobile span:last-child {
    bottom: 0;
}

#text-animation-mobile span:first-child:before {
    transform: translateY(28px); /* Sesuaikan dengan ukuran font */
}

#text-animation-mobile span:last-child:before {
    transform: translateY(-60px); /* Sesuaikan dengan ukuran font */
}

#text-animation-mobile:hover {
    transition: all ease-out 0s;
    text-shadow: none;
}

#text-animation-mobile:hover:before {
    transform: translateX(60vw);
}

#text-animation-mobile:hover span:first-child:before,
#text-animation-mobile:hover span:last-child:before {
    transition: ease-out all 0.3s;
    transition-delay: 0.3s;
}

#text-animation-mobile:hover span:first-child:before {
    transform: translateY(0);
}

#text-animation-mobile:hover span:last-child:before {
    transform: translateY(-18px);
}

/* Media Query untuk Mobile */
@media (max-width: 768px) {
    #text-animation-mobile {
        font-size: 24px; /* Sesuaikan ukuran font untuk device lebih kecil */
    }

    #text-animation-mobile:before {
        top: 14px; /* Menyesuaikan posisi border bawah animasi */
        border-bottom-width: 2px;
    }

    #text-animation-mobile span:first-child:before {
        transform: translateY(20px);
    }

    #text-animation-mobile span:last-child:before {
        transform: translateY(-45px);
    }

    #text-animation-mobile:hover span:last-child:before {
        transform: translateY(-12px);
    }
}