/* ========================================================
   JENNIFER GORI — GLOBAL STYLES
   ======================================================== */

:root {
    --cream: #f8f5ef;
    --cream-dark: #eee9df;
    --ink: #292a26;
    --muted: #706d66;
    --olive: #41483f;
    --olive-dark: #30352f;
    --champagne: #987d5d;
    --champagne-light: #c6b79f;
    --line: rgba(82, 77, 69, 0.18);

    --serif: "Playfair Display", serif;
    --sans: "DM Sans", sans-serif;

    /*
       Approximate height of the fixed header.
       Used only for section anchor positioning.
    */
    --header-offset: 72px;
}


/* ========================================================
   RESET
   ======================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--sans);

    color: var(--ink);

    background: var(--cream);

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font: inherit;
}


/* ========================================================
   FIXED HEADER — ANCHOR OFFSET
   ======================================================== */

/*
   IMPORTANT:
   We use ONLY scroll-margin-top here.

   Do not also use scroll-padding-top on <html>,
   otherwise the fixed-header compensation can become
   larger than intended.
*/

#services,
#about,
#counseling,
#gallery,
#faq,
#contact {
    scroll-margin-top: var(--header-offset);
}


/* ========================================================
   PAGE LOADER
   ======================================================== */

.page-loader {
    position: fixed;

    inset: 0;

    z-index: 9999;

    background: var(--cream);

    display: flex;

    align-items: center;
    justify-content: center;

    pointer-events: none;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}

.page-loader.hide {
    opacity: 0;
    visibility: hidden;
}

.loader-line {
    width: 120px;
    height: 1px;

    overflow: hidden;

    background: rgba(0,0,0,.08);
}

.loader-line::after {
    content: "";

    display: block;

    width: 45%;
    height: 100%;

    background: var(--champagne);

    animation:
        loaderMove
        1.1s
        ease
        infinite;
}

@keyframes loaderMove {

    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(260%);
    }

}


/* ========================================================
   SHARED EYEBROW
   ======================================================== */

.section-eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 20px;

    color: var(--champagne);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;
}

.section-eyebrow span {
    width: 42px;
    height: 1px;

    background: var(--champagne);
}


/* ========================================================
   SHARED SCROLL REVEAL
   ======================================================== */

.scroll-reveal {
    opacity: 0;

    transform: translateY(42px);

    transition:
        opacity .95s cubic-bezier(.22,.61,.36,1),
        transform .95s cubic-bezier(.22,.61,.36,1);
}

.scroll-reveal.in-view {
    opacity: 1;

    transform: translateY(0);
}


/* ========================================================
   TABLET / MOBILE
   ======================================================== */

@media (max-width: 900px) {

    :root {
        --header-offset: 68px;
    }

}


/* ========================================================
   ACCESSIBILITY — REDUCED MOTION
   ======================================================== */

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

    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;
    }

    .reveal-item,
    .reveal-title,
    .reveal-image,
    .scroll-reveal {
        opacity: 1 !important;

        transform: none !important;
    }

    .image-reveal-mask {
        display: none;
    }

}