/* Envelope Reveal Animation CSS */
/* Namespaced under .envelope-scene to avoid conflicts */

.envelope-scene {
    --env-color: #f8f4ee;
    --env-color-light: #fdfbf8;
    --env-color-dark: #eee7da;
    --env-color-shadow: #ddd3c1;
    --env-liner: #1a2636;
    --env-liner-accent: #2a3d54;
    --gold: #c9a84c;
    --gold-light: #e8d48b;
    --gold-dark: #a07c28;
    --gold-shimmer: #f0dfa0;
    --seal-red: #7a1515;
    --seal-red-light: #b52828;
    --seal-red-dark: #4a0a0a;
    --card-white: #fefefe;
    --text-dark: #1a1a2e;
    --text-muted: #6b6b7b;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 9999;
    background:
        /* Soft linen texture */
        repeating-linear-gradient(0deg,
            transparent, transparent 2px,
            rgba(0, 0, 0, 0.008) 2px, rgba(0, 0, 0, 0.008) 3px),
        repeating-linear-gradient(90deg,
            transparent, transparent 3px,
            rgba(0, 0, 0, 0.005) 3px, rgba(0, 0, 0, 0.005) 4px),
        /* Warm vignette */
        radial-gradient(ellipse 70% 60% at 50% 45%, transparent 40%, rgba(180, 160, 140, 0.15) 100%),
        /* Base warm cream */
        linear-gradient(165deg, #e8ddd0 0%, #dfd3c3 30%, #d8ccbc 60%, #d0c3b2 100%);
    font-family: 'Cormorant Garamond', serif;
    overflow: hidden;
    color: var(--text-dark);
}

.envelope-scene * {
    box-sizing: border-box;
}

/* === AMBIENT BACKGROUND === */
.envelope-scene .ambient-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.envelope-scene .ambient-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(201, 168, 76, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 25% 65%, rgba(200, 180, 150, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 75% 35%, rgba(180, 160, 130, 0.08) 0%, transparent 60%);
}

.envelope-scene .ambient-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(201, 168, 76, 0.06) 0%, transparent 50%);
    animation: ambientPulse 8s ease-in-out infinite;
}

@keyframes ambientPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* === FLOATING PARTICLES === */
.envelope-scene .particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.envelope-scene .particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% { opacity: 0; transform: translateY(100vh) rotate(0deg); }
    10% { opacity: 0.35; }
    90% { opacity: 0.35; }
    100% { opacity: 0; transform: translateY(-10vh) rotate(720deg); }
}

/* === SCENE === */
.envelope-scene .scene {
    position: relative;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    perspective: 1800px;
}

/* === FLOAT CONTAINER === */
.envelope-scene .float-container {
    width: min(520px, 85vw);
    height: min(364px, 60vw);
    position: relative;
    transform-style: preserve-3d;
    animation: gentleFloat 7s ease-in-out infinite;
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
}

@keyframes gentleFloat {
    0%, 100% { transform: translateY(0) rotateZ(0deg); }
    33% { transform: translateY(-8px) rotateZ(0.3deg); }
    66% { transform: translateY(-4px) rotateZ(-0.2deg); }
}

.envelope-scene .float-container.shrink-away {
    animation: none;
}

/* === ENVELOPE WRAPPER === */
.envelope-scene .envelope-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    cursor: pointer;
}

.envelope-scene .envelope-wrapper.flipped {
    transform: rotateY(180deg);
}

/* === SIDES === */
.envelope-scene .side {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 4px;
}

/* ---- FRONT (ADDRESS SIDE) ---- */
.envelope-scene .side-front {
    transform: translateZ(1px);
    z-index: 2;
    background:
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(180, 160, 130, 0.03) 3px, rgba(180, 160, 130, 0.03) 4px),
        repeating-linear-gradient(177deg, transparent, transparent 5px, rgba(160, 140, 110, 0.025) 5px, rgba(160, 140, 110, 0.025) 6px),
        radial-gradient(ellipse 120% 80% at 30% 20%, var(--env-color-light) 0%, transparent 50%),
        radial-gradient(ellipse 100% 100% at 70% 80%, var(--env-color-dark) 0%, transparent 50%),
        linear-gradient(145deg, var(--env-color-light) 0%, var(--env-color) 35%, var(--env-color-dark) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 50px -12px rgba(80, 60, 30, 0.3), 0 12px 20px -6px rgba(80, 60, 30, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.envelope-scene .side-front::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0, 0, 0, 0.01) 1px, rgba(0, 0, 0, 0.01) 2px), repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.006) 3px, rgba(0, 0, 0, 0.006) 4px);
    pointer-events: none;
}

.envelope-scene .side-front::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 20%, transparent 45%, transparent 55%, rgba(0, 0, 0, 0.03) 80%, rgba(0, 0, 0, 0.06) 100%);
    pointer-events: none;
}

.envelope-scene .border-inlay {
    position: absolute; inset: 16px; border: 1px solid rgba(201, 168, 76, 0.35);
    box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px rgba(201, 168, 76, 0.12), 0 0 0 0.5px rgba(201, 168, 76, 0.08);
    pointer-events: none;
}

.envelope-scene .border-inlay::before, .envelope-scene .border-inlay::after {
    content: ''; position: absolute; width: 20px; height: 20px; border-color: var(--gold); border-style: solid; opacity: 0.5;
}
.envelope-scene .border-inlay::before { top: -2px; left: -2px; border-width: 2px 0 0 2px; }
.envelope-scene .border-inlay::after { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }

.envelope-scene .corner-tr, .envelope-scene .corner-bl {
    position: absolute; width: 20px; height: 20px; border-color: var(--gold); border-style: solid; opacity: 0.5; pointer-events: none;
}
.envelope-scene .corner-tr { top: 14px; right: 14px; border-width: 2px 2px 0 0; }
.envelope-scene .corner-bl { bottom: 14px; left: 14px; border-width: 0 0 2px 2px; }

.envelope-scene .address-group { text-align: center; z-index: 2; }
.envelope-scene .guest-label { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.envelope-scene .guest-name { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 300; font-style: italic; color: var(--text-dark); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6), 0 0 0 rgba(0, 0, 0, 0.02); -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.05); }

.envelope-scene .stamp {
    position: absolute; top: 18px; right: 18px; width: 54px; height: 64px; background: var(--env-color-dark);
    display: flex; align-items: center; justify-content: center; z-index: 3; transform: rotate(1.5deg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    --perf-size: 3px; --perf-gap: 6px;
    mask-image: radial-gradient(circle var(--perf-size) at calc(var(--perf-size) * -0.2) 50%, transparent 95%, black), radial-gradient(circle var(--perf-size) at calc(100% + var(--perf-size) * 0.2) 50%, transparent 95%, black), radial-gradient(circle var(--perf-size) at 50% calc(var(--perf-size) * -0.2), transparent 95%, black), radial-gradient(circle var(--perf-size) at 50% calc(100% + var(--perf-size) * 0.2), transparent 95%, black);
    mask-size: 100% var(--perf-gap), 100% var(--perf-gap), var(--perf-gap) 100%, var(--perf-gap) 100%;
    mask-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
    mask-composite: intersect;
    -webkit-mask-image: radial-gradient(circle var(--perf-size) at calc(var(--perf-size) * -0.2) 50%, transparent 95%, black), radial-gradient(circle var(--perf-size) at calc(100% + var(--perf-size) * 0.2) 50%, transparent 95%, black), radial-gradient(circle var(--perf-size) at 50% calc(var(--perf-size) * -0.2), transparent 95%, black), radial-gradient(circle var(--perf-size) at 50% calc(100% + var(--perf-size) * 0.2), transparent 95%, black);
    -webkit-mask-size: 100% var(--perf-gap), 100% var(--perf-gap), var(--perf-gap) 100%, var(--perf-gap) 100%;
    -webkit-mask-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
    -webkit-mask-composite: source-in;
}

.envelope-scene .stamp-inner {
    width: 40px; height: 50px;
    background: linear-gradient(160deg, var(--gold-shimmer) 0%, var(--gold-light) 25%, var(--gold) 50%, var(--gold-dark) 100%);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.9); font-size: 20px; font-family: 'Cinzel', serif; font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); border: 0.5px solid rgba(160, 124, 40, 0.3);
}

.envelope-scene .return-address {
    position: absolute; top: 22px; left: 22px; font-family: 'Montserrat', sans-serif; font-size: 7px;
    letter-spacing: 1.5px; text-transform: uppercase; color: rgba(0, 0, 0, 0.2); line-height: 1.8; z-index: 3;
}

/* ---- BACK SIDE ---- */
.envelope-scene .side-back {
    transform: rotateY(180deg) translateZ(1px);
    z-index: 1;
    transform-style: preserve-3d;
}

.envelope-scene .back-panel {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(92deg, transparent, transparent 4px, rgba(180, 160, 130, 0.025) 4px, rgba(180, 160, 130, 0.025) 5px), linear-gradient(145deg, var(--env-color-light) 0%, var(--env-color) 40%, var(--env-color-dark) 100%);
    border-radius: 4px;
    box-shadow: 0 25px 50px -12px rgba(80, 60, 30, 0.3), 0 12px 20px -6px rgba(80, 60, 30, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    overflow: hidden; z-index: 0;
}

.envelope-scene .envelope-liner {
    position: absolute; inset: 4px; border-radius: 3px; z-index: 0; overflow: hidden;
    background: linear-gradient(45deg, var(--env-liner-accent) 12%, transparent 12%, transparent 38%, var(--env-liner-accent) 38%, var(--env-liner-accent) 62%, transparent 62%, transparent 88%, var(--env-liner-accent) 88%), linear-gradient(-45deg, var(--env-liner-accent) 12%, transparent 12%, transparent 38%, var(--env-liner-accent) 38%, var(--env-liner-accent) 62%, transparent 62%, transparent 88%, var(--env-liner-accent) 88%);
    background-size: 20px 20px; background-color: var(--env-liner); opacity: 0.12;
}

.envelope-scene .envelope-liner::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 50%, rgba(0, 0, 0, 0.03) 100%);
}

/* Card Inside */
.envelope-scene .letter-card {
    position: absolute; top: 50%; left: 50%; width: 48%; aspect-ratio: 5 / 7;
    transform: translate(-50%, -50%) rotate(90deg); transform-origin: center center;
    background: var(--card-white); z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    overflow: hidden; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); will-change: transform;
}

.envelope-scene .letter-card img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Pocket Flaps */
.envelope-scene .pocket-flap { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.envelope-scene .pocket-left, .envelope-scene .pocket-right, .envelope-scene .pocket-bottom { position: absolute; inset: 0; }

.envelope-scene .pocket-left {
    clip-path: polygon(0 0, 0 100%, 54% 50%);
    background: linear-gradient(105deg, var(--env-color) 0%, var(--env-color) 60%, var(--env-color-dark) 85%, var(--env-color-shadow) 100%);
    z-index: 1; filter: drop-shadow(3px 0 6px rgba(0, 0, 0, 0.08));
}
.envelope-scene .pocket-left::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: 46%; width: 1px;
    background: linear-gradient(180deg, transparent 5%, rgba(0, 0, 0, 0.06) 30%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.06) 70%, transparent 95%);
}

.envelope-scene .pocket-right {
    clip-path: polygon(100% 0, 100% 100%, 46% 50%);
    background: linear-gradient(-105deg, var(--env-color) 0%, var(--env-color) 60%, var(--env-color-dark) 85%, var(--env-color-shadow) 100%);
    z-index: 1; filter: drop-shadow(-3px 0 6px rgba(0, 0, 0, 0.08));
}
.envelope-scene .pocket-right::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 46%; width: 1px;
    background: linear-gradient(180deg, transparent 5%, rgba(0, 0, 0, 0.06) 30%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.06) 70%, transparent 95%);
}

.envelope-scene .pocket-bottom {
    clip-path: polygon(0 100%, 100% 100%, 50% 40%);
    background: linear-gradient(0deg, var(--env-color-light) 0%, var(--env-color) 50%, var(--env-color-dark) 80%, var(--env-color-shadow) 100%);
    z-index: 2; filter: drop-shadow(0 -4px 8px rgba(0, 0, 0, 0.1));
}
.envelope-scene .pocket-bottom::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 5%, var(--gold) 50%, transparent 95%); opacity: 0.2;
}

/* Top Flap */
.envelope-scene .flap-top-wrapper {
    position: absolute; top: 0; left: 0; right: 0; height: 65%; z-index: 10;
    transform-origin: top center; transform: rotateX(0deg); transform-style: preserve-3d;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.12));
}

.envelope-scene .flap-outer {
    position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: repeating-linear-gradient(88deg, transparent, transparent 3px, rgba(180, 160, 130, 0.02) 3px, rgba(180, 160, 130, 0.02) 4px), linear-gradient(180deg, var(--env-color-light) 0%, var(--env-color) 30%, var(--env-color-dark) 80%, var(--env-color-shadow) 100%);
    backface-visibility: hidden; z-index: 2;
}
.envelope-scene .flap-outer::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.4) 70%, transparent 95%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.envelope-scene .flap-inner {
    position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: linear-gradient(45deg, var(--env-liner-accent) 12%, transparent 12%, transparent 38%, var(--env-liner-accent) 38%, var(--env-liner-accent) 62%, transparent 62%, transparent 88%, var(--env-liner-accent) 88%), linear-gradient(-45deg, var(--env-liner-accent) 12%, transparent 12%, transparent 38%, var(--env-liner-accent) 38%, var(--env-liner-accent) 62%, transparent 62%, transparent 88%, var(--env-liner-accent) 88%);
    background-size: 20px 20px; background-color: var(--env-liner);
    transform: rotateY(180deg); backface-visibility: hidden; z-index: 1;
}
.envelope-scene .flap-inner::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%, rgba(0, 0, 0, 0.04) 100%);
}

/* Wax Seal */
.envelope-scene .wax-seal {
    position: absolute; bottom: -8%; left: 50%; transform: translate(-50%, 0);
    width: 64px; height: 64px; z-index: 20; cursor: pointer; transition: transform 0.3s ease;
    border-radius: 50% 48% 52% 47% / 48% 52% 46% 50%;
}
.envelope-scene .wax-seal:hover { transform: translate(-50%, 0) scale(1.08); }

.envelope-scene .wax-seal-body {
    width: 100%; height: 100%; border-radius: inherit;
    background: radial-gradient(ellipse 60% 50% at 30% 25%, rgba(255, 80, 80, 0.2) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 65% 70%, rgba(0, 0, 0, 0.15) 0%, transparent 60%), radial-gradient(circle at 35% 30%, var(--seal-red-light) 0%, var(--seal-red) 45%, var(--seal-red-dark) 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 1.5px rgba(90, 15, 15, 0.5), inset 0 3px 6px rgba(255, 200, 200, 0.2), inset 0 -4px 10px rgba(0, 0, 0, 0.35), inset 3px 0 6px rgba(0, 0, 0, 0.1), inset -3px 0 6px rgba(0, 0, 0, 0.1);
    display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.envelope-scene .wax-seal-body::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(circle 2px at 25% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 100%), radial-gradient(circle 3px at 70% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 100%), radial-gradient(circle 2px at 60% 75%, rgba(0, 0, 0, 0.08) 0%, transparent 100%), radial-gradient(circle at 60% 70%, transparent 30%, rgba(0, 0, 0, 0.18) 100%);
}
.envelope-scene .wax-seal-body::after {
    content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08), 0 0.5px 0 rgba(0, 0, 0, 0.1);
}

.envelope-scene .seal-letter {
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 22px;
    color: rgba(70, 10, 10, 0.45);
    text-shadow: 0 1px 0 rgba(255, 200, 200, 0.15), 0 -0.5px 0 rgba(0, 0, 0, 0.15);
    position: relative; z-index: 2;
}

/* Gold Edge & Shimmer */
.envelope-scene .gold-edge { position: absolute; z-index: 3; pointer-events: none; }
.envelope-scene .gold-edge-top { top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, var(--gold-dark) 20%, var(--gold) 50%, var(--gold-dark) 80%, transparent 95%); opacity: 0.25; box-shadow: 0 0 4px rgba(201, 168, 76, 0.1); }
.envelope-scene .gold-edge-bottom { bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, var(--gold-dark) 20%, var(--gold) 50%, var(--gold-dark) 80%, transparent 95%); opacity: 0.25; box-shadow: 0 0 4px rgba(201, 168, 76, 0.1); }

.envelope-scene .shimmer-sweep { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.envelope-scene .shimmer-sweep::after {
    content: ''; position: absolute; top: -100%; left: -100%; width: 40%; height: 300%;
    background: linear-gradient(-45deg, transparent 35%, rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.06) 52%, rgba(255, 255, 255, 0.02) 58%, transparent 65%);
    animation: shimmerSweep 8s ease-in-out infinite;
}
@keyframes shimmerSweep {
    0%, 100% { transform: translateX(-30%) translateY(0%); }
    50% { transform: translateX(250%) translateY(10%); }
}

/* Instruction */
.envelope-scene .instruction {
    position: fixed; bottom: 10%; left: 50%; transform: translateX(-50%);
    color: rgba(120, 100, 70, 0.45); font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 4px; text-transform: uppercase;
    pointer-events: none; transition: opacity 0.6s ease; z-index: 50; white-space: nowrap;
}

/* Fullscreen Presentation */
.envelope-scene .fullscreen-backdrop {
    position: fixed; inset: 0; background: rgba(220, 210, 195, 0.75);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 99; opacity: 0; pointer-events: none;
}
.envelope-scene .fullscreen-backdrop.active { pointer-events: auto; }

/* The final card presented in center */
/* Note: The card is moved out of envelope-scene container when opened, so it might lose the namespace if attached to body directly.
   However, the JS logic appends it to document.body.
   We should probably ensure the JS appends it to the envelope-scene container OR ensuring these styles are global enough or the element keeps a class.
   The JS "rips" letterCard out.
   Let's assume we will append it to the wrapper or Body but give it a specific class that retains the styles.
   Ideally, we append it to the envelope-scene container.
*/

/* Styles for the card when it is inside OR pulled out.
   If pulled out to body, it needs .presentation-card style.
   The JS uses .letter-card initially then transitions.
*/

.envelope-scene .lc-rsvp-btn {
    position: fixed; bottom: 15px; left: 50%;
    transform: translateX(-50%); width: fit-content;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 160;
    padding: 16px 44px; background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #fff;
    border: none; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase;
    cursor: pointer; box-shadow: 0 4px 20px rgba(201, 168, 76, 0.25), 0 0 30px rgba(201, 168, 76, 0.4); overflow: hidden;
}
.envelope-scene .lc-rsvp-btn::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); transition: left 0.6s ease;
}
.envelope-scene .lc-rsvp-btn:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 6px 24px rgba(201, 168, 76, 0.35), 0 0 40px rgba(201, 168, 76, 0.5); }
.envelope-scene .lc-rsvp-btn:hover::after { left: 100%; }
.envelope-scene .lc-rsvp-btn.visible { opacity: 1; pointer-events: auto; }

/* When carousel controls are not visible (single image), move RSVP button closer */
.envelope-scene .lc-rsvp-btn.visible:not(.with-carousel) {
    bottom: 50px;
}

/* Confetti */
.envelope-scene .confetti-container { position: fixed; inset: 0; z-index: 102; pointer-events: none; overflow: hidden; }
.envelope-scene .confetti-piece { position: absolute; width: 8px; height: 8px; opacity: 0; }

/* Close Hint */
.envelope-scene .close-hint {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    font-family: 'Montserrat', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(100, 80, 50, 0.4);
    z-index: 160; opacity: 0; transition: opacity 0.5s; pointer-events: none;
    display: none;
}
.envelope-scene .close-hint.visible { opacity: 0; }

.envelope-scene.hidden {
    display: none !important;
}

/* ═════════════════════════════════════════════════════════════
   MULTI-LANGUAGE CAROUSEL STYLES
   ═════════════════════════════════════════════════════════════ */

/* Carousel wrapper inside the card */
.envelope-scene .card-carousel-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Image container with stack effect */
.envelope-scene .card-carousel-images {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

/* Individual image slides */
.envelope-scene .card-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    backface-visibility: hidden;
}

.envelope-scene .card-image.active {
    opacity: 1;
}

/* Alternate images get flipped to counteract 3D rotation reversal */
.envelope-scene .card-image:nth-child(even).active {
    transform: scaleX(-1);
}

/* Carousel controls container */
#env-carouselControls {
    position: fixed;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 999999 !important;
    opacity: 0;
    transition: opacity 0.4s ease 0.2s;
    pointer-events: none;
}

#env-carouselControls.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Dot indicators */
.envelope-scene .carousel-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

#env-carouselControls .carousel-dot {
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
}

#env-carouselControls .carousel-dot:hover {
    border-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
}

#env-carouselControls .carousel-dot.active {
    width: 12px;
    height: 12px;
    background: rgba(201, 168, 76, 0.8);
    border-color: rgba(201, 168, 76, 1);
}

/* Navigation arrows */
#env-carouselControls .carousel-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
    font-size: 16px;
    backdrop-filter: blur(4px);
}

#env-carouselControls .carousel-arrow:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.7);
    color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

#env-carouselControls .carousel-arrow:active {
    transform: scale(0.95);
}

#env-carouselControls .carousel-arrow i {
    display: block;
    line-height: 1;
}

/* Show carousel controls when card is open and displayed */
.envelope-scene .letter-card.active .carousel-controls {
    opacity: 1;
}

/* Responsive adjustments for tablet */
@media (max-width: 1024px) {
    #env-carouselControls {
        bottom: 60px;
    }

    .envelope-scene .lc-rsvp-btn {
        bottom: 12px;
    }
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    #env-carouselControls {
        gap: 15px;
        bottom: 55px;
    }

    .envelope-scene .lc-rsvp-btn {
        bottom: 10px;
        padding: 14px 40px;
        font-size: 9px;
    }

    #env-carouselControls .carousel-dot {
        width: 8px;
        height: 8px;
    }

    #env-carouselControls .carousel-dot.active {
        width: 10px;
        height: 10px;
    }

    #env-carouselControls .carousel-arrow {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* Responsive for small phones */
@media (max-width: 480px) {
    .envelope-scene .float-container { width: 90vw; height: 63vw; }
    .envelope-scene .guest-name { font-size: 24px; }
    .envelope-scene .guest-label { font-size: 8px; }
    .envelope-scene .stamp { width: 40px; height: 50px; }
    .envelope-scene .stamp-inner { width: 28px; height: 36px; font-size: 14px; }
    .envelope-scene .wax-seal { width: 48px; height: 48px; }
    .envelope-scene .seal-letter { font-size: 18px; }

    #env-carouselControls {
        bottom: 50px;
        gap: 12px;
    }

    .envelope-scene .lc-rsvp-btn {
        bottom: 8px;
        padding: 12px 32px;
        font-size: 8px;
    }

    #env-carouselControls .carousel-arrow {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    #env-carouselControls .carousel-dot {
        width: 6px;
        height: 6px;
    }

    #env-carouselControls .carousel-dot.active {
        width: 8px;
        height: 8px;
    }
}