/* ========================================================
   HERO
   ======================================================== */

.hero {
    min-height: 100svh;

    padding:
        135px 5%
        72px;

    display: flex;
    align-items: center;

    position: relative;

    overflow: hidden;
}


/* ========================================================
   DECORATIVE ORBITS
   ======================================================== */

.hero-orbit {
    position: absolute;

    border:
        1px solid
        rgba(142,119,89,.12);

    border-radius: 50%;

    pointer-events: none;
}

.hero-orbit-one {
    width: 670px;
    height: 670px;

    left: -380px;
    top: 130px;
}

.hero-orbit-two {
    width: 290px;
    height: 290px;

    right: -160px;
    bottom: -40px;
}


/* ========================================================
   HERO LAYOUT
   ======================================================== */

.hero-content {
    width: 100%;

    max-width: 1450px;

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0,1.04fr)
        minmax(420px,.96fr);

    align-items: center;

    gap:
        clamp(
            55px,
            7vw,
            120px
        );

    position: relative;

    z-index: 2;
}

.hero-copy {
    max-width: 720px;
}


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

.eyebrow {
    margin-bottom: 26px;

    color: var(--champagne);

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;
}

.eyebrow-line {
    width: 42px;
    height: 1px;

    background:
        var(--champagne);

    transform-origin: left;
}


/* ========================================================
   TITLE
   ======================================================== */

.hero-title {
    margin-bottom: 29px;

    font-family:
        var(--serif);

    font-weight: 500;

    font-size:
        clamp(
            50px,
            5vw,
            80px
        );

    line-height: 1.025;

    letter-spacing: -2.8px;
}

.title-mask {
    display: block;

    overflow: hidden;

    padding-bottom: 5px;
}

.title-line {
    display: block;
}

.hero-title em {
    color:
        var(--champagne);

    font-weight: 500;
}


/* ========================================================
   DESCRIPTION
   ======================================================== */

.hero-description {
    max-width: 595px;

    margin-bottom: 34px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.85;
}


/* ========================================================
   ACTIONS
   ======================================================== */

.hero-actions {
    margin-bottom: 48px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.btn {
    position: relative;

    min-height: 52px;

    padding:
        0 25px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    overflow: hidden;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .4px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.btn-primary {
    color: white;

    background:
        var(--olive);

    border:
        1px solid
        var(--olive);
}

.btn-primary::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        var(--olive-dark);

    transform:
        translateY(101%);

    transition:
        transform .4s
        cubic-bezier(.77,0,.18,1);
}

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

.btn-primary span {
    position: relative;

    z-index: 2;
}

.button-arrow {
    font-size: 17px;

    transition:
        transform .3s ease;
}

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

.btn-secondary {
    border:
        1px solid
        #bbb2a5;

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

.btn-secondary:hover {
    border-color:
        var(--ink);
}


/* ========================================================
   TRUST / STATS
   ======================================================== */

.hero-trust {
    display: flex;

    align-items: center;

    gap: 25px;
}

.trust-item {
    display: flex;

    flex-direction: column;
}

.trust-item strong {
    font-family:
        var(--serif);

    font-size: 23px;

    font-weight: 600;

    line-height: 1.15;
}

.trust-item span {
    max-width: 150px;

    margin-top: 5px;

    color: #78736a;

    font-size: 8px;

    font-weight: 500;

    line-height: 1.55;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}

.trust-divider {
    width: 1px;

    height: 42px;

    background:
        #d7d0c4;
}


/* ========================================================
   HERO VISUAL
   ======================================================== */

.hero-visual {
    position: relative;
}


/* ========================================================
   IMAGE FRAME
   ======================================================== */

.hero-image-frame {
    position: relative;

    max-width: 570px;

    margin-left: auto;

    /*
       No padding here.
       The decorative frame now sits behind the photo
       rather than changing the photo dimensions.
    */
}


/* ========================================================
   MAIN IMAGE
   ======================================================== */

.hero-image-inner {
    position: relative;

    z-index: 2;

    height:
        min(
            69vh,
            700px
        );

    min-height: 520px;

    overflow: hidden;

    background:
        var(--cream);
}

.hero-main-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
       Keeps Jennifer and faces comfortably framed.
    */
    object-position:
        center 42%;

    transform:
        scale(1);

    filter:
        saturate(.84)
        contrast(.98);

    will-change:
        transform;
}


/* ========================================================
   EDITORIAL FRAME
   ======================================================== */

.hero-image-decoration {
    position: absolute;

    /*
       The frame intentionally extends slightly beyond
       the photograph on all sides.
    */

    top: -16px;

    right: -16px;

    bottom: -16px;

    left: 16px;

    z-index: 1;

    border:
        1px solid
        rgba(145,123,94,.52);

    pointer-events: none;
}


/*
   Small architectural "L" detail
   extending from the right side.
*/

.hero-image-decoration::after {
    content: "";

    position: absolute;

    top: 44px;

    right: -26px;

    width: 42px;

    height: 145px;

    border-top:
        1px solid
        rgba(145,123,94,.52);

    border-right:
        1px solid
        rgba(145,123,94,.52);
}


/* ========================================================
   LOCATION CARD
   ======================================================== */

.hero-image-card {
    position: absolute;

    left: -47px;

    bottom: 42px;

    z-index: 4;

    width: 218px;

    padding:
        20px 22px;

    background:
        rgba(250,248,243,.91);

    border:
        1px solid
        rgba(255,255,255,.65);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    box-shadow:
        0 18px 55px
        rgba(50,43,35,.13);

    transition:
        transform .35s ease;
}

.hero-image-card:hover {
    transform:
        translateY(-5px);
}

.hero-image-card > span {
    display: block;

    margin-bottom: 4px;

    color:
        var(--champagne);

    font-size: 8px;

    font-weight: 600;

    text-transform:
        uppercase;

    letter-spacing:
        2px;
}

.hero-image-card strong {
    display: block;

    margin-bottom: 5px;

    font-family:
        var(--serif);

    font-size:
        22px;
}

.hero-image-card small {
    display: block;

    color:
        #79736b;

    font-size:
        9px;

    line-height:
        1.6;
}


/* ========================================================
   INTRO ANIMATIONS
   ======================================================== */

.reveal-item {
    opacity: 0;

    transform:
        translateY(22px);
}

.reveal-item.visible {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .9s
        cubic-bezier(.22,.61,.36,1),

        transform .9s
        cubic-bezier(.22,.61,.36,1);
}

.reveal-title {
    transform:
        translateY(110%);
}

.reveal-title.visible {
    transform:
        translateY(0);

    transition:
        transform 1.05s
        cubic-bezier(.16,1,.3,1);
}

.reveal-image {
    opacity: 0;

    transform:
        translateY(20px);
}

.reveal-image.visible {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 1s ease,
        transform 1s ease;
}


/* ========================================================
   IMAGE REVEAL
   ======================================================== */

.image-reveal-mask {
    position: absolute;

    inset: 0;

    z-index: 10;

    background:
        var(--champagne-light);

    transform-origin:
        top;

    transition:
        transform 1.2s
        cubic-bezier(.77,0,.18,1);

    pointer-events: none;
}

.reveal-image.visible
.image-reveal-mask {
    transform:
        scaleY(0);

    transform-origin:
        bottom;
}


/*
   Fallback in case the reveal class is handled
   slightly differently by the browser.
*/

.hero-visual.visible
.image-reveal-mask {
    transform:
        scaleY(0);
}


/* ========================================================
   SCROLL INDICATOR
   ======================================================== */

.hero-scroll {
    position: absolute;

    left: 5%;

    bottom: 22px;

    display: flex;

    align-items: center;

    gap: 12px;

    color:
        #8a857c;

    font-size:
        7px;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        2px;
}

.scroll-line {
    width: 58px;

    height: 1px;

    overflow: hidden;

    background:
        rgba(80,75,68,.18);
}

.scroll-line span {
    display: block;

    width: 45%;

    height: 100%;

    background:
        var(--champagne);

    animation:
        scrollLine
        2.2s
        ease-in-out
        infinite;
}

@keyframes scrollLine {

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

    60%,
    100% {
        transform:
            translateX(240%);
    }

}


/* ========================================================
   DESKTOP / SMALL LAPTOP
   ======================================================== */

@media (max-width: 1180px) {

    .hero-content {
        grid-template-columns:
            1fr .88fr;

        gap: 50px;
    }

}


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

@media (max-width: 900px) {

    .hero {
        min-height: auto;

        padding:
            130px 6%
            80px;
    }

    .hero-content {
        grid-template-columns:
            1fr;

        gap: 65px;
    }

    .hero-copy {
        max-width: 710px;
    }

    .hero-title {
        font-size:
            clamp(
                49px,
                9vw,
                70px
            );
    }

    .hero-image-frame {
        max-width: 650px;

        margin:
            0 auto;
    }

    .hero-image-inner {
        height: 680px;
    }

    /*
       Slightly smaller frame offset on tablet.
    */

    .hero-image-decoration {
        top: -13px;

        right: -13px;

        bottom: -13px;

        left: 13px;
    }

    .hero-image-decoration::after {
        right: -20px;

        height: 120px;
    }

}


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

@media (max-width: 600px) {

    /* ====================================================
       HERO
       ==================================================== */

    .hero {
        position: relative;

        padding:
            115px 6%
            45px;

        isolation: isolate;
    }


    /* ----------------------------------------------------
       SOFT BACKGROUND PHOTO

       The photo is intentionally subtle.
       It adds depth without competing with the text.
       ---------------------------------------------------- */

    .hero::before {
        content: "";

        position: absolute;

        top: 72px;
        right: -28px;

        width: 82%;
        height: 570px;

        background-image:
            linear-gradient(
                to right,
                rgba(248,245,239,1) 0%,
                rgba(248,245,239,.96) 18%,
                rgba(248,245,239,.78) 48%,
                rgba(248,245,239,.42) 100%
            ),
            url("../images/wedding7.jpg");

        background-size:
            cover;

        background-position:
            center 36%;

        background-repeat:
            no-repeat;

        opacity:
            .40;

        filter:
            saturate(.72)
            contrast(.92);

        pointer-events:
            none;

        z-index:
            0;
    }


    /* Soft fade at the bottom of the background image */

    .hero::after {
        content: "";

        position: absolute;

        top: 400px;
        left: 0;
        right: 0;

        height: 250px;

        background:
            linear-gradient(
                to bottom,
                rgba(248,245,239,0),
                rgba(248,245,239,.72) 55%,
                rgba(248,245,239,1) 100%
            );

        pointer-events:
            none;

        z-index:
            0;
    }


    /* Keep everything above the soft photo */

    .hero-content {
        position: relative;

        z-index: 2;

        gap: 42px;
    }

    .hero-copy {
        position: relative;

        z-index: 2;
    }

    .hero-orbit {
        z-index: 1;
    }


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

    .eyebrow {
        margin-bottom:
            22px;
    }


    /* ====================================================
       TITLE
       ==================================================== */

    .hero-title {
        font-size:
            clamp(
                41px,
                12vw,
                52px
            );

        letter-spacing:
            -1.6px;

        margin-bottom:
            25px;
    }


    /* ====================================================
       DESCRIPTION
       ==================================================== */

    .hero-description {
        max-width:
            92%;

        margin-bottom:
            28px;

        color:
            #5f5b54;

        font-size:
            15px;

        line-height:
            1.75;
    }


    /* ====================================================
       ACTIONS
       ==================================================== */

    .hero-actions {
        flex-direction:
            column;

        margin-bottom:
            38px;
    }

    .btn {
        width:
            100%;
    }


    /* ====================================================
       STATS
       ==================================================== */

    .hero-trust {
        display:
            grid;

        grid-template-columns:
            repeat(3,1fr);

        gap:
            10px;
    }

    .trust-divider {
        display:
            none;
    }

    .trust-item strong {
        font-size:
            18px;
    }

    .trust-item span {
        font-size:
            6.5px;
    }


    /* ====================================================
       MAIN IMAGE
       ==================================================== */

    .hero-visual {
        position:
            relative;

        z-index:
            3;
    }

    .hero-image-inner {
        height:
            530px;

        min-height:
            0;
    }

    .hero-main-image {
        object-position:
            center 40%;
    }


    /* ====================================================
       LOCATION CARD
       ==================================================== */

    .hero-image-card {
        left:
            15px;

        bottom:
            30px;

        width:
            200px;
    }


    /* ====================================================
       DECORATIVE FRAME
       ==================================================== */

    .hero-image-decoration {
        top:
            -10px;

        right:
            -7px;

        bottom:
            -10px;

        left:
            8px;
    }

    .hero-image-decoration::after {
        display:
            none;
    }


    /* ====================================================
       SCROLL INDICATOR
       ==================================================== */

    .hero-scroll {
        display:
            none;
    }

}