/* =========================================================
   ROOT
========================================================= */

:root {

    --white: #ffffff;

    --ivory: #faf8f3;

    --cream: #f2eee5;

    --cream-dark: #e5ddcf;

    --sky: #dbe6ef;

    --sky-light: #edf4f8;

    --sage: #737b69;

    --sage-light: #aeb5a3;

    --ink: #373b3d;

    --muted: #777a79;

    --line: rgba(55, 59, 61, 0.15);


    /*
     * Фотография используется ТОЛЬКО
     * на обложке.
     */

    --cover-photo:
        url("view_on_green2.webp");


    --shadow:
        0 30px 90px
        rgba(48, 54, 58, 0.12);


    --font-display:
        "Cormorant Garamond",
        "Times New Roman",
        Georgia,
        serif;


    --font-body:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    --container: 1180px;


    --ease:
        cubic-bezier(.22, .9, .28, 1);

}


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

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

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

    background: var(--ivory);

}


body {

    margin: 0;


    background:

        radial-gradient(
            circle at 20% 0%,
            rgba(219, 230, 239, 0.65),
            transparent 35%
        ),

        var(--ivory);


    color: var(--ink);


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

    font-size: 16px;

    line-height: 1.65;


    overflow-x: hidden;

}


body.is-locked {

    overflow: hidden;

}


button,
input,
textarea {

    font: inherit;

}


button {

    border: 0;

}


img,
video {

    display: block;

    max-width: 100%;

}


a {

    color: inherit;

    text-decoration: none;

}


fieldset {

    margin: 0;

    padding: 0;

    border: 0;

}


[hidden] {

    display: none !important;

}


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

   ОБЛОЖКА НЕ ИЗМЕНЕНА.
========================================================= */

.opening-screen {

    position: fixed;

    inset: 0;

    z-index: 999;


    width: 100%;

    min-height: 100vh;

    min-height: 100svh;


    overflow: hidden;


    background: #eef3f6;


    transition:

        opacity 0.8s ease,

        visibility 0.8s ease;

}


.opening-screen.is-hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


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

.opening-screen__photo {

    position: absolute;

    inset: -4%;


    background:

        var(--cover-photo)

        center 52% / cover

        no-repeat;


    transform: scale(1.04);


    animation:

        coverBreath

        12s ease-in-out

        infinite alternate;


    transition:

        transform 1.8s var(--ease),

        filter 1.8s ease;

}


.opening-screen__light {

    position: absolute;

    inset: 0;


    background:

        linear-gradient(

            180deg,

            rgba(236, 244, 249, 0.18),

            rgba(255, 255, 255, 0.12) 35%,

            rgba(250, 248, 243, 0.42)

        );

}


/* =========================================================
   SILK CURTAINS
========================================================= */

.silk-curtain {

    position: absolute;


    top: -8%;

    bottom: -8%;


    width: 59%;


    z-index: 3;


    overflow: hidden;


    opacity: 0.97;


    filter:

        drop-shadow(

            0 30px 35px

            rgba(49, 56, 61, 0.08)

        );


    transition:

        transform 1.65s var(--ease),

        opacity 1.2s ease;

}


.silk-curtain::before {

    content: "";


    position: absolute;

    inset: 0;


    background:

        linear-gradient(

            102deg,

            rgba(255,255,255,0.98) 0%,

            rgba(245,242,236,0.92) 15%,

            rgba(255,255,255,0.99) 30%,

            rgba(226,224,219,0.82) 44%,

            rgba(255,255,255,0.98) 61%,

            rgba(237,234,228,0.86) 76%,

            rgba(255,255,255,0.96) 100%

        );


    box-shadow:

        inset 0 0 60px

        rgba(130, 132, 128, 0.08);

}


.silk-curtain::after {

    content: "";


    position: absolute;

    inset: 0;


    background:

        repeating-linear-gradient(

            95deg,

            transparent 0 8%,

            rgba(150,150,145,0.055) 9%,

            transparent 12% 19%

        );


    opacity: 0.8;

}


.silk-curtain--left {

    left: -8%;


    border-radius:

        0 53% 48% 0 /

        0 26% 74% 0;


    transform:

        rotate(4deg)

        scale(1.05);

}


.silk-curtain--right {

    right: -8%;


    border-radius:

        50% 0 0 46% /

        35% 0 0 65%;


    transform:

        rotate(-4deg)

        scale(1.05);

}


/* =========================================================
   SILK LINES
========================================================= */

.silk-curtain__line {

    position: absolute;


    top: -5%;

    bottom: -5%;


    width: 16%;


    border-radius: 50%;


    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(170,168,162,0.14),

            rgba(255,255,255,0.7),

            transparent

        );


    filter: blur(6px);


    animation:

        silkMove

        7s ease-in-out

        infinite alternate;

}


.silk-curtain__line--1 {

    left: 20%;

}


.silk-curtain__line--2 {

    left: 48%;

    animation-delay: -2s;

}


.silk-curtain__line--3 {

    left: 72%;

    animation-delay: -4s;

}


/* =========================================================
   OPEN ANIMATION
========================================================= */

.opening-screen.is-opening
.silk-curtain--left {

    transform:

        translateX(-108%)

        rotate(-10deg)

        scale(1.08);


    opacity: 0;

}


.opening-screen.is-opening
.silk-curtain--right {

    transform:

        translateX(108%)

        rotate(10deg)

        scale(1.08);


    opacity: 0;

}


.opening-screen.is-opening
.opening-screen__photo {

    transform: scale(1.1);

    filter: brightness(1.08);

}


.opening-screen.is-opening
.cover-card {

    transform:

        translateY(-28px)

        scale(1.04);


    opacity: 0;

}


/* =========================================================
   COVER
========================================================= */

.cover-content {

    position: absolute;

    inset: 0;


    z-index: 5;


    display: grid;

    place-items: center;


    padding:

        max(28px, env(safe-area-inset-top))

        20px

        max(28px, env(safe-area-inset-bottom));

}


.cover-card {

    width:

        min(520px, 92vw);


    padding:

        clamp(34px, 6vw, 68px)

        clamp(25px, 5vw, 55px);


    text-align: center;


    border:

        1px solid

        rgba(255,255,255,0.74);


    border-radius:

        220px 220px 34px 34px;


    background:

        linear-gradient(

            150deg,

            rgba(255,255,255,0.80),

            rgba(250,248,243,0.58)

        );


    backdrop-filter: blur(17px);

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


    box-shadow:

        0 30px 90px

        rgba(50,60,66,0.14),

        inset 0 1px 0

        rgba(255,255,255,0.75);


    transition:

        transform 1s var(--ease),

        opacity 0.8s ease;


    animation:

        cardFloat

        5.5s ease-in-out

        infinite;

}


.cover-card__eyebrow {

    margin:

        0 0 22px;


    color:

        rgba(55,59,61,0.65);


    font-size: 10px;

    font-weight: 600;


    letter-spacing: 0.36em;

    text-transform: uppercase;

}


.cover-card__monogram {

    display: flex;


    align-items: center;

    justify-content: center;


    gap: 12px;


    color: #5a605d;


    font-family: var(--font-display);

    font-size: 22px;


    letter-spacing: 0.08em;

}


.cover-card__monogram i {

    color: var(--sage);

    font-size: 18px;

    font-style: italic;

}


.cover-card__line {

    width: 44px;

    height: 1px;


    margin:

        18px auto 20px;


    background:

        rgba(55,59,61,0.34);

}


.cover-card__names {

    margin: 0;


    font-family: var(--font-display);


    font-size:

        clamp(44px, 8vw, 78px);


    font-weight: 400;

    line-height: 0.92;


    letter-spacing: -0.04em;

}


.cover-card__names > span {

    display: block;

}


.cover-card__names i {

    display: block;


    margin: 3px 0;


    color: var(--sage);


    font-size: 0.57em;

    font-style: italic;

    font-weight: 400;

}


.cover-card__date {

    margin:

        23px 0 29px;


    color:

        rgba(55,59,61,0.72);


    font-size: 12px;

    font-weight: 500;


    letter-spacing: 0.23em;

    text-transform: uppercase;

}


/* =========================================================
   OPEN BUTTON
========================================================= */

.open-button {

    position: relative;


    display: inline-flex;


    align-items: center;

    justify-content: center;


    gap: 20px;


    min-height: 58px;


    padding:

        0 27px;


    overflow: hidden;


    color: white;


    border-radius: 100px;


    background: #434948;


    cursor: pointer;


    box-shadow:

        0 15px 35px

        rgba(53,60,61,0.16);


    transition:

        transform 0.35s var(--ease),

        background 0.35s ease,

        box-shadow 0.35s ease;

}


.open-button::before {

    content: "";


    position: absolute;

    inset: 0;


    background:

        linear-gradient(

            110deg,

            transparent 0 35%,

            rgba(255,255,255,0.24) 48%,

            transparent 61%

        );


    transform:

        translateX(-150%);


    animation:

        buttonShine

        4s ease-in-out

        infinite;

}


.open-button:hover {

    transform:

        translateY(-3px);


    background: #343a39;


    box-shadow:

        0 18px 42px

        rgba(53,60,61,0.22);

}


.open-button:active {

    transform:

        translateY(0)

        scale(0.98);

}


.open-button:focus-visible {

    outline:

        3px solid

        rgba(115,123,105,0.4);


    outline-offset: 4px;

}


.open-button__text,
.open-button__icon {

    position: relative;

    z-index: 1;

}


.open-button__text {

    font-size: 11px;

    font-weight: 600;


    letter-spacing: 0.13em;

    text-transform: uppercase;

}


.open-button__icon {

    animation:

        arrowBounce

        1.8s ease-in-out

        infinite;

}


.cover-card__hint {

    margin:

        15px 0 0;


    color:

        rgba(55,59,61,0.48);


    font-size: 10px;

    letter-spacing: 0.08em;

}


/* =========================================================
   COVER ORBITS
========================================================= */

.cover-orbit {

    position: absolute;

    z-index: 2;


    border:

        1px solid

        rgba(255,255,255,0.43);


    border-radius: 50%;


    pointer-events: none;


    animation:

        orbitPulse

        7s ease-in-out

        infinite alternate;

}


.cover-orbit--1 {

    width: 42vw;

    height: 42vw;


    min-width: 430px;

    min-height: 430px;


    left: -14vw;

    bottom: -12vw;

}


.cover-orbit--2 {

    width: 30vw;

    height: 30vw;


    min-width: 320px;

    min-height: 320px;


    right: -7vw;

    top: -5vw;


    animation-delay: -3s;

}


.opening-screen__scroll-line {

    position: absolute;


    left: 50%;

    bottom: 22px;


    z-index: 6;


    width: 1px;

    height: 38px;


    background:

        linear-gradient(

            to bottom,

            transparent,

            rgba(55,59,61,0.5),

            transparent

        );


    animation:

        linePulse

        2s ease-in-out

        infinite;

}


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

.site {

    opacity: 0;

    visibility: hidden;


    transition:

        opacity 1.2s ease,

        visibility 1.2s ease;

}


.site.is-visible {

    opacity: 1;

    visibility: visible;

}


.section {

    position: relative;


    padding:

        clamp(90px, 12vw, 170px)

        24px;

}


.section__inner {

    width:

        min(var(--container), 100%);


    margin-inline: auto;

}


.section__inner.narrow {

    width:

        min(820px, 100%);

}


.eyebrow {

    margin:

        0 0 25px;


    color: var(--sage);


    font-size: 10px;

    font-weight: 650;


    letter-spacing: 0.32em;

    text-transform: uppercase;

}


.section-title {

    margin: 0;


    font-family:

        var(--font-display);


    font-size:

        clamp(42px, 6.5vw, 82px);


    font-weight: 400;


    line-height: 0.98;


    letter-spacing: -0.035em;

}


.section-title em {

    display: block;


    color: var(--sage);


    font-weight: 400;

}


.lead-text {

    max-width: 640px;


    margin:

        clamp(30px, 5vw, 50px)

        auto 0;


    color: var(--muted);


    font-size:

        clamp(15px, 1.8vw, 18px);


    line-height: 1.9;

}


.section-heading {

    margin-bottom:

        clamp(50px, 8vw, 90px);


    text-align: center;

}


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

.reveal {

    opacity: 0;


    transform:

        translateY(45px);


    transition:

        opacity 1s var(--ease),

        transform 1s var(--ease);

}


.reveal.is-visible {

    opacity: 1;


    transform:

        translateY(0);

}


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

.hero {

    position: relative;


    min-height: 100vh;

    min-height: 100svh;


    overflow: hidden;


    background: var(--sky);

}


.hero__media-wrap {

    position: absolute;

    inset: 0;


    overflow: hidden;


    background: var(--sky-light);

}


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

.hero__video {

    position: absolute;

    inset: 0;


    width: 100%;

    height: 100%;


    max-width: none;


    object-fit: cover;

    object-position: center 57%;


    transform: scale(1.015);


    pointer-events: none;


    background: var(--sky-light);

}


/* =========================================================
   VIDEO SHADE
========================================================= */

.hero__image-shade {

    position: absolute;

    inset: 0;


    background:

        linear-gradient(

            180deg,

            rgba(223,234,242,0.13),

            rgba(238,242,242,0.06) 42%,

            rgba(250,248,243,0.66) 100%

        );

}


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

.hero__veil {

    position: absolute;


    top: -10%;


    width: 38vw;

    height: 72%;


    min-width: 320px;


    border-radius: 50%;


    background:

        linear-gradient(

            100deg,

            rgba(255,255,255,0.03),

            rgba(255,255,255,0.36),

            rgba(255,255,255,0.04)

        );


    filter: blur(3px);


    pointer-events: none;

}


.hero__veil--left {

    left: -15%;


    transform:

        rotate(30deg);


    animation:

        veilFloat

        9s ease-in-out

        infinite alternate;

}


.hero__veil--right {

    right: -18%;


    transform:

        rotate(-25deg);


    animation:

        veilFloat

        11s ease-in-out

        infinite alternate-reverse;

}


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

.hero__content {

    position: relative;


    z-index: 5;


    display: flex;


    min-height: 100vh;

    min-height: 100svh;


    flex-direction: column;


    align-items: center;

    justify-content: center;


    padding:

        80px 20px 55px;


    text-align: center;

}


.hero__eyebrow {

    color:

        rgba(55,59,61,0.68);

}


.hero__title {

    margin: 0;


    font-family:

        var(--font-display);


    font-size:

        clamp(65px, 13vw, 168px);


    font-weight: 400;


    line-height: 0.78;


    letter-spacing: -0.055em;


    text-shadow:

        0 8px 30px

        rgba(255,255,255,0.2);

}


.hero__title > span {

    display: block;

}


.hero__amp {

    display: block;


    margin:

        clamp(14px, 2vw, 24px)

        0;


    color: var(--sage);


    font-size: 0.38em;


    font-style: italic;

}


.hero__subtitle {

    width:

        min(440px, 86vw);


    margin:

        clamp(28px, 4vw, 44px)

        auto 0;


    color:

        rgba(55,59,61,0.74);


    font-family:

        var(--font-display);


    font-size:

        clamp(18px, 2vw, 25px);


    line-height: 1.35;

}


.hero__date {

    display: flex;


    align-items: center;


    gap: 15px;


    margin-top: 28px;


    color:

        rgba(55,59,61,0.7);


    font-size: 11px;

    font-weight: 600;


    letter-spacing: 0.17em;

}


.hero__date-divider {

    width: 30px;

    height: 1px;


    background:

        rgba(55,59,61,0.35);

}


.scroll-button {

    display: inline-flex;


    align-items: center;


    gap: 13px;


    margin-top: 42px;


    padding:

        13px 20px;


    border:

        1px solid

        rgba(55,59,61,0.18);


    border-radius: 100px;


    background:

        rgba(255,255,255,0.42);


    backdrop-filter: blur(10px);

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


    font-size: 10px;

    font-weight: 600;


    letter-spacing: 0.15em;

    text-transform: uppercase;


    transition:

        transform 0.3s ease,

        background 0.3s ease;

}


.scroll-button:hover {

    transform:

        translateY(-3px);


    background:

        rgba(255,255,255,0.72);

}


/* =========================================================
   INVITATION
========================================================= */

.invitation-section {

    background: var(--ivory);


    text-align: center;

}


.flower-divider {

    display: flex;


    align-items: center;

    justify-content: center;


    gap: 15px;


    margin-top: 58px;


    color:

        var(--sage-light);

}


.flower-divider span {

    width: 80px;

    height: 1px;


    background:

        linear-gradient(

            to right,

            transparent,

            rgba(115,123,105,0.32)

        );

}


.flower-divider span:last-child {

    transform:

        scaleX(-1);

}


.flower-divider i {

    font-style: normal;

}


/* =========================================================
   DATE
========================================================= */

.date-section {

    background:

        linear-gradient(

            180deg,

            var(--ivory),

            var(--sky-light)

        );

}


.date-card {

    width:

        min(590px, 100%);


    margin-inline: auto;


    padding:

        clamp(34px, 6vw, 60px);


    text-align: center;


    border:

        1px solid

        rgba(255,255,255,0.76);


    border-radius:

        180px 180px 28px 28px;


    background:

        rgba(255,255,255,0.60);


    backdrop-filter: blur(14px);

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


    box-shadow:

        var(--shadow);

}


.date-card__top {

    margin-bottom: 28px;


    color: var(--sage);


    font-size: 10px;

    font-weight: 650;


    letter-spacing: 0.31em;

    text-transform: uppercase;

}


.date-card__body {

    display: flex;


    align-items: center;

    justify-content: center;


    gap:

        clamp(25px, 6vw, 58px);

}


.date-card__day {

    font-family:

        var(--font-display);


    font-size:

        clamp(90px, 17vw, 155px);


    font-weight: 400;


    line-height: 0.8;

}


.date-card__info {

    display: flex;


    flex-direction: column;


    align-items: flex-start;


    gap: 3px;


    text-align: left;

}


.date-card__info span {

    color: var(--muted);


    font-size: 11px;


    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.date-card__info strong {

    color: var(--sage);


    font-family:

        var(--font-display);


    font-size:

        clamp(30px, 5vw, 48px);


    font-weight: 400;

}


.date-card__caption {

    margin:

        30px 0 0;


    color: var(--muted);


    font-size: 12px;


    letter-spacing: 0.1em;

}


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

.countdown {

    margin:

        clamp(55px, 8vw, 95px)

        auto 0;


    text-align: center;

}


.countdown__label {

    margin:

        0 0 30px;


    color: var(--muted);


    font-family:

        var(--font-display);


    font-size: 21px;

}


.countdown__grid {

    display: grid;


    grid-template-columns:

        repeat(4, 1fr);


    width:

        min(730px, 100%);


    margin-inline: auto;


    border-top:

        1px solid

        var(--line);


    border-bottom:

        1px solid

        var(--line);

}


.countdown__item {

    position: relative;


    padding:

        27px 12px;

}


.countdown__item:not(:last-child)::after {

    content: "";


    position: absolute;


    top: 24%;

    right: 0;

    bottom: 24%;


    width: 1px;


    background:

        var(--line);

}


.countdown__item strong {

    display: block;


    font-family:

        var(--font-display);


    font-size:

        clamp(36px, 6vw, 62px);


    font-weight: 400;


    line-height: 1;

}


.countdown__item span {

    display: block;


    margin-top: 7px;


    color: var(--muted);


    font-size: 9px;


    letter-spacing: 0.15em;

    text-transform: uppercase;

}


/* =========================================================
   PROGRAM
========================================================= */

.program-section {

    background:

        #f9f7f2;

}


.timeline {

    position: relative;


    width:

        min(850px, 100%);


    margin-inline: auto;

}


.timeline::before {

    content: "";


    position: absolute;


    top: 22px;

    bottom: 22px;

    left: 136px;


    width: 1px;


    background:

        linear-gradient(

            to bottom,

            transparent,

            rgba(115,123,105,0.35) 10%,

            rgba(115,123,105,0.35) 90%,

            transparent

        );

}


.timeline-item {

    display: grid;


    grid-template-columns:

        100px 72px 1fr;


    align-items: start;


    min-height: 185px;

}


.timeline-item__time {

    padding-top: 5px;


    color: var(--sage);


    font-family:

        var(--font-display);


    font-size: 25px;

}


.timeline-item__dot {

    position: relative;


    z-index: 2;


    width: 13px;

    height: 13px;


    margin:

        12px auto 0;


    border:

        3px solid

        #f9f7f2;


    border-radius: 50%;


    background:

        var(--sage);


    box-shadow:

        0 0 0 1px

        var(--sage);

}


.timeline-item__content {

    position: relative;


    min-width: 0;


    padding:

        0 0 45px 20px;

}


.timeline-item__number {

    position: absolute;


    top: -20px;

    right: 0;


    color:

        rgba(115,123,105,0.08);


    font-family:

        var(--font-display);


    font-size: 80px;


    line-height: 1;

}


.timeline-item h3 {

    position: relative;


    z-index: 1;


    margin: 0;


    overflow-wrap: anywhere;


    font-family:

        var(--font-display);


    font-size:

        clamp(28px, 4vw, 42px);


    font-weight: 400;

}


.timeline-item p {

    position: relative;


    z-index: 1;


    max-width: 510px;


    margin:

        11px 0 0;


    color: var(--muted);


    font-size: 14px;


    overflow-wrap: anywhere;

}


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

.location-section {

    overflow: hidden;


    background:

        var(--sky-light);

}


.location-card {

    position: relative;


    width:

        min(900px, 100%);


    margin-inline: auto;


    padding:

        clamp(55px, 10vw, 110px)

        clamp(28px, 8vw, 85px);


    overflow: hidden;


    border:

        1px solid

        rgba(255,255,255,0.8);


    border-radius:

        260px 260px 36px 36px;


    background:

        rgba(255,255,255,0.62);


    box-shadow:

        var(--shadow);


    text-align: center;

}


.location-card__content {

    position: relative;


    z-index: 2;

}


.location-card h2 {

    margin: 0;


    overflow-wrap: anywhere;


    font-family:

        var(--font-display);


    font-size:

        clamp(46px, 8vw, 90px);


    font-weight: 400;


    line-height: 0.95;

}


.location-card__address {

    margin:

        35px 0 0;


    color: var(--ink);


    font-family:

        var(--font-display);


    font-size:

        clamp(20px, 3vw, 27px);


    overflow-wrap: anywhere;

}


.location-card__text {

    width:

        min(460px, 100%);


    margin:

        25px auto 0;


    color: var(--muted);


    font-size: 14px;

}


.location-card__decor span {

    position: absolute;


    border:

        1px solid

        rgba(115,123,105,0.12);


    border-radius: 50%;

}


.location-card__decor span:nth-child(1) {

    width: 400px;

    height: 400px;


    top: -220px;

    left: -100px;

}


.location-card__decor span:nth-child(2) {

    width: 540px;

    height: 540px;


    right: -300px;

    bottom: -320px;

}


.location-card__decor span:nth-child(3) {

    width: 240px;

    height: 240px;


    right: 8%;

    top: 10%;

}


/* =========================================================
   DRESS
========================================================= */

.dress-section {

    background:

        var(--ivory);


    text-align: center;

}


.palette {

    display: flex;


    flex-wrap: wrap;


    justify-content: center;


    margin-top: 55px;

}


.palette__item {

    position: relative;


    width:

        clamp(56px, 9vw, 92px);


    aspect-ratio: 1;


    margin-left: -10px;


    border:

        5px solid

        var(--ivory);


    border-radius: 50%;


    box-shadow:

        0 8px 25px

        rgba(50,50,50,0.08);


    transition:

        transform 0.35s var(--ease);

}


.palette__item:first-child {

    margin-left: 0;

}


.palette__item:hover {

    z-index: 3;


    transform:

        translateY(-8px)

        scale(1.07);

}


/* =========================================================
   WISHES
========================================================= */

.wishes-section {

    background:

        linear-gradient(

            180deg,

            var(--ivory),

            #f1f5f5

        );

}


.wishes-grid {

    display: grid;


    grid-template-columns:

        repeat(3, 1fr);


    gap: 18px;

}


.wish-card {

    position: relative;


    min-width: 0;

    min-height: 330px;


    padding:

        45px 35px;


    overflow: hidden;


    border:

        1px solid

        rgba(55,59,61,0.08);


    border-radius: 24px;


    background:

        rgba(255,255,255,0.62);


    transition:

        transform 0.4s var(--ease),

        box-shadow 0.4s ease;

}


.wish-card:hover {

    transform:

        translateY(-8px);


    box-shadow:

        0 30px 60px

        rgba(49,56,60,0.08);

}


.wish-card__number {

    position: absolute;


    right: 24px;

    top: 16px;


    color:

        rgba(115,123,105,0.08);


    font-family:

        var(--font-display);


    font-size: 78px;


    line-height: 1;

}


.wish-card h3 {

    margin:

        62px 0 18px;


    color: var(--sage);


    font-family:

        var(--font-display);


    font-size: 36px;


    font-weight: 400;

}


.wish-card p {

    margin: 0;


    color: var(--muted);


    font-size: 14px;


    line-height: 1.8;

}


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

.rsvp-section {

    background:

        #f8f6f1;

}


.rsvp-layout {

    display: grid;


    grid-template-columns:

        minmax(0, 0.8fr)

        minmax(0, 1.2fr);


    gap:

        clamp(50px, 10vw, 130px);


    align-items: start;

}


.rsvp-intro {

    position: sticky;


    top: 80px;

}


.rsvp-intro .lead-text {

    margin-left: 0;

}


.rsvp-monogram {

    display: flex;


    align-items: center;


    gap: 14px;


    margin-top: 70px;


    color:

        rgba(115,123,105,0.35);


    font-family:

        var(--font-display);


    font-size: 65px;

}


.rsvp-monogram i {

    font-size: 0.5em;

    font-style: italic;

}


/* =========================================================
   FORM
========================================================= */

.rsvp-form {

    min-width: 0;


    padding:

        clamp(30px, 6vw, 55px);


    border:

        1px solid

        rgba(55,59,61,0.09);


    border-radius: 26px;


    background:

        rgba(255,255,255,0.72);


    box-shadow:

        0 25px 70px

        rgba(60,60,60,0.05);

}


.form-group {

    margin-bottom: 32px;

}


.form-group > label,
.form-group > legend {

    display: block;


    margin-bottom: 12px;


    color: var(--ink);


    font-size: 11px;

    font-weight: 650;


    letter-spacing: 0.09em;

    text-transform: uppercase;

}


input[type="text"],
input[type="number"],
textarea {

    width: 100%;


    padding:

        15px 0;


    border: 0;


    border-bottom:

        1px solid

        rgba(55,59,61,0.2);


    border-radius: 0;


    outline: none;


    color: var(--ink);


    background:

        transparent;


    transition:

        border-color 0.3s ease;

}


input:focus,
textarea:focus {

    border-color:

        var(--sage);

}


textarea {

    resize: vertical;

}


/* =========================================================
   RADIO / CHECKBOX
========================================================= */

.attendance-options,
.drink-options {

    display: flex;


    flex-wrap: wrap;


    gap: 8px;

}


.choice,
.check-choice {

    cursor: pointer;

}


.choice input,
.check-choice input {

    position: absolute;


    width: 1px;

    height: 1px;


    opacity: 0;


    pointer-events: none;

}


.choice span,
.check-choice span {

    display: block;


    padding:

        11px 15px;


    border:

        1px solid

        rgba(55,59,61,0.15);


    border-radius: 100px;


    color: var(--muted);


    background:

        rgba(255,255,255,0.55);


    font-size: 12px;


    transition:

        color 0.25s ease,

        border-color 0.25s ease,

        background 0.25s ease,

        transform 0.25s ease;

}


.choice span:hover,
.check-choice span:hover {

    transform:

        translateY(-2px);

}


.choice input:checked + span,
.check-choice input:checked + span {

    color: white;


    border-color:

        var(--sage);


    background:

        var(--sage);

}


.choice input:focus-visible + span,
.check-choice input:focus-visible + span {

    outline:

        3px solid

        rgba(115,123,105,0.2);


    outline-offset: 3px;

}


/* =========================================================
   SUBMIT
========================================================= */

.submit-button {

    display: flex;


    width: 100%;


    align-items: center;

    justify-content: space-between;


    min-height: 60px;


    padding:

        0 25px;


    color: white;


    border-radius: 100px;


    background:

        #444a48;


    cursor: pointer;


    transition:

        transform 0.3s ease,

        background 0.3s ease,

        opacity 0.3s ease;

}


.submit-button:hover {

    transform:

        translateY(-2px);


    background:

        #333937;

}


.submit-button:disabled {

    opacity: 0.55;


    cursor: wait;


    transform: none;

}


.submit-button__text {

    font-size: 11px;

    font-weight: 650;


    letter-spacing: 0.12em;

    text-transform: uppercase;

}


/* =========================================================
   FORM MESSAGE
========================================================= */

.form-message {

    display: none;


    margin-top: 18px;


    padding:

        14px 16px;


    border-radius: 12px;


    font-size: 13px;

}


.form-message.is-visible {

    display: block;

}


.form-message.is-success {

    color: #4b624e;


    background:

        #eaf1e9;

}


.form-message.is-error {

    color: #8b4a4a;


    background:

        #f4e8e8;

}


/* =========================================================
   HONEYPOT
========================================================= */

.website-field {

    position: absolute;


    left: -10000px;


    width: 1px;

    height: 1px;


    overflow: hidden;

}


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

.final-section {

    position: relative;


    display: grid;


    min-height: 92vh;

    min-height: 92svh;


    place-items: center;


    overflow: hidden;


    background: var(--sky-light);


    text-align: center;

}


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

.final-section__video {

    position: absolute;


    inset: 0;


    width: 100%;

    height: 100%;


    max-width: none;


    object-fit: cover;

    object-position: center 72%;


    pointer-events: none;


    background: var(--sky-light);

}


.final-section__overlay {

    position: absolute;


    inset: 0;


    z-index: 1;


    background:

        linear-gradient(

            180deg,

            rgba(249,247,242,0.18),

            rgba(249,247,242,0.54)

        );

}


.final-section__content {

    position: relative;


    z-index: 2;


    padding: 30px;

}


.final-section__content p {

    margin:

        0 0 25px;


    color:

        rgba(55,59,61,0.65);


    font-size: 10px;

    font-weight: 650;


    letter-spacing: 0.28em;

    text-transform: uppercase;

}


.final-section__content h2 {

    margin: 0;


    font-family:

        var(--font-display);


    font-size:

        clamp(70px, 14vw, 160px);


    font-weight: 400;


    line-height: 0.8;


    letter-spacing: -0.05em;

}


.final-section__content h2 > span {

    display: block;

}


.final-section__content h2 i {

    display: block;


    margin:

        20px 0;


    color: var(--sage);


    font-size: 0.34em;


    font-style: italic;

}


.final-section__date {

    margin-top: 42px;


    font-size: 11px;

    font-weight: 600;


    letter-spacing: 0.24em;

}


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

@keyframes coverBreath {

    from {

        transform:

            scale(1.04);

    }

    to {

        transform:

            scale(1.09);

    }

}


@keyframes silkMove {

    from {

        transform:

            translateX(-8px)

            scaleX(0.9);

    }

    to {

        transform:

            translateX(12px)

            scaleX(1.2);

    }

}


@keyframes cardFloat {

    0%,
    100% {

        transform:

            translateY(0);

    }

    50% {

        transform:

            translateY(-8px);

    }

}


@keyframes buttonShine {

    0%,
    65% {

        transform:

            translateX(-150%);

    }

    90%,
    100% {

        transform:

            translateX(150%);

    }

}


@keyframes arrowBounce {

    0%,
    100% {

        transform:

            translateY(-2px);

    }

    50% {

        transform:

            translateY(4px);

    }

}


@keyframes orbitPulse {

    from {

        transform:

            scale(0.96);

    }

    to {

        transform:

            scale(1.05);

    }

}


@keyframes linePulse {

    0%,
    100% {

        opacity: 0.25;

    }

    50% {

        opacity: 0.85;

    }

}


@keyframes veilFloat {

    from {

        translate:

            -15px 8px;

    }

    to {

        translate:

            22px -15px;

    }

}


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

@media (max-width: 900px) {

    .wishes-grid {

        grid-template-columns:

            1fr;

    }


    .wish-card {

        min-height: auto;

    }


    .rsvp-layout {

        grid-template-columns:

            1fr;

    }


    .rsvp-intro {

        position: relative;


        top: auto;


        text-align: center;

    }


    .rsvp-intro .lead-text {

        margin-left: auto;

        margin-right: auto;

    }


    .rsvp-monogram {

        display: none;

    }

}


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

@media (max-width: 650px) {

    .section {

        padding:

            80px 18px;

    }


    /* COVER */

    .cover-card {

        width:

            min(390px, 90vw);


        padding:

            42px 24px;


        border-radius:

            150px 150px 24px 24px;

    }


    .cover-card__names {

        font-size:

            clamp(47px, 15vw, 68px);

    }


    .cover-card__eyebrow {

        margin-bottom: 18px;

    }


    .open-button {

        width:

            min(280px, 100%);

    }


    /* HERO */

    .hero__video {

        object-position:

            center 58%;


        transform:

            scale(1.02);

    }


    .hero__content {

        justify-content:

            flex-end;


        padding:

            80px 18px

            calc(
                60px +
                env(safe-area-inset-bottom)
            );

    }


    .hero__title {

        font-size:

            clamp(62px, 23vw, 104px);

    }


    .hero__subtitle {

        margin-top: 25px;

    }


    /* DATE */

    .date-card {

        border-radius:

            130px 130px 24px 24px;

    }


    .date-card__body {

        gap: 22px;

    }


    .date-card__day {

        font-size: 90px;

    }


    .date-card__info strong {

        font-size: 31px;

    }


    /* COUNTDOWN */

    .countdown__grid {

        grid-template-columns:

            repeat(2, 1fr);


        border-bottom: 0;

    }


    .countdown__item {

        border-bottom:

            1px solid

            var(--line);

    }


    .countdown__item:nth-child(2)::after {

        display: none;

    }


    /* TIMELINE */

    .timeline::before {

        left: 67px;

    }


    .timeline-item {

        grid-template-columns:

            50px 35px

            minmax(0, 1fr);


        min-height: 185px;

    }


    .timeline-item__time {

        font-size: 18px;

    }


    .timeline-item__content {

        padding-left: 13px;

    }


    .timeline-item__number {

        font-size: 58px;

    }


    /* LOCATION */

    .location-card {

        border-radius:

            130px 130px 26px 26px;

    }


    /* PALETTE */

    .palette__item {

        width:

            clamp(52px, 17vw, 74px);


        border-width: 4px;

    }


    /* FORM */

    .rsvp-form {

        padding:

            30px 20px;

    }


    .attendance-options,
    .drink-options {

        flex-direction:

            column;

    }


    .choice,
    .check-choice {

        width: 100%;

    }


    .choice span,
    .check-choice span {

        width: 100%;


        text-align: center;

    }


    /* FINAL */

    .final-section__video {

        object-position:

            center 65%;

    }

}


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

@media (max-width: 370px) {

    .cover-card {

        padding:

            34px 18px;

    }


    .open-button {

        min-height: 54px;


        padding:

            0 20px;

    }


    .open-button__text {

        font-size: 9px;

    }


    .hero__date {

        gap: 10px;

    }


    .hero__date-divider {

        width: 18px;

    }


    .timeline::before {

        left: 61px;

    }


    .timeline-item {

        grid-template-columns:

            46px 29px

            minmax(0, 1fr);

    }


    .timeline-item__time {

        font-size: 16px;

    }

}


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

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

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

        scroll-behavior: auto !important;


        animation-duration:

            0.01ms !important;


        animation-iteration-count:

            1 !important;


        transition-duration:

            0.01ms !important;

    }


    .reveal {

        opacity: 1;


        transform: none;

    }

}