@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Montserrat:wght@300;400;500&display=swap');


/* ==================================================
   VARIABLES
================================================== */

:root {
    --ivory: #f6f2e9;
    --paper: #fffdf8;

    --midnight: #151c27;
    --midnight-light: #202a38;

    --charcoal: #292d32;

    --gold: #b7a078;
    --gold-light: #d2c29e;

    --winter-blue: #68778a;

    --white: #ffffff;

    --border-light: rgba(21, 28, 39, 0.15);
}


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

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


html {
    scroll-behavior: auto;
}


body {
    background: var(--ivory);
    color: var(--charcoal);

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 19px;
    line-height: 1.7;

    overflow-x: hidden;
}


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

.hero {
    position: relative;

    height: 180vh;
    min-height: 1200px;

    color: var(--white);

    background:
        linear-gradient(
            rgba(13, 19, 28, 0.42),
            rgba(13, 19, 28, 0.72)
        ),
        url("images/hero.png")
        center center / cover no-repeat;

    background-attachment: fixed;
}


/* Vignette */

.hero::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 10%,
            rgba(5, 9, 15, 0.5) 100%
        );

    pointer-events: none;

    z-index: 1;
}


/* Elegant frame */

.hero::before {
    content: "";

    position: absolute;

    top: 28px;
    right: 28px;
    bottom: 28px;
    left: 28px;

    border: 1px solid rgba(255, 255, 255, 0.32);

    z-index: 5;

    pointer-events: none;
}


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

.hero-content {
    position: relative;

    width: 100%;
    height: 100%;

    text-align: center;

    z-index: 2;
}


/* ==================================================
   FIRST MESSAGE
================================================== */

.hero-intro {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    display: flex;

    flex-direction: column;

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

    padding: 0 30px 5vh;

    pointer-events: none;
}


/* ==================================================
   HURRA
================================================== */

.hero-hurra {
    margin: 0;

    color: var(--white);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            5rem,
            13vw,
            10rem
        );

    font-weight: 300;

    font-style: italic;

    line-height: 0.9;

    opacity: 0;

    animation:
        hurraIn
        1s
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards;

    animation-delay: 0.2s;
}


/* ==================================================
   ANNOUNCEMENT
================================================== */

.hero-announcement {
    /*
     * Extra vertical space prevents the top and
     * bottom of italic glyphs — especially "!" —
     * from being clipped by the animated clip-path.
     */
    display: inline-block;

    margin-top: 40px;

    padding:
        0.08em
        0.12em
        0.16em;

    color: var(--gold-light);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            2rem,
            5vw,
            4rem
        );

    font-style: italic;

    font-weight: 400;

    line-height: 1.15;

    opacity: 0;

    transform: translateX(-200px);

    clip-path:
        inset(
            -0.15em
            100%
            -0.15em
            0
        );

    animation:
        announcementIn
        1.3s
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards;

    animation-delay: 1s;
}


/* ==================================================
   NAMES
================================================== */

.hero-names {
    position: absolute;

    top: 108vh;
    left: 0;

    width: 100%;

    display: flex;

    flex-direction: column;

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

    padding: 0 30px;

    text-align: center;

    opacity: 1;

    pointer-events: auto;
}


/*
   There is deliberately NO transform,
   opacity animation or JS positioning here.

   The browser's normal document scroll
   moves this block into view.
*/

.hero-names h1 {
    margin: 0 0 30px;

    color: var(--white);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            5rem,
            14vw,
            10rem
        );

    font-weight: 300;

    line-height: 0.8;

    letter-spacing: -3px;

    opacity: 1;

    transform: none;

    animation: none;
}


.hero-names h1 span {
    display: block;

    margin: 18px 0;

    color: var(--gold-light);

    font-size: 0.32em;

    font-weight: 300;

    letter-spacing: 0;
}


.hero-names .date {
    font-family: "Montserrat", sans-serif;

    font-size: 11px;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: var(--white);

    opacity: 1;

    animation: none;
}


/* ==================================================
   SCROLL LINK
================================================== */

.scroll-link {
    position: fixed;

    left: 50%;
    bottom: 70px;

    transform: translateX(-50%);

    color: var(--white);

    text-decoration: none;

    font-family: "Montserrat", sans-serif;

    font-size: 9px;

    letter-spacing: 4px;

    text-transform: uppercase;

    opacity: 0;

    animation:
        fadeIn
        1s
        ease
        forwards;

    animation-delay: 2.8s;

    transition:
        opacity 0.3s ease;

    z-index: 20;
}


.scroll-link:hover {
    opacity: 0.6;
}


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

@keyframes hurraIn {

    from {
        opacity: 0;

        transform:
            translateY(40px)
            scale(0.94);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes announcementIn {

    from {
        opacity: 0;

        transform:
            translateX(-200px);

        clip-path:
            inset(
                -0.15em
                100%
                -0.15em
                0
            );
    }

    to {
        opacity: 1;

        transform:
            translateX(0);

        clip-path:
            inset(
                -0.15em
                0
                -0.15em
                0
            );
    }
}


@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ==================================================
   GENERAL TYPOGRAPHY
================================================== */

.eyebrow {
    font-family: "Montserrat", sans-serif;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: var(--gold);
}


h1 {
    font-weight: 300;
}


h2 {
    margin-top: 18px;

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.2rem
        );

    font-weight: 300;

    line-height: 1.05;
}


.divider {
    position: relative;

    width: 65px;
    height: 1px;

    margin: 35px auto 45px;

    background: var(--gold);
}


.divider::before,
.divider::after {
    content: "✦";

    position: absolute;

    top: 50%;

    transform: translateY(-55%);

    color: var(--gold);

    font-size: 8px;
}


.divider::before {
    left: -16px;
}


.divider::after {
    right: -16px;
}


/* ==================================================
   SECTIONS
================================================== */

section {
    position: relative;

    padding: 120px 25px;

    text-align: center;
}


.container {
    max-width: 950px;

    margin: 0 auto;
}


.intro {
    max-width: 650px;

    margin: auto;

    font-size: 1.25rem;

    color: #50545a;
}


/* ==================================================
   COUNTDOWN
================================================== */

.countdown-section {
    background: var(--midnight);

    color: var(--white);

    overflow: hidden;
}


.countdown-section::before {
    content:
        "✦   ·       ✧          ·     ✦        ·        ✧     ·    ✦";

    position: absolute;

    top: 25px;
    left: 0;

    width: 100%;

    color: rgba(255, 255, 255, 0.18);

    font-size: 14px;

    letter-spacing: 20px;

    white-space: nowrap;

    pointer-events: none;
}


.countdown-section .eyebrow {
    color: var(--gold-light);
}


.countdown-section .divider {
    background: var(--gold);
}


.countdown {
    display: flex;

    justify-content: center;

    gap:
        clamp(
            25px,
            7vw,
            80px
        );

    margin-top: 55px;
}


.countdown div {
    min-width: 75px;
}


.countdown span {
    display: block;

    font-size:
        clamp(
            2.8rem,
            6vw,
            4.5rem
        );

    font-weight: 300;

    line-height: 1;

    color: var(--white);
}


.countdown small {
    display: block;

    margin-top: 12px;

    font-family: "Montserrat", sans-serif;

    font-size: 8px;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--gold-light);
}


/* ==================================================
   DETAILS
================================================== */

#details {
    background: var(--ivory);
}


.details-grid {
    display: grid;

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

    gap: 25px;

    margin-top: 60px;
}


.detail-card {
    position: relative;

    padding: 50px 25px;

    background: var(--paper);

    border: 1px solid var(--border-light);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.detail-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 15px 40px
        rgba(
            21,
            28,
            39,
            0.08
        );
}


.detail-card::before {
    content: "";

    position: absolute;

    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;

    border:
        1px solid
        rgba(
            183,
            160,
            120,
            0.18
        );

    pointer-events: none;
}


.detail-card h3 {
    position: relative;

    margin-bottom: 15px;

    font-family: "Montserrat", sans-serif;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--gold);
}


.detail-card p {
    position: relative;

    font-size: 1.2rem;
}


/* ==================================================
   STORY
================================================== */

.story {
    max-width: 720px;
}


.story::before {
    content: "✦";

    display: block;

    margin-bottom: 25px;

    color: var(--gold);

    font-size: 20px;
}


.story p:last-child {
    font-size: 1.25rem;

    color: #50545a;
}


/* ==================================================
   RSVP
================================================== */

.rsvp {
    background: var(--midnight-light);

    color: var(--white);
}


.rsvp .eyebrow {
    color: var(--gold-light);
}


.rsvp .divider {
    background: var(--gold);
}


.rsvp p:not(.eyebrow) {
    max-width: 600px;

    margin-left: auto;
    margin-right: auto;

    font-size: 1.2rem;
}


.button {
    display: inline-block;

    margin-top: 40px;

    padding: 17px 45px;

    border: 1px solid var(--gold-light);

    color: var(--white);

    text-decoration: none;

    font-family: "Montserrat", sans-serif;

    font-size: 9px;

    letter-spacing: 3px;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.button:hover {
    background: var(--gold-light);

    color: var(--midnight);
}


/* ==================================================
   MUSIC
================================================== */

.music {
    background: var(--paper);
}


.music-intro {
    max-width: 550px;

    margin: 0 auto 35px;

    color: #50545a;
}


.spotify-player {
    max-width: 700px;

    margin: 40px auto 0;

    overflow: hidden;

    border-radius: 12px;

    box-shadow:
        0 15px 40px
        rgba(
            21,
            28,
            39,
            0.12
        );
}


.spotify-player iframe {
    display: block;
}


/* ==================================================
   FOOTER
================================================== */

footer {
    padding: 80px 20px;

    text-align: center;

    background: var(--ivory);
}


.footer-names {
    font-size: 2.8rem;

    font-weight: 300;
}


footer p:last-child {
    margin-top: 8px;

    font-family: "Montserrat", sans-serif;

    font-size: 8px;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--winter-blue);
}


/* ==================================================
   WEDDING ASSISTANT
================================================== */

.wedding-assistant {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 1000;
}


.assistant-character {
    width: 58px;
    height: 58px;

    border-radius: 50%;

    border:
        1px solid
        var(--gold-light);

    background: var(--midnight);

    color: var(--gold-light);

    font-family: Georgia, serif;

    font-size: 25px;

    cursor: pointer;

    box-shadow:
        0 8px 25px
        rgba(
            0,
            0,
            0,
            0.2
        );

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


.assistant-character:hover {
    transform:
        translateY(-4px)
        rotate(8deg);

    box-shadow:
        0 12px 30px
        rgba(
            0,
            0,
            0,
            0.25
        );
}


.assistant-card {
    position: absolute;

    right: 0;
    bottom: 75px;

    width: 310px;

    padding: 28px;

    background: var(--paper);

    color: var(--charcoal);

    border:
        1px solid
        var(--gold-light);

    box-shadow:
        0 20px 50px
        rgba(
            21,
            28,
            39,
            0.2
        );

    opacity: 0;

    transform:
        translateY(15px)
        scale(0.95);

    pointer-events: none;

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


.assistant-card.open {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}


.assistant-card::after {
    content: "";

    position: absolute;

    right: 18px;
    bottom: -10px;

    width: 18px;
    height: 18px;

    background: var(--paper);

    border-right:
        1px solid
        var(--gold-light);

    border-bottom:
        1px solid
        var(--gold-light);

    transform: rotate(45deg);
}


.assistant-close {
    position: absolute;

    top: 10px;
    right: 13px;

    border: none;

    background: none;

    color: var(--winter-blue);

    font-size: 22px;

    cursor: pointer;
}


.assistant-sparkle {
    color: var(--gold);

    font-size: 20px;

    margin-bottom: 5px;
}


.assistant-card h3 {
    margin-bottom: 5px;

    font-size: 1.8rem;

    font-weight: 400;
}


.assistant-card p {
    margin-bottom: 20px;

    color: #555b62;

    font-size: 1rem;

    line-height: 1.5;
}


.assistant-options {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.assistant-options button {
    padding: 9px 12px;

    border:
        1px solid
        var(--border-light);

    background: var(--ivory);

    color: var(--charcoal);

    text-align: left;

    font-family: "Montserrat", sans-serif;

    font-size: 9px;

    letter-spacing: 0.5px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.assistant-options button:hover {
    background: var(--midnight);

    border-color: var(--midnight);

    color: var(--white);
}


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

@media (max-width: 650px) {

    body {
        font-size: 17px;
    }


    html {
        scroll-behavior: auto;
    }


    section {
        padding: 85px 20px;
    }


    .hero {
        height: 180vh;
        min-height: 1000px;

        background-attachment: scroll;
    }


    .hero::before {
        top: 14px;
        right: 14px;
        bottom: 14px;
        left: 14px;
    }


    .hero-intro {
        height: 100vh;

        padding:
            0 20px 5vh;
    }


    .hero-hurra {
        font-size:
            clamp(
                5rem,
                22vw,
                8rem
            );
    }


    .hero-announcement {
        max-width: 100%;

        font-size: 2.2rem;

        margin-top: 18px;

        padding:
            0.08em
            0.12em
            0.18em;

        line-height: 1.15;
    }


    .hero-names {
        top: 105vh;

        padding:
            0 20px;
    }


    .hero-names h1 {
        font-size: 5rem;

        letter-spacing: -1px;
    }


    .hero-names h1 span {
        margin: 15px 0;
    }


    .hero .date {
        font-size: 9px;

        letter-spacing: 3px;
    }


    .scroll-link {
        bottom: 45px;
    }


    h2 {
        font-size: 2.7rem;
    }


    .countdown {
        gap: 15px;
    }


    .countdown div {
        min-width: 55px;
    }


    .countdown span {
        font-size: 2.2rem;
    }


    .countdown small {
        font-size: 7px;

        letter-spacing: 1.5px;
    }


    .details-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .detail-card {
        padding: 40px 20px;
    }


    .story p:last-child {
        font-size: 1.15rem;
    }


    .footer-names {
        font-size: 2.3rem;
    }


    .wedding-assistant {
        right: 15px;
        bottom: 15px;
    }


    .assistant-card {
        right: 0;

        width:
            min(
                310px,
                calc(100vw - 30px)
            );
    }
}


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

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }


    .hero-announcement {
        opacity: 1;

        transform: none;

        clip-path:
            inset(
                -0.15em
                0
                -0.15em
                0
            );
    }
}