/* ==========================================================================
   Yadidya weds Yuga Sri · Romantic Blush Rose & Butterfly Wedding Suite
   Target Folder: Bollarapus_wedding_invitation
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Cinzel:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Cormorant+SC:wght@400;500;600;700&family=Great+Vibes&family=Noto+Serif+Telugu:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&display=swap');

:root {
    /* Color Palette - Romantic Blush Pink, Dusty Rose, Muted Gold & Plum Navy */
    --bg-paper: #fcf4f6;
    --bg-paper-radial: radial-gradient(circle at 50% 25%, #ffffff 0%, #fcf0f3 45%, #f6dfe5 100%);

    --blush-pink: #e8a5b8;
    --blush-soft: rgba(232, 165, 184, 0.2);
    --dusty-rose: #d48398;
    --mauve-dark: #7a3e4d;
    --romantic-dark-pink: #b85b75;
    --romantic-deep-pink: #8c3a52;

    --gold-primary: #c59b27;
    --gold-soft: rgba(197, 155, 39, 0.25);
    --gold-light: #f7e8b5;
    --gold-dark: #876712;
    --gold-glow: rgba(197, 155, 39, 0.35);

    --navy-deep: #291824;
    --navy-muted: #3d2536;

    --text-primary: #2b1a26;
    --text-secondary: #634d5c;
    --text-muted: #8a7383;
    --text-gold: #b38a1f;

    --glass-card-bg: rgba(255, 253, 250, 0.88);
    --glass-border: 1px solid rgba(197, 155, 39, 0.32);
    --glass-shadow: 0 20px 50px -10px rgba(120, 60, 80, 0.12);

    /* Typography */
    --font-script: 'Great Vibes', cursive;
    --font-display: 'Cormorant Garamond', serif;
    --font-caps: 'Cormorant SC', serif;
    --font-heading: 'Cinzel', serif;
    --font-telugu: 'Noto Serif Telugu', serif;
    --font-sans: 'Outfit', sans-serif;
}

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--bg-paper);
}

body {
    font-family: var(--font-display);
    color: var(--text-primary);
    background: var(--bg-paper-radial);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

body.lang-te {
    font-family: var(--font-telugu), var(--font-display);
}

/* ==========================================================================
   Interactive Background Flowers (peony_left.png on Left & peony_right.png on Right)
   ========================================================================== */
.bg-botanical-peony {
    position: fixed;
    width: 360px;
    max-width: 46vw;
    pointer-events: none;
    z-index: 1;
    opacity: 0.92;
    mix-blend-mode: multiply; /* Blends gracefully with blush ivory radial background */
    filter: drop-shadow(0 10px 20px rgba(120, 60, 80, 0.08));
    transition: transform 0.12s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.bg-peony-left {
    top: -10px;
    left: -10px;
    transform: translateY(calc(var(--scroll-y, 0px) * 0.12));
}

.bg-peony-right {
    bottom: -10px;
    right: -10px;
    transform: translateY(calc(var(--scroll-y, 0px) * -0.08));
}

/* ==========================================================================
   Ambient Flying Birds, Fluttering Butterflies 🦋 & Falling Petals
   FLOATING ON TOP OF ALL CONTENT (z-index: 900, pointer-events: none)
   ========================================================================== */
.ambient-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 900;
    overflow: hidden;
}

/* 🦋 FLUTTERING BUTTERFLIES ANIMATION */
@keyframes butterflyFly1 {
    0% { transform: translate(-60px, 85vh) rotate(15deg) scale(0.75); opacity: 0; }
    15% { opacity: 0.95; }
    50% { transform: translate(40vw, 45vh) rotate(-12deg) scale(0.95); }
    85% { opacity: 0.95; }
    100% { transform: translate(calc(100vw + 60px), -60px) rotate(22deg) scale(0.75); opacity: 0; }
}

@keyframes butterflyFly2 {
    0% { transform: translate(calc(100vw + 60px), 70vh) rotate(-22deg) scale(0.85); opacity: 0; }
    15% { opacity: 1; }
    50% { transform: translate(45vw, 30vh) rotate(15deg) scale(1); }
    85% { opacity: 1; }
    100% { transform: translate(-60px, -50px) rotate(-18deg) scale(0.85); opacity: 0; }
}

@keyframes butterflyFly3 {
    0% { transform: translate(20vw, 105vh) rotate(-5deg) scale(0.75); opacity: 0; }
    20% { opacity: 0.95; }
    70% { transform: translate(75vw, 20vh) rotate(25deg) scale(0.9); }
    100% { transform: translate(90vw, -60px) rotate(10deg) scale(0.75); opacity: 0; }
}

@keyframes wingFlap {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.2); }
}

.butterfly-1 {
    position: absolute;
    color: #e8869f;
    animation: butterflyFly1 16s infinite ease-in-out;
}

.butterfly-2 {
    position: absolute;
    color: #d4952a;
    animation: butterflyFly2 20s infinite ease-in-out 3s;
}

.butterfly-3 {
    position: absolute;
    color: #d96884;
    animation: butterflyFly3 18s infinite ease-in-out 7s;
}

.butterfly-svg {
    width: 38px;
    height: 38px;
    fill: currentColor;
    filter: drop-shadow(0 8px 16px rgba(120, 40, 70, 0.45));
    transform-origin: center center;
    animation: wingFlap 0.24s infinite ease-in-out;
}

/* Flying Birds Keyframes */
@keyframes flyLeftToRight {
    0% { transform: translate(-80px, 0) scale(var(--bird-scale, 0.85)); opacity: 0; }
    10% { opacity: 0.65; }
    90% { opacity: 0.65; }
    100% { transform: translate(calc(100vw + 80px), -60px) scale(var(--bird-scale, 0.85)); opacity: 0; }
}

@keyframes flyRightToLeft {
    0% { transform: translate(calc(100vw + 80px), 0) scale(var(--bird-scale, 0.85)) scaleX(-1); opacity: 0; }
    10% { opacity: 0.65; }
    90% { opacity: 0.65; }
    100% { transform: translate(-80px, -40px) scale(var(--bird-scale, 0.85)) scaleX(-1); opacity: 0; }
}

.bird-lr {
    position: absolute;
    color: var(--gold-dark);
    opacity: 0.6;
    animation: flyLeftToRight var(--fly-dur, 12s) infinite linear var(--fly-delay, 0s);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.bird-rl {
    position: absolute;
    color: var(--gold-dark);
    opacity: 0.6;
    animation: flyRightToLeft var(--fly-dur, 14s) infinite linear var(--fly-delay, 2s);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.bird-svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

/* Falling Petals Animation */
@keyframes petalFall {
    0% { transform: translate(0, -40px) rotate(0deg); opacity: 0; }
    15% { opacity: 0.75; }
    85% { opacity: 0.75; }
    100% { transform: translate(var(--drift, 80px), calc(100vh + 40px)) rotate(360deg); opacity: 0; }
}

.falling-petal {
    position: absolute;
    top: -40px;
    color: #e28da4;
    opacity: 0.7;
    filter: drop-shadow(0 4px 10px rgba(180, 80, 110, 0.35));
    animation: petalFall var(--fall-dur, 15s) infinite linear var(--fall-delay, 0s);
}

.falling-petal svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* ==========================================================================
   Envelope Intro Overlay
   ========================================================================== */
#envelope-intro {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: radial-gradient(circle at center, #ffffff 0%, #fcf0f3 60%, #f4d4dc 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 1s cubic-bezier(0.7, 0, 0.3, 1), visibility 1s ease;
    padding: 24px;
}

#envelope-intro.opened {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.envelope-wrapper {
    position: relative;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 5 / 7;
    perspective: 1200px;
}

.envelope-card {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #ffffff, #f9e8ed);
    border-radius: 16px;
    border: 1px solid rgba(197, 155, 39, 0.4);
    box-shadow: 0 30px 80px -15px rgba(120, 60, 80, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.envelope-inner-border {
    position: absolute;
    inset: 12px;
    border: 1px dashed rgba(197, 155, 39, 0.35);
    border-radius: 10px;
    pointer-events: none;
}

.envelope-top-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background: linear-gradient(180deg, #ffffff 0%, #f2d8e0 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    border-bottom: 1px solid rgba(197, 155, 39, 0.35);
    transform-origin: top center;
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 2;
}

#envelope-intro.unsealing .envelope-top-flap {
    transform: rotateX(180deg);
}

.wax-seal-img-btn {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    border: none;
    background: transparent;
    cursor: pointer;
    outline: none;
}

.envelope-wax-image {
    width: 135px;
    height: 135px;
    object-fit: contain;
    filter: drop-shadow(0 12px 25px rgba(120, 60, 80, 0.35));
    transition: transform 0.35s ease;
    animation: waxPulse 2.5s infinite ease-in-out;
}

@keyframes waxPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 12px 25px rgba(120, 60, 80, 0.35)); }
    50% { transform: scale(1.06); filter: drop-shadow(0 18px 38px rgba(120, 60, 80, 0.55)); }
}

.envelope-hint {
    margin-top: 24px;
    font-family: var(--font-caps);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--text-muted);
    text-transform: uppercase;
    animation: fadeInOut 2s infinite ease-in-out;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ==========================================================================
   CINEMATIC LUXURY HERO COMPOSITION
   ========================================================================== */
.hero-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 48px;
    padding-bottom: 70px;
    overflow: hidden;
    z-index: 5;
}

/* Hero Content Frame */
.hero-content-frame {
    position: relative;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
}

/* 1. TOP MONOGRAM & BREATHING HALO */
.monogram-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.monogram-halo {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 165, 184, 0.45) 0%, rgba(197, 155, 39, 0.2) 50%, transparent 70%);
    animation: haloBreathe 4s infinite ease-in-out;
    pointer-events: none;
    z-index: 1;
}

@keyframes haloBreathe {
    0%, 100% { transform: scale(1); opacity: 0.45; }
    50% { transform: scale(1.18); opacity: 0.85; }
}

.hero-monogram-img {
    position: relative;
    z-index: 2;
    width: 96px;
    height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(197, 155, 39, 0.18));
}

/* 2. HOLY MATRIMONY SUBTITLE */
.hero-matrimony-tag {
    font-family: var(--font-caps);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.42em;
    color: var(--gold-dark);
    text-transform: uppercase;
    margin-top: 4px;
    margin-bottom: 14px;
}

/* 3. HERO COUPLE NAMES (Yadidya & Yuga Sri) */
.hero-names-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 14px;
}

.hero-name-first,
.hero-name-second {
    font-family: var(--font-script);
    font-size: 3.8rem;
    color: var(--text-primary);
    line-height: 1.05;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.hero-ampersand {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-style: italic;
    font-weight: 300;
    color: var(--gold-primary);
    margin: -6px 0;
    position: relative;
    z-index: 2;
}

/* 4. ANTIQUE GOLD DIVIDER LINE */
.hero-divider-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 220px;
    margin-bottom: 24px;
}

.hero-divider-line .line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
}

.hero-divider-line .diamond {
    color: var(--gold-primary);
    font-size: 0.65rem;
}

/* 5. ARCHITECTURAL ARCH & EXTENDING COUPLE CUTOUT */
.hero-arch-container {
    position: relative;
    width: 100%;
    max-width: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.hero-arch-outline {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 380px;
    border-top-left-radius: 140px;
    border-top-right-radius: 140px;
    border: 1px solid rgba(197, 155, 39, 0.38);
    background: radial-gradient(ellipse at 50% 40%, rgba(255, 253, 250, 0.95) 0%, rgba(252, 240, 243, 0.6) 70%, transparent 100%);
    box-shadow: inset 0 0 30px rgba(197, 155, 39, 0.08), 0 16px 40px rgba(0,0,0,0.03);
    z-index: 1;
    pointer-events: none;
}

.hero-arch-outline::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-top-left-radius: 132px;
    border-top-right-radius: 132px;
    border: 1px dashed rgba(197, 155, 39, 0.22);
    pointer-events: none;
}

.hero-couple-glow {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(252, 240, 243, 0.95) 0%, rgba(232, 165, 184, 0.2) 60%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-couple-cutout {
    position: relative;
    z-index: 3;
    width: 90%;
    max-width: 275px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(80, 40, 60, 0.15));
    transition: transform 0.5s ease;
}

.hero-couple-cutout:hover {
    transform: scale(1.02);
}

.veil-sweep-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
    border-radius: 140px 140px 0 0;
}

.veil-sweep-light {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: veilShimmer 6s infinite ease-in-out;
}

@keyframes veilShimmer {
    0%, 60% { transform: translateX(-100%); }
    80%, 100% { transform: translateX(100%); }
}

/* 6. DATE & LOCATION BADGE */
.hero-date-group {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -12px;
}

.hero-date-val {
    font-family: var(--font-caps);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    color: var(--text-primary);
    text-transform: uppercase;
}

.hero-location-val {
    font-family: var(--font-caps);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.38em;
    color: var(--gold-dark);
    text-transform: uppercase;
    margin-top: 4px;
}

/* 7. SCROLL TO DISCOVER CUE */
.hero-scroll-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 26px;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
}

.scroll-cue-text {
    font-family: var(--font-caps);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.scroll-cue-arrow {
    width: 16px;
    height: 16px;
    fill: var(--gold-primary);
    animation: bounceDown 2s infinite ease-in-out;
}

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

/* ==========================================================================
   COUPLE CARD TYPOGRAPHY HIERARCHY
   ========================================================================== */
.couple-card-name {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    color: var(--text-primary);
    margin: 8px 0 6px;
    line-height: 1.35;
}

.name-title-light,
.name-degree-light {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.74em;
    opacity: 0.85;
}

.name-main-bold {
    font-weight: 700;
    color: var(--navy-deep);
    letter-spacing: 0.01em;
}

.couple-parent-details {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.5;
    margin-top: 4px;
}

/* ==========================================================================
   FLOATING UI CONTROLS
   ========================================================================== */
.lang-switch-wrapper {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

.lang-switch-pill {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 253, 250, 0.94);
    border: var(--glass-border);
    border-radius: 9999px;
    padding: 4px;
    box-shadow: 0 12px 35px rgba(120, 60, 80, 0.22);
    backdrop-filter: blur(16px);
}

.lang-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: calc(50% - 4px);
    background: var(--navy-deep);
    border-radius: 9999px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

.lang-switch-pill[data-lang="te"] .lang-indicator {
    transform: translateX(100%);
}

.lang-btn {
    position: relative;
    z-index: 2;
    min-width: 88px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-family: var(--font-caps);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.3s ease;
    text-align: center;
}

.lang-btn.active {
    color: #ffffff;
}

.audio-toggle-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 253, 250, 0.94);
    border: var(--glass-border);
    backdrop-filter: blur(12px);
    color: var(--navy-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    transition: transform 0.3s ease, background 0.3s ease;
}

.audio-toggle-btn.playing {
    color: var(--gold-primary);
    animation: musicPulse 2s infinite ease-in-out;
}

@keyframes musicPulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(197, 155, 39, 0.4); }
    50% { box-shadow: 0 14px 40px rgba(197, 155, 39, 0.7); }
}

.audio-toggle-btn:hover {
    transform: scale(1.1);
    background: var(--navy-deep);
    color: #ffffff;
}

.audio-toggle-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ==========================================================================
   CINEMATIC ENTRANCE ANIMATION SEQUENCE
   ========================================================================== */
.hero-animate-bg { animation: fadeInHeroBg 1s ease forwards; }
.hero-animate-arch { animation: drawArch 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards; opacity: 0; }
.hero-animate-mono { animation: fadeInMono 1s ease 0.6s forwards; opacity: 0; }
.hero-animate-tag { animation: fadeInUp 0.8s ease 0.9s forwards; opacity: 0; }
.hero-animate-name1 { animation: fadeInUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) 1.2s forwards; opacity: 0; }
.hero-animate-amp { animation: fadeIn 0.6s ease 1.5s forwards; opacity: 0; }
.hero-animate-name2 { animation: fadeInUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) 1.7s forwards; opacity: 0; }
.hero-animate-line { animation: drawLine 0.9s ease 2.0s forwards; opacity: 0; }
.hero-animate-couple { animation: riseUpCouple 1.2s cubic-bezier(0.25, 1, 0.5, 1) 2.3s forwards; opacity: 0; }
.hero-animate-date { animation: fadeInUp 0.8s ease 2.8s forwards; opacity: 0; }

@keyframes fadeInHeroBg { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawArch { from { opacity: 0; transform: translateX(-50%) scale(0.95); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes fadeInMono { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawLine { from { opacity: 0; width: 0; } to { opacity: 1; width: 220px; } }
@keyframes riseUpCouple { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ==========================================================================
   OTHER SECTIONS PRESERVED
   ========================================================================== */
.main-wrapper {
    position: relative;
    z-index: 5;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px 120px;
}

.gold-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 14px 0;
    width: 100%;
}

.gold-ornament .line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
}

.gold-ornament .heart {
    color: var(--gold-primary);
    font-size: 0.8rem;
}

.glass-card {
    position: relative;
    background: var(--glass-card-bg);
    border: var(--glass-border);
    border-radius: 24px;
    padding: 40px 28px;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(16px);
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    margin-bottom: 34px;
}

.glass-card.arch-card {
    border-radius: 160px 160px 24px 24px;
    padding-top: 52px;
}

.glass-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(197, 155, 39, 0.25);
    border-radius: inherit;
    pointer-events: none;
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.section-subtitle {
    font-family: var(--font-caps);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-gold);
}

.section-title {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-primary);
    text-transform: uppercase;
}

/* ==========================================================================
   SCRATCH CARDS & RESPONSIVE MOBILE FIXES
   ========================================================================== */
.scratch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 18px;
    padding: 0 4px;
}

.scratch-box {
    position: relative;
    height: 110px;
    border-radius: 14px;
    border: var(--glass-border);
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(120, 60, 80, 0.08);
}

.scratch-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #ffffff, #fcf0f3);
    padding: 6px;
}

.scratch-number {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.scratch-number.month-text {
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-transform: uppercase;
}

.scratch-label {
    font-family: var(--font-caps);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 4px;
}

.scratch-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    touch-action: none;
    z-index: 2;
    transition: opacity 0.6s ease;
}

/* Party Popper Confetti Container */
.party-confetti-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    animation: popAndFall 2.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes popAndFall {
    0% {
        transform: translate(var(--pop-x, 0), var(--pop-y, 0)) scale(0) rotate(0deg);
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        transform: translate(calc(var(--pop-x, 0) + var(--drift-x, 20px)), calc(var(--pop-y, 0) + 180px)) scale(1.2) rotate(720deg);
        opacity: 0;
    }
}

.reveal-btn {
    margin-top: 22px;
    background: transparent;
    border: var(--glass-border);
    border-radius: 9999px;
    padding: 10px 26px;
    font-family: var(--font-caps);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    color: var(--navy-deep);
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reveal-btn:hover {
    background: var(--navy-deep);
    color: #ffffff;
    border-color: transparent;
}

.countdown-ticker-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    border: var(--glass-border);
    background: rgba(255, 253, 250, 0.95);
    border-radius: 16px;
    margin-top: 18px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.ticker-unit {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ticker-val {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
}

.ticker-label {
    font-family: var(--font-caps);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    color: var(--gold-dark);
    margin-top: 4px;
}

.ticker-sep {
    width: 1px;
    height: 36px;
    background: rgba(197, 155, 39, 0.3);
}

.action-btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 9999px;
    border: var(--glass-border);
    background: rgba(255, 253, 250, 0.95);
    color: var(--text-primary);
    font-family: var(--font-caps);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    cursor: pointer;
}

.action-btn:hover {
    background: var(--navy-deep);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
}

.action-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.phone-chip-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.phone-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 9999px;
    border: var(--glass-border);
    background: rgba(255, 253, 250, 0.9);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.phone-chip:hover {
    background: var(--blush-soft);
    border-color: var(--blush-pink);
}

footer {
    text-align: center;
    padding-top: 36px;
}

.footer-names {
    font-family: var(--font-script);
    font-size: 2.6rem;
    color: var(--navy-deep);
}

.footer-date {
    font-family: var(--font-caps);
    font-size: 0.75rem;
    letter-spacing: 0.35em;
    color: var(--gold-dark);
}

/* Responsive Breakdown & Mobile Fixes */
@media (max-width: 480px) {
    .bg-botanical-peony { width: 260px; max-width: 45vw; }
    .hero-content-frame { max-width: 360px; }
    .hero-name-first, .hero-name-second { font-size: 3.2rem; }
    .hero-ampersand { font-size: 1.8rem; }
    .hero-arch-outline { width: 250px; height: 340px; }
    .hero-couple-cutout { max-width: 240px; }
    .hero-monogram-img { width: 84px; height: 84px; }

    /* Mobile Scratch Grid & Month Text Fix */
    .scratch-grid { gap: 6px; padding: 0; }
    .scratch-box { height: 98px; }
    .scratch-number { font-size: 1.45rem; }
    .scratch-number.month-text { font-size: 0.76rem; letter-spacing: 0; }
}

@media (min-width: 768px) {
    .bg-botanical-peony { width: 420px; }
    .hero-content-frame { max-width: 580px; }
    .hero-name-first, .hero-name-second { font-size: 4.8rem; }
    .hero-ampersand { font-size: 2.6rem; }
    .hero-arch-outline { width: 340px; height: 440px; }
    .hero-couple-cutout { max-width: 330px; }
    .hero-monogram-img { width: 110px; height: 110px; }
}