/*=== COLOR ===*/
:root {
    --dark-blue-color: #14243e;
    --gold-color: #b5895c;
    --white-color: #fff;
    --jumbotron-color2: #f7f3f2;
    --gray-color: #e2e2e2;
    --dark-color: #1e1e1e;
}

/*=== TYPOGRAPHY ===*/
:root {
    --body-font: "Cormorant Garamond", serif;
    --text-font: "Open Sans", sans-serif;
    --navbar-logo: 1.5rem;
    --navbar-item: 1rem;
    --h2-font-size: 2rem;
    --normal-font-size: 0.938rem;
}

@media screen and (max-width: 768px) {
    :root {
        --navbar-logo: 1.2rem;
    }
}

/*=== Z INDEX ===*/
:root {
    --z-back: -10;
    --z-normal: 1;
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;
}

/*===== BASE =====*/
*,
::before,
::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--body-font) !important;
}

h1,
h2,
h3,
p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== Global Smooth Scroll ===== */
html {
    scroll-behavior: smooth;
}

/* ===== Base State untuk Reveal (sebelum muncul) ===== */
.reveal,
.reveal-section,
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(26px);
    will-change: transform, opacity;
}

/* Untuk hero biar masuk dari lebih halus */
/* .hero-title,
.hero-subtitle,
.hero-description,
.hero-button {
    opacity: 0;
    transform: translateY(18px);
} */

/* Navbar hover halus */
.navbar {
    will-change: background-color, box-shadow, padding;
}

/* Hero parallax */
.hero-parallax {
    will-change: transform;
}

/* Sedikit glow elegan di tombol hero */
.hero-button {
    position: relative;
    overflow: hidden;
}

.hero-button::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -40%;
    width: 40%;
    height: 300%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 40%,
        transparent 80%
    );
    transform: skewX(-20deg);
    opacity: 0;
}

.hero-button:hover::after {
    animation: buttonShine 1s ease-out forwards;
}

@keyframes buttonShine {
    0% {
        opacity: 0;
        transform: translateX(-100%) skewX(-20deg);
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(250%) skewX(-20deg);
    }
}