:root {
    --primary: #5a6b5d;
    --accent: #d4af37;
    --bg-light: #fdfcf9;
    --text-dark: #2d3436;
    --white: #fdfcf9;

    /* =====================================================
       SECTION BACKGROUND TOKENS
       Edit only here to repaint any section globally.
       ===================================================== */

    /* Warm cream zone */
    --section-bg-verse:         #ede3cc;
    --section-bg-countdown:     #221d18; /* dark espresso — train reveal backdrop */
    --section-bg-story:         #fdfcf9;

    /* ONE shared neutral — Entourage, Schedule, Map, Registry */
    --section-bg-neutral:       #ece8e0;

    /* Motif stays pure white */
    --section-bg-motif:         #fdfcf9;

    /* FAQs — Midnight Emerald (layered via HTML elements in faqs.html) */
    --section-bg-faqs:          #0c2620;

    /* FAQs text tokens */
    --faqs-text-primary:        #f3ede0;
    --faqs-text-body:           #c8d4c4;
    --faqs-text-sub:            #a8bba4;
    --faqs-border:              rgba(255,255,255,0.10);
    --faqs-accent:              #d4af37;

    /* Feather height — how tall the fade transitions are */
    --feather-height:           100px;

    /* UI TOGGLE: 0 = OFF */
    --intro-on: 1;

    /* CAROUSEL SETTINGS */
    --carousel-items: 11; 
    --carousel-speed: 15000ms;
    
    /* HEIGHT PLACEMENT: 30% */
    --cover-content-top: 30%; 
    --ink-green: #2d4a3e;
}

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

/* ── STRICT MOBILE HORIZONTAL LOCK ── 
   Forces mobile browsers to clip overflowing elements (like the 108vw train fabric) 
   instead of zooming out and distorting the page geometry. */
html, body {
    max-width: 100%;
    overflow-x: clip;
    position: relative;
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-light);
    touch-action: pan-y;
    overscroll-behavior-x: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar {
    display: none;
}

body {
    font-family: 'Playfair Display', serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
}

/* SCROLL LOCK — safe pattern that does NOT reset scroll position.
   body.no-scroll: used during intro envelope and cover animation.
   body.scroll-locked: used during RSVP modal.
   Both use position:fixed + saved scrollY instead of overflow:hidden
   which resets scrollTop to 0 and destroys sticky/cinema contexts. */
body.no-scroll,
body.scroll-locked {
    position: fixed;
    width: 100%;
    touch-action: none;
}

/* ── Cinema hard scroll-lock ──
   Applied to the body element only (NEVER the html/root element) while the
   countdown→Captured Moments cut is mid-flight, or while resting at the
   Captured Moments top edge. The root element stays overflow:visible, which
   keeps body as document.scrollingElement the whole time (CSS overflow-
   propagation rule: when the root's overflow is visible, the viewport's
   scroll is controlled by the body element's overflow). overflow:hidden on
   body still propagates to disable viewport scrolling, but — critically —
   does NOT change which element is the scroller or reset its scroll
   position to 0. If the root element were also locked, it would itself
   become the scroller at position 0, snapping the viewport to the top of
   the page (Cover) for a frame on every lock/unlock — the "white flash" bug. */
body.cinema-scroll-lock {
    touch-action: none;
    overscroll-behavior: none;
}


/* SECTION DEFAULTS */
section {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh; /* Stabilizes bounds when mobile URL bar expands/collapses */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    text-align: center;
}

/* GENERAL UI */
h2 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 10px; color: var(--primary); }
#rsvp { background: var(--primary); color: white; }

/* --- SCROLL ANIMATIONS --- */

.animate-fade {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade.is-visible {
    opacity: 1;
}

.animate-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation Delays for staggered reveals */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }