/* CSS Variables */
:root {
    --bg-color: #F5F7FA;
    --header-color: #546E7A;
    --text-color: #263238;
    --accent-color: #62c1e5;
    /* Cyan Blue Frozen Effect */
    --card-bg: #FFFFFF;

    --font-heading: 'Cormorant', serif;
    --font-body: 'Lato', sans-serif;
    --font-script: 'Great Vibes', cursive;
    --font-display: 'Playfair Display', serif;

    /* Responsive Typography Scale */
    --h1-size: clamp(2.5rem, 5vw, 4rem);
    --h2-size: clamp(2rem, 4vw, 2.5rem);
    --body-size: clamp(0.9rem, 1.5vw, 1rem);
}

/* Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Typography Utilities */
.text-center {
    text-align: center !important;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--header-color);
    margin-bottom: 2.5rem;
    text-align: center;
    position: relative;
    /* Uppercase for main section titles if desired, user disliked it for entourage groups but usually section titles are caps. I'll stick to standard or CamelCase. User didn't specify section titles caps. I'll leave text-transform off. */
}

/* Optional Separator or Underline for Section Titles */
.section-title::after {
    content: '❄';
    display: block;
    font-family: sans-serif;
    font-size: 1.2rem;
    color: #B3E5FC;
    margin-top: 0.5rem;
    /* Snowflake accent below title */
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    color: var(--header-color);
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
}

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

/* Main Content Initial Blur */
.blurred-content {
    filter: blur(15px);
    transition: filter 1.5s ease-out;
}

.content-visible {
    filter: blur(0);
}

/* Intro Overlay (Envelope Animation) */
#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    /* Fallback */
    background: radial-gradient(circle at center, #455A64 0%, #263238 100%);
    /* Deep Winter / Blue Grey Gradient */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* Highest z-index */
    overflow: hidden;
    will-change: opacity;
}

/* Snow Animation */
#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
    /* higher than intro overlay */
    overflow: hidden;
}

.snowflake {
    position: absolute;
    top: -10px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.8;
    pointer-events: none;
    animation: fall linear forwards;
    will-change: transform;
    transform: translateZ(0);
}

@keyframes fall {
    to {
        transform: translateY(110vh);
    }
}

/* Snow Pile Animation */
@keyframes snowPileGrowth {
    0% {
        top: 0;
        height: 0;
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    100% {
        top: -12px;
        /* Moves up as it grows */
        height: 14px;
        opacity: 1;
        border-radius: 50% 50% 2px 2px / 100% 100% 10px 10px;
        /* Irregular mound shape */
    }
}

@keyframes snowTextAccumulation {
    0% {
        text-shadow: none;
    }

    100% {
        text-shadow:
            0 -1px 0 #fff,
            0 -3px 2px rgba(255, 255, 255, 0.8),
            0 -5px 4px rgba(255, 255, 255, 0.4);
    }
}

/* Snow Pile Targets */
.detail-card,
.countdown-item,
.accordion-item,
.rsvp-form {
    position: relative;
    /* Ensure parent is relative */
}

.detail-card::after,
.countdown-item::after,
.accordion-item::after,
.rsvp-form::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, #fff 40%, rgba(255, 255, 255, 0.8) 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: 2;
    animation: snowPileGrowth 20s linear forwards;
}

/* Specific Adjustments */
.countdown-item::after {
    width: 90%;
    /* Center it a bit on small boxes */
    left: 5%;
}

/* Snow on Letters */
.hero-title,
.section-title,
.detail-card h3,
.entourage-group h3 {
    animation: snowTextAccumulation 25s ease-out forwards;
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

/* White Transition Overlay */
.white-transition-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    /* Above everything */
    transition: opacity 1.5s ease-in-out;
}

.white-transition-overlay.visible {
    opacity: 1;
}

/* Snowflake Drawing Animation */
.snowflake-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

@keyframes drawSnowflake {
    to {
        stroke-dashoffset: 0;
    }
}

/* Corner Flowers Container */
.corner-flower {
    position: absolute;
    top: 0;
    left: 0;
    width: 25vw;
    height: 25vw;
    max-width: 250px;
    max-height: 250px;
    pointer-events: none;
    z-index: 1;
    fill: none;
    opacity: 0;
    /* Start invisible */
    transform-origin: center;
    transition: opacity 0.5s ease;
}



.corner-flower.bloom {
    opacity: 1;
}

.corner-flower.bloom .snowflake-path {
    animation: drawSnowflake 3s ease-out forwards;
}

.top-left {
    top: -30px;
    left: -30px;
    transform: rotate(0deg) scale(0.8);
}

.top-right {
    top: -30px;
    right: -30px;
    transform: rotate(90deg) scale(0.8);
}

.bottom-left {
    bottom: -30px;
    left: -30px;
    transform: rotate(270deg) scale(0.8);
}

.bottom-right {
    bottom: -30px;
    right: -30px;
    transform: rotate(180deg) scale(0.8);
}

/* Intro Container */
.intro-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: filter 1s ease;
}

.intro-container.blurred {
    filter: blur(8px);
    transition: filter 1s ease;
}

/* Envelope Structure */
.envelope {
    position: relative;
    width: 320px;
    max-width: 90vw;
    height: 220px;
    background-color: #E3F2FD;
    /* Frozen Icy Blue base */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    border-radius: 4px;
    /* Slightly rounded corners */
}

.intro-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Removes small gap below image */
}

/* Letter (Invitation Card inside) */
.letter {
    position: absolute;
    width: 290px;
    height: 200px;
    background: white;
    z-index: 2;
    /* Inside envelope, below flaps initially but we manage stacking via z-index of flaps */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 10px;
    /* White border effect frame */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    top: 10px;
    /* Centered vertically inside envelope initially */
}


/* Flaps */
.flap {
    position: absolute;
    z-index: 3;
    /* On top of letter initially */
    background-color: #BBDEFB;
    /* Icy Blue for contrast/shadow */
    transition: transform 0.6s ease, z-index 0.1s linear;
}

/* Top Flap (The opener) */
.flap.top {
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 120px 160px 0 160px;
    /* Triangle pointing down */
    border-color: #90CAF9 transparent transparent transparent;
    /* Darker Icy Blue for top flap */
    z-index: 5;
    /* Highest flap */
    transform-origin: top;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, z-index 0.1s linear 0.7s;
    /* Delay for seal pop */
}


/* Side Flaps */
.flap.right {
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 110px 160px 110px 0;
    border-color: transparent #BBDEFB transparent transparent;
}

.flap.left {
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 110px 0 110px 160px;
    border-color: transparent transparent transparent #BBDEFB;
}

/* Bottom Flap */
.flap.bottom {
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 160px 120px 160px;
    border-color: transparent transparent #BBDEFB transparent;
    z-index: 4;
}

/* Wax Seal */
.wax-seal {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: #546E7A;
    /* Silver/Blue Grey Wax */
    border-radius: 50%;
    z-index: 6;
    /* Above top flap */
    top: 90px;
    /* Center vertical */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
    touch-action: manipulation;
}

.wax-seal img {
    width: 70%;
    opacity: 0.8;
}

/* Seal Pulse Animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(84, 110, 122, 0.7);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(84, 110, 122, 0);
        transform: scale(1.1);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(84, 110, 122, 0);
        transform: scale(1);
    }
}

.wax-seal.pulse {
    animation: pulse 2s infinite;
}

.wax-seal:hover {
    transform: scale(1.1);
}

/* Seal Pop (Hidden) Animation */
.wax-seal.popped {
    animation: pop 0.4s ease forwards;
}

@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* Envelope Open States */
.envelope.open .flap.top {
    transform: rotateX(180deg);
    z-index: 1;
    /* Move behind letter after opening */
}

/* Letter Rise Animation */
.envelope.open .letter {
    animation: rise 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
    /* Delayed start */
    z-index: 4;
    /* Move above bottom flaps */
}

@keyframes rise {
    0% {
        transform: translateY(0);
        z-index: 2;
    }

    50% {
        /* Rise up */
        transform: translateY(-120px);
        z-index: 6;
        /* Ensure it's above everything now */
    }

    100% {
        /* Stay up (Zoom logic handled in JS/New transition if needed, or simply fade out screen) */
        transform: translateY(-80px) scale(1.5);
        z-index: 10;
        /* Front and center */
    }
}


/* Intro Text under envelope */
.intro-text {
    margin-top: 3rem;
    font-family: var(--font-script);
    font-size: 3rem;
    color: #ECEFF1;
    /* Light Silver / White */
    opacity: 0;
    animation: fadeInUp 1s ease-out 1s forwards;
    /* Appear first */
}

/* Seal Instruction */
.seal-instruction {
    margin-top: 3.0rem;
    font-family: var(--font-heading);
    font-size: 1.0rem;
    color: #ECEFF1;
    /* Light Silver / White */
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
    /* Combine fade in with continuous pulse */
    animation: fadeInUp 1s ease-out 1.5s forwards, textPulse 2s infinite 2.5s;
    /* Delay pulse start until after fade in */
}

.seal-instruction.hidden {
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: none;
    /* Stop pulsing when hidden */
}

@keyframes textPulse {
    0% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 20px rgba(179, 229, 252, 0.4);
        /* Icy glow */
    }

    100% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide original Intro Overlay when done */
#intro-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Sections */
.section {
    padding: 5rem 0;
}

.alt-bg {
    background-color: #E8ECEF;
    /* Slightly darker shade for contrast */
}

.section-title {
    font-size: 2.5rem;
    position: relative;
    display: table;
    /* Shrink wrap width */
    margin: 0 auto 3rem auto;
    /* Center the table */
    width: fit-content;
    /* Modern shrink wrap */
    color: var(--header-color);
    font-family: var(--font-heading);
    text-align: center;
}

.section-title::after {
    content: '';
    display: block;
    width: 60%;
    height: 3px;
    /* Gradient for icy effect */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #BFEAF5 50%, rgba(255, 255, 255, 0) 100%);
    margin: 0.8rem auto 0;
    /* Glow effect */
    box-shadow: 0 0 8px rgba(191, 234, 245, 0.8), 0 0 15px rgba(191, 234, 245, 0.4);
    border-radius: 2px;
}

/* Hero Section */
.hero {
    min-height: 120vh;
    min-height: -webkit-fill-available;
    height: auto;
    background-color: #546E7A;
    padding: 5rem 0;
    /* Fallback color */
    background-image: url('assets/images/gallery/1 (13).JPEG');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    /* scroll instead of fixed — fixed breaks on iOS Safari */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Overlay for readability */
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    padding-top: 7rem;
    padding-bottom: 4rem;
}

.hero-logo {
    width: 150px;
    height: auto;
    margin: -2rem auto 2rem;
    /* Pull logo up */
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.hero-title {
    font-size: var(--h1-size);
    color: #fff;
    /* Override header color for hero */
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    padding: 0 1rem;
    /* Prevent text touching edges on small screens */
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    font-style: italic;
}

.hero-actions {
    margin-top: 2rem;
}

.btn-hero-rsvp {
    display: inline-block;
    background-color: #81D4FA;
    /* Frozen Light Blue */
    background: linear-gradient(135deg, #E1F5FE 0%, #81D4FA 100%);
    /* Icy Gradient */
    color: #37474F;
    /* Darker text for contrast on light button */
    padding: 1rem 3rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(129, 212, 250, 0.4);
    /* Cyan glow */
    font-family: var(--font-heading);
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.4);
    touch-action: manipulation;
}

.btn-hero-rsvp:hover {
    background: linear-gradient(135deg, #B3E5FC 0%, #4FC3F7 100%);
    /* Slightly darker/vibrant on hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(79, 195, 247, 0.6);
    color: #263238;
}

/* Countdown: Ice Cube Effect */
.countdown-container {
    display: inline-flex;
    flex-wrap: wrap;
    /* Allow wrapping on very small screens */
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
}

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

    /* Glassmorphism moved to individual items */
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    padding: 1.0rem;
    border-radius: 12px;
    min-width: 100px;
    /* Ensure uniform width */
}

.countdown-item span:first-child {
    font-size: 2.0rem;
    font-weight: 700;
    font-family: var(--font-heading);
    line-height: 1;
}

.countdown-item .label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.5rem;
}

.countdown-target {
    margin-top: 2rem;
    font-size: 1.5rem;
    opacity: 0.95;
    font-family: var(--font-heading);
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    color: #fff;
}

/* Hero Entrance Animations (Triggered via JS) */
.hero-logo,
.hero-title,
.hero-subtitle,
.countdown-target,
.countdown-container {
    opacity: 0;
    /* Hidden initially */
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.hero-logo {
    transform: scale(0.8) translateY(30px);
    /* Zoom effect start */
}

/* Triggered State */
.content-visible .hero-logo {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition-delay: 0.2s;
}

.content-visible .hero-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.content-visible .hero-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}

.content-visible .countdown-target {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.1s;
}

.content-visible .countdown-container {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.3s;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 2rem;
    z-index: 1;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translate(-50%, 0);
    }

    40% {
        transform: translate(-50%, -10px);
    }

    60% {
        transform: translate(-50%, -5px);
    }
}

/* Details Grid */
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.detail-card {
    /* Crystal Frozen Effect */
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4) 100%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 20px),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 20px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Add a subtle shine effect */
.detail-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

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

.card-snowflake {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 150px;
    height: auto;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
    transform: rotate(0deg);
    transition: transform 10s linear;
    /* Slow spin on hover maybe? */
}

.detail-card:hover .card-snowflake {
    transform: rotate(180deg) scale(1.1);
}

.card-icon {
    width: 120px;
    height: auto;
    margin-bottom: 1rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.detail-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(191, 234, 245, 0.3);
    border-color: #BFEAF5;
}

.detail-card h3 {
    margin-bottom: 1rem;
    color: #546E7A;
    /* Blue Grey for frozen theme */
}

/* Map Embed */
.map-container {
    margin-top: 1.5rem;
    width: 100%;
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(0.8) contrast(1.1);
    /* Slight filter to match theme */
}

/* Location Visual (Replaces Map Container) */
.location-visual {
    margin-top: 1.5rem;
    width: 100%;
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.location-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.detail-card:hover .location-image {
    transform: scale(1.1);
}

/* Map Button */
.btn-map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.5rem 1.2rem;
    /* Smaller padding */
    font-size: 0.9rem;
    /* Smaller font */
    background: linear-gradient(135deg, #E1F5FE 0%, #81D4FA 100%);
    color: #37474F;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(129, 212, 250, 0.4);
    font-family: var(--font-heading);
    touch-action: manipulation;
}

.btn-map svg {
    margin-right: 5px;
    /* Spacing for icon */
}

.btn-map:hover {
    background: linear-gradient(135deg, #B3E5FC 0%, #4FC3F7 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 195, 247, 0.6);
    color: #263238;
}

/* Entourage */
/* Entourage (Updated Structure) */
.entourage-list {
    display: flex;
    flex-direction: column;
    /* Removed gap to manually control spacing */
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
}

.entourage-group {
    text-align: center;
    margin-bottom: 1rem;
    /* Spacing between groups */
}

.entourage-group h3 {
    font-family: var(--font-body);
    /* Switched from Cinzel to allow mixed case */
    font-size: 1.7rem;
    color: var(--header-color);
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
}

.entourage-group h3::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--accent-color);
    margin: 0.5rem auto 0;
}

.role-subtitle {
    font-family: var(--font-script);
    font-size: 1.2rem;
    color: var(--accent-color);
    /* Frozen Blue */
    margin-bottom: 1.5rem;
}

.entourage-divider {
    text-align: center;
    margin: 0.5rem 0;
    /* Minimal margin */
    position: relative;
}

.entourage-divider::before,
.entourage-divider::after {
    content: "❄";
    /* Snowflake accent */
    color: #B3E5FC;
    font-size: 1.2rem;
    margin: 0 1rem;
    vertical-align: middle;
}

/* Grids */
.parents-grid,
.sponsors-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.sponsors-grid .sponsor-col:first-child {
    text-align: right;
}

.sponsors-grid .sponsor-col:last-child {
    text-align: left;
}

.party-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20rem;
    /* Match Sponsors grid gap */
    margin-top: 1rem;
    margin-bottom: 3rem;
}

.parents-col h4,
.party-col h4,
.bearer-item h4,
.role-item h4 {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    /* Slightly smaller for uppercase */
    color: #90A4AE;
    /* Soft Blue Grey */
    margin-bottom: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    /* Match reference format */
    letter-spacing: 2px;
}

.flower-girls {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.parents-col p,
.sponsor-col p,
.party-col p,
.secondary-group p:not(.role-subtitle),
.bearer-item p,
.flower-girls p,
.offertory-item p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.2rem;
    color: var(--text-color);
}

/* Special Roles (Best Man/Maid of Honor) */
.special-roles,
.bearers-grid,
.offertory-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    /* Increased gap for elegance */
    margin-bottom: 1rem;
}

.role-item,
.bearer-item,
.offertory-item,
.party-col {
    /* Added party-col for consistent centering */
    flex: 0 1 auto;
    /* Don't stretch */
    min-width: 200px;
    padding: 1rem 0;
    background: transparent;
    box-shadow: none;
    border: none;
    text-align: center;
}

.off-type {
    display: block;
    font-weight: bold;
    color: var(--header-color);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* Secondary Sponsors */
.secondary-group {
    margin-bottom: 1.5rem;
}

/* Responsive Entourage */
@media (max-width: 768px) {

    /* Entourage grids will inherit desktop layout (2 columns) as requested */
    /* Tighten layout to fit 2 columns on mobile */
    .parents-grid,
    .party-grid {
        gap: 0.8rem;
        /* Tightest gap for mobile */
    }

    .special-roles,
    .bearers-grid,
    .sponsors-grid,
    .offertory-grid {
        gap: 1.5rem;
        /* Reduced from 3rem */
    }

    /* Override min-width so items can sit side-by-side */
    .role-item,
    .bearer-item,
    .offertory-item,
    .party-col {
        min-width: 130px;
        /* Fit 2 on small screens */
        flex: 1;
        /* Allow sharing space */
    }

    /* Reduce font sizes for fitting */
    .parents-col p,
    .sponsor-col p,
    .party-col p,
    .bearer-item p,
    .role-item p,
    .offertory-item p,
    .secondary-group p,
    .flower-girls p {
        font-size: 0.85rem;
    }

    .parents-col h4,
    .party-col h4,
    .bearer-item h4,
    .role-item h4 {
        font-size: 0.8rem;
    }
}

/* Animations */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 1s ease-out;
}

.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

.reveal-left.visible,
.reveal-right.visible,
.reveal-up.visible {
    opacity: 1;
    transform: translate(0);
}

.reveal-delay-1 {
    transition-delay: 0.2s;
}

.reveal-delay-2 {
    transition-delay: 0.4s;
}

.reveal-delay-3 {
    transition-delay: 0.6s;
}

/* Schedule / Timeline */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: var(--accent-color);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.timeline-item {
    padding: 20px 30px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.7);
    /* Frosted Background */
    width: 48%;
    /* Increased width to reduce gap */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(179, 229, 252, 0.8);
    /* Icy Blue Border */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(179, 229, 252, 0.3);
    /* Icy Glow */
    margin-bottom: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: slideInBox 0.8s ease-out forwards;
    opacity: 0;
    /* Start hidden for animation */
    animation-play-state: paused;
}

.visible .timeline-item,
.timeline.visible .timeline-item {
    animation-play-state: running;
}

.timeline-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 25px rgba(98, 193, 229, 0.5);
    /* Stronger Glow */
    border-color: var(--accent-color);
}

@keyframes slideInBox {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered Animation Delays */
.timeline-item:nth-child(1) {
    animation-delay: 0.2s;
}

.timeline-item:nth-child(2) {
    animation-delay: 0.4s;
}

.timeline-item:nth-child(3) {
    animation-delay: 0.6s;
}

.timeline-item:nth-child(4) {
    animation-delay: 0.8s;
}

.timeline-item:nth-child(5) {
    animation-delay: 1.0s;
}

.timeline-item:nth-child(6) {
    animation-delay: 1.2s;
}

.timeline-item:nth-child(7) {
    animation-delay: 1.4s;
}

.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
    margin-right: auto;
}

.timeline-item:nth-child(even) {
    left: 52%;
    /* Reduced offset to match width and reduce gap */
    text-align: left;
    margin-left: 0;
    /* Removed auto margin to prevent double shift */
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 3px solid var(--accent-color);
    top: 25px;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 10px rgba(98, 193, 229, 0.8);
}

/* Fix dot position to align with center line */
.timeline-item:nth-child(odd)::after {
    right: calc(-4.17% - 10px);
    /* 2% gap (4.17% of 48%) + half dot width (10px) */
}

.timeline-item:nth-child(even)::after {
    left: calc(-4.17% - 10px);
}

.time {
    font-weight: bold;
    color: var(--header-color);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* 3D Carousel (Modern & Elegant) */
.carousel-container {
    perspective: 1200px;
    width: 100%;
    height: 480px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    margin: 3rem auto;
}

.carousel {
    width: 300px;
    height: 420px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.carousel-item:hover {
    box-shadow: 0 20px 40px rgba(98, 193, 229, 0.4);
    /* Accent glow */
    border-color: rgba(255, 255, 255, 0.8);
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Carousel Controls */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.carousel-control:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.prev-slide {
    left: 10px;
}

.next-slide {
    right: 10px;
}

/* Advanced Lightbox */
.lightbox {
    position: fixed;
    z-index: 20000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    z-index: 10020;
    /* Higher than image */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

@media (max-width: 768px) {
    .lightbox-btn {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
        background: rgba(0, 0, 0, 0.5);
        /* Stronger contrast */
        border: 1px solid rgba(255, 255, 255, 0.6);
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }
}

.close-lightbox {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    z-index: 10010;
    transition: color 0.3s;
    line-height: 1;
}

.close-lightbox:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.lightbox-content {
    max-width: 90vw;
    max-height: 70vh;
    border-radius: 4px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    object-fit: contain;
    background: transparent;
    z-index: 10015;
    min-width: 100px;
    min-height: 100px;
    color: white;
    font-size: 1.2rem;
    display: flex;
    /* Helps align alt text if needed, though img display is replaced content */
}

/* Thumbnails */
.lightbox-thumbnails {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    overflow-x: auto;
    z-index: 10020;
    /* Hide scrollbar */
    scrollbar-width: none;
}

.lightbox-thumbnails::-webkit-scrollbar {
    display: none;
}

.lightbox-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.lightbox-thumb:hover,
.lightbox-thumb.active {
    opacity: 1;
    transform: scale(1.1);
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}



/* Mobile Adjustments */
@media (max-width: 768px) {
    .carousel-container {
        height: 350px;
    }

    .carousel {
        width: 220px;
        height: 300px;
    }

    .carousel-control {
        display: none;
    }

    .lightbox-btn {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }
}

/* RSVP Form */
.rsvp-container {
    max-width: 900px;
    width: 95%;
}





/* FAQ Accordion */
/* FAQ Accordion */
.accordion-item {
    background: rgba(255, 255, 255, 0.4);
    /* Semi-transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    margin-bottom: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(31, 38, 135, 0.05);
    transition: all 0.3s ease;
    overflow: hidden;
}

.accordion-item:hover {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 25px rgba(179, 229, 252, 0.2);
    /* Icy Glow */
    border-color: #B3E5FC;
}

.accordion-header {
    background-color: transparent;
    color: var(--header-color);
    cursor: pointer;
    padding: 1.2rem 1.5rem;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.2rem;
    transition: 0.4s;
    font-weight: normal;
    font-family: var(--font-display);
    display: flex;
    justify-content: space-between;
    align-items: center;
    touch-action: manipulation;
}

.accordion-header:after {
    content: '+';
    color: var(--accent-color);
    font-weight: normal;
    font-size: 1.5rem;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.active.accordion-header:after {
    content: '+';
    /* Keep plus, rotate it */
    transform: rotate(45deg);
}

.accordion-content {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
    background-color: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.accordion-content p {
    padding: 1rem 0;
    color: var(--text-color);
    line-height: 1.6;
}

/* Fade In Animation Class */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
/* Responsive */

/* Tablet (Portrait & small laptops) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        width: 95%;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    .details-grid,
    .entourage-grid {
        gap: 1.5rem;
    }

    /* Timeline adjustments for tablet */
    /* Check if we need to switch to vertical mode earlier or just tighten it */
    .timeline::after {
        left: 50%;
    }

    .timeline-item {
        width: 50%;
        padding: 10px 30px;
    }
}

/* Mobile (Phones) */
@media (max-width: 768px) {
    body {
        font-size: var(--body-size);
    }

    .intro-names {
        font-size: 2.5rem;
        /* Better scaling */
    }

    .hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .countdown-container {
        gap: 1rem;
        padding: 1.5rem 1rem;
        width: 90%;
        /* Prevent overflow */
        margin-top: 1.5rem;
    }

    .countdown-item span:first-child {
        font-size: 1.8rem;
    }

    .countdown-item .label {
        font-size: 0.7rem;
    }

    .section-title {
        font-size: 2rem;
    }

    /* Timeline Mobile View */
    .timeline::after {
        left: 31px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    .timeline-item::after,
    .timeline-item:nth-child(odd)::after,
    .timeline-item:nth-child(even)::after {
        left: 23px !important;
        right: auto !important;
    }

    .timeline-item:nth-child(even) {
        left: 0;
    }

    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        text-align: left;
    }

    /* Entourage Mobile */
    .entourage-grid {
        grid-template-columns: 1fr;
        /* Single column for better readability */
        gap: 2.5rem;
    }

    .detail-card {
        padding: 1.5rem;
    }


}

/* --- Navigation Bar --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001;
    transition: all 0.4s ease;
    padding: 1.5rem 0;
    padding-top: max(1.5rem, env(safe-area-inset-top));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    background: transparent;
}

.navbar-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.9);
    /* #71c7ec with opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 0.8rem 0;
}

/* Navbar Active (Mobile Menu Open) */
.navbar.nav-active {
    background: rgba(255, 255, 255, 1);
    /* Solid white */
    padding: 1.5rem 0;
    /* Keep original padding or match scrolled? Let's keep original to avoid jump, or match scrolled if we want compact. User asked for color change. */
}

/* Ensure logo and text colors change when nav is active */
.navbar.nav-active .nav-logo {
    color: var(--header-color);
    text-shadow: none;
}

.navbar.nav-active .bar {
    background-color: var(--header-color);
    box-shadow: none;
}

.nav-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    /* Initial color on hero image */
    text-decoration: none;
    transition: color 0.3s ease;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.navbar.scrolled .nav-logo {
    color: var(--header-color);
    text-shadow: none;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s ease;
    position: relative;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #62c1e5;
    /* Cyan Blue */
    transition: width 0.3s ease;
}

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

.navbar.scrolled .nav-link {
    color: var(--text-color);
    text-shadow: none;
}

.btn-nav-rsvp {
    padding: 0.5rem 1.2rem;
    border: 1px solid #fff;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-nav-rsvp:hover {
    background: #fff;
    color: var(--text-color);
}

.navbar.scrolled .btn-nav-rsvp {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.navbar.scrolled .btn-nav-rsvp:hover {
    background: var(--accent-color);
    color: #fff;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    height: 3px;
    width: 25px;
    background-color: #fff;
    margin: 3px 0;
    transition: 0.4s;
    border-radius: 2px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.navbar.scrolled .bar {
    background-color: var(--header-color);
    box-shadow: none;
}

/* Mobile Nav Styles */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100vh;
        /* Full screen height */
        background: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        /* Start from top to allow scrolling */
        padding: 4rem 0 10rem 0;
        /* Extra bottom padding to ensure scroll access */
        gap: 3rem;
        /* Increased gap */
        overflow-y: auto;
        /* Enable vertical scrolling */
        clip-path: circle(0px at 90% -10%);
        /* Start hidden */
        transition: all 0.5s ease-in-out;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .nav-links.active {
        clip-path: circle(1500px at 90% -10%);
        /* Increased radius for full screen */
    }

    .nav-link {
        color: var(--text-color);
        /* Always dark in mobile menu */
        font-size: 1.5rem;
        /* Larger font for better touch targets */
        text-shadow: none;
        padding: 1rem 2rem;
        /* Increased padding */
    }

    .navbar.scrolled .nav-link {
        color: var(--text-color);
    }

    .btn-nav-rsvp {
        border-color: var(--accent-color);
        color: var(--accent-color);
    }

    /* Hamburger Animation */
    .menu-toggle.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

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

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Attire Guide Styles */
.attire-guide {
    background-color: var(--card-bg);
}

.attire-intro {
    max-width: 700px;
    margin: 0 auto 2rem;
    font-size: 1.1rem;
    color: var(--text-color);
}

.attire-palette {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 3rem;
}

.petal {
    width: 40px;
    height: 40px;
    border-radius: 50% 50% 0 50%;
    transform: rotate(45deg);
    margin: 0 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.attire-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto 4rem;
    text-align: left;
}

.attire-block.reverse {
    flex-direction: row-reverse;
    text-align: right;
}

.attire-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attire-visual img {
    max-width: 100%;
    height: 350px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

.attire-details {
    flex: 1;
}

.attire-details h3 {
    font-family: var(--font-heading);
    color: var(--header-color);
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.attire-details h4 {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-weight: bold;
    margin-top: 1.5rem;
}

.attire-details p {
    margin-bottom: 0.5rem;
    color: #546E7A;
    /* Blue Grey for text */
}

.attire-note {
    background-color: #E3F2FD;
    /* Light Icy Blue */
    padding: 2rem;
    margin-top: 3rem;
    border-radius: 8px;
    font-style: italic;
    color: var(--header-color);
    border: 1px solid #B3E5FC;
}

/* Mobile Responsiveness for Attire Guide */
@media (max-width: 768px) {

    .attire-block,
    .attire-block.reverse {
        flex-direction: column;
        text-align: center;
    }

    .attire-visual img {
        height: auto;
        max-height: 250px;
        margin-bottom: 1.5rem;
    }
}

/* Note on Gifts Section */
/* Note on Gifts Section */
.gifts-content {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, rgba(225, 245, 254, 0.9) 0%, rgba(179, 229, 252, 0.7) 100%);
    /* Light Blue Gradient */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05), inset 0 0 20px rgba(255, 255, 255, 0.5);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* Decorative corner accents */
.gifts-content::before,
.gifts-content::after {
    content: '❄';
    position: absolute;
    font-size: 2rem;
    color: #B3E5FC;
    opacity: 0.6;
    pointer-events: none;
}

.gifts-content::before {
    top: 1rem;
    left: 1rem;
    transform: rotate(-15deg);
}

.gifts-content::after {
    bottom: 1rem;
    right: 1rem;
    transform: rotate(15deg);
}

.script-title {
    font-family: var(--font-script);
    font-size: 4rem;
    color: var(--header-color);
    margin-bottom: 2rem;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
}

.gifts-text {
    font-size: 1.15rem;
    line-height: 2;
    color: var(--text-color);
    font-family: var(--font-body);
    font-weight: 400;
}

/* Mobile Adjustments for Gifts */
@media (max-width: 768px) {
    .gifts-content {
        padding: 3rem 1.5rem;
    }

    .script-title {
        font-size: 3rem;
    }

    .gifts-text {
        font-size: 1rem;
        line-height: 1.8;
    }
}

/* Footer Safe Area */
.footer {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* iOS Scroll Lock (used by JS for lightbox/intro) */
.body-scroll-lock {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .snowflake {
        display: none;
    }

    html {
        scroll-behavior: auto;
    }

    .hero::after {
        position: absolute;
    }
}

/* Music Toggle Button */
.music-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
    transition: all 0.3s ease;
    color: var(--header-color);
    touch-action: manipulation;
}

.music-toggle:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.4);
}

.music-toggle svg {
    width: 28px;
    height: 28px;
    fill: var(--header-color);
}

/* Playing Animation */
.music-toggle.playing {
    animation: musicPulse 2s infinite;
    background: rgba(179, 229, 252, 0.6);
    /* Light Blue Active State */
}

@keyframes musicPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(179, 229, 252, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(179, 229, 252, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(179, 229, 252, 0);
    }
}

/* Mobile Music Button Sizing */
@media (max-width: 768px) {
    .music-toggle {
        width: 45px;
        height: 45px;
        bottom: max(1.5rem, env(safe-area-inset-bottom));
        right: 1.5rem;
    }

    .music-toggle svg {
        width: 20px;
        height: 20px;
    }
}