/*
|--------------------------------------------------------------------------
| GLOBAL
|--------------------------------------------------------------------------
*/

html {
    scroll-behavior: smooth;
}


body {
    overflow-x: hidden;
}


/*
|--------------------------------------------------------------------------
| SCROLL REVEAL
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| BOOKING PAGE
|--------------------------------------------------------------------------
| Pastikan konten booking tetap terlihat walaupun
| script scroll reveal belum dijalankan.
|--------------------------------------------------------------------------
*/

.booking-page .reveal,
.booking-page .reveal-left,
.booking-page .reveal-right {
    opacity: 1;
    transform: none;
}

.reveal,
.reveal-left,
.reveal-right {

    opacity: 0;

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}


.reveal {
    transform: translateY(45px);
}


.reveal-left {
    transform: translateX(-45px);
}


.reveal-right {
    transform: translateX(45px);
}


.reveal.active,
.reveal-left.active,
.reveal-right.active {

    opacity: 1;

    transform: translate(0, 0);

}


/*
|--------------------------------------------------------------------------
| ANIMATION DELAYS
|--------------------------------------------------------------------------
*/

.delay-100 {
    transition-delay: 100ms;
}


.delay-200 {
    transition-delay: 200ms;
}


.delay-300 {
    transition-delay: 300ms;
}


.delay-400 {
    transition-delay: 400ms;
}


/*
|--------------------------------------------------------------------------
| IMAGE HOVER
|--------------------------------------------------------------------------
*/

.image-hover {

    transition:
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.7s ease;

}


.group:hover .image-hover {

    transform: scale(1.07);

}


/*
|--------------------------------------------------------------------------
| HERO GLOW
|--------------------------------------------------------------------------
*/

@keyframes glow {

    0%,
    100% {

        opacity: 0.3;

        transform: scale(1);

    }

    50% {

        opacity: 0.6;

        transform: scale(1.08);

    }

}


.glow-effect {

    animation:
        glow 5s ease-in-out infinite;

}


/*
|--------------------------------------------------------------------------
| TYPING CURSOR
|--------------------------------------------------------------------------
*/

.typing-cursor {

    display: inline-block;

    margin-left: 3px;

    animation:
        typingCursor 0.8s infinite;

}


@keyframes typingCursor {

    0%,
    45% {

        opacity: 1;

    }

    46%,
    100% {

        opacity: 0;

    }

}


/*
|--------------------------------------------------------------------------
| SCROLL INDICATOR
|--------------------------------------------------------------------------
*/

@keyframes scrollLine {

    0% {

        transform: scaleY(0);

        transform-origin: top;

    }

    50% {

        transform: scaleY(1);

        transform-origin: top;

    }

    51% {

        transform-origin: bottom;

    }

    100% {

        transform: scaleY(0);

        transform-origin: bottom;

    }

}


.scroll-line {

    animation:
        scrollLine 2s ease-in-out infinite;

}


/*
|--------------------------------------------------------------------------
| FLOATING
|--------------------------------------------------------------------------
*/

@keyframes float {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}


.floating {

    animation:
        float 5s ease-in-out infinite;

}


/*
|--------------------------------------------------------------------------
| MOBILE MENU
|--------------------------------------------------------------------------
*/

.mobile-menu-hidden {

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

    transform: translateY(-10px);

    transition:
        max-height 0.35s ease,
        opacity 0.25s ease,
        transform 0.25s ease;

}


.mobile-menu-visible {

    max-height: 500px;

    opacity: 1;

    pointer-events: auto;

    transform: translateY(0);

}


/*
|--------------------------------------------------------------------------
| HIDE SCROLLBAR
|--------------------------------------------------------------------------
*/

.no-scrollbar::-webkit-scrollbar {

    display: none;

}


.no-scrollbar {

    -ms-overflow-style: none;

    scrollbar-width: none;

}


/*
|--------------------------------------------------------------------------
| SELECTION
|--------------------------------------------------------------------------
*/

::selection {

    background: rgba(163, 230, 53, 0.3);

    color: white;

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .reveal,
    .reveal-left,
    .reveal-right {

        transition-duration: 0.65s;

    }

}