* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #f6efe8;
    color: #74334b;
    font-family: "DM Sans", sans-serif;
    overflow-x: hidden;
}

body.locked {
    overflow: hidden;
}


/* =========================
   OPENING
========================= */

.opening {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #f8f4ef;
    display: grid;
    place-items: center;
    transition: opacity .9s, visibility .9s;
}

.opening.opened {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.envelope-wrap {
    position: relative;
    width: min(100vw, 1500px);
    height: min(100svh, 930px);
    overflow: hidden;
    cursor: pointer;
}

.envelope-photo {
    position: absolute;
    inset: 0;
    background: url("assets/envelope-cover.png") center / cover no-repeat;
    background-color: #f8f4ef;
}

/* =========================
   ENVELOPE FLAP
========================= */

.envelope-flap {
    position: absolute;
    width: min(72vw, 720px);
    aspect-ratio: 1.6 / 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateX(0deg);
    transform-origin: center top;
    z-index: 3;

    background: transparent;

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

.open-copy {
    position: absolute;
    z-index: 2;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #7f2c4c;
    text-shadow: 0 2px 16px #fff;
}

.open-copy p {
    font-size: 9px;
    letter-spacing: .32em;
}

.open-copy h1 {
    font: 500 clamp(50px, 8vw, 86px) / .8 "Cormorant Garamond", serif;
    margin: 12px 0 20px;
}

.open-copy i {
    font-weight: 400;
    color: #b47b82;
}

.open-copy button {
    border: 1px solid #7f2c4c55;
    background: #fff9f2dd;
    color: #7f2c4c;
    border-radius: 999px;
    padding: 13px 24px;
    font-size: 9px;
    letter-spacing: .16em;
    cursor: pointer;
}


/* =========================
   TOP BAR
========================= */

.topbar {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.monogram {
    font: 500 1.3rem "Cormorant Garamond", serif;
    color: #812b4c;
    pointer-events: auto;
}

.monogram span {
    color: #b47b82;
}

.music-btn {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #812b4c44;
    background: #fff9f2bb;
    color: #812b4c;
    cursor: pointer;
}


/* =========================
   SITE / SLIDES
========================= */

.site {
    opacity: 1;
}

.slide {
    min-height: 100svh;
    position: relative;
    display: grid;
    place-items: center;
    padding: 70px 20px;
    overflow: hidden;
    scroll-snap-align: start;
}

.art-full {
    position: absolute;
    inset: 0;
    background-image: url("assets/wedding-frame.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-color: #f6efe8;
    z-index: 0;
}

.slide:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(255, 248, 241, .06);
}

.slide-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: min(720px, 88vw);
    margin: auto;
}


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

.eyebrow,
.wedding-title,
.date,
.venue {
    font-size: 15px;
    letter-spacing: .30em;
}

.eyebrow {
    color: #986070;
    margin: 0 0 18px;
    position: relative;
    top: -60px;
}

.hero-content h2 {
    font: 500 clamp(66px, 12vw, 130px) / .78 "Cormorant Garamond", serif;
    color: #812b4c;
    margin: 0;
    text-shadow: 0 2px 15px #fff8;
    position: relative;
    top: -50px;
}

.hero-content h2 i,
.final-names i {
    font-weight: 400;
    color: #b47b82;
}

.wedding-title {
    color: #986070;
    margin: 0 0 18px;
    position: relative;
    top: -20px;
}

.date {
    color: #84676d;
    margin: 0 0 8px;
    position: relative;
    top: -20px;
}

.venue {
    color: #927b7d;
    margin: 0;
    position: relative;
    top: -10px;
}


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

.countdown {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.countdown div {
    min-width: 62px;
    padding: 9px 6px;
    background: #fffaf5b8;
    border: 1px solid #812b4c20;
    backdrop-filter: blur(5px);
}

.countdown b {
    display: block;
    font: 500 27px "Cormorant Garamond", serif;
    color: #8a3451;
}

.countdown small,
.big-count small {
    font-size: 7px;
    letter-spacing: .12em;
    color: #927b7d;
}


/* =========================
   HEADINGS
========================= */

.slide h3 {
    font: 500 clamp(48px, 7vw, 76px) / .9 "Cormorant Garamond", serif;
    color: #812b4c;
    margin: 0 0 22px;
    text-shadow: 0 2px 12px #fff8;
}


/* =========================
   GLASS CARD
========================= */

.glass-card {
    width: min(500px, 88vw);
    margin: auto;
    padding: 25px 24px;
    background: #fffaf5d6;
    border: 1px solid #812b4c22;
    backdrop-filter: blur(7px);
    display: grid;
    gap: 7px;
}

.glass-card span {
    font-size: 7px;
    letter-spacing: .2em;
    color: #a17e83;
    margin-top: 6px;
}

.glass-card strong {
    font: 500 22px "Cormorant Garamond", serif;
    color: #71334a;
}

.glass-card a {
    margin-top: 15px;
    border: 1px solid #812b4c35;
    border-radius: 999px;
    padding: 11px;
    color: #7f2c4c;
    text-decoration: none;
    font-size: 8px;
    letter-spacing: .14em;
}


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

.big-count {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 30px 0;
}

.big-count div {
    min-width: 90px;
    padding: 14px;
    background: #fffaf5c9;
    border: 1px solid #812b4c18;
}

.big-count b {
    display: block;
    font: 500 48px "Cormorant Garamond", serif;
    color: #8a3451;
}


/* =========================
   COPY
========================= */

.copy {
    max-width: 430px;
    margin: auto;
    color: #7e6a6a;
    font-size: 13px;
    line-height: 1.8;
    font-weight: 500;
}


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

#rsvpForm {
    width: min(500px, 88vw);
    margin: auto;
    display: grid;
    gap: 9px;
}

#rsvpForm input,
#rsvpForm select,
#rsvpForm textarea {
    border: 1px solid #812b4c20;
    background: #fffaf5db;
    color: #67364a;
    padding: 14px;
    border-radius: 9px;
    font: inherit;
}

#rsvpForm textarea {
    min-height: 95px;
}

#rsvpForm button {
    border: 0;
    background: #812b4c;
    color: #fff;
    padding: 14px;
    border-radius: 999px;
    font-size: 9px;
    letter-spacing: .13em;
    cursor: pointer;
}

#rsvpMsg {
    color: #812b4c;
    font-size: 12px;
}


/* =========================
   FINAL
========================= */

.final-names {
    font: 500 clamp(60px, 11vw, 110px) / .8 "Cormorant Garamond", serif;
    color: #812b4c;
    margin: 28px 0 5px;
}

.slide-number {
    position: absolute;
    z-index: 3;
    bottom: 22px;
    right: 25px;
    font-size: 8px;
    letter-spacing: .2em;
    color: #9b7c80;
}


/* =========================
   SLIDE POSITIONS
========================= */

.slide-details .slide-content {
    transform: translateY(-2vh);
}

.slide-countdown .slide-content {
    transform: translateY(-5vh);
}

.slide-rsvp .slide-content {
    transform: translateY(2vh);
}

.slide-final .slide-content {
    transform: translateY(2vh);
}


/* =========================
   DETAILS EYEBROW POSITION
========================= */

.slide-details .eyebrow {
    position: relative;
    top: -10px;
}


/* =========================
   COUNTDOWN EYEBROW POSITION
========================= */

.slide-countdown .eyebrow {
    position: relative;
    top: -20px;
}


/* =========================
   RSVP HEADING POSITION
========================= */

.slide-rsvp h3 {
    position: relative;
    top: -20px;
}

.slide-final .copy {
    position: relative;
    top: 30px;
}

.final-date {
    position: relative;
    top: 30px;
}


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

@media (max-width: 650px) {

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

    .art-full {
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #f6efe8;
    }


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

    .slide {
        padding: 65px 15px;
    }


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

    .hero-content h2 {
        font-size: clamp(58px, 18vw, 72px);
    }


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

    .glass-card {
        padding: 21px 18px;
    }

    .glass-card strong {
        font-size: 19px;
    }


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

    .big-count {
        gap: 7px;
    }

    .big-count div {
        min-width: 74px;
    }

    .big-count b {
        font-size: 40px;
    }


    /* =========================
       MOBILE SMALL TEXT
    ========================= */

    .eyebrow,
    .wedding-title,
    .date,
    .venue {
        font-size: 8px;
        letter-spacing: .25em;
    }


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

    .envelope-wrap {
        width: 100vw;
        height: 100svh;
    }

    .envelope-photo {
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }

}


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

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

    html {
        scroll-behavior: auto;
    }

}

/* =========================
   ENVELOPE SMOOTH OPEN
========================= */

.opening-animation .envelope-wrap {
    animation: envelopeZoom 2s cubic-bezier(.22, 1, .36, 1) forwards;
}

.opening-animation .envelope-photo {
    animation: photoZoom 2s cubic-bezier(.22, 1, .36, 1) forwards;
}

.opening-animation .envelope-flap {
    animation: flapOpen 2s cubic-bezier(.22, 1, .36, 1) forwards;
}

.opening-animation .open-copy {
    animation: copyDisappear .7s ease forwards;
}

/* =========================
   CINEMATIC ENVELOPE OPEN
========================= */

.opening-animation .envelope-wrap {
    animation: cinematicEnvelope 5s cubic-bezier(.25, .1, .25, 1) forwards;
}

.opening-animation .envelope-photo {
    animation: cinematicPhoto 2.2s cubic-bezier(.25, .1, .25, 1) forwards;
}

.opening-animation .envelope-flap {
    animation: cinematicFlap 2.2s cubic-bezier(.25, .1, .25, 1) forwards;
}

.opening-animation .open-copy {
    animation: cinematicCopy 1s ease forwards;
}


/* =========================
   ENVELOPE
========================= */

@keyframes cinematicEnvelope {

    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.12);
    }

    55% {
        transform: scale(1.12);
    }

    78% {
        transform: scale(.92);
    }

    100% {
        transform: scale(.75);
        opacity: 0;
    }

}


/* =========================
   PHOTO
========================= */

@keyframes cinematicPhoto {

    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.08);
    }

    55% {
        transform: scale(1.08);
    }

    78% {
        transform: scale(.90);
    }

    100% {
        transform: scale(.72);
        opacity: 0;
    }

}


/* =========================
   FLAP
========================= */

@keyframes cinematicFlap {

    0% {
        transform: translate(-50%, -50%) rotateX(0deg);
    }

    35% {
        transform: translate(-50%, -50%) rotateX(-120deg);
    }

    55% {
        transform: translate(-50%, -50%) rotateX(-120deg);
    }

    78% {
        transform: translate(-50%, -50%) rotateX(-120deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateX(-120deg);
    }

}


/* =========================
   TEXT
========================= */

@keyframes cinematicCopy {

    0% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(.9);
    }

}

.slide-final h3 {
    position: relative;
    top: -40px;
}

.slide-final .final-date {
    position: relative;
    top: -15px;
}