@font-face {
    font-family: 'heroHeaderFont';
    src: url(assets/Amsterline.ttf) format(truetype);
    font-weight: normal;
    font-style: normal;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Cormorant Garamond', serif;
    overflow-x: hidden;
    color: #4f3c31;
    /* background: #e7ddd4; */
    background-image: url('assets/background-image.png');
    background-size: 100%;
    background-position: center;
}

/* each section acts like a page */
:root {
  --shared-background-palette: #D8C9B9;
}

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

/* Main section numbers: 01, 02, 03... */
.section-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: 4px;
    opacity: .45;
}

/* Main section headings */
.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 9vw, 4.5rem);
    font-weight: 400;
    line-height: 1;
}

/* Small decorative text between divider lines */
.section-divider-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: 2px;
    color: #8d6d5a;
}

/* Normal body text */
.body-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.7;
}

/* Small labels */
.small-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: .65rem;
    font-weight: 400;
    letter-spacing: 3px;
}

/* Buttons */
button,
a {
    font-family: 'Cormorant Garamond', serif;
}

.details-title,
.story-title,
.couple-title,
.gallery-title,
.rsvp-title,
.dress-title,
.more-info-title,
.accomodation-title
 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 9vw, 4.5rem);
    font-weight: 400;
    line-height: 1;
    margin: 0;
}

.details-number,
.story-number,
.gallery-number,
.rsvp-number,
.dress-number,
.more-info-number,
.accomodation-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: 4px;
    opacity: .45;
    margin-bottom: 5px;
}

.hero-divider b,
.details-divider b,
.story-divider b,
.couple-divider b,
.gallery-divider b,
.rsvp-divider b,
.dress-divider b,
.more-info-divider b,
.accomodation-divider b  {
    font-family: 'Cormorant Garamond', serif;
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: 2px;
    color: #8d6d5a;
}

.hero-divider,
.details-divider,
.story-divider,
.couple-divider,
.gallery-divider,
.rsvp-divider,
.dress-divider,
.more-info-divider,
.accomodation-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 5px 0 12px;
}

.hero-divider span,
.details-divider span,
.story-divider span,
.couple-divider span,
.gallery-divider span,
.rsvp-divider span,
.dress-divider span,
.attire-divider span,
.more-info-divider span,
.accomodation-divider span {
    width: 50px;
    height: 1px;
    background: #8d6d5a;
    opacity: .45;
}


/* =========================================================
   PAGE LAYOUT 
========================================================= */

.page {
    min-height: 50vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    /* consistent internal spacing */
    box-sizing: border-box;
    overflow: hidden; /* Keeps side-sliding elements from triggering page width shifts */
}

.page>* {
    margin: 0;
}

.page-divider {
    width: 100%;
    z-index: 10;
}

.page-divider img {
    transform: translateY(-50%);
    display: block;
    width: 100%;
    height: auto;
}

#hero {
    /* background: red; */
    padding-top: 10px;
}

#story {
    padding-top: 0px;
    padding-bottom: 50px;
    /* background: green; */
}

#details {
    padding-top: 0px;
    /* background: blue; */
    position: relative;
    padding-bottom: 0;
    margin-bottom: 0;
}

.page-divider#page-divider-venuePalette {
    background: var(--shared-background-palette);
}

#palette {
    background: var(--shared-background-palette);
    padding-top: 0px;
    padding-bottom: 100px;
}

#rsvp {
    padding-top: 0px;
    /* background: blue; */
}

/* hero image */
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(100%, 900px);
    text-align: center;
}

.hero-img-container {
    width: 100%;
    height: clamp(280px, 52vh, 600px);

    display: flex;
    justify-content: center;
    align-items: flex-start;

    overflow: visible;
}

.hero-img-container img {
    width: min(100%, 650px);
    height: 100%;
    
    object-fit: contain;
    object-position: top center;
    
    display: block;
}


/* ========================================
   HERO REVEAL AFTER ENVELOPE OPENS
======================================== */

/* Keep hero content hidden before the envelope is dismissed */
#hero .hero-reveal-item {
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
}

/* Each element animates only when JS adds .show */
#hero .hero-reveal-item.show {
    animation: heroElementReveal 0.7s ease-out forwards;
}

@keyframes heroElementReveal {
    from {
        opacity: 0;
        visibility: visible;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #hero .hero-reveal-item,
    #hero .hero-reveal-item.show {
        animation: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* decorative divider */

.invite {
    font-size: clamp(3rem, 9vw, 5rem);
    margin-bottom: 20px;
}

.subtitle {
    max-width: 600px;
    margin-top: 0;
    font-size: 1rem;
    line-height: 1.7;
    opacity: .7;
}
        
.names {
    font-family: 'heroHeaderFont';
    font-size: clamp(5.5rem, 23vw, 14rem);
    line-height: .78;
    margin-top: -25px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    white-space: nowrap;
}

.date {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-top: 10px;
    opacity: .75;
}

.line {
    width: 120px;
    height: 1px;
    background: #7a5f50;
    margin: 30px auto;
}


/* details card */

.details-section {
    width: min(92%, 900px);
    margin: 0 auto;
    text-align: center;
}

.details-date {
    margin-top: 4px;
    font-size: .85rem;
    letter-spacing: 4px;
    opacity: .65;
}


/* timer */

.countdown {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 24px 0;
}

.countdown-item {
    min-width: 55px;
    text-align: center;
}

.countdown-item span {
    display: block;
    font-size: 18px;
    color: #6f5a4e;
    line-height: 1;
}

.countdown-item small {
    display: block;
    font-size: 9px;
    opacity: 0.6;
    letter-spacing: 1.5px;
}

/* Our Story */
.story-section {
    position: relative;
    width: min(90%, 650px);
    margin: 0 auto;
    text-align: center;
}

.story-photo {
    width: min(75vw, 380px);
    margin: 0 auto 30px;
    position: relative;
}

.story-photo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.story-photo::before {
    content: "";
    position: absolute;
    inset: 12px -12px -12px 12px;
    border: 1px solid rgba(141, 109, 90, .25);
    z-index: -1;
}

.story-text {
    max-width: 520px;
    margin: 0 auto;
}

.story-text p {
    font-size: 1rem;
    line-height: 1.7;
    opacity: .7;
    margin-bottom: 15px;
    text-align: left;
}

/* =========================
   COUPLE INTRODUCTION
========================= */

#couple {
    min-height: 70vh;
    padding: 0px 0px;
    margin: 0px;
}

.couple-section {
    width: 100%;
    max-width: 850px;
    margin: 0 0px;
    text-align: center;
}

.couple-number {
    margin-bottom: 8px;
    font-size: .7rem;
    letter-spacing: 4px;
    color: #8d6d5a;
}

.couple-intro {
    max-width: 520px;
    margin: 0 auto 40px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    line-height: 1.7;
    opacity: .7;
    color: #6f5b50;
}

/* Couple cards */

.couple-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 45px;
    max-width: 650px;
    margin: 0px auto;
    padding: 0px;
}

.person-card {
    padding: 10px;
}

.person-photo {
    width: 210px;
    height: 260px;
    margin: 0 auto 18px;
    overflow: hidden;
    border: 5px solid #faf5ef;
    box-shadow:
        0 8px 25px rgba(79, 60, 49, .12);
}

.person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.person-card h2 {
    text-align: center;
    margin: 0 0 10px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: normal;
    color: #4f3c31;
}

.person-card p {
    margin: 0 auto;
    max-width: 270px;
    font-family: 'Cormorant Garamond', serif;
    font-size: .95rem;
    line-height: 1.65;
    color: #6f5b50;
    text-align: left;
}

.person-card p, 
.person-card {
    text-align: justify;
    text-justify: inter-word; /* Improves word spacing distribution across browsers */
    
    /* Prevents awkward gaps by breaking long words neatly with hyphens */
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

/* =========================================================
GALLERY
========================================================= */

.gallery-section {
width: min(94%, 900px);
margin: 0 auto;
padding: 70px 0 90px;
text-align: center;
position: relative;
}

.gallery-subtitle {
max-width: 500px;
margin: 0 auto 35px;
font-size: 1rem;
line-height: 1.7;
opacity: .7;
}

/* =========================
CAROUSEL
========================= */

.gallery-carousel {
position: relative;
width: 100%;
max-width: 760px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}

/* viewport */

.gallery-viewport {
width: 100%;
overflow: hidden;
border-radius: 3px;
touch-action: pan-y;
}

/* moving track */

.gallery-track {
display: flex;
width: 100%;
transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

/* individual slide */

.gallery-slide {
flex: 0 0 100%;
width: 100%;
position: relative;
}

/* image */

.gallery-slide img {
display: block;
width: 100%;
height: clamp(350px, 65vw, 600px);
object-fit: cover;
user-select: none;
-webkit-user-drag: none;
background: #e7ddd4;

}

/* =========================
ARROWS
========================= */

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 44px;
    height: 44px;

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

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);

    color: #6e5648;
    font-size: 24px;
    line-height: 1;

    cursor: pointer;
    z-index: 10;
}

.gallery-arrow span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    line-height: 1;
}

.gallery-arrow.prev {
    left: 12px;
}

.gallery-arrow.next {
    right: 12px;
}

.gallery-arrow:hover {
    background: rgba(255, 255, 255, 1);
}

.gallery-prev {
left: 15px;
}

.gallery-next {
right: 15px;
}

/* =========================
COUNTER
========================= */

.gallery-counter {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 18px;

font-size: .7rem;
letter-spacing: 2px;

color: #7e6b62;
opacity: .7;
}

.gallery-counter-line {
width: 35px;
height: 1px;
background: #8d6d5a;
opacity: .4;
}

/* =========================
LOADING
========================= */

.gallery-loading {
width: 100%;
height: clamp(350px, 65vw, 600px);
display: flex;
align-items: center;
justify-content: center;

color: #7e6b62;

font-size: .85rem;
letter-spacing: 2px;

background: rgba(255, 255, 255, .15);


}

/* right-side dot navigation with labels */
/* =========================
   COLLAPSIBLE NAVIGATION
========================= */

.nav {
    position: fixed;
    top: 20px;
    right: 18px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 8px;

    z-index: 1000;
}


/* =========================
   BURGER BUTTON
========================= */

.nav-toggle {
    width: 28px;
    height: 28px;

    margin: 0;
    padding: 0;

    border: 1px solid #6e5648;
    border-radius: 50%;

    background: #6e5648;;
    backdrop-filter: blur(8px);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 4px;

    cursor: pointer;

    transition: transform .35s ease;
}

.nav-toggle:hover {
    transform: scale(1.05);
}

.nav-toggle span {
    display: block;

    width: 15px;
    height: 1px;

    background: #ffffff;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        opacity .25s ease;
}


/* Burger becomes X */

.nav.open .nav-toggle span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.nav.open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.nav.open .nav-toggle span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}


/* =========================
   NAV LINKS
========================= */

.nav a {
    display: flex;
    align-items: center;

    gap: 10px;

    text-decoration: none;
    justify-content: flex-end;
}


/* HIDDEN BY DEFAULT */

.nav a {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    transition:
        opacity .3s ease,
        transform .4s cubic-bezier(.22, 1, .36, 1),
        visibility .3s ease;
}


/* SHOW WHEN OPEN */

.nav.open a {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* =========================
   LABELS
========================= */

.nav a span {
    font-size: .78rem;
    color: #6f5b50;

    opacity: .55;

    letter-spacing: 1px;
    font-weight: 500;

    white-space: nowrap;

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.nav a.active span {
    opacity: .9;
}


/* =========================
   DOTS
========================= */

.dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #8d6d5a;

    opacity: .35;

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.nav a.active .dot {
    opacity: 1;
    transform: scale(1.4);
    background: #6e5648;
}

.nav a:hover .dot {
    opacity: 1;
    transform: scale(1.35);
}

.nav a:hover span {
    opacity: .9;
    transform: translateX(-4px);
}

/* middle-right vertical scroll indicator */

.scroll-hint {
    position: fixed;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 9999;
    pointer-events: none;
}

.scroll-hint p {
    font-size: .72rem;
    color: #6f5b50;
    opacity: .5;
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    letter-spacing: 1px;
    user-select: none;
}


/* separate arrows */

.arrow {
    font-size: .85rem;
    color: #8d6d5a;
    opacity: .45;
}


/* top arrow gently rises */

.up {
    animation: arrowUp 1.8s infinite;
}


/* bottom arrow gently falls */

.down {
    animation: arrowDown 1.8s infinite;
}

@keyframes arrowUp {
    0%,
    100% {
        transform: translateY(0);
        opacity: .35;
    }
    50% {
        transform: translateY(-4px);
        opacity: .75;
    }
}

@keyframes arrowDown {
    0%,
    100% {
        transform: translateY(0);
        opacity: .35;
    }
    50% {
        transform: translateY(4px);
        opacity: .75;
    }
}


/* Swipe Chevron Bottom */

.swipe-hint {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #64554b;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    pointer-events: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
}


/* hidden state */

.swipe-hint.hide {
    opacity: 0;
    transform: translateY(10px);
}


/* chevron animation */

.chevron {
    font-size: 1.4rem;
    animation: bounceDown 1.6s infinite;
    opacity: 0.7;
}

@keyframes bounceDown {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    50% {
        transform: translateY(6px);
        opacity: 1;
    }
}

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

.music-player {
    position: fixed;
    top: 20px;
    left: 18px;

    display: flex;
    align-items: center;
    gap: 8px;

    z-index: 1000;
}

.music-toggle {
    width: 18px;
    height: 18px;

    padding: 0;
    border: none;
    background: transparent;
    -webkit-tap-highlight-color: transparent;

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

    color: #6e5648;

    cursor: pointer;
}

.play-icon,
.pause-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    line-height: 1;
}

.pause-icon {
    display: none;
    font-size: 9px;
}

.music-toggle.is-playing .play-icon {
    display: none;
}

.music-toggle.is-playing .pause-icon {
    display: flex;
}


/* Music animation */

.music-animation {
    display: flex;
    align-items: center;
    gap: 2px;

    width: 20px;
    height: 16px;

    opacity: 0;
    transition: opacity 0.3s ease;
}

.music-animation span {
    width: 2px;
    height: 5px;

    background: #6e5648;
    border-radius: 2px;

    transform-origin: center;
}


/* Animate only while music is playing */

.music-player.is-playing .music-animation {
    opacity: 1;
}

.music-player.is-playing .music-animation span:nth-child(1) {
    animation: musicWave 0.8s ease-in-out infinite;
}

.music-player.is-playing .music-animation span:nth-child(2) {
    animation: musicWave 0.6s ease-in-out infinite;
}

.music-player.is-playing .music-animation span:nth-child(3) {
    animation: musicWave 0.9s ease-in-out infinite;
}

.music-player.is-playing .music-animation span:nth-child(4) {
    animation: musicWave 0.7s ease-in-out infinite;
}

@keyframes musicWave {
    0%,
    100% {
        height: 4px;
    }

    50% {
        height: 14px;
    }
}

.music-toggle:hover {
    opacity: 0.65;
}

/* =========================================================
   RSVP LOADING STATE
========================================================= */

.rsvp-loading {
    display: none;

    width: 100%;
    min-height: 140px;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.rsvp-loading.show {
    display: flex;
}

.rsvp-loading-spinner {
    width: 22px;
    height: 22px;

    border: 2px solid rgba(110, 86, 72, .2);
    border-top-color: #6e5648;

    border-radius: 50%;

    animation: rsvpSpin .8s linear infinite;

    margin-bottom: 15px;
}

.rsvp-loading p {
    margin: 0;

    font-size: .9rem;
    letter-spacing: .5px;

    opacity: .65;
}

@keyframes rsvpSpin {
    to {
        transform: rotate(360deg);
    }
}

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

/* RSVP form styling */
.rsvp-form {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.form-label {
    font-size: 1rem;
    opacity: .7;
    letter-spacing: 1px;
}

.rsvp-form input {
    width: 100%;
    max-width: 320px;
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .15);
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(8px);
    font-size: 1rem;
    text-align: center;
    outline: none;
}

.rsvp-form input:focus {
    border-color: #8d6d5a;
}

.rsvp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 20px;
    border: 1px solid #6e5648;

    background: transparent;
    border-radius: 999px;
    color: #6e5648;
    cursor: pointer;

    font-family: inherit;
    font-size: .8rem;
    letter-spacing: .5px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.rsvp-button:hover {
    background: #6e5648;
    color: white;
    transform: translateY(-2px);
}

#rsvpMessage {
    font-size: 1rem;
    line-height: 1.7;
    opacity: .7;
}

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

.rsvp-choice {
    margin-top: 10px;
    text-align: center;
}

#rsvpQuestion {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    line-height: 1.7;
    opacity: .7;
}

#rsvpResponseText {
    margin-bottom: 18px;
}

.rsvp-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.rsvp-choice-button {
    min-width: 100px;
    margin-top: 18px;
    padding: 11px 24px;

    border: 1px solid #6e5648;
    border-radius: 999px;

    background: transparent;
    color: #6e5648;

    font-family: inherit;
    font-size: .95rem;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .2s ease;
}

.rsvp-choice-button:hover {
    background: #6e5648;
    color: white;
    transform: translateY(-2px);
}

.rsvp-choice-button:active {
    transform: translateY(0);
}


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

.rsvp-response {
    margin-top: 25px;
    text-align: center;
    margin-bottom: 0px;
    animation: rsvpResponseIn .45s ease forwards;
}

.rsvp-response p {
    font-size: 1rem;
    line-height: 1.7;
    opacity: .7;
}

.cancel-rsvp {
    padding: 8px 18px;
    margin-top: 8px;
    border: 1px solid rgba(110, 86, 72, .55);
    border-radius: 999px;

    background: transparent;
    color: #6e5648;

    font-family: inherit;
    font-size: 1rem;
    line-height: 1.7;
    opacity: .7;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease;
}

.cancel-rsvp:hover {
    background: #6e5648;
    color: white;
}


@keyframes rsvpResponseIn {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* smooth form transition */


/* when loading */

#formCode.loading {
    transition: all .5s ease;
    opacity: .6;
    filter: blur(1px);
    pointer-events: none;
}


/* button loading state */

#rsvpBtnForm.loading {
    transition: all .5s ease;
    opacity: .6;
    filter: blur(1px);
    pointer-events: none;
    background: #5c463b;
    transform: scale(0.98);
}


/* button loading state */

#rsvpBtnDefault.loading {
    transition: all .5s ease;
    opacity: .6;
    filter: blur(1px);
    pointer-events: none;
    background: #5c463b;
    transform: scale(0.98);
}


/* spinner */

.spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================================
   RSVP ADD TO CALENDER
========================================================= */

.calendar-section {
    margin: 25px auto 0;
    text-align: center;
}

.calendar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 24px;

    border: 1px solid #6e5648;
    border-radius: 999px;

    background: transparent;
    color: #6e5648;

    font-family: inherit;
    font-size: .9rem;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.calendar-btn:hover {
    background: #6e5648;
    color: white;
    transform: translateY(-2px);
}


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

.guest-message-section {
    display: none;
    width: 100%;
    max-width: 500px;
    margin: 35px auto 25px;
    text-align: center;
}

.guest-message-section h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.guest-message-section > p {
    font-size: .85rem;
    line-height: 1.5;
    opacity: .65;
    margin-bottom: 15px;
}

#guestMessage {
    display: block;
    width: 100%;
    min-height: 130px;
    padding: 14px 16px;
    resize: vertical;

    border: 1px solid rgba(110, 86, 72, .2);
    border-radius: 16px;

    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(10px);

    color: #4f3c31;

    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    line-height: 1.5;

    outline: none;
}

#guestMessage:focus {
    border-color: #8d6d5a;
}

.message-submit-btn {
    margin-top: 12px;
    padding: 11px 25px;

    border: none;
    border-radius: 999px;

    background: #6e5648;
    color: white;

    font-family: inherit;
    font-size: .9rem;

    cursor: pointer;
}

#messageStatus {
    min-height: 20px;
    margin-top: 10px;
    font-size: .8rem;
    opacity: .7;
}
.invitation-note {
    width: 100%;
    max-width: 520px;
    margin: 45px auto 0;
    padding: 25px 28px;

    text-align: center;

    border-top: 1px solid rgba(79, 60, 49, .18);
    border-bottom: 1px solid rgba(79, 60, 49, .18);
}

.invitation-note p {
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.7;
    opacity: .7;
}

.invitation-note-label {
    margin-bottom: 14px;
    font-size: .68rem;
    letter-spacing: 2.5px;
    font-weight: 600;

    color: #8d6d5a;
}

.invitation-note p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   RSVP FOR OTHER GUESTS
========================================================= */

.other-rsvp-section {
    width: 100%;
    max-width: 500px;
    margin: 35px auto 25px;
    padding: 24px 20px;
    text-align: center;
    border: 1px dashed rgba(110, 86, 72, .3);
    border-radius: 12px;
    background: rgba(255, 255, 255, .35);
}

.other-rsvp-section h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: #4f3c31;
}

.other-rsvp-subtitle {
    font-size: .88rem;
    line-height: 1.5;
    opacity: .75;
    margin-bottom: 18px;
}

.other-rsvp-subtitle small {
    display: block;
    margin-top: 6px;
    font-size: .8rem;
    opacity: .85;
    color: #8d6d5a;
}

.other-rsvp-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto 12px;
}

#otherGuestSearchInput {
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(110, 86, 72, .3);
    background: rgba(255, 255, 255, .85);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    text-align: center;
    outline: none;
}

#otherGuestSearchInput:focus {
    border-color: #8d6d5a;
}

/* Autocomplete dropdown list */
.guest-suggestions-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid rgba(110, 86, 72, .25);
    border-radius: 8px;
    max-height: 180px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
    display: none;
}

.guest-suggestions-list li {
    padding: 10px 14px;
    font-size: .95rem;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid rgba(110, 86, 72, .1);
    color: #4f3c31;
}

.guest-suggestions-list li:last-child {
    border-bottom: none;
}

.guest-suggestions-list li:hover {
    background: #f4ead8;
}

.other-rsvp-choice-buttons {
    margin: 15px 0;
}

.other-rsvp-choice-buttons p {
    font-size: .95rem;
    margin-bottom: 8px;
    opacity: .85;
}

.other-rsvp-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 10px 22px;
    border: 1px solid #6e5648;
    border-radius: 999px;
    background: #6e5648;
    color: white;
    font-family: inherit;
    font-size: .88rem;
    cursor: pointer;
    transition: background .3s ease, transform .2s ease;
}

.other-rsvp-submit-btn:hover {
    background: #594438;
    transform: translateY(-2px);
}

.other-rsvp-submit-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

#otherRsvpStatus {
    min-height: 20px;
    margin-top: 12px;
    font-size: .88rem;
    color: #6e5648;
    font-weight: 500;
}

/* =========================================================
   WHAT TO WEAR — ELEGANT ATTIRE ACCORDION
========================================================= */

.attire-section {
    width: min(92%, 900px);
    margin: 0 auto;
    text-align: center;
}


/* -------------------------
   HEADER
------------------------- */

.attire-title {
    margin: 0;

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: 400;

    letter-spacing: 2px;
    line-height: 1;
    color: #4f3c31;
}

.attire-date {
    margin-top: 12px;

    font-family: 'Cormorant Garamond', serif;
    font-size: .78rem;

    letter-spacing: 4px;
    color: #4f3c31;

    opacity: .6;
}

.attire-divider {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    width: min(100%, 500px);
    margin: 22px auto 18px;
}

.attire-divider b {
    font-family: 'Cormorant Garamond', serif;
    font-size: .8rem;

    font-weight: 500;
    letter-spacing: 2px;

    color: #6e5648;
}

.attire-intro {
    max-width: 560px;

    margin: 0 auto 42px;

    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    line-height: 1.7;

    color: #4f3c31;
    opacity: .7;
}


/* =========================================================
   ACCORDION PANEL
========================================================= */

.attire-panel {
    width: 100%;

    margin: 0 auto 14px;
    margin-bottom: 8px;

    text-align: left;

    border-top: 1px solid rgba(110, 86, 72, .28);
    border-bottom: 1px solid rgba(110, 86, 72, .28);

    background: rgba(255, 255, 255, .16);

    transition:
        background-color .5s ease,
        box-shadow .5s ease,
        border-color .5s ease;
}

/* -------------------------
   CLICKABLE HEADER
------------------------- */

.attire-panel summary {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    padding: 14px 10px;

    cursor: pointer;

    list-style: none;

    user-select: none;

    color: #4f3c31;

    transition:
        padding .45s cubic-bezier(.22, 1, .36, 1);
}


/* Remove default browser arrow */

.attire-panel summary::-webkit-details-marker {
    display: none;
}

.attire-panel summary::marker {
    display: none;
}


/* -------------------------
   NUMBER
------------------------- */

.attire-panel-number {
    flex: 0 0 42px;
    font-size: .72rem;
    letter-spacing: 2px;

    font-family: 'Cormorant Garamond', serif;


    color: #8d6d5a;

    opacity: .75;
}


/* -------------------------
   TITLE
------------------------- */

.attire-panel-info {
    flex: 1;
    padding-left: 4px;
}

.attire-panel-info h2 {
    margin: 0;

    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 400;

    letter-spacing: 1.5px;
    line-height: 1.1;

    color: #4f3c31;
}


/* -------------------------
   PLUS / MINUS
------------------------- */

.attire-panel-arrow {
    width: 29px;
    height: 29px;

    font-size: 1.1rem;

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

    flex-shrink: 0;

    border: 1px solid rgba(110, 86, 72, .28);
    border-radius: 50%;

    font-family: 'Cormorant Garamond', serif;

    font-weight: 300;

    color: #6e5648;

    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        background-color .4s ease,
        color .4s ease,
        border-color .4s ease;
}


/* =========================================================
   OPEN STATE
========================================================= */


.attire-panel[open] {
    background: rgba(255, 255, 255, .25);

    box-shadow:
        0 12px 35px rgba(79, 60, 49, .07);
}

.attire-panel[open] .attire-panel-arrow {
    transform: rotate(45deg);

    background: #6e5648;
    color: #fff;
}


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

.attire-panel-content {
    width: 100%;

    padding: 0 12px 22px;

    overflow: hidden;

    animation: attireContentReveal .7s cubic-bezier(.22, 1, .36, 1);
}

.attire-panel-content img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;

    border: 1px solid rgba(110, 86, 72, .18);

    transform-origin: top center;

    animation: attireImageReveal .8s cubic-bezier(.22, 1, .36, 1);

    will-change: opacity, transform;
}


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

.attire-panel-info h2,
.attire-panel-info p,
.attire-panel-number {
    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1),
        opacity .4s ease;
}

.attire-panel[open] .attire-panel-info h2 {
    transform: translateX(3px);
}

.attire-panel[open] .attire-panel-info p {
    transform: translateX(3px);
}

/* Content gently unfolds downward */   

@keyframes attireContentReveal {

    0% {
        opacity: 0;
        transform: translateY(-18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


/* Image starts slightly smaller and settles into place */

@keyframes attireImageReveal {

    0% {
        opacity: 0;
        transform:
            translateY(-12px)
            scale(.985);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================================
   INVITATION INTRO / ENVELOPE
========================================================= */

#introOverlay {
    position: fixed;
    inset: 0;
    background: #e7ddd4;

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

    z-index: 999999;
    overflow: hidden;

    transition: opacity 1s ease;
}
.letter-photo {
    position: absolute;

    width: 65px;
    height: 85px;

    object-fit: cover;

    border: 4px solid #faf5ef;

    box-shadow: 0 5px 12px rgba(79, 60, 49, .15);

    z-index: 1;
}

.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130px; /* Adjust to match your envelope height */
    background: linear-gradient(135deg, #e6d7c3, #d4bdab);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    
    /* Crucial for the opening animation */
    transform-origin: top center;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.35, 1) 0.2s;
    z-index: 12;
    pointer-events: auto;
}

/* Flap opening animation */
#introOverlay.open .envelope-flap {
    transform: rotateX(180deg);
    pointer-events: none;
}

/* =========================
   RSVP CANCEL CONFIRMATION
   ========================= */

.rsvp-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;

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

    padding: 24px;

    background: rgba(45, 32, 25, 0.45);
    backdrop-filter: blur(6px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

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

.rsvp-confirm-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.rsvp-confirm-dialog {
    width: min(100%, 420px);

    padding: 38px 30px 32px;

    text-align: center;

    background: #e8d6b3;
    color: #4f3c31;

    border: 1px solid rgba(79, 60, 49, 0.18);
    border-radius: 4px;

    box-shadow:
        0 20px 60px rgba(50, 35, 25, 0.25);

    transform: translateY(15px) scale(0.97);
    transition: transform 0.25s ease;
}

.rsvp-confirm-overlay.show .rsvp-confirm-dialog {
    transform: translateY(0) scale(1);
}

.rsvp-confirm-number {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    opacity: 0.6;
    margin-bottom: 8px;
}

.rsvp-confirm-dialog h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.8rem, 12vw, 4.5rem);
    font-weight: normal;
    line-height: 0.9;
    margin: 0;
}

.rsvp-confirm-divider {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    margin: 20px auto;
}

.rsvp-confirm-divider span {
    flex: 1;
    height: 1px;
    background: rgba(79, 60, 49, 0.35);
}

.rsvp-confirm-divider b {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.12em;
}

.rsvp-confirm-dialog p {
    max-width: 320px;
    margin: 0 auto 28px;

    font-family: "Cormorant Garamond", serif;
    font-size: 1.1rem;
    line-height: 1.45;
}

.rsvp-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.rsvp-confirm-buttons button {
    flex: 1;

    padding: 12px 16px;

    border: 1px solid #6e5648;
    border-radius: 2px;

    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    letter-spacing: 0.04em;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

#rsvpConfirmKeep {
    background: transparent;
    color: #6e5648;
}

#rsvpConfirmCancel {
    background: #6e5648;
    color: #f4ead8;
}

.rsvp-confirm-buttons button:hover {
    transform: translateY(-1px);
}

#rsvpConfirmKeep:hover {
    background: rgba(110, 86, 72, 0.1);
}

#rsvpConfirmCancel:hover {
    background: #594438;
}

@media (max-width: 480px) {
    .rsvp-confirm-dialog {
        padding: 32px 22px 26px;
    }

    .rsvp-confirm-buttons {
        flex-direction: column;
    }

    .rsvp-confirm-buttons button {
        width: 100%;
    }
}

/* -------------------------
   ENVELOPE CONTAINER
------------------------- */

.envelope-container {
    position: relative;
    width: min(88vw, 500px);
    height: 390px;
}


/* =========================================================
   LETTER
========================================================= */

.letter {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 84%;
    height: 245px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            180deg,
            #faf5ef 0%,
            #f2e7dc 100%
        );

    border-radius: 5px;

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

    font-family: 'Cormorant Garamond', serif;
    color: #6f5649;

    box-shadow:
        0 8px 18px rgba(79, 60, 49, .08),
        0 20px 45px rgba(79, 60, 49, .10);

    z-index: 6;
}


/* letter content */

.letter-content {
    text-align: center;
    opacity: .9;
    letter-spacing: 2px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.letter-small {
    font-size: .65rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: .6;
}

.letter-main {
    font-family: 'heroHeaderFont', serif;
    font-size: 3rem;
    line-height: 1;
    font-weight: normal;
}

.letter-names {
    font-family: 'heroHeaderFont', serif;
    font-size: 2rem;
    line-height: 1;
}

.letter-date {
    font-size: .65rem;
    letter-spacing: 3px;
    opacity: .65;
}


/* =========================
   INVITATION PHOTO STRIP
========================= */
.letter-photo-strip {
    position: absolute;
    top: 18px;
    right: 12%;

    width: 82px;
    padding: 7px 7px 25px;

    background: #fffdf8;
    box-shadow: 0 5px 14px rgba(79, 60, 49, .24);

    transform: rotate(8deg);
    z-index: 10;

    /* Waits until the paper rises and settles before sliding away */
    transition: 
        transform 0.8s cubic-bezier(.22, 1, .36, 1) 0.8s,
        opacity 0.6s ease 0.8s;
}

/* Moves the pictures further to the right out of the way of the text */
#introOverlay.open .letter-photo-strip {
    transform: translateX(40px) translateY(-10px) rotate(20deg);
}

.photo-strip-frame {
    width: 100%;
    height: 95px; /* Much taller frames */
    padding: 3px;
    background: #fffdf8;
    border-bottom: 1px solid #e8ded2;
}

.photo-strip-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-strip-caption {
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 10px;
    letter-spacing: 1px;
    color: #8d6d5a;
}

@media (max-width: 720px) {
    .letter-photo-strip {
        top: 18px;
        right: 8%;
        width: 68px;
        padding: 6px 6px 22px;
        transform: rotate(7deg);
        z-index: 10;
    }

    .photo-strip-frame {
        height: 95px;
    }
}

/* Keep decorations behind the invitation text */
.letter-content {
    position: relative;
    z-index: 3;
}

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

.envelope {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 250px;

    z-index: 8;

    perspective: 900px;
}


/* envelope body */

.envelope-back {
    position: absolute;

    inset: 0;

    background: #d8c3b2;

    border-radius: 7px;

    box-shadow:
        0 14px 30px rgba(79, 60, 49, .14);

    z-index: 5;
}


/* subtle inner paper edge */

.envelope-back::after {
    content: "";

    position: absolute;
    inset: 7px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;

    pointer-events: none;
}


/* front pocket */

.envelope-front {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            145deg,
            #dcc8b8,
            #d4bdab
        );

    border-radius: 7px;

    clip-path: polygon(
        0% 100%,
        0% 0%,
        50% 46%,
        100% 0%,
        100% 100%
    );

    z-index: 8;
}


.envelope-liner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;

    background: url("assets/envelope-liner.svg") center / cover no-repeat;

    clip-path: polygon(
        0 0,
        100% 0,
        50% 100%
    );

    z-index: 5;
    pointer-events: none;
}

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

.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;

    background: linear-gradient(
        180deg,
        #e2d1c0 0%,
        #cbb5a1 100%
    );

    clip-path: polygon(
        0 0,
        100% 0,
        50% 100%
    );

    /* Make the flap easier to distinguish */
    filter: drop-shadow(0 2px 2px rgba(79, 60, 49, .25));

    transform-origin: top center;
    z-index: 10;

    transition:
        transform 1.8s cubic-bezier(.16, 1, .3, 1),
        filter .4s ease;
}


/* open flap */
.envelope.open .envelope-flap {
    transform: rotateX(180deg);
    z-index: 5;
}


/* =========================================================
   WAX SEAL
========================================================= */

.wax-seal-btn {
    position: absolute;
    top: 137.5px;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Increased from 76px to 90px for a more substantial look */
    width: 90px;
    height: 90px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 15;
    
    filter: drop-shadow(0 6px 14px rgba(44, 32, 26, 0.4));
    
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.35, 1), opacity 0.3s ease;
}

.wax-seal-btn img.wax-seal-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    
    /* Slightly adjusted scale to fit the larger 90px button cleanly */
    transform: scale(1.25); 
    
    pointer-events: none;
}

/* Hover and active states */
.wax-seal-btn:hover {
    transform: translate(-50%, -50%) scale(1.06) rotate(4deg);
}

.wax-seal-btn:active {
    transform: translate(-50%, -50%) scale(0.97);
}

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

#introOverlay.open .letter {
    animation:
        letterRise 2.2s cubic-bezier(0.25, 1, 0.35, 1) 0.3s forwards;
}
@keyframes letterRise {
    0% {
        transform:
            translateX(-50%)
            translateY(0)
            rotate(0deg)
            scale(.99);
        z-index: 6;
    }

    57% {
        /* 
          As it slowly and smoothly reaches its highest peak (-230px), 
          it is still behind the pocket so it doesn't clip awkwardly early.
        */
        transform:
            translateX(-50%)
            translateY(-230px)
            rotate(-0.5deg)
            scale(1);
        z-index: 6;
    }

    58% {
        /* 
          The exact millisecond it hits the peak, z-index flips to 25 
          so it is now fully in front of the envelope for its descent/settling.
        */
        transform:
            translateX(-50%)
            translateY(-230px)
            rotate(-0.5deg)
            scale(1);
        z-index: 6;
    }

    100% {
        /* Drifts forward toward the viewer in the foreground */
        transform:
            translateX(-50%)
            translateY(-105px)
            rotate(0.3deg)
            scale(1.01);
        z-index: 25;
    }
}

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

.tap-text {
    position: absolute;

    bottom: -48px;

    width: 100%;

    text-align: center;

    color: #7d6759;

    letter-spacing: 2px;
    font-size: .9rem;

    opacity: .7;

    transition:
        opacity .4s ease,
        transform .5s ease;
}


#introOverlay.open .tap-text {
    opacity: 0;
    transform: translateY(8px);
}


/* =========================================================
   SPARKLES
========================================================= */

#sparkles {
    position: absolute;
    inset: 0;

    pointer-events: none;

    overflow: hidden;
}


/* individual sparkle */

.sparkle {
    position: absolute;

    width: 6px;
    height: 6px;

    background: #fff;

    border-radius: 50%;

    opacity: 0;

    box-shadow:
        0 0 7px rgba(255,255,255,.9),
        0 0 15px rgba(255,245,220,.7);

    animation:
        sparkleFloat 1.5s ease-out forwards;

    z-index: 20;
}


/* horizontal sparkle ray */

.sparkle::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 2px;
    height: 13px;

    background: white;

    transform:
        translate(-50%, -50%);
}


/* vertical sparkle ray */

.sparkle::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 13px;
    height: 2px;

    background: white;

    transform:
        translate(-50%, -50%);
}


@keyframes sparkleFloat {

    0% {
        opacity: 0;
        transform:
            translate(0, 0)
            scale(.2);
    }

    20% {
        opacity: .95;
    }

    100% {
        opacity: 0;

        transform:
            translate(
                var(--drift-x),
                var(--drift-y)
            )
            scale(.9);
    }
}


/* =========================================================
   OVERLAY FADE
========================================================= */

#introOverlay.fade {
    animation: fadeAway 1s ease forwards;
}


@keyframes fadeAway {

    from {
        opacity: 1;
        visibility: visible;
    }

    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}



/* timeline schedule */

.schedule-card {
    max-width: 900px;
    margin: auto;
}

.schedule-timeline {
    position: relative;
    padding: 40px 0;
}


/* center line */

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
    background: rgba(126, 107, 98, .22);
}

.timeline-indicator {
    position: absolute;

    left: 0;
    top: 0;

    width: 20px;
    height: 20px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #fff8f1;
    border: 2px solid #b9977d;

    box-shadow: 0 0 25px rgba(165, 133, 113, .25);

    transition:
        top .6s cubic-bezier(.22, 1, .36, 1);
}


/* events */

.schedule-event {
    position: relative;
    min-height: 115px;
}

.schedule-timeline {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0 40px;
}


/* center node */

.node {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #d8c3b2;

    border: 2px solid #e7ddd4;

    z-index: 2;
    transition: .3s;
}

.schedule-event.active .node {
    background: #8d6d5a;
    transform: translate(-50%, -50%) scale(1.35);
}

.schedule-event.active .node {
    background: #8d6d5a;
    transform: translate(-50%, -50%) scale(1.3);
}


/* content box */

.content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 36%;

    background: none;
    padding: 0;

    transition: .35s;
    opacity: .45;
}

.schedule-event.active .content {
    opacity: 1;
    transform: translateY(-50%) scale(1.03);
}

.content h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0;
}

/* right side */

.schedule-event.right .content {
    left: 53%;
}


/* left side */

.schedule-event.left .content {
    right: 53%;
}

.time {
    display: block;
    font-size: .72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 5px;
    opacity: .65;
}

/* =========================================================
   VENUE / CHAPEL
========================================================= */.venue-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 55px;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow: hidden;
    text-align: center;
}

/* -------------------------
   VENUE HEADING
------------------------- */

.venue-heading {
    width: 100%;
    padding: 0 25px;

    text-align: center;
}

.venue-label {
    display: block;

    margin-bottom: 8px;

    font-size: .65rem;
    letter-spacing: 3px;

    color: #8d6d5a;
}

.venue-heading h2 {
    max-width: 900px;
    margin: 0 auto;

    font-family: 'heroHeaderFont', serif;
    font-size: 3.5rem;
    font-weight: normal;
    line-height: 1.05;

    color: #4f3c31;
}

/* -------------------------
   CHAPEL
------------------------- */

.venue-illustration {
    width: min(900px, 100%);

    margin-top: -20px;
    margin-bottom: -20px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.venue-illustration img {
    display: block;

    width: 100%;
    height: auto;
}

/* -------------------------
   VENUE INFO
------------------------- */

.venue-info {
    width: 100%;
    padding: 0 0px 55px;
    text-align: center;
}

.venue-info p {
    max-width: 550px;
    margin: 0 auto 40px;
    font-size: 1rem;
    line-height: 1.7;
    opacity: .7;
    color: #6f5b50;
}

/* -------------------------
   MAP BUTTON
------------------------- */

.map-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 17px;
    border: 1px solid #6e5648;
    border-radius: 999px;
    background: transparent;
    color: #6e5648;

    text-decoration: none;

    font-family: inherit;
    font-size: 12px;

    transition:
        background .3s ease,
        color .3s ease;

    margin: 0;
    
}

.map-btn img {
    width: 13px;
    height: 13px;
    margin: 0;
}

.map-btn:hover {
    background: #6e5648;
    color: #fff;
}


/* =========================================================
Accomodation
========================================================= */

.accomodation-section {
    width: min(92%, 800px);
    margin: 0 auto;
    text-align: center;
}

.accomodation-intro {
    max-width: 500px;
    margin: 0 auto 55px;
    font-size: 1rem;
    line-height: 1.7;
    opacity: .7;
}

#accomodation-text1 {
    text-align: left;
}

/* =========================================================
   MORE INFORMATION
========================================================= */

#more-info {
    padding-top: 80px;
    padding-bottom: 100px;
}

.more-info-section {
    width: min(92%, 800px);
    margin: 0 auto;
    text-align: center;
}

.more-info-intro {
    max-width: 500px;
    margin: 0 auto 55px;
    font-size: 1rem;
    line-height: 1.7;
    opacity: .7;
}


/* INFORMATION BLOCKS */

.info-block {
    max-width: 600px;
    margin: 0 auto 65px;
}

.info-block:last-child {
    margin-bottom: 0;
}

.info-label {
    font-size: .65rem;
    letter-spacing: 3px;
    color: #8d6d5a;
    margin-bottom: 8px;
}

.info-block h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: normal;
    margin-bottom: 15px;
}

.info-block p {
    max-width: 520px;
    margin: 0 auto 22px;
    font-size: 1rem;
    line-height: 1.75;
    opacity: .75;
    text-align: left;
}

.info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 20px;

    border: 1px solid #6e5648;
    border-radius: 999px;

    background: transparent;
    color: #6e5648;

    text-decoration: none;

    font-family: inherit;
    font-size: .8rem;
    letter-spacing: .5px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.info-button:hover {
    background: #6e5648;
    color: white;
    transform: translateY(-2px);
}

.dietary-form {
    display: none;

    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 420px;

    margin: 25px auto 0;
}

#dietaryMessage {
    width: 100%;
    min-height: 110px;

    padding: 12px 14px;

    border: 1px solid rgba(110, 86, 72, .2);
    border-radius: 14px;

    background: rgba(255, 255, 255, .5);

    color: #4f3c31;

    font-family: 'Cormorant Garamond', serif;
    font-size: .95rem;
    line-height: 1.5;

    resize: vertical;
    outline: none;

    text-align: left;
}

#dietaryMessage:focus {
    border-color: #8d6d5a;
}

#dietaryMessage::placeholder {
    color: #6f5b50;
    opacity: .55;
}

.dietary-form .info-button {
    margin-top: 12px;
}

#dietaryStatus {
    min-height: 20px;
    margin: 8px 0 0;

    text-align: center;

    font-size: .8rem;
    opacity: .7;
}

/* ========================================
   SCROLL REVEAL ANIMATIONS
======================================== */


/* Update scroll reveal styles */
.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0); /* Use 3D transform for GPU hardware acceleration */
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    
    /* Prevent font rendering pixel shifts during/after animation */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Directional variants using 3D hardware acceleration */
.scroll-from-left {
    transform: translate3d(-35px, 0, 0);
}

.scroll-from-right {
    transform: translate3d(35px, 0, 0);
}

.scroll-from-left.is-visible,
.scroll-from-right.is-visible {
    transform: translate3d(0, 0, 0);
}

/* Staggered reveal for groups */
.scroll-delay-1 { transition-delay: 0.12s; }
.scroll-delay-2 { transition-delay: 0.24s; }
.scroll-delay-3 { transition-delay: 0.36s; }
.scroll-delay-4 { transition-delay: 0.48s; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .scroll-from-left,
    .scroll-from-right {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
}

/* =========================================================
   MESSENGER CONTACT BUTTONS (COMPACT & HORIZONTAL)
========================================================= */

.messenger-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: nowrap; /* Keeps them strictly side-by-side */
}

.messenger-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px; /* Smaller padding */
    border: 1px solid #6e5648;
    border-radius: 999px;
    background: transparent;
    color: #6e5648;
    font-family: 'Cormorant Garamond', serif;
    font-size: .8rem;
    text-decoration: none;
    letter-spacing: .5px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    white-space: nowrap; /* Prevents text wrapping */
}

.messenger-btn:hover {
    background: #6e5648;
    color: white;
    transform: translateY(-2px);
}

.messenger-icon {
    width: 15px; /* Smaller icon */
    height: 15px;
    fill: currentColor;
    transition: fill 0.3s ease;
}

/* mobile */
@media(max-width:700px) {
    .gallery {
        grid-template-columns: 1fr;
    }
    .card {
        padding: 25px;
    }
    .palette-card {
        padding: 120px 28px 120px;
    }
    .page {
        /* min-height: 25vh; */
        padding: 10vh 3vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
    }
    .nav {
        top: 14px;
        right: 10px;
    }

    .nav-toggle {
        width: 26px;
        height: 26px;
    }

    .nav-toggle span {
        width: 14px;
    }

    .nav-links {
        gap: 6px;
        margin-top: 8px;
    }

    .nav span {
        font-size: .68rem;
    }
    .dot {
        width: 7px;
        height: 7px;
    }
    .scroll-hint {
        right: 10px;
    }
    .scroll-hint p {
        font-size: .62rem;
    }
    .arrow {
        font-size: .72rem;
    }
    .swipe-hint {
        bottom: 12px;
        font-size: 0.75rem;
    }
    .chevron {
        font-size: 1.2rem;
    }

    /* On that day - mobile */
    .schedule-event {
        min-height: 100px;
    }

    .schedule-event .content {
        width: 42%;
    }

    .schedule-timeline {
        width: 100%;
    }

    .content {
        width: 40%;
    }

    .schedule-event.right .content {
        left: 56%;
        text-align: left;
    }

    .schedule-event.left .content {
        right: 56%;
        text-align: right;
    }

    .content h4 {
        font-size: 1rem;
    }

    .time {
        font-size: .65rem;
        letter-spacing: 2px;
    }

    .schedule-event.right .content {
        left: 60%;
        text-align: left;
    }

    .schedule-event.left .content {
        right: 60%;
        text-align: right;
    }

    /* Church - mobile */
    .venue-section {
        margin-top: 35px;
    }

    .venue-heading {
        padding: 0 20px;
    }

    .venue-label {
        font-size: .58rem;
        letter-spacing: 2.5px;
        margin-bottom: 7px;
    }

    .venue-heading h2 {
        max-width: 500px;
        line-height: 1;
    }

    .venue-illustration {
        width: 115%;
        margin-left: -7.5%;
        margin-top: -20px;
        margin-bottom: -20px;
    }

    .venue-info {
        padding: 0 20px 45px;
    }

    .venue-info p {
        font-size: 1rem;
        line-height: 1.7;
        opacity: .7;
    }

    /* What to wear - mobile */
    

    .attire-section {
        width: 92%;
    }

    .attire-intro {
        margin-bottom: 30px;
        padding: 0 8px;
    }


    .attire-panel {
        margin-bottom: 6px;
    }

    .attire-panel summary {
        padding: 12px 4px;
    }

    .attire-panel-number {
        flex-basis: 34px;
        font-size: .68rem;
    }

    .attire-panel-info h2 {
        font-size: 1.12rem;
        letter-spacing: 1.2px;
    }

    .attire-panel-arrow {
        width: 27px;
        height: 27px;
        font-size: 1rem;
    }


    .attire-panel-info {
        padding-left: 4px;
    }

    .attire-panel-content {
        padding: 0 5px 15px;
    }

    /* Couple Intro - mobile */
    .couple-grid {
        gap: 28px;
    }

    .person-card p {
        font-size: .88rem;
    }
    
    .couple-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        margin: 0 auto;
    }

    .person-card {
        padding: 8px;
        text-align: center;
    }

    .person-photo {
        width: min(42vw, 150px);
        height: min(54vw, 190px);
        margin: 0 auto 3px;
    }


    /** Gallery - mobile **/
    
    .gallery-section {
        width: 94%;
        padding: 55px 0 70px;
    }

    .gallery-subtitle {
        padding: 0 15px;
        margin-bottom: 28px;
    }

    .gallery-carousel {
        width: 100%;
    }

    .gallery-slide img {
        height: 105vw;
        max-height: 520px;
    }

    .gallery-arrow {
        width: 36px;
        height: 36px;
        font-size: 1.7rem;
    }

    .gallery-prev {
        left: 8px;
    }

    .gallery-next {
        right: 8px;
    }

    /* More infor page */
    #more-info {
        padding-top: 60px;
        padding-bottom: 80px;
    }

    .more-info-intro {
        padding: 0 15px;
        margin-bottom: 45px;
    }

    .info-block {
        margin-bottom: 55px;
        padding: 0 10px;
    }

    .info-block p {
        font-size: .9rem;
    }

    /* RSVP Note */
    .invitation-note {
        margin-top: 35px;
        padding: 22px 18px;
    }
}