/*
    ============================================================
    GLOBAL
    ============================================================
*/

html {
    scroll-behavior: smooth;
}


body {
    font-family: 'DM Sans', sans-serif;
    background: #ffffff;
    color: #111827;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: 'Manrope', sans-serif;

}


/*
    ============================================================
    PAGE CONTAINER
    ============================================================
*/

.app-container {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}


@media (min-width: 1024px) {
    .app-container {
        padding-left: 48px;
        padding-right: 48px;
    }

}


/*
============================================================
HEADER
============================================================
*/

.site-header {
    transition: background-color 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}


.site-header.header-scrolled {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:  0 12px 40px rgba(15, 23, 42, 0.06);

}


/*
============================================================
SCROLL ANIMATIONS
============================================================

Elements remain slightly hidden initially.
JS adds .is-visible when they enter viewport.

============================================================
*/

.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 800ms cubic-bezier(.2, .65, .3, 1),
        transform 800ms cubic-bezier(.2, .65, .3, 1);

    will-change: opacity, transform;

}


.scroll-reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

}


/*
Fade
*/

.reveal-fade {

    opacity: 0;

    transform: none;

}


.reveal-fade.is-visible {

    opacity: 1;

}


/*
From Left
*/

.reveal-left {

    opacity: 0;

    transform: translateX(-60px);

}


.reveal-left.is-visible {

    opacity: 1;

    transform: translateX(0);

}


/*
From Right
*/

.reveal-right {

    opacity: 0;

    transform: translateX(60px);

}


.reveal-right.is-visible {

    opacity: 1;

    transform: translateX(0);

}


/*
Scale Up
*/

.reveal-scale {

    opacity: 0;

    transform: scale(.94);

}


.reveal-scale.is-visible {

    opacity: 1;

    transform: scale(1);

}


/*
Animation Delay Helpers
*/

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

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

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

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

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


/*
============================================================
HOVER LIFT
============================================================
*/

.hover-lift {

    transition:
        transform 300ms ease,
        box-shadow 300ms ease;

}


.hover-lift:hover {

    transform: translateY(-8px);

    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.10);

}


/*
============================================================
IMAGE ZOOM
============================================================
*/

.image-zoom {

    overflow: hidden;

}


.image-zoom img {

    transition: transform 700ms cubic-bezier(.2, .65, .3, 1);

}


.image-zoom:hover img {

    transform: scale(1.05);

}


/*
============================================================
ACCESSIBILITY
============================================================
*/

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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }


    .scroll-reveal,
    .reveal-fade,
    .reveal-left,
    .reveal-right,
    .reveal-scale {

        opacity: 1 !important;

        transform: none !important;

    }

}



/* 
============================================================
BUTTONS
============================================================
*/
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 15px 24px;

    background: #F5C518;
    color: #111111;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    border: 1px solid #F5C518;
    border-radius: 8px;

    cursor: pointer;
    text-decoration: none;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.btn-primary::after {
    content: "→";
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s ease;
}

.btn-primary:hover {
    background: #071A34;
    border-color: #071A34;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.btn-primary:hover::after {
    transform: translateX(5px);
}

.btn-primary:active {
    transform: translateY(0);
}