:root {
    --bg-pink: #fff5f7;
    --mauve: #8a3b4c;
    --mauve-light: #c68995;
    --text-dark: #4a3b3c;
    --white: #ffffff;
    --font-script: 'Great Vibes', cursive;
    --font-serif: 'Lora', serif;
    --font-body: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: var(--bg-pink); color: var(--text-dark); font-family: var(--font-body); overflow-x: hidden; text-align: center; }

/* --- Bulletproof Pure CSS Envelope Sequence --- */
.envelope-screen { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: center; background: #ebd5da; transition: opacity 1.5s ease 1s, visibility 1.5s 1s; perspective: 1200px; }

.envelope { position: relative; width: 90vw; max-width: 600px; height: 350px; border-radius: 10px; box-shadow: 0 20px 40px rgba(138,59,76,0.2); }

/* The Inside Back */
.envelope-back { position: absolute; inset: 0; background: #e3b6bf; border-radius: 10px; z-index: 1; }

/* The Invitation Card */
.envelope-card { position: absolute; left: 15px; right: 15px; bottom: 15px; height: 320px; background: #fff; border-radius: 8px; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 -5px 15px rgba(0,0,0,0.1); transition: transform 1.2s ease 0.6s; }
.envelope-card h2 { font-family: var(--font-script); color: var(--mauve); font-size: 3rem; margin: 0; }
.envelope-card p { font-family: var(--font-serif); color: var(--text-dark); }

/* The Front Pocket (Using clip path for perfect diagonals) */
.envelope-front { position: absolute; inset: 0; background: linear-gradient(135deg, #e8c0c8 0%, #d896a4 100%); clip-path: polygon(0 100%, 0 0, 50% 50%, 100% 0, 100% 100%); z-index: 3; border-radius: 10px; border-bottom: 2px solid rgba(255,255,255,0.3); }

/* The Top Flap */
.envelope-flap { position: absolute; top: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(to bottom, #ebd5da 0%, #e3b6bf 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; z-index: 4; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); border-top: 2px solid rgba(255,255,255,0.4); }

/* The Wax Seal */
.wax-seal { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: radial-gradient(circle at 30% 30%, #f9d976, #e9b646, #b8860b); border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.3); border: 2px solid #ffeba5; display: flex; justify-content: center; align-items: center; z-index: 5; transition: opacity 0.4s ease, transform 0.4s ease; font-family: var(--font-serif); font-size: 1.1rem; color: #5a410b; font-style: italic; line-height: 1.2; text-shadow: 1px 1px 0px rgba(255,255,255,0.4); }

/* Burst of light */
.light-burst { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 100vw; height: 100vw; background: radial-gradient(circle, #fff 0%, rgba(255,245,247,0.9) 30%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 1004; transition: transform 1.5s ease-out, opacity 1s ease-out; opacity: 0; }

/* The Animation Triggers */
.envelope-screen.open .wax-seal { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
.envelope-screen.open .envelope-flap { transform: rotateX(180deg); z-index: 1; }
.envelope-screen.open .envelope-card { transform: translateY(-120%); }
.envelope-screen.open .light-burst { transform: translate(-50%, -50%) scale(2.5); opacity: 1; }
.envelope-screen.open { opacity: 0; visibility: hidden; }


/* --- Hero Section (Video, Curtains, Birds) --- */
.hero { position: relative; height: 95vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: #2b1d24; }

/* Video & Fallbacks */
.hero-fallback { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1494548162494-384bba4ab999?q=80&w=1600&auto=format&fit=crop') center/cover; z-index: 0; animation: slowZoom 20s infinite alternate; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-overlay { position: absolute; inset: 0; background: rgba(138, 59, 76, 0.2); z-index: 2; }

@keyframes slowZoom { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }

/* Realistic Sheer Curtains */
.hero-curtain { position: absolute; top: -5%; height: 110%; width: 35vw; max-width: 300px; z-index: 3; pointer-events: none; backdrop-filter: blur(1px); }
.curtain-left { left: -10vw; background: linear-gradient(to right, rgba(255,255,255,0.8), rgba(255,255,255,0.05)); border-right: 1px solid rgba(255,255,255,0.3); transform-origin: top left; animation: swayL 5s infinite alternate ease-in-out; }
.curtain-right { right: -10vw; background: linear-gradient(to left, rgba(255,255,255,0.8), rgba(255,255,255,0.05)); border-left: 1px solid rgba(255,255,255,0.3); transform-origin: top right; animation: swayR 6s infinite alternate ease-in-out; }

@keyframes swayL { 0% { transform: rotate(0deg); } 100% { transform: rotate(-3deg); } }
@keyframes swayR { 0% { transform: rotate(0deg); } 100% { transform: rotate(3deg); } }

/* Flying Birds */
.birds-container { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bird { position: absolute; opacity: 0; animation: fly linear infinite; color: white; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.bird1 { top: 15%; width: 30px; animation-duration: 20s; animation-delay: 0s; }
.bird2 { top: 25%; width: 20px; animation-duration: 25s; animation-delay: 5s; }
.bird3 { top: 10%; width: 40px; animation-duration: 18s; animation-delay: 10s; }

@keyframes fly { 0% { transform: translate(-10vw, 5vh) scale(0.8); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { transform: translate(110vw, -10vh) scale(1); opacity: 0; } }

/* Highly Readable Hero Text */
.hero-content { position: relative; z-index: 5; padding: 20px; text-shadow: 0 4px 15px rgba(0,0,0,0.6); }
.intro { font-family: var(--font-serif); font-style: italic; color: var(--white); margin-bottom: 20px; font-size: 1.1rem; }
.names { font-family: var(--font-script); font-size: 6rem; color: var(--white); line-height: 1; margin: 10px 0; }
.ampersand { font-family: var(--font-script); font-size: 3rem; color: #ffd97d; margin: -10px 0; }
.parents { font-family: var(--font-serif); font-size: 1rem; color: var(--white); font-style: italic; }
.parents span { font-family: var(--font-body); font-size: 0.75rem; font-style: normal; color: #ffd97d; letter-spacing: 1px; display: block; margin-top: 5px; }


/* --- Main Page Layout --- */
.transition-gradient { background: linear-gradient(to bottom, #d4b5c1 0%, var(--bg-pink) 100%); padding: 60px 20px 20px; }
.thank-you-text { font-family: var(--font-serif); font-style: italic; max-width: 600px; margin: 0 auto; color: var(--text-dark); line-height: 1.8; }
.invitation-wrapper { width: 100%; margin: 0 auto; overflow-x: hidden; }
section { padding: 60px 20px; max-width: 800px; margin: 0 auto; }
.script-heading { font-family: var(--font-script); color: var(--mauve); font-size: 3.5rem; font-weight: normal; }
.divider-heart { color: var(--mauve-light); font-size: 0.8rem; margin: 10px 0 30px; letter-spacing: 20px; }
.icon-circle { font-size: 1.5rem; margin-bottom: -10px; }

/* Buttons & Heart Canvas */
.mauve-btn { background: transparent; border: 1px solid var(--mauve); color: var(--mauve); padding: 12px 30px; font-family: var(--font-body); font-size: 1rem; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; }
.mauve-btn:hover, .mauve-btn.solid { background: var(--mauve); color: var(--white); }
.floating-btn { position: fixed; bottom: 20px; right: 20px; z-index: 9999; border-radius: 30px; background: var(--white); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

.heart-scratch-container { position: relative; width: 250px; height: 250px; margin: 0 auto; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; filter: drop-shadow(0 10px 15px rgba(138,59,76,0.2)); }
.scratch-reveal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--white); z-index: 1; }
.scratch-reveal h3 { font-family: var(--font-serif); font-size: 1.8rem; color: var(--mauve); }
#scratch-pad { position: absolute; inset: 0; z-index: 2; cursor: crosshair; }

/* Timeline & Forms */
.countdown { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.time-box { background: #fff; border: 1px solid rgba(138, 59, 76, 0.1); padding: 25px 15px; width: 90px; border-radius: 4px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
.time-box span { font-size: 2.2rem; font-weight: 500; font-family: var(--font-serif); color: var(--mauve); display: block; margin-bottom: 8px; }
.time-box p { font-size: 0.7rem; text-transform: uppercase; color: var(--text-dark); }
.timeline-container { max-width: 400px; margin: 0 auto; border-left: 1px solid var(--mauve-light); padding-left: 30px; text-align: left; }
.timeline-item { position: relative; margin-bottom: 35px; }
.timeline-item::before { content: ''; position: absolute; left: -36px; top: 5px; width: 10px; height: 10px; background: var(--mauve); border-radius: 50%; box-shadow: 0 0 0 4px var(--bg-pink); }
.timeline-item h4 { font-family: var(--font-serif); color: var(--mauve); font-size: 1.2rem; margin-bottom: 5px; }
.timeline-date { font-size: 0.85rem; font-weight: 500; }
.timeline-desc { font-size: 0.9rem; color: #666; font-style: italic; font-family: var(--font-serif); }
.dress-code-grid { display: flex; justify-content: center; gap: 40px; margin-top: 20px; }
.rsvp-form { display: flex; flex-direction: column; gap: 10px; max-width: 500px; margin: 0 auto; text-align: left; }
.rsvp-form input, .rsvp-form select, .rsvp-form textarea { width: 100%; padding: 12px; border: 1px solid rgba(138, 59, 76, 0.2); border-radius: 4px; }
footer { padding: 60px 20px; }
.footer-names { font-family: var(--font-script); font-size: 2.5rem; color: var(--mauve); }
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }