:root {

    --primary-color: #F59E0B;
    --secondary-color: #fdf1af;
    --accent-color: #FFD400;
    --header: #A65706;
    --heading-color: #7a3003;
    --text-color: #4B4B4B;

    --light-bg: #FFFDF5;
    --white: #FFFFFF;

    --button-color: #ce8302;

    --button-hover: linear-gradient(50deg,
            #F59E0B 0%,
            #FFD400 50%,
            #F59E0B 100%);

    --border-color: #E8DFAE;

    --gradient:
        radial-gradient(circle at 12% 20%,
            color-mix(in srgb, var(--accent-color) 18%, transparent),
            transparent 28%),
        radial-gradient(circle at 88% 80%,
            color-mix(in srgb, var(--secondary-color) 14%, transparent),
            transparent 32%),
        linear-gradient(120deg,
            var(--heading-color) 0%,
            var(--primary-color) 100%);

    --shadow-sm: 0 2px 10px color-mix(in srgb,
            var(--heading-color) 8%,
            transparent);

    --shadow-md: 0 10px 30px color-mix(in srgb,
            var(--heading-color) 14%,
            transparent);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
}

*,
*::before,
*::after {
    border-color: var(--border-color);
}

/* =========================================================
   PREMIUM GOLD SWEEP BUTTON
========================================================= */
.animated-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background: var(--button-color) !important;
    color: var(--white) !important;

    border: 1px solid var(--primary-color) !important;

    transition:
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.animated-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 45%;
    height: 100%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 212, 0, 0.85),
            transparent);

    transform: skewX(-22deg);
    transition: left 0.7s ease;
    z-index: -1;
}

.animated-button::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;

    background: #FFD400;

    transform: translateX(-50%);
    transition:
        width 0.45s ease,
        height 0.3s ease;
}

.animated-button:hover {
    border-color: #FFD400 !important;

    box-shadow:
        0 12px 28px color-mix(in srgb,
            #a06602 30%,
            transparent);
}

.animated-button:hover::before {
    left: 130%;
}

.animated-button:hover::after {
    width: 65%;
}

/* Icons stay fixed */
.animated-button i {
    color: var(--white) !important;
    transform: none !important;
}

.animated-button:hover i {
    color: var(--accent-color) !important;
    transform: none !important;
}

/* Click */
.animated-button:active {
    transform: scale(0.98);
}

.animated-button .button-arrow {
    position: relative;
    z-index: 2;

    flex-shrink: 0;

    transform: none !important;
    transition: none !important;
}

.animated-button:hover .button-arrow {
    transform: none !important;
}

.animated-button .button-arrow i {
    position: relative;

    transform: none !important;
    transition: none !important;

    color: var(--heading-color) !important;
}

.animated-button:hover .button-arrow i {
    transform: none !important;
    color: var(--heading-color) !important;
}

/* =========================================================
   MOBILE MENU BUTTON
   Mobile / Tablet = visible
   Desktop 1024px+ = hidden
========================================================= */

#mobileMenuBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

@media (min-width: 1024px) {

    #mobileMenuBtn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

}


/* =========================================================
   SCROLL / MOTION SUPPORT
========================================================= */

body {
    overflow-x: clip;
}


/* Element is held invisible until its scroll animation starts */

.sa-hidden {
    opacity: 0;
    visibility: hidden;
}


/* =========================================================
   LENIS
========================================================= */

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}


/* =========================================================
   SCROLL PROGRESS
========================================================= */

#scrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;

    width: 100%;
    height: 3px;

    background: var(--accent-color);

    transform: scaleX(0);
    transform-origin: left;

    pointer-events: none;
}


/* =========================================================
   GALLERY CARD ANIMATION
========================================================= */

@keyframes cardIn {

    from {
        opacity: 0;
        transform: translateY(26px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: none;
    }

}

.gallery-card-in,
.hg-card {
    animation: cardIn 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.hg-card:nth-child(2) {
    animation-delay: 0.08s;
}

.hg-card:nth-child(3) {
    animation-delay: 0.16s;
}

.hg-card:nth-child(4) {
    animation-delay: 0.24s;
}


/* =========================================================
   TILT CARDS
========================================================= */

.tilt-card {
    will-change: transform;
    transition:
        transform 0.25s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sa-hidden {
        opacity: 1;
        visibility: visible;
    }

    .gallery-card-in,
    .hg-card {
        animation: none;
    }

}