/* ── Wedding Website Styles ── */
/* Strict 3-color palette: Fern / Egg shell / Pale spring bud. Hover: Blush Petal. */

:root {
    --fern:      #3E4B15;
    --eggshell:  #FCFFF5;
    --pale:      #EFEBCE;   /* Pale spring bud */
    --nav-hover: #F7CED2;   /* Blush Petal — nav hover only */
    --hover:     #A56F57;   /* Rust — content hover (text + border) */

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Montserrat', -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--fern);
    color: var(--fern);
    line-height: 1.7;
    font-size: 15px;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: var(--fern); }
a { color: var(--fern); text-decoration: none; transition: color .2s; }
a:hover { color: var(--hover); }
ul { list-style: none; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 720px; }
.text-center { text-align: center; }
.text-muted { color: var(--fern); opacity: .7; }

/* ── Navigation ── */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: var(--fern); border-bottom: 1px solid var(--fern);
}
.nav-inner {
    max-width: 1100px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between; height: 60px;
}
.nav-logo {
    font-family: var(--font-display); font-size: 22px; font-weight: 500;
    color: #fff; letter-spacing: 2px; transition: color .2s;
}
.nav-logo:hover { color: var(--nav-hover); }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
    font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px;
    color: #fff; transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--nav-hover); }
.nav-separator { width: 1px; height: 20px; background: rgba(255,255,255,.4); align-self: center; }
.nav-admin {
    font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px;
    color: #fff; opacity: .75; transition: color .2s, opacity .2s;
}
.nav-admin:hover { opacity: 1; color: var(--nav-hover); }
.lang-toggle {
    font-family: var(--font-body); font-size: 12px; font-weight: 600;
    padding: 4px 12px; border: 1.5px solid #fff; border-radius: 14px;
    background: transparent; color: #fff; cursor: pointer;
    text-transform: uppercase; letter-spacing: 1px; transition: all .2s;
}
.lang-toggle:hover { color: var(--nav-hover); border-color: var(--nav-hover); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; }

@media (max-width: 768px) {
    .nav-toggle { display: block; }
    .nav-links {
        display: none; position: absolute; top: 60px; left: 0; right: 0;
        background: var(--fern); flex-direction: column; padding: 20px 24px;
        border-bottom: 1px solid var(--fern); gap: 16px;
    }
    .nav-links.open { display: flex; }
    .nav-separator { width: 100%; height: 1px; background: rgba(255,255,255,.3); }
    .nav-admin, .lang-toggle { align-self: flex-start; }
}

/* ── Hero ── */
.hero {
    position: relative; height: 100vh; min-height: 600px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.hero-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
}
.hero-placeholder { background: linear-gradient(135deg, var(--fern) 0%, var(--pale) 50%, var(--fern) 100%); }
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%);
}
.hero-content {
    position: relative; z-index: 1; text-align: center; color: #fff; padding: 24px;
}
.hero-content h1, .hero-content h2, .hero-content h3 { color: #fff; }
.hero-prelude { font-family: var(--font-body); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; opacity: .85; margin-bottom: 16px; }
.hero-names { font-family: var(--font-display); font-size: clamp(48px, 10vw, 80px); font-weight: 300; letter-spacing: 4px; line-height: 1.1; }
.hero-names .amp { font-style: italic; margin: 0 12px; opacity: .7; }
.hero-tagline { font-size: 16px; letter-spacing: 2px; opacity: .85; margin-top: 12px; }
.hero-date { margin-top: 32px; }
.hero-date-text { font-size: 18px; letter-spacing: 3px; }
.hero-venue { display: block; font-size: 14px; opacity: .7; margin-top: 4px; }

/* ── Buttons ── */
.btn {
    display: inline-block; padding: 14px 36px; font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 2px; border-radius: 4px;
    transition: all .2s; cursor: pointer;
}
.btn-hero {
    margin-top: 36px; background: rgba(255,255,255,.2); color: #fff;
    border: 2px solid rgba(255,255,255,.6); backdrop-filter: blur(4px);
}
.btn-hero:hover { background: rgba(255,255,255,.3); color: var(--hover); border-color: var(--hover); }
.btn-outline {
    border: 2px solid var(--fern); color: var(--fern); background: transparent;
}
.btn-outline:hover { color: var(--hover); border-color: var(--hover); }

/* ── Sections ── */
.section { padding: 80px 0; background: var(--eggshell); color: var(--fern); }
.section-alt { background: var(--pale); color: var(--fern); }
.section-title {
    font-family: var(--font-display); font-size: 36px; text-align: center;
    margin-bottom: 12px; color: var(--fern);
}
.section-subtitle { text-align: center; color: var(--fern); opacity: .75; margin-bottom: 48px; font-size: 15px; }
.subsection-title { font-family: var(--font-display); font-size: 28px; color: var(--fern); text-align: center; margin-bottom: 20px; margin-top: 3rem; }
.subsection-title:first-child { margin-top: 0; }

/* Scroll offset for fixed nav */
section[id] { scroll-margin-top: 68px; }

/* ── Page Header ── */
.page-header {
    padding: 120px 24px 60px; text-align: center; background: var(--eggshell);
    border-bottom: 1px solid var(--fern);
}
.page-header h1 { font-size: 48px; color: var(--fern); margin-bottom: 8px; }
.page-subtitle { color: var(--fern); opacity: .75; font-size: 16px; }

/* ── Quick Links ── */
.quick-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.quick-link-card {
    background: var(--eggshell); border: 1px solid var(--fern); border-radius: 12px;
    padding: 32px 24px; width: 180px; text-align: center; transition: all .2s;
    color: var(--fern);
}
.quick-link-card:hover { color: var(--hover); border-color: var(--hover); transform: translateY(-4px); }
.ql-icon { font-size: 28px; display: block; margin-bottom: 12px; }
.ql-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

/* ── Couple ── */
.couple-row { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.couple-card { text-align: center; }
.couple-photo { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; border: 4px solid var(--fern); }
.couple-placeholder { width: 240px; height: 240px; border-radius: 50%; background: var(--pale); border: 4px solid var(--fern); }
.couple-card h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: var(--fern); opacity: .75; margin-top: 16px; }
.couple-name { font-family: var(--font-display); font-size: 28px; color: var(--fern); }
.couple-amp { font-family: var(--font-display); font-size: 48px; color: var(--fern); opacity: .5; }

/* ── Timeline (Our Story) ── */
.timeline { position: relative; padding-left: 40px; }
.timeline::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--fern); }
.timeline-item { position: relative; margin-bottom: 48px; }
.timeline-marker {
    position: absolute; left: -40px; top: 4px; width: 24px; height: 24px;
    border-radius: 50%; background: var(--pale); border: 3px solid var(--fern);
}
.timeline-content h3 { font-family: var(--font-display); font-size: 24px; color: var(--fern); margin-bottom: 8px; }
.timeline-content p { color: var(--fern); }
.timeline-photo { margin-top: 16px; border-radius: 8px; max-width: 100%; }

/* ── About Grid ── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.about-card { text-align: center; }
.about-card h3 { font-size: 28px; color: var(--fern); }
.about-role { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--fern); opacity: .75; margin-bottom: 16px; }
@media (max-width: 600px) { .about-grid { grid-template-columns: 1fr; } }

/* ── Our Story: two text columns (her story / his story) ── */
.story-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 900px; margin: 0 auto; }
.story-col-title {
    font-family: var(--font-display); font-size: 26px; color: var(--fern);
    text-align: center; margin-bottom: 20px;
}
.story-col p { color: var(--fern); line-height: 1.8; margin-bottom: 16px; }
.story-col p:last-child { margin-bottom: 0; }
.story-placeholder { opacity: .55; font-style: italic; }
@media (max-width: 700px) { .story-columns { grid-template-columns: 1fr; gap: 36px; } }

/* ── Events Grid ── */
.events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.event-card {
    background: var(--eggshell); border: 1px solid var(--fern); border-radius: 12px;
    padding: 32px 24px; text-align: center; transition: all .2s;
}
.event-card.highlight { border-width: 2px; }
.event-card:hover { color: var(--hover); border-color: var(--hover); }
.event-card:hover h3, .event-card:hover .event-date { color: var(--hover); }
.event-icon { font-size: 36px; margin-bottom: 12px; }
.event-card h3 { font-size: 24px; color: var(--fern); transition: color .2s; }
.event-label { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--fern); opacity: .75; margin-bottom: 16px; }
.event-date { font-weight: 600; color: var(--fern); margin-bottom: 4px; transition: color .2s; }
.event-venue { color: var(--fern); opacity: .85; margin-bottom: 12px; }
.event-desc { font-size: 14px; color: var(--fern); opacity: .85; }

/* ── Info Two Col ── */
.info-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.info-block h3 { font-size: 24px; color: var(--fern); margin-bottom: 12px; }
.info-note { font-size: 14px; color: var(--fern); opacity: .75; font-style: italic; margin-top: 8px; }
@media (max-width: 600px) { .info-two-col { grid-template-columns: 1fr; } }

/* ── Venue Gallery ── */
.venue-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.venue-photo { width: 100%; height: 240px; object-fit: cover; border-radius: 8px; }

/* ── Photo Gallery ── */
.gallery-filters { display: flex; gap: 12px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
.filter-btn {
    padding: 8px 20px; border: 1px solid var(--fern); border-radius: 20px;
    background: transparent; color: var(--fern); font-size: 13px; cursor: pointer;
    font-family: var(--font-body); transition: all .2s;
}
.filter-btn:hover { color: var(--hover); border-color: var(--hover); }
.filter-btn.active { background: var(--fern); color: var(--eggshell); border-color: var(--fern); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gallery-item img { width: 100%; height: 280px; object-fit: cover; border-radius: 8px; cursor: pointer; transition: transform .2s; }
.gallery-item img:hover { transform: scale(1.02); }

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 2000;
    display: none; align-items: center; justify-content: center; cursor: pointer;
}
.lightbox.active { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 4px; }
.lightbox-close {
    position: absolute; top: 20px; right: 24px; font-size: 36px; color: #fff;
    background: none; border: none; cursor: pointer; transition: color .2s;
}
.lightbox-close:hover { color: var(--hover); }
/* Lightbox prev/next arrows (gallery mosaic) */
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(252,255,245,.12); color: #fff; border: none;
    width: 56px; height: 76px; font-size: 40px; line-height: 1;
    cursor: pointer; transition: background .2s; user-select: none; z-index: 1;
}
.lightbox-nav:hover { background: rgba(252,255,245,.30); }
.lightbox-prev { left: 16px; border-radius: 0 8px 8px 0; }
.lightbox-next { right: 16px; border-radius: 8px 0 0 8px; }
@media (max-width: 600px) { .lightbox-nav { width: 42px; height: 60px; font-size: 30px; } }

/* ── Gallery: collection buttons + a stage that morphs (drift ↔ effect) ── */
.gallery-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; }
.gallery-tab {
    padding: 9px 22px; border: 1px solid var(--fern); border-radius: 22px;
    background: transparent; color: var(--fern); cursor: pointer;
    font-family: var(--font-body); font-size: 12px; letter-spacing: 1.3px;
    text-transform: uppercase; transition: all .25s;
}
.gallery-tab:hover { color: var(--hover); border-color: var(--hover); }
.gallery-tab.active { background: var(--fern); color: var(--eggshell); border-color: var(--fern); }
.gallery-tab .tab-count { opacity: .55; font-size: 10px; margin-left: 7px; vertical-align: top; }

.gallery-stage {
    position: relative; height: 64vh; min-height: 420px; max-height: 760px;
    margin: 26px 0 0; overflow: hidden; background: #0c0e05;
    opacity: 1; transition: opacity .35s ease;
}
.gallery-stage.swapping { opacity: 0; }
.gallery-stage::after {                                  /* soft vignette */
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    box-shadow: inset 0 0 130px rgba(12,14,5,.55);
}
@media (max-width: 760px) { .gallery-stage { height: 52vh; } }

/* Drifting columns (default state of the stage) */
.gh-cols { position: absolute; inset: 0; display: flex; gap: 10px; padding: 10px; }
.gh-col { flex: 1; overflow: hidden; position: relative; }
.gh-track { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; gap: 10px; will-change: transform; }
.gh-track img { width: 100%; display: block; border-radius: 8px; object-fit: cover; }
@keyframes ghUp { from { transform: translateY(0); }     to { transform: translateY(-50%); } }
@keyframes ghDn { from { transform: translateY(-50%); }   to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .gh-track { animation: none !important; } }
.mosaic-empty { margin-top: 16px; }

/* Effect: Ken Burns — whole photo shown (contain), gentle zoom, never cropped */
.kb { position: absolute; inset: 0; }
.kb .layer { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; transition: opacity 1.8s ease; }
.kb .layer.show { opacity: 1; }

/* Effect: Fade carousel */
.fade { position: absolute; inset: 0; }
.fade .stageimg { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; transition: opacity 1.1s ease; }
.fade .stageimg.show { opacity: 1; }
.gp-strip { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; justify-content: center; padding: 12px; background: rgba(0,0,0,.4); overflow-x: auto; z-index: 5; }
.gp-strip img { height: 54px; width: 72px; object-fit: cover; border-radius: 4px; opacity: .5; cursor: pointer; transition: opacity .2s; flex: 0 0 auto; }
.gp-strip img.on { opacity: 1; outline: 2px solid #fff; }
.gp-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; background: rgba(255,255,255,.16); color: #fff; border: none; width: 50px; height: 70px; font-size: 32px; cursor: pointer; border-radius: 6px; }
.gp-arrow:hover { background: rgba(255,255,255,.3); }
.gp-arrow.prev { left: 14px; } .gp-arrow.next { right: 14px; }

/* Effect: Coverflow 3D — whole photo shown (contain) on a card, never cropped */
.cf { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 1500px; }
.cf-slide { position: absolute; width: 42%; height: 74%; border-radius: 10px; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #14160c; box-shadow: 0 16px 44px rgba(0,0,0,.6); transition: transform .6s cubic-bezier(.3,.7,.2,1), opacity .6s; }
@media (max-width: 760px) { .cf-slide { width: 62%; height: 60%; } .gp-strip img { height: 42px; width: 58px; } }

/* ── Travel Guide ── */
.guide-card {
    background: var(--eggshell); border: 1px solid var(--fern); border-radius: 12px;
    padding: 32px; margin-bottom: 24px;
}
.guide-card h3 { font-size: 22px; color: var(--fern); margin-bottom: 12px; }
.guide-card ul { padding-left: 20px; list-style: disc; }
.guide-card li { margin-bottom: 6px; color: var(--fern); }
.guide-tip {
    margin-top: 16px; padding: 12px 16px; background: var(--pale);
    border-radius: 8px; font-size: 14px; color: var(--fern);
}

.activities-grid, .food-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 32px; }
.activity-card, .food-card {
    background: var(--eggshell); border: 1px solid var(--fern); border-radius: 12px; padding: 28px;
}
.activity-card h3, .food-card h3 { font-size: 20px; color: var(--fern); margin-bottom: 12px; }
.activity-card ul, .food-card ul { padding-left: 20px; list-style: disc; }
.activity-card li, .food-card li { margin-bottom: 4px; color: var(--fern); font-size: 14px; }

.tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 32px; }
.tip-item { background: var(--pale); border-radius: 12px; padding: 24px; }
.tip-item h4 { font-family: var(--font-display); font-size: 20px; color: var(--fern); margin-bottom: 8px; }
.tip-item p { font-size: 14px; color: var(--fern); }

/* ── RSVP Landing ── */
.rsvp-link-cards { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.rsvp-link-card {
    background: var(--eggshell); border: 1px solid var(--fern); border-radius: 12px;
    padding: 32px; max-width: 320px; text-align: center; transition: all .2s;
    color: var(--fern);
}
.rsvp-link-card:hover { color: var(--hover); border-color: var(--hover); transform: translateY(-4px); }
.rsvp-link-card:hover h3 { color: var(--hover); }
.rsvp-link-card h3 { font-size: 22px; color: var(--fern); margin-bottom: 8px; transition: color .2s; }
.rsvp-link-card p { color: var(--fern); opacity: .85; font-size: 14px; margin-bottom: 16px; }

/* ── Footer ── */
.footer {
    padding: 60px 24px; text-align: center; background: var(--pale);
    border-top: 1px solid var(--fern);
}
.footer-names { font-family: var(--font-display); font-size: 28px; color: var(--fern); }
.footer-date { font-size: 13px; color: var(--fern); opacity: .75; letter-spacing: 2px; margin-top: 4px; }

/* ── Invitation Landing (gown garden + lace envelope) ── */
body.invitation-active { overflow: hidden; }

.invitation-landing {
    position: fixed; inset: 0; z-index: 5000;
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 1.5s ease-out;
    background: url('/static/images/gown-artistic.jpg') no-repeat center center;
    background-size: cover;
}
.invitation-landing.exiting { opacity: 0; pointer-events: none; }

/* Dim overlay so prelude text reads on the painterly bg */
.invitation-bg-gradient {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(46,55,17,.30) 0%,
        rgba(46,55,17,.10) 30%,
        rgba(46,55,17,.10) 70%,
        rgba(46,55,17,.40) 100%
    );
}

/* Prelude headline above envelope */
.invitation-prelude {
    position: relative; z-index: 5;
    text-align: center;
    color: var(--eggshell);
    margin-bottom: 36px;
    padding: 0 24px;
    text-shadow: 0 2px 16px rgba(0,0,0,.55);
    transition: opacity .6s ease-out;
}
.invitation-prelude .prelude-small {
    font-family: var(--font-display); font-style: italic;
    font-size: 15px; letter-spacing: 5px;
    text-transform: uppercase; opacity: .9;
    margin-bottom: 14px;
}
.invitation-prelude .prelude-names {
    /* Match hero typography: Cormorant Garamond, light, wide letter-spacing */
    font-family: var(--font-display);
    font-size: clamp(48px, 9vw, 72px);
    line-height: 1.1; font-weight: 300; letter-spacing: 4px;
    color: var(--eggshell);
}
.invitation-prelude .prelude-names .amp {
    font-style: italic; margin: 0 12px; opacity: .7;
}

/* Hint below envelope */
.invitation-hint {
    position: relative; z-index: 5;
    margin-top: 44px;
    font-family: var(--font-display); font-style: italic;
    font-size: 14px; letter-spacing: 5px; text-transform: uppercase;
    color: var(--eggshell); opacity: .85;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
    animation: invitationHintPulse 2.5s ease-in-out infinite;
    transition: opacity .3s ease-out;
}
@keyframes invitationHintPulse {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
}
.invitation-landing.opened .invitation-hint,
.invitation-landing.opened .invitation-prelude { opacity: 0; }

/* Envelope stage with glow */
.envelope-stage {
    position: relative; z-index: 4;
}
.envelope-glow {
    position: absolute; top: 50%; left: 50%;
    width: 820px; height: 620px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(252,255,245,.22) 0%, transparent 60%);
    pointer-events: none; z-index: -1;
    filter: blur(22px);
}

@keyframes envelopeFloat {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50%      { transform: rotate(-2deg) translateY(-8px); }
}

.envelope {
    position: relative;
    /* Envelope image is 704×512 (aspect ~1.375) */
    width: 620px; height: 451px;
    cursor: pointer;
    perspective: 2400px;
    transform: rotate(-2deg);
    animation: envelopeFloat 5s ease-in-out infinite;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,.4))
            drop-shadow(0 10px 18px rgba(0,0,0,.3));
}
.envelope.opening { animation: none; transform: rotate(-2deg); }

/* Envelope body: full image clipped to everything OUTSIDE the V flap triangle.
   V apex sits at (50%, 74%) of the image so the seal (~y=240-370 in 512h) is included on the flap side. */
.envelope-body-img {
    position: absolute; inset: 0;
    background: url('/static/images/envelope-final.jpg') no-repeat center / 100% 100%;
    clip-path: polygon(0% 100%, 0% 0%, 50% 74%, 100% 0%, 100% 100%);
    z-index: 2;
}

/* Flap: full image clipped to V triangle (with seal); rotates back on open */
.envelope-flap-img {
    position: absolute; inset: 0;
    background: url('/static/images/envelope-final.jpg') no-repeat center / 100% 100%;
    clip-path: polygon(0% 0%, 100% 0%, 50% 74%);
    transform-origin: top center;
    transform-style: preserve-3d;
    transition: transform 1.4s cubic-bezier(.65,.05,.4,1) .35s,
                z-index 0s linear .95s;
    z-index: 4;
    filter: drop-shadow(0 4px 7px rgba(0,0,0,.25));
}
.envelope.opening .envelope-flap-img {
    transform: rotateX(180deg);
    z-index: 0;
}

/* Invite letter card (scalloped doily with all text baked into the image) */
.invitation-card {
    position: absolute; left: 5%; right: 5%;
    top: 6%; height: 88%;
    /* Full invite image (doily + text) as background; PNG alpha shows only the doily */
    background: url('/static/images/invite-letter-v2.png') no-repeat center / contain;
    z-index: 3;
    opacity: 0;
    transform: translateY(0) scale(.96);
    transition: transform 1.6s cubic-bezier(.5,.0,.3,1) .9s,
                opacity .9s ease-out 1s,
                z-index 0s linear .9s;
}
.envelope.opening .invitation-card {
    /* Original scale-based "pop out" effect; 1.55 = 90% of the prior 1.725 dimension size */
    transform: translateY(-25%) scale(1.55);
    opacity: 1; z-index: 6;
}

@media (max-width: 768px) {
    .invitation-prelude .prelude-names { font-size: 62px; }
    .invitation-prelude .prelude-small { font-size: 13px; letter-spacing: 4px; }
}
@media (max-width: 600px) {
    .envelope { width: 360px; height: 262px; }
    .envelope-glow { width: 500px; height: 400px; }
    .invitation-prelude .prelude-names { font-size: 48px; }
    .invitation-hint { letter-spacing: 4px; font-size: 12px; margin-top: 28px; }
}