:root {
    --primary-purple: #5a3e82;
    --gold: #c5a028;
    --text-dark: #2d2d2d;
    --glass: rgba(255, 255, 255, 0.75);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Source Sans 3", sans-serif;
    font-weight: 500;
    background-color: #ffffff;
    color: var(--text-dark);
    line-height: 1.6;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

.page-wrapper {
    background: radial-gradient(circle at top right, #f3eaff 0%, #ffffff 60%);
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}

/* THE ARCH FRAME: Sharp bottom, round top */
.main-frame {
    max-width: 680px;
    width: 100%;
    border-left: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
    border-top: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    border-radius: 340px 340px 0 0; /* Arched Top, Sharp Bottom */
    background: var(--glass);
    backdrop-filter: blur(12px);
    padding-bottom: 60px;
}

.flower-accent {
    position: absolute;
    width: 180px; /* Slightly larger for better visibility */
    height: auto;
    z-index: 1; 
    opacity: 0.8;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); /* Adds subtle depth */
}

/* Specifically tucking them into the arches */
.flower-accent.top-left {
    top: 10px;
    left: 0px;
}

.flower-accent.top-right {
    top: 10px;
    right: 20px;
}

/* Match the flower color to your theme dynamically */
.flower-accent svg path {
    fill: var(--primary-purple); /* Or use --gold depending on your preference */
}

section { 
    padding: 90px 40px; 
    text-align: center; 
}

.hero-content {
    position: relative; 
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 20px;
}

.hero-bg-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: auto;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
    color: var(--primary-purple);
}

.hero-bg-image svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Keep text on top */
.couple-names, .sub-header, .date-info {
    position: relative;
    z-index: 2;
}

.couple-names {
    margin-top: 60px; 
    margin-bottom: 80px;
    /* Adding a subtle text-shadow helps text pop if the SVG is busy */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.hero-bg-image.reveal {
    transform: translate(-50%, -50%) scale(1.1);
    transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 2s ease-out;
}

.hero-bg-image.reveal.active {
    transform: translate(-50%, -50%) scale(1);
}

.greeting-arabic {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    margin-bottom: 20px;
    width: 100%;
}

.greeting-arabic img {
    max-width: 60%; 
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}



/* INDIVIDUAL ITEM REVEAL */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.2, 1, 0.3, 1), 
                transform 2.5s cubic-bezier(0.2, 1, 0.3, 1);
    will-change: transform, opacity;
}

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

/* TYPOGRAPHY */
.couple-names { 
    font-family: "Luxurious Script", cursive; 
    font-weight: 500; 
    font-size: 5.5rem !important; 
    color: var(--primary-purple); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 0.8;
    gap: 10px;
    position: relative;
    z-index: 2;

}

.couple-names span { display: block; }

.couple-full-name { 
    font-family: "Luxurious Script", cursive; 
    font-weight: 300; 
    font-size: 3.2rem; 
    color: var(--primary-purple); 
}

.parents-names { 
    font-weight: 800; 
    font-size: 1.3rem; 
    letter-spacing: 1.5px; 
    margin: 30px 0; 
    text-transform: uppercase; 
}

.sub-header { 
    letter-spacing: 10px; 
    text-transform: uppercase; 
    font-size: 0.8rem; 
    color: var(--primary-purple); 
    margin-bottom: 25px;
}

.date-info { 
    font-size: 1.1rem; 
    margin: 30px 0; 
    border-top: 1px solid var(--gold); 
    border-bottom: 1px solid var(--gold); 
    padding: 12px 20px; 
    display: inline-block;
}

.quran-verse { 
    max-width: 400px; 
    margin: 30px auto; 
    font-style: italic; 
    font-size: 1rem; 
    color: #555; 
}

.section-title { 
    letter-spacing: 6px; 
    font-size: 1.4rem; 
    margin-bottom: 40px; 
    font-weight: 400; 
}

/* CARDS */
.details-container { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.info-card { 
    background: white;
    display: flex;
    flex-direction: column;
    gap: 20px; 
    padding: 30px; 
    border-radius: 12px; 
    max-width: 460px; 
    border: 1px solid rgba(212, 175, 55, 0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.card-label { font-weight: 700; color: var(--gold); letter-spacing: 2px; margin-bottom: 8px; }

/* BUTTONS */
.btn, .btn-submit { 
    background: var(--primary-purple); 
    color: white; 
    padding: 12px 30px; 
    text-decoration: none; 
    border-radius: 30px; 
    font-weight: 600; 
    border: none; 
    cursor: pointer;
    transition: 0.3s;
}

.btn:hover { background: var(--gold); }

/* MODAL */
.modal { 
    display: none; 
    position: fixed; 
    inset: 0; 
    z-index: 10000; 
    background: rgba(90, 62, 130, 0.5); 
    backdrop-filter: blur(8px); 
    align-items: center; 
    justify-content: center; 
}

.modal-content { 
    background: white; 
    padding: 40px; 
    border-radius: 20px; 
    width: 90%; 
    max-width: 400px; 
    text-align: center; 
    position: relative;
    animation: slideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideIn { 
    from { 
        transform: translateY(50px); 
        opacity: 0; 
    } 
}

.close-btn { 
    position: absolute; 
    right: 20px; 
    top: 15px; 
    font-size: 24px; 
    cursor: pointer; 
    color: #bbb; 
}

input, select { 
    width: 100%; 
    padding: 12px; 
    margin: 8px 0; 
    border: 1px solid #eee; 
    border-radius: 8px; 
    font-family: inherit; 
}

/* MUSIC */
#music-container { 
    position: fixed; 
    top: 20px; 
    right: 20px; 
    z-index: 9999; 
}

#music-toggle { 
    background: white; 
    border: 1px solid var(--gold); 
    padding: 8px 15px; 
    border-radius: 20px; 
    font-size: 0.7rem; 
    font-weight: 700; 
    cursor: pointer; 
}

/* MOBILE */
@media (max-width: 600px) {
    .main-frame { border-radius: 200px 200px 0 0; }
    .couple-full-name { 
        font-size: 2.5rem; 
        font-weight: 400;
    }

    .flower-accent {
        position: absolute;
        width: 180px; /* Slightly larger for better visibility */
        height: auto;
        z-index: 1; 
        opacity: 0.8;
        pointer-events: none;
        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); /* Adds subtle depth */
    }

    .flower-accent.top-left {
        top: -30px;
        left: -30px;
    }

    .flower-accent.top-right {
        top: -30px;
        right: -10px;
    }

    .greeting-arabic img {
    max-width: 70% !important;
    height: auto;
    display: block;
    }
}