/* ===== Premium Wedding Website Styles ===== */

:root {
    /* Color Palette */
    --color-cream: #FDF8F3;
    --color-white: #FFFFFF;
    --color-gold: #C9A55C;
    --color-gold-light: #E8D5A3;
    --color-gold-dark: #A67C00;
    --color-gold-shimmer: #FFE4A0;
    --color-maroon: #8B0000;
    --color-maroon-light: #A52A2A;
    --color-maroon-dark: #5C0000;
    --color-red: #D32F2F;
    --color-orange: #FF6B35;
    --color-marigold: #FF9933;
    --color-green: #2E7D32;
    --color-teal: #45a086;
    --color-text: #2C2C2C;
    --color-text-light: #666666;
    --color-text-muted: #999999;

    /* Typography - matching demo website */
    --font-display: 'Cormorant Upright', serif;
    --font-heading: 'Cormorant', serif;
    --font-unicase: 'Cormorant Unicase', serif;
    --font-body: 'Manrope', sans-serif;
    --font-accent: 'Gotu', sans-serif;
    --font-decorative: 'Aboreto', serif;

    /* Spacing */
    --section-padding: 100px;
    --container-max: 1200px;

    /* Transitions */
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Shadows */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 10px 40px rgba(0, 0, 0, 0.12);
    --shadow-gold: 0 10px 40px rgba(201, 165, 92, 0.3);
    --shadow-royal: 0 15px 50px rgba(139, 0, 0, 0.2);
}

/* ===== Scroll Animations ===== */
.scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate.animate-left {
    transform: translateX(-50px);
}

.scroll-animate.animate-right {
    transform: translateX(50px);
}

.scroll-animate.animate-scale {
    transform: scale(0.9);
}

.scroll-animate.animate-fade {
    transform: translateY(0);
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Staggered children animation */
.scroll-animate-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-stagger.visible > *:nth-child(1) { transition-delay: 0.1s; }
.scroll-animate-stagger.visible > *:nth-child(2) { transition-delay: 0.2s; }
.scroll-animate-stagger.visible > *:nth-child(3) { transition-delay: 0.3s; }
.scroll-animate-stagger.visible > *:nth-child(4) { transition-delay: 0.4s; }
.scroll-animate-stagger.visible > *:nth-child(5) { transition-delay: 0.5s; }
.scroll-animate-stagger.visible > *:nth-child(6) { transition-delay: 0.6s; }
.scroll-animate-stagger.visible > *:nth-child(7) { transition-delay: 0.7s; }
.scroll-animate-stagger.visible > *:nth-child(8) { transition-delay: 0.8s; }
.scroll-animate-stagger.visible > *:nth-child(9) { transition-delay: 0.9s; }

.scroll-animate-stagger.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Royal Gold Shimmer Animation ===== */
@keyframes goldShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes royalGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(201, 165, 92, 0.3); }
    50% { box-shadow: 0 0 40px rgba(201, 165, 92, 0.5); }
}

@keyframes floatGentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ===== WOW Effects ===== */

/* Shimmer Text Effect */
.shimmer-text {
    background: linear-gradient(
        90deg,
        var(--color-gold) 0%,
        var(--color-gold-shimmer) 25%,
        var(--color-gold) 50%,
        var(--color-gold-shimmer) 75%,
        var(--color-gold) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerFlow 8s ease-in-out infinite;
}

@keyframes shimmerFlow {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Sparkle Cursor Trail */
.sparkle {
    position: fixed;
    pointer-events: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-gold) 0%, transparent 70%);
    animation: sparkleFade 1s ease forwards;
    z-index: 9999;
}

@keyframes sparkleFade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* Floating Hearts */
.floating-hearts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.heart {
    position: absolute;
    font-size: 20px;
    color: var(--color-gold);
    opacity: 0;
    animation: floatHeart 6s ease-in-out infinite;
}

.heart:nth-child(1) { left: 5%; animation-delay: 0s; }
.heart:nth-child(2) { left: 15%; animation-delay: 1s; }
.heart:nth-child(3) { left: 25%; animation-delay: 2s; }
.heart:nth-child(4) { left: 75%; animation-delay: 0.5s; }
.heart:nth-child(5) { left: 85%; animation-delay: 1.5s; }
.heart:nth-child(6) { left: 95%; animation-delay: 2.5s; }

@keyframes floatHeart {
    0% {
        opacity: 0;
        transform: translateY(100vh) rotate(0deg) scale(0.5);
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) rotate(45deg) scale(1);
    }
}

/* Glowing Section Borders */
.section-glow {
    position: relative;
}

.section-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; width: 200px; }
    50% { opacity: 1; width: 300px; }
}

/* Animated Underline on Hover */
.hover-underline {
    position: relative;
    display: inline-block;
}

.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-gold);
    transition: all 0.4s ease;
    transform: translateX(-50%);
}

.hover-underline:hover::after {
    width: 100%;
}

/* Pulse Ring Effect */
.pulse-ring {
    position: relative;
}

.pulse-ring::before,
.pulse-ring::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: pulseRing 2s ease-out infinite;
}

.pulse-ring::after {
    animation-delay: 1s;
}

@keyframes pulseRing {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* ===== ENHANCED ENVELOPE PRELOADER ===== */
.envelope-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 248, 235, 1) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(255, 240, 220, 1) 0%, transparent 50%),
        linear-gradient(180deg, #FFF9F0 0%, #FFF5E6 30%, #FFEED9 70%, #FFE8CC 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.envelope-preloader.opened {
    pointer-events: none;
}

.envelope-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Animated Background Pattern */
.envelope-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(201, 165, 92, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(201, 165, 92, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 80% 80%, rgba(139, 0, 0, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(139, 0, 0, 0.04) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(201, 165, 92, 0.05) 0%, transparent 60%);
    pointer-events: none;
    animation: patternShift 8s ease-in-out infinite;
}

@keyframes patternShift {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Light Rays Effect */
.envelope-bg-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(201, 165, 92, 0.03) 10deg,
        transparent 20deg,
        rgba(201, 165, 92, 0.02) 30deg,
        transparent 40deg,
        rgba(201, 165, 92, 0.03) 50deg,
        transparent 60deg,
        rgba(201, 165, 92, 0.02) 70deg,
        transparent 80deg,
        rgba(201, 165, 92, 0.03) 90deg,
        transparent 100deg
    );
    animation: raysSpin 60s linear infinite;
    pointer-events: none;
}

@keyframes raysSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Corner Ornaments */
.corner-ornament {
    position: absolute;
    width: 120px;
    height: 120px;
    pointer-events: none;
    opacity: 0.8;
}

.corner-ornament.top-left { top: 20px; left: 20px; }
.corner-ornament.top-right { top: 20px; right: 20px; }
.corner-ornament.bottom-left { bottom: 20px; left: 20px; }
.corner-ornament.bottom-right { bottom: 20px; right: 20px; }

.corner-ornament svg {
    width: 100%;
    height: 100%;
}

/* Floating Rose Petals */
.floating-petals {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.petal {
    position: absolute;
    width: 20px;
    height: 24px;
    background: radial-gradient(ellipse at 30% 30%, #ffb3b3 0%, #ff6b6b 40%, #cc4455 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0;
    animation: petalFall 8s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(200, 50, 80, 0.2);
}

.petal::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 20%;
    width: 60%;
    height: 40%;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 60%);
    border-radius: 50%;
}

.petal-1 { left: 10%; animation-delay: 0s; width: 18px; height: 22px; }
.petal-2 { left: 25%; animation-delay: 1.2s; width: 22px; height: 26px; }
.petal-3 { left: 40%; animation-delay: 2.4s; width: 16px; height: 20px; }
.petal-4 { left: 55%; animation-delay: 0.8s; width: 20px; height: 24px; }
.petal-5 { left: 70%; animation-delay: 2s; width: 24px; height: 28px; }
.petal-6 { left: 85%; animation-delay: 1.6s; width: 17px; height: 21px; }
.petal-7 { left: 15%; animation-delay: 3.2s; width: 19px; height: 23px; }
.petal-8 { left: 75%; animation-delay: 0.4s; width: 21px; height: 25px; }

@keyframes petalFall {
    0% {
        opacity: 0;
        transform: translateY(-50px) rotate(0deg) scale(0.5);
    }
    10% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg) scale(0.8);
    }
}

/* Golden Sparkles */
.golden-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFD700;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.6);
    opacity: 0;
    animation: sparkleGlow 3s ease-in-out infinite;
}

.sparkle:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
.sparkle:nth-child(2) { top: 25%; left: 85%; animation-delay: 0.3s; }
.sparkle:nth-child(3) { top: 40%; left: 5%; animation-delay: 0.6s; }
.sparkle:nth-child(4) { top: 55%; left: 92%; animation-delay: 0.9s; }
.sparkle:nth-child(5) { top: 70%; left: 15%; animation-delay: 1.2s; }
.sparkle:nth-child(6) { top: 80%; left: 80%; animation-delay: 1.5s; }
.sparkle:nth-child(7) { top: 10%; left: 45%; animation-delay: 0.4s; }
.sparkle:nth-child(8) { top: 30%; left: 60%; animation-delay: 0.7s; }
.sparkle:nth-child(9) { top: 85%; left: 40%; animation-delay: 1s; }
.sparkle:nth-child(10) { top: 20%; left: 25%; animation-delay: 1.3s; }
.sparkle:nth-child(11) { top: 65%; left: 70%; animation-delay: 1.6s; }
.sparkle:nth-child(12) { top: 45%; left: 20%; animation-delay: 1.9s; }
.sparkle:nth-child(13) { top: 75%; left: 55%; animation-delay: 2.2s; }
.sparkle:nth-child(14) { top: 35%; left: 35%; animation-delay: 2.5s; }
.sparkle:nth-child(15) { top: 90%; left: 25%; animation-delay: 2.8s; }

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

/* Ambient Glow */
.ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(201, 165, 92, 0.15) 0%, transparent 60%);
    border-radius: 50%;
    animation: ambientPulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ambientPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

/* The Envelope Container */
.envelope {
    position: relative;
    width: 360px;
    height: 260px;
    perspective: 1200px;
    transform-style: preserve-3d;
    animation: envelopeFloat 3s ease-in-out infinite;
}

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

.envelope-preloader.opened .envelope {
    animation: none;
}

/* Envelope Shadow */
.envelope-shadow {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 30px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: shadowPulse 3s ease-in-out infinite;
}

@keyframes shadowPulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.3; }
    50% { transform: translateX(-50%) scale(0.9); opacity: 0.2; }
}

/* Envelope Back */
.envelope-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #9B1515 0%, #8B0000 30%, #6B0000 70%, #550000 100%);
    border-radius: 10px;
    box-shadow:
        0 25px 80px rgba(139, 0, 0, 0.4),
        0 15px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.envelope-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
}

.envelope-gold-border {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid rgba(201, 165, 92, 0.3);
    border-radius: 6px;
    pointer-events: none;
}

/* Envelope Flap */
.envelope-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 58%;
    transform-origin: top center;
    transform-style: preserve-3d;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.envelope-preloader.opened .envelope-flap {
    transform: rotateX(-180deg);
}

.flap-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #A01818 0%, #8B0000 50%, #7A0000 100%);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    border-radius: 10px 10px 0 0;
    box-shadow: inset 0 -20px 40px rgba(0, 0, 0, 0.2);
}

.flap-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 30%);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.flap-ornament {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 30px;
    background: linear-gradient(90deg, transparent, rgba(201, 165, 92, 0.4), transparent);
    clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
}

/* Envelope Front */
.envelope-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65%;
    background: linear-gradient(180deg, #750000 0%, #8B0000 40%, #7A0000 100%);
    border-radius: 0 0 10px 10px;
    z-index: 5;
    box-shadow:
        inset 0 3px 15px rgba(0, 0, 0, 0.3),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.envelope-front::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 165, 92, 0.3) 20%,
        rgba(255, 215, 0, 0.5) 50%,
        rgba(201, 165, 92, 0.3) 80%,
        transparent 100%);
}

.envelope-front-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: frontShine 4s ease-in-out infinite;
}

@keyframes frontShine {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}

.envelope-monogram {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 14px;
    color: rgba(201, 165, 92, 0.4);
    letter-spacing: 4px;
    font-weight: 600;
}

/* Invitation Card */
.invitation-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    height: 88%;
    background:
        linear-gradient(135deg, rgba(255, 253, 248, 0.9) 0%, rgba(255, 248, 231, 0.9) 100%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L30 60M0 30L60 30' stroke='%23C9A55C' stroke-width='0.3' opacity='0.1'/%3E%3C/svg%3E");
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 2;
    opacity: 1;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, z-index 0s linear 0.3s;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.15),
        inset 0 0 60px rgba(201, 165, 92, 0.05);
    overflow: hidden;
}

.card-border {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 2px solid var(--color-gold);
    border-radius: 4px;
    pointer-events: none;
}

.card-border::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(201, 165, 92, 0.3);
    border-radius: 2px;
}

.card-inner-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Card Corner Decorations */
.card-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    pointer-events: none;
}

.card-corner::before,
.card-corner::after {
    content: '';
    position: absolute;
    background: var(--color-gold);
}

.card-corner-tl { top: 12px; left: 12px; }
.card-corner-tl::before { top: 0; left: 0; width: 15px; height: 2px; }
.card-corner-tl::after { top: 0; left: 0; width: 2px; height: 15px; }

.card-corner-tr { top: 12px; right: 12px; }
.card-corner-tr::before { top: 0; right: 0; width: 15px; height: 2px; }
.card-corner-tr::after { top: 0; right: 0; width: 2px; height: 15px; }

.card-corner-bl { bottom: 12px; left: 12px; }
.card-corner-bl::before { bottom: 0; left: 0; width: 15px; height: 2px; }
.card-corner-bl::after { bottom: 0; left: 0; width: 2px; height: 15px; }

.card-corner-br { bottom: 12px; right: 12px; }
.card-corner-br::before { bottom: 0; right: 0; width: 15px; height: 2px; }
.card-corner-br::after { bottom: 0; right: 0; width: 2px; height: 15px; }

.envelope-preloader.opened .invitation-card {
    transform: translate(-50%, -160%);
    z-index: 50;
}

.envelope-preloader.fade-out .invitation-card {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.card-ornament {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    position: relative;
}

.card-ornament::before {
    content: '✦';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-gold);
    font-size: 8px;
}

.card-ornament.top {
    margin-bottom: 12px;
}

.card-ornament.bottom {
    margin-top: 12px;
}

.card-logo {
    margin-bottom: 10px;
    position: relative;
}

.card-logo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(201, 165, 92, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.card-logo img {
    width: 85px;
    height: auto;
    filter: drop-shadow(0 4px 15px rgba(201, 165, 92, 0.5));
    position: relative;
}

.card-names {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--color-maroon);
    letter-spacing: 3px;
    font-weight: 600;
    margin-bottom: 6px;
    position: relative;
}

.name-letter {
    display: inline-block;
    animation: letterShimmer 3s ease-in-out infinite;
}

.name-letter:nth-child(1) { animation-delay: 0s; }
.name-letter:nth-child(2) { animation-delay: 0.1s; }
.name-letter:nth-child(3) { animation-delay: 0.2s; }
.name-letter:nth-child(4) { animation-delay: 0.3s; }
.name-letter:nth-child(5) { animation-delay: 0.4s; }
.name-letter:nth-child(6) { animation-delay: 0.5s; }
.name-letter:nth-child(7) { animation-delay: 0.6s; }
.name-letter:nth-child(8) { animation-delay: 0.7s; }
.name-letter:nth-child(9) { animation-delay: 0.8s; }
.name-letter:nth-child(10) { animation-delay: 0.9s; }
.name-letter:nth-child(11) { animation-delay: 1s; }
.name-letter:nth-child(12) { animation-delay: 1.1s; }
.name-letter:nth-child(13) { animation-delay: 1.2s; }

.name-amp {
    display: inline-block;
    margin: 0 8px;
    color: var(--color-gold);
    animation: ampPulse 2s ease-in-out infinite;
}

@keyframes letterShimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

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

.card-date {
    font-family: var(--font-heading);
    font-size: 15px;
    color: var(--color-gold-dark);
    letter-spacing: 2px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-icon {
    color: var(--color-gold);
    font-size: 10px;
    animation: iconSpin 4s linear infinite;
}

@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.card-message {
    font-family: var(--font-heading);
    font-size: 12px;
    color: var(--color-text-light);
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
}

/* Thread Container */
.thread-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

.envelope-preloader.opened .thread-container {
    transform: translate(-50%, 150px);
    opacity: 0;
}

/* Ribbon Thread */
.thread-ribbon {
    width: 8px;
    height: 70px;
    background: linear-gradient(180deg, #C9A55C 0%, #A67C00 50%, #C9A55C 100%);
    border-radius: 4px;
    margin-bottom: -5px;
    position: relative;
    box-shadow: 0 2px 8px rgba(166, 124, 0, 0.3);
}

.thread-ribbon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0.3), transparent);
    border-radius: 4px 0 0 4px;
}

.ribbon-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 100%);
    animation: ribbonShine 2s linear infinite;
}

@keyframes ribbonShine {
    from { transform: translateY(-100%); }
    to { transform: translateY(100%); }
}

/* Enhanced Wax Seal */
.wax-seal {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wax-seal:hover {
    transform: scale(1.08) rotate(5deg);
}

.wax-seal:active {
    transform: scale(0.95);
}

/* Wax Drips */
.seal-drip {
    position: absolute;
    background: linear-gradient(180deg, #C9A55C 0%, #A67C00 100%);
    border-radius: 0 0 50% 50%;
    z-index: -1;
}

.seal-drip-1 {
    top: 55px;
    left: 10px;
    width: 12px;
    height: 20px;
    transform: rotate(-15deg);
}

.seal-drip-2 {
    top: 60px;
    right: 15px;
    width: 10px;
    height: 15px;
    transform: rotate(10deg);
}

.seal-drip-3 {
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 12px;
}

.seal-outer {
    width: 80px;
    height: 80px;
    background:
        radial-gradient(circle at 30% 30%, #E8C872 0%, transparent 50%),
        linear-gradient(145deg, #D4AF37 0%, #C9A55C 25%, #A67C00 50%, #8B6914 75%, #C9A55C 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 25px rgba(166, 124, 0, 0.5),
        0 4px 10px rgba(0, 0, 0, 0.2),
        inset 0 3px 6px rgba(255, 255, 255, 0.4),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: sealFloat 2s ease-in-out infinite;
}

@keyframes sealFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.seal-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    animation: sealRotate 15s linear infinite;
}

@keyframes sealRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.seal-inner {
    width: 56px;
    height: 56px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
        linear-gradient(145deg, #C9A55C 0%, #B8943F 50%, #A67C00 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.3),
        inset 0 -2px 4px rgba(255, 255, 255, 0.2);
    position: relative;
}

.seal-shine {
    position: absolute;
    top: 5px;
    left: 10px;
    width: 20px;
    height: 10px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    filter: blur(3px);
}

.seal-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.seal-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 60%);
    border-radius: 50%;
    animation: glowPulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.3); }
}

.seal-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.1) 5deg,
        transparent 10deg,
        rgba(255, 215, 0, 0.08) 15deg,
        transparent 20deg
    );
    border-radius: 50%;
    animation: raysRotate 10s linear infinite;
    pointer-events: none;
}

@keyframes raysRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Pull Instruction */
.pull-instruction {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: bounceHint 1.5s ease-in-out infinite;
}

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

.pull-text {
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--color-gold-dark);
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pull-hand {
    width: 28px;
    height: 28px;
    color: var(--color-gold);
    animation: handTap 1.5s ease-in-out infinite;
}

@keyframes handTap {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(5px) scale(0.95); opacity: 0.7; }
}

.pull-hand svg {
    width: 100%;
    height: 100%;
}

/* Mobile Responsive for Envelope */
@media (max-width: 480px) {
    .envelope {
        width: 300px;
        height: 220px;
    }

    .corner-ornament {
        width: 80px;
        height: 80px;
    }

    .corner-ornament.top-left { top: 10px; left: 10px; }
    .corner-ornament.top-right { top: 10px; right: 10px; }
    .corner-ornament.bottom-left { bottom: 10px; left: 10px; }
    .corner-ornament.bottom-right { bottom: 10px; right: 10px; }

    .petal {
        width: 15px;
        height: 18px;
    }

    .card-logo img {
        width: 65px;
    }

    .card-names {
        font-size: 20px;
        letter-spacing: 2px;
    }

    .card-date {
        font-size: 12px;
    }

    .card-message {
        font-size: 10px;
    }

    .seal-outer {
        width: 65px;
        height: 65px;
    }

    .seal-inner {
        width: 46px;
        height: 46px;
    }

    .seal-logo {
        width: 32px;
        height: 32px;
    }

    .thread-container {
        transform: translate(-50%, -85px);
    }

    .thread-ribbon {
        height: 55px;
    }

    .pull-text {
        font-size: 12px;
    }

    .ambient-glow {
        width: 350px;
        height: 350px;
    }
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-cream);
    color: var(--color-text);
    line-height: 1.8;
    overflow-x: hidden;
    font-weight: 400;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

/* ===== Floating Decorative Elements ===== */
.floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: visible;
}

/* Marigold Garlands */
.garland {
    position: fixed;
    width: 120px;
    height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 100'%3E%3Ccircle cx='25' cy='10' r='8' fill='%23FF9933'/%3E%3Ccircle cx='25' cy='30' r='8' fill='%23FFB347'/%3E%3Ccircle cx='25' cy='50' r='8' fill='%23FF9933'/%3E%3Ccircle cx='25' cy='70' r='8' fill='%23FFB347'/%3E%3Ccircle cx='25' cy='90' r='8' fill='%23FF9933'/%3E%3Cpath d='M25 2 Q30 10 25 18 Q20 10 25 2' fill='%23FF6B00'/%3E%3Cpath d='M25 22 Q30 30 25 38 Q20 30 25 22' fill='%23FF6B00'/%3E%3Cpath d='M25 42 Q30 50 25 58 Q20 50 25 42' fill='%23FF6B00'/%3E%3Cpath d='M25 62 Q30 70 25 78 Q20 70 25 62' fill='%23FF6B00'/%3E%3Cpath d='M25 82 Q30 90 25 98 Q20 90 25 82' fill='%23FF6B00'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-size: 50px auto;
    opacity: 0.9;
}

.garland-left {
    left: 0;
    animation: swayLeft 4s ease-in-out infinite;
}

.garland-right {
    right: 0;
    animation: swayRight 4s ease-in-out infinite;
}

@keyframes swayLeft {
    0%, 100% { transform: translateX(-20px) rotate(-2deg); }
    50% { transform: translateX(0) rotate(2deg); }
}

@keyframes swayRight {
    0%, 100% { transform: translateX(20px) rotate(2deg); }
    50% { transform: translateX(0) rotate(-2deg); }
}

/* Floating Lanterns */
.lantern {
    position: fixed;
    width: 80px;
    height: 130px;
    animation: floatLantern 6s ease-in-out infinite, glowLantern 2s ease-in-out infinite;
    filter: drop-shadow(0 10px 30px rgba(255, 107, 107, 0.5));
    z-index: 101;
}

.lantern-1 {
    top: 5%;
    left: 8%;
    animation-delay: 0s;
}

.lantern-2 {
    top: 15%;
    right: 5%;
    animation-delay: 2s;
    width: 65px;
    height: 105px;
}

.lantern-3 {
    top: 40%;
    left: 3%;
    animation-delay: 4s;
    width: 70px;
    height: 115px;
}

.lantern-4 {
    top: 60%;
    right: 8%;
    animation-delay: 3s;
    width: 55px;
    height: 90px;
}

.lantern-5 {
    top: 75%;
    left: 10%;
    animation-delay: 5s;
    width: 60px;
    height: 100px;
}

@keyframes floatLantern {
    0%, 100% {
        transform: translateY(0) rotate(-3deg);
    }
    25% {
        transform: translateY(-20px) rotate(4deg);
    }
    50% {
        transform: translateY(-8px) rotate(-2deg);
    }
    75% {
        transform: translateY(-25px) rotate(3deg);
    }
}

@keyframes glowLantern {
    0%, 100% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 107, 0.5));
    }
    50% {
        filter: drop-shadow(0 15px 40px rgba(255, 165, 0, 0.7));
    }
}

/* Floating Marigold Flowers */
.marigold {
    position: fixed;
    width: 45px;
    height: 45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='12' fill='%23FF9933'/%3E%3Ccircle cx='25' cy='25' r='6' fill='%23FFD700'/%3E%3Cellipse cx='25' cy='8' rx='5' ry='8' fill='%23FFB347'/%3E%3Cellipse cx='42' cy='25' rx='8' ry='5' fill='%23FFB347'/%3E%3Cellipse cx='25' cy='42' rx='5' ry='8' fill='%23FFB347'/%3E%3Cellipse cx='8' cy='25' rx='8' ry='5' fill='%23FFB347'/%3E%3Cellipse cx='37' cy='13' rx='5' ry='7' fill='%23FF9933' transform='rotate(45 37 13)'/%3E%3Cellipse cx='37' cy='37' rx='5' ry='7' fill='%23FF9933' transform='rotate(-45 37 37)'/%3E%3Cellipse cx='13' cy='37' rx='5' ry='7' fill='%23FF9933' transform='rotate(45 13 37)'/%3E%3Cellipse cx='13' cy='13' rx='5' ry='7' fill='%23FF9933' transform='rotate(-45 13 13)'/%3E%3C/svg%3E");
    background-size: contain;
    animation: floatMarigold 10s ease-in-out infinite;
    z-index: 101;
    filter: drop-shadow(0 5px 15px rgba(255, 153, 51, 0.4));
}

.marigold-1 { top: 8%; left: 20%; animation-delay: 0s; animation-duration: 9s; }
.marigold-2 { top: 25%; right: 15%; animation-delay: 1.5s; width: 35px; height: 35px; animation-duration: 11s; }
.marigold-3 { top: 45%; left: 12%; animation-delay: 3s; animation-duration: 8s; }
.marigold-4 { top: 65%; right: 8%; animation-delay: 4.5s; width: 40px; height: 40px; animation-duration: 12s; }
.marigold-5 { top: 30%; right: 3%; animation-delay: 2s; width: 30px; height: 30px; animation-duration: 10s; }
.marigold-6 { top: 80%; left: 18%; animation-delay: 5s; width: 38px; height: 38px; animation-duration: 9s; }
.marigold-7 { top: 50%; right: 20%; animation-delay: 6s; width: 32px; height: 32px; animation-duration: 10s; }
.marigold-8 { top: 90%; right: 12%; animation-delay: 7s; width: 36px; height: 36px; animation-duration: 11s; }

@keyframes floatMarigold {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-20px) rotate(90deg) scale(1.05);
    }
    50% {
        transform: translateY(-35px) rotate(180deg) scale(1.1);
    }
    75% {
        transform: translateY(-15px) rotate(270deg) scale(1.05);
    }
}

/* Floating Diyas */
.diya {
    position: fixed;
    width: 70px;
    height: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cellipse cx='30' cy='30' rx='25' ry='8' fill='%23CD853F'/%3E%3Cellipse cx='30' cy='25' rx='20' ry='6' fill='%23DEB887'/%3E%3Cellipse cx='30' cy='22' rx='15' ry='4' fill='%23FFD700'/%3E%3Cpath d='M30 5 Q25 15 30 20 Q35 15 30 5' fill='%23FF6B00'/%3E%3Cpath d='M30 8 Q27 14 30 18 Q33 14 30 8' fill='%23FFD700'/%3E%3Ccircle cx='30' cy='22' r='2' fill='%23FF4500'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 15px rgba(255, 165, 0, 0.7));
    z-index: 101;
    animation: floatDiya 8s ease-in-out infinite, flickerDiya 2s ease-in-out infinite;
}

.diya-1 {
    top: 55%;
    right: 5%;
    animation-delay: 0s;
}

.diya-2 {
    top: 70%;
    left: 5%;
    animation-delay: 1s;
    width: 60px;
    height: 42px;
}

.diya-3 {
    top: 35%;
    right: 10%;
    animation-delay: 2s;
    width: 55px;
    height: 38px;
}

@keyframes floatDiya {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-15px) translateX(10px);
    }
    50% {
        transform: translateY(-25px) translateX(-5px);
    }
    75% {
        transform: translateY(-10px) translateX(5px);
    }
}

@keyframes flickerDiya {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(255, 165, 0, 0.7));
    }
    25% {
        filter: drop-shadow(0 0 25px rgba(255, 100, 0, 0.9));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(255, 200, 0, 0.8));
    }
    75% {
        filter: drop-shadow(0 0 30px rgba(255, 150, 0, 1));
    }
}

/* Rose Petals */
.petal {
    position: fixed;
    width: 22px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 25'%3E%3Cpath d='M10 0 Q20 10 10 25 Q0 10 10 0' fill='%23E91E63' opacity='0.9'/%3E%3C/svg%3E");
    background-size: contain;
    animation: fallPetal 12s linear infinite;
    z-index: 102;
    filter: drop-shadow(0 3px 6px rgba(233, 30, 99, 0.3));
}

.petal-1 { left: 5%; animation-delay: 0s; animation-duration: 10s; }
.petal-2 { left: 15%; animation-delay: 2.5s; animation-duration: 14s; width: 18px; height: 23px; }
.petal-3 { left: 28%; animation-delay: 5s; animation-duration: 11s; }
.petal-4 { left: 42%; animation-delay: 7.5s; animation-duration: 13s; width: 20px; height: 25px; }
.petal-5 { left: 55%; animation-delay: 1s; animation-duration: 12s; width: 16px; height: 20px; }
.petal-6 { left: 68%; animation-delay: 3.5s; animation-duration: 11s; width: 19px; height: 24px; }
.petal-7 { left: 80%; animation-delay: 6s; animation-duration: 13s; width: 17px; height: 22px; }
.petal-8 { left: 92%; animation-delay: 8.5s; animation-duration: 10s; }

@keyframes fallPetal {
    0% {
        top: -30px;
        transform: rotate(0deg) translateX(0);
        opacity: 0;
    }
    5% {
        opacity: 0.9;
    }
    25% {
        transform: rotate(180deg) translateX(30px);
    }
    50% {
        transform: rotate(360deg) translateX(-20px);
    }
    75% {
        transform: rotate(540deg) translateX(25px);
    }
    95% {
        opacity: 0.9;
    }
    100% {
        top: 105vh;
        transform: rotate(720deg) translateX(-10px);
        opacity: 0;
    }
}

/* Sparkles */
.sparkle {
    position: fixed;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #FFD700 0%, transparent 70%);
    border-radius: 50%;
    z-index: 103;
    animation: twinkle 3s ease-in-out infinite, floatSparkle 15s ease-in-out infinite;
    pointer-events: none;
}

.sparkle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
    transform: translate(-50%, -50%);
}

.sparkle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, transparent, #FFD700, transparent);
    transform: translate(-50%, -50%);
}

.sparkle-1 { top: 12%; left: 35%; animation-delay: 0s; }
.sparkle-2 { top: 28%; right: 25%; animation-delay: 0.5s; }
.sparkle-3 { top: 48%; left: 25%; animation-delay: 1s; }
.sparkle-4 { top: 62%; right: 30%; animation-delay: 1.5s; }
.sparkle-5 { top: 78%; left: 40%; animation-delay: 2s; }
.sparkle-6 { top: 88%; right: 35%; animation-delay: 2.5s; }

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes floatSparkle {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-20px) translateX(15px);
    }
    50% {
        transform: translateY(-10px) translateX(-10px);
    }
    75% {
        transform: translateY(-25px) translateX(20px);
    }
}

/* ===== Hero Section ===== */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(180deg, #FFF8F0 0%, var(--color-cream) 50%, #FFF5EB 100%);
    overflow: hidden;
    padding: 40px 20px;
}

.hero-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mandala {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='90' fill='none' stroke='%23C9A55C' stroke-width='1'/%3E%3Ccircle cx='100' cy='100' r='70' fill='none' stroke='%23C9A55C' stroke-width='1'/%3E%3Ccircle cx='100' cy='100' r='50' fill='none' stroke='%23C9A55C' stroke-width='1'/%3E%3Ccircle cx='100' cy='100' r='30' fill='none' stroke='%23C9A55C' stroke-width='1'/%3E%3Cpath d='M100 10 L100 190 M10 100 L190 100 M29 29 L171 171 M171 29 L29 171' stroke='%23C9A55C' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: cover;
    animation: rotateMandala 60s linear infinite;
}

.mandala-1 {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -200px;
}

.mandala-2 {
    width: 500px;
    height: 500px;
    bottom: -150px;
    left: -150px;
    animation-direction: reverse;
}

@keyframes rotateMandala {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hero-content {
    text-align: center;
    z-index: 10;
    animation: fadeInUp 1s ease-out;
}

/* Blessing */
.blessing {
    margin-bottom: 40px;
}

.om-symbol {
    font-size: 56px;
    color: var(--color-gold);
    margin-bottom: 10px;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 20px rgba(201, 165, 92, 0.5); }
    50% { text-shadow: 0 0 40px rgba(201, 165, 92, 0.8); }
}

.sanskrit-text {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--color-gold);
    letter-spacing: 3px;
    margin-bottom: 8px;
}

.blessing-english {
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--color-maroon);
    font-style: italic;
    font-weight: 500;
}

/* Ornamental Border */
.ornamental-border {
    width: 300px;
    height: 40px;
    margin: 15px auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40'%3E%3Cpath d='M0 20 Q75 5 150 20 Q225 35 300 20' stroke='%23C9A55C' fill='none' stroke-width='2'/%3E%3Ccircle cx='150' cy='20' r='8' fill='%23C9A55C'/%3E%3Ccircle cx='75' cy='12' r='4' fill='%23C9A55C'/%3E%3Ccircle cx='225' cy='28' r='4' fill='%23C9A55C'/%3E%3Cpath d='M140 20 L145 15 L150 20 L155 15 L160 20' stroke='%23C9A55C' fill='none' stroke-width='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.ornamental-border.top {
    margin-top: -15px;
    margin-bottom: 0;
}

.ornamental-border.bottom {
    transform: rotate(180deg);
    margin-top: 0;
    margin-bottom: 15px;
}

/* Couple Names */
.couple-names-container {
    margin: 8px 0;
}

.groom-name, .bride-name {
    font-family: var(--font-display);
    font-size: clamp(48px, 10vw, 90px);
    color: var(--color-text);
    font-weight: 500;
    letter-spacing: 4px;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    text-transform: capitalize;
}

.weds-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 15px 0;
}

.ornament-line {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.weds-text {
    font-family: var(--font-decorative);
    font-size: 32px;
    color: var(--color-gold);
    letter-spacing: 8px;
    text-transform: uppercase;
}

/* Wedding Info */
.wedding-info {
    margin: 30px 0;
}

.save-the-date {
    font-family: var(--font-unicase);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: var(--color-text-light);
    margin-bottom: 10px;
    font-weight: 500;
}

.wedding-date-main {
    font-family: var(--font-heading);
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 600;
    color: var(--color-maroon);
    margin-bottom: 8px;
}

.wedding-date-main sup {
    font-size: 0.5em;
}

.wedding-venue {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-light);
    letter-spacing: 2px;
}

/* Countdown */
.countdown-container {
    margin-top: 40px;
}

.countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.countdown-box {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-gold);
}

.countdown-value {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-white);
}

.countdown-label {
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-light);
    margin-top: 10px;
}

.countdown-separator {
    font-family: var(--font-heading);
    font-size: 36px;
    color: var(--color-gold);
    margin-bottom: 30px;
}

/* Scroll Indicator */
.scroll-indicator {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
    animation: floatUpDown 2s ease-in-out infinite;
    opacity: 0.7;
    font-size: 10px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.scroll-indicator.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.mouse {
    width: 26px;
    height: 40px;
    border: 2px solid var(--color-gold);
    border-radius: 13px;
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background: var(--color-gold);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 2s ease-in-out infinite;
}

@keyframes scrollWheel {
    0%, 100% { opacity: 1; top: 8px; }
    50% { opacity: 0.5; top: 20px; }
}

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

.scroll-indicator span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted);
}

/* Vintage Car */
.vintage-car {
    position: absolute;
    bottom: 80px;
    right: 5%;
    width: 200px;
    animation: driveIn 1.5s ease-out forwards, carBounce 3s ease-in-out 1.5s infinite;
    opacity: 0;
    transform: translateX(100px);
}

@keyframes driveIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes carBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ===== Navigation ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 0;
    transition: var(--transition-smooth);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-soft);
    padding: 12px 0;
}

.nav-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.nav-logo-img {
    height: 50px;
    width: auto;
    transition: var(--transition-smooth);
}

.navbar.scrolled .nav-logo-img {
    height: 40px;
}

.nav-logo:hover .nav-logo-img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgba(201, 165, 92, 0.5));
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-menu a {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text);
    position: relative;
    padding: 5px 0;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-gold);
    transition: var(--transition-smooth);
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-rsvp {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    color: var(--color-white) !important;
    padding: 10px 25px !important;
    border-radius: 25px;
}

.nav-rsvp::after {
    display: none !important;
}

.nav-rsvp:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.nav-toggle span {
    width: 25px;
    height: 2px;
    background: var(--color-text);
    transition: var(--transition-smooth);
}

/* ===== Section Styles ===== */
section {
    padding: var(--section-padding) 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header.light {
    color: var(--color-white);
}

.section-header.light .section-title {
    color: var(--color-white);
}

.section-header.light .section-title::after {
    background: var(--color-gold-light);
}

.section-header.light .section-subtitle-top,
.section-header.light .section-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

.section-subtitle-top {
    font-family: var(--font-accent);
    font-size: 18px;
    color: var(--color-gold);
    display: block;
    margin-bottom: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    position: relative;
}

.section-subtitle-top::before,
.section-subtitle-top::after {
    content: '✦';
    font-size: 10px;
    margin: 0 12px;
    opacity: 0.6;
    vertical-align: middle;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 600;
    color: var(--color-text);
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    border-radius: 2px;
}

.section-title::before {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--color-gold);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(201, 165, 92, 0.5);
}

.section-subtitle {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-light);
    margin-top: 25px;
    font-style: italic;
}

/* Section Decoration */
.section-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.decoration-line {
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.decoration-mandala {
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='none' stroke='%23C9A55C' stroke-width='1'/%3E%3Ccircle cx='20' cy='20' r='12' fill='none' stroke='%23C9A55C' stroke-width='1'/%3E%3Ccircle cx='20' cy='20' r='6' fill='%23C9A55C'/%3E%3Cpath d='M20 2 L20 38 M2 20 L38 20' stroke='%23C9A55C' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: contain;
}

/* ===== Events Section ===== */
.events {
    background: var(--color-white);
}

.events-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* ===== Events Journey - Two Paths Merging ===== */
.events-journey {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.journey-path {
    flex: 1;
    max-width: 350px;
    min-width: 280px;
    background: linear-gradient(145deg, var(--color-cream) 0%, #fff8f0 100%);
    border-radius: 20px;
    padding: 30px;
    border: 2px solid rgba(201, 165, 92, 0.3);
    position: relative;
}

.journey-path.bride-path {
    border-color: rgba(233, 30, 99, 0.3);
}

.journey-path.groom-path {
    border-color: rgba(33, 150, 243, 0.3);
}

.journey-header {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--color-gold);
}

.journey-icon {
    font-size: 50px;
    margin-bottom: 10px;
}

.journey-header h3 {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--color-maroon);
    margin-bottom: 5px;
}

.journey-location {
    font-size: 14px;
    color: var(--color-text-light);
}

.journey-event {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    margin-bottom: 12px;
    transition: var(--transition-smooth);
}

.journey-event:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.journey-event:last-child {
    margin-bottom: 0;
}

.event-date-pill {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    color: white;
    padding: 10px 15px;
    border-radius: 10px;
    text-align: center;
    min-width: 60px;
}

.event-date-pill .date {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.event-date-pill .month {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 3px;
}

.event-info h4 {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--color-maroon);
    margin-bottom: 3px;
}

.event-info p {
    font-size: 13px;
    color: var(--color-text-light);
}

/* Journey Merge */
/* Dress Code Section */
.dress-code-section {
    margin: 50px 0 0;
    padding: 35px 20px;
    background: linear-gradient(135deg, rgba(255, 248, 235, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
    border-radius: 24px;
    border: 2px solid rgba(201, 165, 92, 0.25);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

.dress-code-header {
    text-align: center;
    margin-bottom: 30px;
}

.dress-code-header .dress-code-icon {
    font-size: 36px;
    display: block;
    margin-bottom: 10px;
}

.dress-code-header h3 {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--color-maroon);
    margin: 0 0 8px;
}

.dress-code-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-light);
    margin: 0;
}

.dress-code-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.dress-code-card {
    text-align: center;
    padding: 22px 18px;
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dress-code-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.dress-code-card.haldi-dress {
    background: linear-gradient(135deg, rgba(255, 243, 176, 0.4) 0%, rgba(255, 235, 59, 0.2) 100%);
    border: 1px solid rgba(255, 193, 7, 0.35);
}

.dress-code-card.mehendi-dress {
    background: linear-gradient(135deg, rgba(200, 230, 201, 0.4) 0%, rgba(76, 175, 80, 0.2) 100%);
    border: 1px solid rgba(76, 175, 80, 0.35);
}

.dress-code-card.mayra-dress {
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.1) 0%, rgba(239, 83, 80, 0.1) 100%);
    border: 1px solid rgba(233, 30, 140, 0.3);
}

.dress-code-card.sangeet-dress {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(103, 58, 183, 0.1) 100%);
    border: 1px solid rgba(156, 39, 176, 0.3);
}

.dress-code-card.pool-dress {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.15) 0%, rgba(3, 169, 244, 0.1) 100%);
    border: 1px solid rgba(3, 169, 244, 0.3);
}

.dress-code-label {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-light);
    margin-bottom: 5px;
}

.dress-code-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 14px;
}

.haldi-dress .dress-code-title {
    color: #F9A825;
}

.mehendi-dress .dress-code-title {
    color: #388E3C;
}

.mayra-dress .dress-code-title {
    color: #AD1457;
}

.sangeet-dress .dress-code-title {
    color: #7B1FA2;
}

.pool-dress .dress-code-title {
    color: #0288D1;
}

.color-palette {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.color-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.color-swatch.large {
    width: 50px;
    height: 50px;
}

.color-swatch::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 8px;
    width: 12px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: rotate(-30deg);
}

.color-swatch:hover {
    transform: scale(1.15) translateY(-3px);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

/* Mayra specific styles */
.mayra-details {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
}

.mayra-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 80px;
}

.mayra-group .group-label {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-light);
    font-weight: 500;
    height: 32px;
    display: flex;
    align-items: flex-end;
    text-align: center;
    line-height: 1.2;
}

.mayra-divider {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--color-gold), transparent);
    align-self: center;
}

/* Sangeet specific styles */
.sangeet-theme {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.theme-tag {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: #7B1FA2;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(103, 58, 183, 0.15) 100%);
    border-radius: 20px;
    border: 1px solid rgba(156, 39, 176, 0.3);
}

.theme-divider {
    color: var(--color-gold);
    font-weight: 300;
    font-size: 18px;
}

.sangeet-note {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-light);
    font-style: italic;
    margin: 0;
}

@media (min-width: 600px) {
    .dress-code-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .dress-code-section {
        padding: 40px 50px;
    }

    .dress-code-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }

    .dress-code-card {
        padding: 25px 20px;
    }

    .color-swatch {
        width: 38px;
        height: 38px;
    }

    .color-swatch.large {
        width: 55px;
        height: 55px;
    }
}

@media (max-width: 480px) {
    .dress-code-section {
        padding: 25px 15px;
        margin: 30px 0 0;
    }

    .dress-code-header h3 {
        font-size: 22px;
    }

    .dress-code-title {
        font-size: 17px;
    }

    .color-swatch {
        width: 30px;
        height: 30px;
    }

    .color-swatch.large {
        width: 45px;
        height: 45px;
    }

    .color-palette {
        gap: 6px;
    }

    .theme-tag {
        font-size: 12px;
        padding: 5px 10px;
    }

    .mayra-details {
        gap: 15px;
    }

    .mayra-divider {
        height: 50px;
    }
}

.journey-merge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.merge-heart {
    font-size: 40px;
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.merge-line {
    width: 2px;
    height: 50px;
    background: linear-gradient(to bottom, var(--color-gold), transparent);
}

.merge-line.right {
    background: linear-gradient(to top, var(--color-gold), transparent);
}

/* Together Section */
.events-together {
    background: linear-gradient(145deg, #FFFBF5 0%, #FFF8EE 100%);
    border-radius: 30px;
    padding: 40px;
    border: 2px solid var(--color-gold);
    position: relative;
    overflow: hidden;
}

.events-together::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--color-gold), var(--color-marigold), var(--color-gold));
}

.together-header {
    text-align: center;
    margin-bottom: 40px;
}

.together-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    color: white;
    padding: 8px 25px;
    border-radius: 25px;
    font-size: 14px;
    margin-bottom: 15px;
}

.together-header h3 {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--color-maroon);
    margin-bottom: 10px;
}

.venue-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-gold-dark);
    font-size: 14px;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.venue-link:hover {
    color: var(--color-maroon);
}

/* Timeline Merged */
.events-timeline-merged {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.timeline-day {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.day-marker {
    min-width: 100px;
    text-align: center;
    padding: 15px;
    background: var(--color-maroon);
    border-radius: 15px;
    color: white;
}

.day-marker .day-date {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
}

.day-marker .day-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
    opacity: 0.9;
}

.timeline-day.main-day .day-marker {
    background: linear-gradient(135deg, var(--color-maroon) 0%, #C62828 100%);
    box-shadow: 0 5px 20px rgba(139, 0, 0, 0.3);
}

.day-events {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.event-card-mini {
    background: white;
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(201, 165, 92, 0.2);
    position: relative;
    transition: var(--transition-smooth);
}

.event-card-mini:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--color-gold);
}

.event-card-mini.featured {
    border: 2px solid var(--color-maroon);
    background: linear-gradient(145deg, #FFF5F5 0%, white 100%);
}

.event-card-mini .event-time {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--color-gold-dark);
    font-weight: 600;
    margin-bottom: 8px;
}

.event-card-mini .event-details h4 {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--color-maroon);
    margin-bottom: 3px;
}

.event-card-mini .event-details p {
    font-size: 12px;
    color: var(--color-text-light);
}

.event-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.event-tag.groom-tag {
    background: rgba(33, 150, 243, 0.1);
    color: #1976D2;
}

.event-tag.main-tag {
    background: var(--color-maroon);
    color: white;
}

/* Mobile Responsive for Events Journey */
@media (max-width: 768px) {
    .events-journey {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
        margin-bottom: 40px;
    }

    .journey-path {
        min-width: unset;
        padding: 20px 15px;
        border-radius: 15px;
    }

    .journey-path.bride-path {
        grid-column: 1;
        grid-row: 1;
    }

    .journey-path.groom-path {
        grid-column: 2;
        grid-row: 1;
    }

    .journey-merge {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-direction: row;
        padding: 15px 0;
        justify-content: center;
    }

    .merge-line {
        width: 40px;
        height: 2px;
        background: linear-gradient(to right, transparent, var(--color-gold));
    }

    .merge-line.right {
        background: linear-gradient(to left, transparent, var(--color-gold));
    }

    .merge-heart {
        font-size: 30px;
    }

    .journey-header {
        margin-bottom: 15px;
        padding-bottom: 12px;
    }

    .journey-icon {
        font-size: 35px;
        margin-bottom: 5px;
    }

    .journey-header h3 {
        font-size: 16px;
    }

    .journey-location {
        font-size: 11px;
    }

    .journey-event {
        flex-direction: column;
        text-align: center;
        padding: 12px 10px;
        gap: 8px;
    }

    .event-date-pill {
        padding: 8px 12px;
        min-width: unset;
    }

    .event-date-pill .date {
        font-size: 16px;
    }

    .event-date-pill .month {
        font-size: 9px;
    }

    .event-info h4 {
        font-size: 14px;
    }

    .event-info p {
        font-size: 11px;
    }

    /* Together Section Mobile */
    .events-together {
        padding: 25px 15px;
        border-radius: 20px;
    }

    .together-header {
        margin-bottom: 25px;
    }

    .together-badge {
        padding: 6px 18px;
        font-size: 12px;
    }

    .together-header h3 {
        font-size: 20px;
    }

    .venue-link {
        font-size: 12px;
    }

    /* Timeline Mobile */
    .events-timeline-merged {
        gap: 25px;
    }

    .timeline-day {
        flex-direction: column;
        gap: 12px;
    }

    .day-marker {
        width: 100%;
        padding: 12px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .day-marker .day-date {
        font-size: 16px;
    }

    .day-marker .day-label {
        margin-top: 0;
        font-size: 9px;
    }

    .day-events {
        flex: none;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .event-card-mini {
        padding: 15px 12px;
        border-radius: 12px;
    }

    .event-card-mini .event-time {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .event-card-mini .event-details h4 {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .event-card-mini .event-details p {
        font-size: 10px;
        line-height: 1.3;
    }

    .event-tag {
        font-size: 8px;
        padding: 2px 6px;
        top: 8px;
        right: 8px;
    }
}

/* Extra small screens - keep 2-column layout for consistency */
@media (max-width: 380px) {
    .events-journey {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .journey-path {
        padding: 15px 10px;
    }

    .journey-header h3 {
        font-size: 14px;
    }

    .journey-icon {
        font-size: 28px;
    }

    .journey-location {
        font-size: 10px;
    }

    .event-date-pill .date {
        font-size: 14px;
    }

    .event-date-pill .month {
        font-size: 8px;
    }

    .event-info h4 {
        font-size: 12px;
    }

    .event-info p {
        font-size: 9px;
    }

    .day-events {
        flex: none;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .event-card-mini {
        padding: 12px 10px;
    }

    .event-card-mini .event-time {
        font-size: 14px;
    }

    .event-card-mini .event-details h4 {
        font-size: 12px;
    }

    .event-card-mini .event-details p {
        font-size: 9px;
    }
}

.event-card {
    background: linear-gradient(145deg, var(--color-cream) 0%, #fff8f0 100%);
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: var(--transition-bounce);
    border: 2px solid rgba(201, 165, 92, 0.2);
}

.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--color-gold), var(--color-marigold), var(--color-gold));
    transform: scaleX(0);
    transition: var(--transition-smooth);
}

.event-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 165, 92, 0.1), transparent);
    transition: 0.6s;
}

.event-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 50px rgba(201, 165, 92, 0.25);
    border-color: var(--color-gold);
}

.event-card:hover::before {
    transform: scaleX(1);
}

.event-card:hover::after {
    left: 100%;
}

.event-card.featured {
    background: linear-gradient(135deg, #FFF5F5 0%, #FFFAFA 100%);
    border: 2px solid var(--color-maroon);
}

.event-card.featured::before {
    transform: scaleX(1);
    background: linear-gradient(90deg, var(--color-maroon), var(--color-red), var(--color-maroon));
}

.featured-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--color-maroon);
    color: var(--color-white);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.event-illustration {
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
}

.event-icon-svg {
    width: 100%;
    height: 100%;
    transition: var(--transition-smooth);
}

.event-card:hover .event-icon-svg {
    transform: scale(1.1) rotate(5deg);
}

.event-name {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 20px;
}

.event-date-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-gold);
    color: var(--color-white);
    padding: 12px 25px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.event-day {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.event-month {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.event-details {
    margin-bottom: 25px;
}

.event-details p {
    font-size: 14px;
    color: var(--color-text-light);
    margin-bottom: 5px;
}

.event-time {
    font-weight: 600;
    color: var(--color-text) !important;
}

.event-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: transparent;
    border: 2px solid var(--color-teal);
    color: var(--color-teal);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition-smooth);
}

.event-map-btn svg {
    width: 18px;
    height: 18px;
    transition: var(--transition-smooth);
}

.event-map-btn:hover {
    background: var(--color-teal);
    color: var(--color-white);
}

.event-map-btn:hover svg {
    transform: translateX(5px);
}

/* ===== Couple Section ===== */
.couple {
    background: var(--color-cream);
    position: relative;
    overflow: hidden;
}

.couple-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 Q40 30 50 50 Q60 30 50 10' fill='none' stroke='%23C9A55C' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
    background-size: 100px 100px;
    opacity: 0.5;
}

.couple-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    position: relative;
}

.couple-card {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    text-align: center;
}

.couple-photo-frame {
    position: relative;
    width: 280px;
    height: 350px;
    margin: 0 auto 30px;
}

.frame-decoration {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 3px solid var(--color-gold);
    border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
    z-index: 1;
}

.frame-decoration::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M30 5 Q20 15 10 10 Q0 5 5 15 Q10 25 20 20 Q30 30 40 20 Q50 25 55 15 Q60 5 50 10 Q40 15 30 5' fill='%23C9A55C'/%3E%3C/svg%3E");
    background-size: contain;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #E8DDD4 0%, #D4C9C0 100%);
    border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-muted);
    position: relative;
    overflow: hidden;
}

.couple-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
}

.photo-placeholder.bride {
    background: linear-gradient(135deg, #F5E6E6 0%, #E8D4D4 100%);
}

.couple-member-name {
    font-family: var(--font-display);
    font-size: 38px;
    color: var(--color-text);
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 2px;
}

.couple-parents {
    font-size: 14px;
    color: var(--color-gold);
    margin-bottom: 15px;
}

.couple-description {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.8;
    margin-bottom: 20px;
}

.couple-social {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.couple-social a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    color: var(--color-gold);
    transition: var(--transition-smooth);
}

.couple-social a svg {
    width: 20px;
    height: 20px;
}

.couple-social a:hover {
    background: var(--color-gold);
    color: var(--color-white);
    transform: translateY(-3px);
}

.couple-heart-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.heart-animation {
    width: 80px;
    height: 80px;
    animation: heartBeat 1.5s ease-in-out infinite;
}

.heart-animation svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 5px 15px rgba(233, 30, 99, 0.4));
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
}

.love-story-section {
    max-width: 800px;
    margin: 80px auto 0;
    text-align: center;
    padding: 50px 40px;
    background: linear-gradient(145deg, var(--color-white) 0%, #fdfaf5 100%);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(201, 165, 92, 0.15);
    position: relative;
    border: 2px solid rgba(201, 165, 92, 0.2);
}

.story-ornament {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cpath d='M40 5 Q30 15 20 10 Q10 5 15 15 Q20 25 30 20 Q40 30 50 20 Q60 25 65 15 Q70 5 60 10 Q50 15 40 5' fill='%23C9A55C'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.love-story-section h3 {
    font-family: var(--font-display);
    font-size: 38px;
    color: var(--color-text);
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 2px;
}

.love-story-section p {
    font-size: 16px;
    color: var(--color-text-light);
    line-height: 1.9;
}

/* Horizontal Love Timeline */
.love-timeline-horizontal {
    margin-top: 30px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.timeline-track {
    display: flex;
    position: relative;
    min-width: max-content;
    padding: 0 20px;
}

.timeline-track::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-gold-light) 0%,
        var(--color-gold) 50%,
        var(--color-maroon) 100%);
}

.love-timeline-horizontal .timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 120px;
    padding: 0 15px;
    position: relative;
}

.love-timeline-horizontal .timeline-dot {
    width: 14px;
    height: 14px;
    background: var(--color-gold);
    border: 3px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(201, 165, 92, 0.4);
    z-index: 1;
    flex-shrink: 0;
}

.love-timeline-horizontal .timeline-dot.final-dot {
    width: 18px;
    height: 18px;
    background: var(--color-maroon);
}

.love-timeline-horizontal .timeline-year {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-gold);
    margin-top: 10px;
    margin-bottom: 6px;
}

.love-timeline-horizontal .timeline-item p {
    font-size: 11px;
    color: var(--color-text-light);
    line-height: 1.4;
    margin: 0;
    max-width: 110px;
}

/* Timeline Mobile */
@media (max-width: 768px) {
    .love-story-section {
        padding: 40px 20px;
        margin-top: 50px;
    }

    .love-story-section h3 {
        font-size: 28px;
    }

    .love-timeline-horizontal {
        margin-top: 20px;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 10px;
    }

    .love-timeline-horizontal .timeline-item {
        min-width: 100px;
        padding: 0 10px;
    }

    .love-timeline-horizontal .timeline-item p {
        font-size: 10px;
        max-width: 90px;
    }
}

/* ===== Gallery Section ===== */
.gallery {
    background: var(--color-white);
}

.gallery-masonry {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
}

.gallery-item {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item.large {
    grid-column: span 2;
    aspect-ratio: 2/1;
}

.gallery-item.tall {
    grid-row: span 2;
    aspect-ratio: 1/2;
}

.gallery-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #F0E6DC 0%, #E0D6CC 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--color-text-muted);
    transition: var(--transition-smooth);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(201, 165, 92, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-smooth);
}

.gallery-overlay span {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 2px;
    transform: translateY(20px);
    transition: var(--transition-smooth);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover .gallery-overlay span {
    transform: translateY(0);
}

.gallery-item:hover .gallery-placeholder {
    transform: scale(1.1);
}

/* ===== Gallery Coming Soon & Video Placeholder ===== */
.gallery-coming-soon {
    text-align: center;
    margin-top: 40px;
}

.coming-soon-text {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--color-text-light);
    font-style: italic;
    letter-spacing: 1px;
    position: relative;
    display: inline-block;
}

.coming-soon-text::before,
.coming-soon-text::after {
    content: '✦';
    color: var(--color-gold);
    margin: 0 15px;
    font-size: 12px;
}

.video-placeholder-section {
    margin-top: 50px;
}

.video-placeholder {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(201, 165, 92, 0.3);
}

.video-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 30%, rgba(201, 165, 92, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(139, 0, 0, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.video-play-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(201, 165, 92, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 2;
}

.video-placeholder:hover .video-play-icon {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(201, 165, 92, 0.5);
}

.video-play-icon svg {
    width: 32px;
    height: 32px;
    color: white;
    margin-left: 4px;
}

.video-overlay-text {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
}

.video-title {
    display: block;
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--color-gold);
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.video-status {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 3px;
}

@media (max-width: 768px) {
    .video-placeholder {
        border-radius: 12px;
    }

    .video-play-icon {
        width: 60px;
        height: 60px;
    }

    .video-play-icon svg {
        width: 24px;
        height: 24px;
    }

    .video-title {
        font-size: 18px;
    }

    .video-status {
        font-size: 12px;
    }

    .coming-soon-text {
        font-size: 16px;
    }
}

/* ===== Gallery Instagram CTA ===== */
.gallery-instagram-cta {
    margin-top: 60px;
    text-align: center;
    padding: 50px 30px;
    background: linear-gradient(135deg, rgba(201, 165, 92, 0.08) 0%, rgba(139, 0, 0, 0.05) 100%);
    border-radius: 20px;
    border: 1px solid rgba(201, 165, 92, 0.2);
}

.instagram-intro {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-light);
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.instagram-title {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--color-maroon);
    margin-bottom: 8px;
    font-weight: 600;
}

.instagram-subtitle {
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--color-text-light);
    margin-bottom: 25px;
}

.instagram-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 30px;
    background: linear-gradient(135deg, #833AB4 0%, #E1306C 50%, #F77737 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 25px rgba(225, 48, 108, 0.3);
}

.instagram-follow-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 35px rgba(225, 48, 108, 0.4);
}

.instagram-follow-btn svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .gallery-instagram-cta {
        margin-top: 40px;
        padding: 40px 20px;
    }

    .instagram-title {
        font-size: 26px;
    }

    .instagram-follow-btn {
        padding: 12px 24px;
        font-size: 14px;
    }

    .instagram-follow-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* ===== Gallery Lightbox ===== */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.lightbox.active .lightbox-image {
    transform: scale(1);
    opacity: 1;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--color-gold);
    transform: rotate(90deg);
}

.lightbox-close svg {
    width: 24px;
    height: 24px;
    stroke: white;
    stroke-width: 2;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.lightbox-nav:hover {
    background: rgba(201, 165, 92, 0.3);
    border-color: var(--color-gold);
}

.lightbox-nav svg {
    width: 24px;
    height: 24px;
    stroke: white;
    stroke-width: 2;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 2px;
}

@media (max-width: 768px) {
    .lightbox-nav {
        width: 40px;
        height: 40px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
}

/* ===== Info Section ===== */
.info-section {
    background: var(--color-cream);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.info-grid.info-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (min-width: 768px) {
    .info-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .info-grid.info-grid-3 {
        gap: 25px;
    }
}

@media (min-width: 1024px) {
    .info-grid {
        gap: 30px;
    }

    .info-grid.info-grid-3 {
        gap: 30px;
    }
}

.info-card {
    background: linear-gradient(145deg, var(--color-white) 0%, #fdfaf5 100%);
    padding: 20px 15px;
    border-radius: 16px;
    text-align: center;
    transition: var(--transition-smooth);
    border: 2px solid rgba(201, 165, 92, 0.15);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .info-card {
        padding: 40px 30px;
        border-radius: 20px;
    }
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    opacity: 0;
    transition: var(--transition-smooth);
}

.info-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(201, 165, 92, 0.2);
    border-color: var(--color-gold);
}

.info-card:hover::before {
    opacity: 1;
}

.info-icon-wrapper {
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .info-icon-wrapper {
        margin-bottom: 20px;
    }
}

.info-icon {
    width: 45px;
    height: 45px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
    border-radius: 12px;
    color: var(--color-white);
    transition: var(--transition-smooth);
}

@media (min-width: 768px) {
    .info-icon {
        width: 60px;
        height: 60px;
        border-radius: 16px;
    }
}

.info-card:hover .info-icon {
    transform: rotateY(180deg);
}

.info-icon svg {
    width: 22px;
    height: 22px;
}

@media (min-width: 768px) {
    .info-icon svg {
        width: 28px;
        height: 28px;
    }
}

.info-card h3 {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
    word-break: break-word;
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .info-card h3 {
        font-size: 22px;
        margin-bottom: 15px;
    }
}

@media (min-width: 400px) and (max-width: 767px) {
    .info-card h3 {
        font-size: 13px;
    }
}

.info-card p {
    font-size: 12px;
    color: var(--color-text-light);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .info-card p {
        font-size: 14px;
        line-height: 1.7;
    }
}

/* ===== RSVP Section - Royal Theme ===== */
.rsvp {
    background: linear-gradient(135deg, var(--color-maroon) 0%, #6B0000 50%, #4a0000 100%);
    position: relative;
    overflow: hidden;
    padding: 80px 0;
}

.rsvp-decoration {
    position: absolute;
    width: 500px;
    height: 500px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='90' fill='none' stroke='%23FFD700' stroke-width='0.5' opacity='0.3'/%3E%3Ccircle cx='100' cy='100' r='70' fill='none' stroke='%23FFD700' stroke-width='0.5' opacity='0.3'/%3E%3Ccircle cx='100' cy='100' r='50' fill='none' stroke='%23FFD700' stroke-width='0.5' opacity='0.3'/%3E%3Cpath d='M100 10 L100 190 M10 100 L190 100 M29 29 L171 171 M171 29 L29 171' stroke='%23FFD700' stroke-width='0.3' opacity='0.2'/%3E%3C/svg%3E");
    background-size: contain;
    animation: rotateMandala 120s linear infinite;
}

.rsvp-decoration.left {
    top: -150px;
    left: -150px;
}

.rsvp-decoration.right {
    bottom: -150px;
    right: -150px;
    animation-direction: reverse;
}

/* Corner Ornaments */
.rsvp-corner-ornament {
    position: absolute;
    width: 100px;
    height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0 Q50 20 100 0 L100 20 Q50 40 0 20 Z' fill='%23C9A55C' opacity='0.3'/%3E%3Cpath d='M0 0 L20 0 Q40 50 0 100 L0 80 Q20 50 0 20 Z' fill='%23C9A55C' opacity='0.3'/%3E%3Ccircle cx='15' cy='15' r='5' fill='%23FFD700' opacity='0.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: 1;
}

.rsvp-corner-ornament.top-left {
    top: 20px;
    left: 20px;
}

.rsvp-corner-ornament.top-right {
    top: 20px;
    right: 20px;
    transform: scaleX(-1);
}

.rsvp-corner-ornament.bottom-left {
    bottom: 20px;
    left: 20px;
    transform: scaleY(-1);
}

.rsvp-corner-ornament.bottom-right {
    bottom: 20px;
    right: 20px;
    transform: scale(-1, -1);
}

/* Royal RSVP Container */
.rsvp-royal-container {
    max-width: 950px;
    margin: 0 auto;
    background: linear-gradient(145deg, #ffffff 0%, #fdfaf5 50%, #fff8f0 100%);
    border-radius: 24px;
    padding: 45px;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(201, 165, 92, 0.3),
        inset 0 0 80px rgba(201, 165, 92, 0.05);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.rsvp-royal-container::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 50%, var(--color-gold) 100%);
    border-radius: 32px;
    z-index: -1;
}

/* Logo Watermark */
.rsvp-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

.rsvp-watermark img {
    width: 400px;
    height: auto;
}

/* Inner Layout */
.rsvp-inner {
    display: flex;
    gap: 35px;
    position: relative;
    z-index: 1;
}

/* Form Section */
.rsvp-form-section {
    flex: 1.5;
}

.rsvp-form-header {
    text-align: center;
    margin-bottom: 25px;
}

.rsvp-form-header h3 {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--color-maroon);
    margin-bottom: 5px;
    font-weight: 600;
    letter-spacing: 2px;
}

.rsvp-form-header p {
    font-size: 13px;
    color: var(--color-text-light);
    letter-spacing: 1px;
}

.rsvp-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Royal Input Groups */
.royal-input-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.royal-input {
    position: relative;
}

.royal-input.full {
    grid-column: span 2;
}

.royal-input label {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.royal-input label .optional-label {
    font-size: 9px;
    font-weight: 400;
    color: var(--color-text-light);
    text-transform: none;
    letter-spacing: 0;
}

.royal-input input,
.royal-input select,
.royal-input textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid rgba(201, 165, 92, 0.3);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.8);
    transition: var(--transition-smooth);
}

.royal-input input::placeholder,
.royal-input textarea::placeholder {
    color: var(--color-text-muted);
    font-style: italic;
}

.royal-input input:focus,
.royal-input select:focus,
.royal-input textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    background: var(--color-white);
    box-shadow:
        0 0 0 4px rgba(201, 165, 92, 0.15),
        0 5px 20px rgba(201, 165, 92, 0.1);
}

.royal-input textarea {
    resize: vertical;
    min-height: 100px;
}

.royal-input .input-ornament {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    transition: var(--transition-smooth);
}

.royal-input input:focus ~ .input-ornament,
.royal-input select:focus ~ .input-ornament,
.royal-input textarea:focus ~ .input-ornament {
    width: 80%;
}

/* Side Toggle - Bride/Groom Selection */
.side-toggle {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.side-option {
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
}

.side-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.side-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    height: 48px;
    background: rgba(255, 248, 240, 0.6);
    border: 2px solid rgba(201, 165, 92, 0.3);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
    transition: all 0.3s ease;
    box-sizing: border-box;
    white-space: nowrap;
}

.side-option input:checked + .side-label {
    background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
    border-color: var(--color-gold);
    color: var(--color-white);
    box-shadow: 0 4px 15px rgba(201, 165, 92, 0.4);
}

.side-option:hover .side-label {
    border-color: var(--color-gold);
}

/* File Upload Styling */
.file-upload-wrapper {
    position: relative;
    width: 100%;
}

.file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-upload-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255, 248, 240, 0.6);
    border: 2px dashed rgba(201, 165, 92, 0.4);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.file-upload-display svg {
    width: 24px;
    height: 24px;
    color: var(--color-gold);
    flex-shrink: 0;
}

.file-upload-display .file-placeholder {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-light);
}

.file-upload-display .file-name {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
    font-weight: 500;
    display: none;
}

.file-upload-wrapper.has-file .file-placeholder {
    display: none;
}

.file-upload-wrapper.has-file .file-name {
    display: block;
}

.file-upload-wrapper.has-file .file-upload-display {
    border-style: solid;
    border-color: var(--color-gold);
    background: rgba(201, 165, 92, 0.1);
}

.file-upload-display:hover {
    border-color: var(--color-gold);
    background: rgba(201, 165, 92, 0.05);
}

/* RSVP Event Selection Cards */
.event-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.event-cards .event-card {
    flex: 0 0 auto;
    width: 80px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
}

.event-cards .event-card input {
    display: none;
}

.event-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    border: 1.5px solid rgba(201, 165, 92, 0.3);
    border-radius: 10px;
    background: rgba(255, 248, 240, 0.5);
    transition: var(--transition-smooth);
    text-align: center;
}

.event-cards .event-card:hover .event-card-inner {
    border-color: var(--color-gold);
    background: rgba(201, 165, 92, 0.1);
    transform: translateY(-2px);
}

.event-cards .event-card input:checked + .event-card-inner {
    border-color: var(--color-gold);
    background: linear-gradient(135deg, rgba(201, 165, 92, 0.2) 0%, rgba(201, 165, 92, 0.1) 100%);
    box-shadow: 0 3px 12px rgba(201, 165, 92, 0.25);
}

.event-card-inner .event-icon {
    font-size: 18px;
    margin-bottom: 3px;
    display: block;
    transition: var(--transition-smooth);
}

.event-cards .event-card input:checked + .event-card-inner .event-icon {
    transform: scale(1.1);
}

.event-card-inner .event-name {
    font-size: 8px;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Royal Submit Button */
.royal-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 30px;
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    border: none;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition-smooth);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(201, 165, 92, 0.35);
}

.royal-submit-btn .btn-icon svg {
    width: 20px;
    height: 20px;
}

.royal-submit-btn .btn-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.5s;
}

.royal-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(201, 165, 92, 0.5);
}

.royal-submit-btn:hover .btn-shimmer {
    left: 100%;
}

/* Vertical Divider */
.rsvp-divider-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.rsvp-divider-vertical .divider-line {
    width: 1px;
    flex: 1;
    background: linear-gradient(180deg, transparent, rgba(201, 165, 92, 0.4), transparent);
    min-height: 60px;
}

.rsvp-divider-vertical .divider-ornament {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
    border-radius: 50%;
    margin: 10px 0;
    box-shadow: 0 4px 15px rgba(201, 165, 92, 0.3);
}

.rsvp-divider-vertical .divider-ornament span {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: 1px;
}

/* Quick RSVP Section */
.rsvp-quick-section {
    flex: 1;
    display: flex;
    align-items: center;
}

.quick-rsvp-content {
    text-align: center;
    padding: 20px;
}

.quick-rsvp-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(201, 165, 92, 0.1) 0%, rgba(201, 165, 92, 0.2) 100%);
    border-radius: 50%;
    border: 2px solid rgba(201, 165, 92, 0.3);
}

.quick-rsvp-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-gold);
}

.quick-rsvp-content h3 {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--color-maroon);
    margin-bottom: 8px;
    font-weight: 600;
}

.quick-rsvp-content p {
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 18px;
}

/* WhatsApp Royal Button */
.whatsapp-royal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 25px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: var(--color-white);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: var(--transition-smooth);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.25);
}

.whatsapp-royal-btn .whatsapp-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-royal-btn .whatsapp-icon svg {
    width: 100%;
    height: 100%;
}

.whatsapp-royal-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(37, 211, 102, 0.4);
}

/* Venue Reminder */
.venue-reminder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(201, 165, 92, 0.08) 0%, rgba(201, 165, 92, 0.15) 100%);
    border-radius: 12px;
    border: 1px dashed rgba(201, 165, 92, 0.4);
}

.venue-reminder .venue-icon {
    font-size: 18px;
}

.venue-reminder .venue-details {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.venue-reminder .venue-name {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-maroon);
}

.venue-reminder .venue-location {
    font-size: 11px;
    color: var(--color-text-light);
}

/* Legacy form styles for backwards compatibility */
.rsvp-container {
    max-width: 700px;
    margin: 0 auto;
    background: var(--color-white);
    border-radius: 30px;
    padding: 50px 40px;
    box-shadow: var(--shadow-medium);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 15px 20px;
    border: 2px solid #E5E5E5;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text);
    transition: var(--transition-smooth);
    background: var(--color-white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 4px rgba(201, 165, 92, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-gold);
}

.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 40px;
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    border: none;
    border-radius: 30px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition-smooth);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 10px;
}

.submit-btn svg {
    width: 20px;
    height: 20px;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-gold);
}

.rsvp-divider {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
}

.rsvp-divider::before,
.rsvp-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E5E5E5;
}

.rsvp-divider span {
    font-size: 14px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.whatsapp-rsvp {
    text-align: center;
}

.whatsapp-rsvp p {
    font-size: 14px;
    color: var(--color-text-light);
    margin-bottom: 15px;
}

.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    background: #25D366;
    color: var(--color-white);
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.whatsapp-btn svg {
    width: 22px;
    height: 22px;
}

.whatsapp-btn:hover {
    background: #1da851;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
}

/* RSVP Responsive */
@media (max-width: 900px) {
    .rsvp-royal-container {
        padding: 40px 30px;
    }

    .rsvp-inner {
        flex-direction: column;
        gap: 30px;
    }

    .rsvp-divider-vertical {
        flex-direction: row;
        width: 100%;
        padding: 20px 0;
    }

    .rsvp-divider-vertical .divider-line {
        width: auto;
        height: 2px;
        min-height: auto;
        flex: 1;
    }

    .rsvp-divider-vertical .divider-ornament {
        margin: 0 15px;
    }

    .royal-input-group {
        grid-template-columns: 1fr;
    }

    .royal-input.full {
        grid-column: span 1;
    }

    .event-cards {
        justify-content: center;
    }

    .event-card {
        min-width: 80px;
        flex: 0 1 auto;
    }

    .rsvp-corner-ornament {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .rsvp {
        padding: 80px 0;
    }

    .rsvp-royal-container {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .rsvp-form-header h3 {
        font-size: 26px;
    }

    .event-card-inner {
        padding: 14px 10px;
    }

    .event-card .event-icon {
        font-size: 22px;
    }

    .event-card .event-name {
        font-size: 10px;
    }

    .whatsapp-royal-btn {
        padding: 15px 25px;
        font-size: 13px;
    }

    .rsvp-corner-ornament {
        display: none;
    }
}

/* ===== Instagram Section ===== */
.instagram-cta {
    background: linear-gradient(180deg, var(--color-white) 0%, #fdf8f3 100%);
    padding: 100px 0;
    position: relative;
}

.instagram-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.instagram-content {
    text-align: center;
}

.instagram-content h3 {
    font-family: var(--font-display);
    font-size: 38px;
    color: var(--color-text);
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.instagram-content p {
    font-size: 16px;
    color: var(--color-text-light);
    margin-bottom: 25px;
}

.instagram-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 35px;
    background: var(--color-white);
    color: var(--color-maroon);
    border: 2px solid var(--color-gold);
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.instagram-btn svg {
    width: 24px;
    height: 24px;
    color: var(--color-gold);
}

.instagram-btn:hover {
    transform: translateY(-3px);
    background: var(--color-gold);
    color: var(--color-white);
    box-shadow: 0 10px 30px rgba(201, 165, 92, 0.4);
}

.instagram-btn:hover svg {
    color: var(--color-white);
}

/* ===== Footer ===== */
.footer {
    background: linear-gradient(180deg, #1A1A1A 0%, #0f0f0f 100%);
    color: var(--color-white);
    padding: 80px 0 40px;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--color-gold), var(--color-gold-light), var(--color-gold), transparent);
}

.footer-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 5 L35 25 L55 30 L35 35 L30 55 L25 35 L5 30 L25 25 Z' fill='none' stroke='%23C9A55C' stroke-width='0.3' opacity='0.1'/%3E%3C/svg%3E");
    background-size: 60px 60px;
}

.footer-content {
    position: relative;
    text-align: center;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-names {
    font-family: var(--font-display);
    font-size: 42px;
    color: var(--color-gold);
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    letter-spacing: 3px;
}

.footer-date {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 3px;
}

.footer-message {
    font-family: var(--font-heading);
    font-size: 22px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.footer-nav a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition-smooth);
}

.footer-nav a:hover {
    color: var(--color-gold);
}

.footer-bottom {
    position: relative;
    text-align: center;
    padding-top: 40px;
}

.footer-bottom p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
}

/* ===== Toast Notification ===== */
.toast-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
}

.toast {
    background: var(--color-text);
    color: var(--color-white);
    padding: 15px 30px;
    border-radius: 12px;
    font-size: 14px;
    box-shadow: var(--shadow-medium);
    animation: toastIn 0.5s ease forwards;
}

.toast.success {
    background: #2E7D32;
}

.toast.error {
    background: #C62828;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Animations ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: fadeInUp 0.8s ease forwards;
}

/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
    .couple-wrapper {
        gap: 20px;
    }

    .couple-card {
        min-width: unset;
        flex: 1;
    }

    .couple-photo-frame {
        width: 140px;
        height: 180px;
        margin-bottom: 15px;
    }

    .couple-heart-divider {
        width: 40px;
        height: 40px;
        margin: 0 -10px;
    }

    .couple-heart-divider .heart-animation svg {
        width: 30px;
        height: 30px;
    }

    .couple-member-name {
        font-size: 20px !important;
    }

    .couple-parents {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    .couple-description {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .couple-social a {
        width: 32px !important;
        height: 32px !important;
    }

    .couple-social svg {
        width: 14px !important;
        height: 14px !important;
    }

    .gallery-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }

    .garland {
        width: 80px;
    }

    .lantern {
        transform: scale(0.8);
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: var(--color-white);
        box-shadow: var(--shadow-medium);
        transition: var(--transition-smooth);
        gap: 30px;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-toggle {
        display: flex;
        z-index: 1001;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .events-timeline {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-group.full-width {
        grid-column: span 1;
    }

    .rsvp-container {
        padding: 30px 20px;
    }

    .footer-nav {
        flex-wrap: wrap;
        gap: 20px;
    }

    .vintage-car {
        width: 150px;
        right: 2%;
        bottom: 60px;
    }

    .garland {
        width: 60px;
    }

    .lantern {
        transform: scale(0.5);
    }

    /* Move lanterns more towards edges on mobile */
    .lantern-1 { left: 2%; }
    .lantern-2 { right: 1%; }
    .lantern-3 { left: 0%; }
    .lantern-4 { right: 2%; }
    .lantern-5 { left: 3%; }

    .marigold {
        transform: scale(0.55);
    }

    /* Move marigolds towards edges on mobile */
    .marigold-1 { left: 3%; }
    .marigold-2 { right: 2%; }
    .marigold-3 { left: 2%; }
    .marigold-4 { right: 1%; }
    .marigold-5 { right: 0%; }
    .marigold-6 { left: 3%; }
    .marigold-7 { right: 2%; }
    .marigold-8 { right: 2%; }

    /* Move diyas towards edges on mobile */
    .diya-1 { right: 1%; }
    .diya-2 { left: 1%; }
    .diya-3 { right: 2%; }

    .diya {
        transform: scale(0.6);
    }

    .countdown-box {
        width: 60px;
        height: 60px;
    }

    .countdown-value {
        font-size: 28px;
    }

    .countdown-separator {
        font-size: 28px;
    }

    .gallery-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }

    .gallery-item.large {
        grid-column: span 2;
    }

    .gallery-item.tall {
        grid-row: span 2;
    }
}

@media (max-width: 480px) {
    .gallery-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
    }

    .gallery-item.large {
        grid-column: span 2;
        aspect-ratio: 2/1;
    }

    .gallery-item.tall {
        grid-row: span 2;
        aspect-ratio: 1/2;
    }

    .groom-name, .bride-name {
        font-size: 42px;
    }

    .weds-text {
        font-size: 32px;
    }

    .couple-wrapper {
        gap: 8px;
        flex-wrap: nowrap;
    }

    .couple-card {
        min-width: unset;
        flex: 1;
    }

    .couple-photo-frame {
        width: 110px;
        height: 140px;
        margin-bottom: 8px;
    }

    .couple-member-name {
        font-size: 15px !important;
    }

    .couple-parents {
        font-size: 9px !important;
    }

    .couple-description {
        font-size: 9px !important;
    }

    .couple-info {
        padding: 0 3px;
    }

    .couple-heart-divider {
        width: 25px;
        height: 25px;
        margin: 0 -5px;
    }

    .couple-heart-divider .heart-animation svg {
        width: 20px;
        height: 20px;
    }

    .countdown {
        gap: 5px;
    }

    .countdown-box {
        width: 55px;
        height: 55px;
    }

    .countdown-value {
        font-size: 24px;
    }

    .countdown-label {
        font-size: 10px;
    }

    .countdown-separator {
        font-size: 24px;
        margin-bottom: 25px;
    }

    .garland {
        width: 35px;
    }

    .lantern {
        transform: scale(0.4);
    }

    /* Position lanterns at edges on small mobile */
    .lantern-1 { left: 0%; top: 3%; }
    .lantern-2 { right: 0%; }
    .lantern-3 { display: none; }
    .lantern-4 { right: 0%; }
    .lantern-5 { left: 0%; }

    .marigold {
        transform: scale(0.45);
    }

    /* Position marigolds at edges on small mobile */
    .marigold-1 { left: 0%; }
    .marigold-2 { right: 0%; }
    .marigold-3 { left: 0%; }
    .marigold-4 { right: 0%; }
    .marigold-5 { right: 0%; }
    .marigold-6 { left: 0%; }
    .marigold-7 { right: 0%; }
    .marigold-8 { right: 0%; }

    .diya {
        transform: scale(0.5);
    }

    /* Position diyas at edges on small mobile */
    .diya-1 { right: 0%; }
    .diya-2 { left: 0%; }
    .diya-3 { right: 0%; }

    .vintage-car {
        width: 120px;
    }
}

/* iPhone SE and similar small screens */
@media (max-width: 375px) {
    .couple-wrapper {
        gap: 6px;
        flex-wrap: nowrap;
    }

    .couple-card {
        min-width: unset;
        flex: 1;
    }

    .couple-photo-frame {
        width: 100px;
        height: 130px;
        margin-bottom: 6px;
    }

    .couple-member-name {
        font-size: 14px !important;
    }

    .couple-parents {
        font-size: 8px !important;
    }

    .couple-description {
        font-size: 8px !important;
    }

    .couple-heart-divider {
        width: 22px;
        height: 22px;
        margin: 0 -3px;
    }

    .couple-heart-divider .heart-animation svg {
        width: 18px;
        height: 18px;
    }

    .groom-name, .bride-name {
        font-size: 36px;
    }

    .weds-text {
        font-size: 28px;
    }

    /* Events - keep 2 column grid */
    .events-journey {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .journey-path {
        padding: 12px 8px;
    }

    .journey-header h3 {
        font-size: 13px;
    }

    .journey-icon {
        font-size: 24px;
    }

    .journey-location {
        font-size: 9px;
    }

    .day-events {
        flex: none;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .event-card-mini {
        padding: 10px 8px;
    }

    .event-card-mini .event-time {
        font-size: 13px;
    }

    .event-card-mini .event-details h4 {
        font-size: 11px;
    }

    .event-card-mini .event-details p {
        font-size: 8px;
    }
}

/* ===== Print Styles ===== */
@media print {
    .floating-elements,
    .navbar,
    .scroll-indicator,
    .vintage-car {
        display: none !important;
    }

    body {
        background: white;
    }

    section {
        page-break-inside: avoid;
    }
}

/* ===== Music Player ===== */
.music-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    border: none;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(201, 165, 92, 0.5);
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.music-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(201, 165, 92, 0.7);
}

.music-toggle svg {
    width: 28px;
    height: 28px;
    color: var(--color-white);
    transition: var(--transition-smooth);
}

.music-toggle .music-icon-off {
    display: none;
}

.music-toggle.paused .music-icon-on {
    display: none;
}

.music-toggle.paused .music-icon-off {
    display: block;
}

.music-toggle.playing {
    animation: musicPulse 1s ease-in-out infinite;
}

@keyframes musicPulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(201, 165, 92, 0.5);
    }
    50% {
        box-shadow: 0 4px 30px rgba(201, 165, 92, 0.8), 0 0 0 10px rgba(201, 165, 92, 0.1);
    }
}

.music-label {
    position: absolute;
    right: 70px;
    background: var(--color-text);
    color: var(--color-white);
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: var(--transition-smooth);
    pointer-events: none;
}

.music-toggle:hover .music-label {
    opacity: 1;
    transform: translateX(0);
}

/* ===== DDLJ Section ===== */
.ddlj-section {
    background: linear-gradient(180deg, #FFF8DC 0%, #FFFACD 30%, #87CEEB 70%, #FFB347 100%);
    padding: 100px 0 120px;
    position: relative;
    overflow: hidden;
}

.ddlj-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 165, 0, 0.2) 0%, transparent 40%);
    pointer-events: none;
}

.ddlj-content {
    position: relative;
    text-align: center;
}

/* DDLJ Scene with Image */
.ddlj-scene {
    position: relative;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ddlj-image-container {
    position: relative;
    display: inline-block;
    animation: floatImage 4s ease-in-out infinite;
}

.ddlj-image {
    max-width: 100%;
    width: 500px;
    height: auto;
    border-radius: 20px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 5px rgba(201, 165, 92, 0.3),
        0 0 0 10px rgba(201, 165, 92, 0.1);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.ddlj-image:hover {
    transform: scale(1.02);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35),
        0 0 0 5px rgba(201, 165, 92, 0.5),
        0 0 0 10px rgba(201, 165, 92, 0.2);
}

.ddlj-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    pointer-events: none;
    animation: pulseGlow 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes floatImage {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

/* Floating Hearts */
.floating-hearts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.floating-hearts .heart {
    position: absolute;
    font-size: 24px;
    animation: floatHeart 6s ease-in-out infinite;
    opacity: 0;
}

.floating-hearts .heart:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.floating-hearts .heart:nth-child(2) {
    left: 25%;
    animation-delay: 1.2s;
    font-size: 18px;
}

.floating-hearts .heart:nth-child(3) {
    left: 50%;
    animation-delay: 2.4s;
}

.floating-hearts .heart:nth-child(4) {
    left: 75%;
    animation-delay: 3.6s;
    font-size: 20px;
}

.floating-hearts .heart:nth-child(5) {
    left: 90%;
    animation-delay: 4.8s;
    font-size: 16px;
}

@keyframes floatHeart {
    0% {
        bottom: -20px;
        opacity: 0;
        transform: translateX(0) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        bottom: 100%;
        opacity: 0;
        transform: translateX(30px) rotate(45deg);
    }
}

/* DDLJ Hashtag */
.ddlj-hashtag {
    font-family: var(--font-display);
    font-size: clamp(36px, 8vw, 72px);
    font-weight: 700;
    color: var(--color-maroon);
    margin-bottom: 25px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
    letter-spacing: 2px;
}

.hashtag-symbol {
    color: var(--color-gold);
    margin-right: 5px;
}

.hashtag-text .highlight {
    color: var(--color-gold);
    position: relative;
    display: inline-block;
    animation: pulseHighlight 2s ease-in-out infinite;
}

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

.ddlj-quote {
    font-family: var(--font-heading);
    font-size: clamp(20px, 4vw, 32px);
    font-style: italic;
    color: var(--color-text);
    margin-bottom: 15px;
    opacity: 0.9;
}

.ddlj-subtext {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-light);
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .ddlj-image {
        width: 400px;
    }

    .ddlj-hashtag {
        font-size: clamp(28px, 7vw, 48px);
    }

    .floating-hearts .heart {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .ddlj-section {
        padding: 60px 0 80px;
    }

    .ddlj-image {
        width: 100%;
        border-radius: 15px;
    }

    .ddlj-scene {
        margin-bottom: 30px;
    }

    .ddlj-quote {
        font-size: 18px;
    }

    .floating-hearts .heart {
        font-size: 14px;
    }
}

/* ===== Announcements Section ===== */
.announcements {
    background: var(--color-white);
}

.announcements-board {
    max-width: 800px;
    margin: 0 auto;
}

.announcement-card {
    background: var(--color-cream);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 20px;
    border: 2px dashed var(--color-gold-light);
    transition: var(--transition-smooth);
}

.announcement-card:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-soft);
}

.announcement-card.placeholder-card {
    background: linear-gradient(135deg, #FFF8F0 0%, #FDF5EC 100%);
}

.announcement-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.announcement-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-white);
}

.announcement-content h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 10px;
}

.announcement-content p {
    font-size: 15px;
    color: var(--color-text-light);
    line-height: 1.8;
}

.announcement-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    background: rgba(201, 165, 92, 0.1);
    border-radius: 12px;
    margin-top: 25px;
}

.announcement-note svg {
    width: 20px;
    height: 20px;
    color: var(--color-gold);
    min-width: 20px;
}

.announcement-note span {
    font-size: 14px;
    color: var(--color-text-light);
    font-weight: 500;
}

@media (max-width: 768px) {
    .announcement-card {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }

    .announcement-icon {
        margin: 0 auto;
    }

    .announcement-note {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .music-toggle {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }

    .music-toggle svg {
        width: 22px;
        height: 22px;
    }

    .music-label {
        display: none;
    }
}