/* ═══════════════════════════════════════════════
   Karim & Yasmine — Wedding Invitation
   ═══════════════════════════════════════════════ */

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

:root {
    --bg:   #FAF6F0;
    --text: #3B3530;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.1em;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

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

/* ── Container ── */
.invitation {
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
}

/* ── Full-width images ── */
.img-full { width: 100%; }

/* ── Monogram ── */
.monogram {
    padding: 2rem 0 1.2rem;
    display: flex;
    justify-content: center;
}
.monogram__img { width: 40%; max-width: 200px; }

/* ── Frame pieces: seamless stacking ── */
.frame-top { position: relative; z-index: 2; }
.frame-5 { margin-left: 1px; margin-top: -1px; }
.frame-6 { margin-top: -2px; }

/* ── Zero-height overlay: content floats above vines ── */
.vine-overlay {
    height: 0;
    overflow: visible;
    position: relative;
    z-index: 3;
}

/* ═══════════════════════════════════════════════
   FRAME BODY (4.png as sides)
   ═══════════════════════════════════════════════ */
.frame-4 {
    background: url(assets/web/frame-sides.png) top center / 100% 100% no-repeat;
    padding: 1.5rem 0;
    margin-top: -50%;
    position: relative;
    z-index: 1;
}

.frame-text {
    padding: 0 20%;
}

/* ═══════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════ */
.body-text {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 2;
    text-transform: uppercase;
}

.script-text {
    font-style: italic;
    font-weight: 300;
    font-size: 1.6rem;
    letter-spacing: 0.06em;
    margin-top: 0.2rem;
}

.event-date {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.event-name {
    font-family: 'Pinyon Script', cursive;
    font-weight: 400;
    font-size: clamp(2rem, 6vw, 2.8rem);
    letter-spacing: 0.03em;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    color: #4A6741;
}

.venue { font-weight: 600; letter-spacing: 0.18em; }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.t-small { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── Dates ── */
.dates {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 0 0.5rem;
    position: relative;
}

.date-num {
    font-size: clamp(3.5rem, 12vw, 5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0.08em;
}

/* Decorative elements around dates */
.dates__heart {
    width: 8%;
    margin-bottom: 0.3rem;
}
.dates__flowers-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 23%;
}
.dates__flower-big {
    position: absolute;
    left: -30%;
    top: 40%;
    width: 28%;
}
.dates__flowers-right {
    position: absolute;
    right: -24%;
    bottom: 0;
    width: 20%;
}

/* ── Info row ── */
.info-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3em;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 2.2;
    margin-top: 0.5rem;
}

.info-sep { opacity: 0.4; }

/* ═══════════════════════════════════════════════
   INLINE DECORATIVE IMAGES
   ═══════════════════════════════════════════════ */
.decor-inline { margin: 1rem auto; }
.decor-two-flowers { width: 30%; margin: 0.8rem auto; }

.july-line {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #C4756E;
    margin: 0.3rem 0;
}
.july-wing {
    width: 1.6em;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.4em;
    color: var(--terracotta);
    transform: scaleX(-1);
}
.july-wing--right {
    transform: scaleX(1);
}
.decor-heart-doves { width: 60%; margin: 1.5rem auto; }

/* ═══════════════════════════════════════════════
   DECORATIVE ROW (pink birds + flowers)
   ═══════════════════════════════════════════════ */
.decor-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 4.5rem 5%;
    margin-top: -3%;
    position: relative;
    z-index: 3;
}

.decor-row__birds   { width: 40%; }
.decor-row__flower-sm { width: 8%; margin-left: -1rem; }
.decor-row__flowers { width: 14%; margin-left: 70px; }
.decor-row__vine-flower { width: 15%; margin-right: -3rem; }

/* ═══════════════════════════════════════════════
   PARENTS SECTION
   ═══════════════════════════════════════════════ */
.parents-section {
    padding: 1rem 10%;
    position: relative;
    z-index: 2;
}
.parents-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.8rem;
}
.parent-col { text-align: center; }
.parent-col .body-text { font-size: 0.85rem; line-height: 1.6; }
.parent-sep {
    font-style: italic;
    font-weight: 300;
    font-size: 1.2rem;
    padding-top: 0.3rem;
    color: #C4756E;
}
.parents-flower-tr {
    position: absolute;
    right: 5%;
    top: -10%;
    width: 10%;
}

/* ═══════════════════════════════════════════════
   COUPLE SECTION (KARIM & YASMINE)
   ═══════════════════════════════════════════════ */
.section-couple {
    position: relative;
    padding: 1rem 15%;
    margin-top: -12%;
}

.couple-names {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0;
}

.couple-name {
    font-size: clamp(2.2rem, 8vw, 3.2rem);
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.15;
    text-transform: uppercase;
    color: #C4756E;
}

.couple-name--yasmine { position: relative; }
.yasmine-flower {
    position: absolute;
    right: -25%;
    top: 10%;
    width: 20%;
    display: inline-block;
}

.couple-and {
    font-size: 1.1rem;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.1em;
    color: #C4756E;
}

.parents-pink-bird {
    position: absolute;
    right: 4%;
    top: 40%;
    width: 18%;
}

.frame-6-wrap {
    position: relative;
}
.couple-blue-bird {
    position: absolute;
    left: -1%;
    top: 35px;
    width: 30%;
    z-index: 2;
}

/* ═══════════════════════════════════════════════
   BEACH DAY SECTION
   ═══════════════════════════════════════════════ */
.section-beach {
    position: relative;
    padding: 0.5rem 18%;
    margin-top: -70%;
    z-index: 1;
}
.section-beach .body-text,
.section-beach .event-name { margin-bottom: 0; }
.section-beach .venue { margin-bottom: 0; }

.beach-bottle {
    width: 10%;
    margin: 0 auto 0.3rem;
}

.beach-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin: 0.5rem 0;
}

.beach-sun      { width: 28%; }
.beach-starfish { width: 14%; }

.beach-flower-big {
    position: absolute;
    right: 5px;
    top: 40%;
    width: 20%;
    transform: rotate(-90deg);
}

/* ═══════════════════════════════════════════════
   FLANKING BIRDS (around "We are coming together")
   ═══════════════════════════════════════════════ */
.text-with-birds {
    position: relative;
    padding: 0 5%;
}
.bird-tr, .bird-bl {
    position: absolute;
    width: 18%;
}
.bird-tr { right: -12%; top: -30%; transform: scale(-1); }
.bird-bl { left: -5%; bottom: -30%; transform: scale(-1); }

/* ── Frame bottom (7.png) tight ── */
.frame-bottom { margin-top: -2px; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 480px) {
    .frame-text { padding: 0 17%; }
    .body-text { font-size: 0.75rem; }
    .event-date { font-size: 0.7rem; }
    .event-name { font-size: clamp(1.6rem, 5vw, 2rem); }
    .script-text { font-size: 1.2rem; }
    .t-small { font-size: 0.6rem; }

    /* Decor row: smaller on mobile */
    .decor-row { gap: 0.6rem; padding: 2.5rem 5%; }
    .decor-row__birds { width: 35%; margin-left: -10%; }
    .decor-row__flowers { width: 10%; margin-left: 30px; }
    .decor-row__vine-flower { width: 12%; }

    /* Parents section: more inner padding so text clears vines */
    .parents-section { padding: 0.5rem 18%; }
    .parent-col .body-text { font-size: 0.6rem !important; line-height: 1.5; }
    .parent-sep { font-size: 0.8rem; }
    .parents-pink-bird { width: 12%; right: 1%; }

    /* Couple section */
    .section-couple { padding: 0.5rem 10%; margin-top: -10%; }
    .couple-name { font-size: clamp(1.8rem, 7vw, 2.5rem); }
    .couple-and { font-size: 0.9rem; }
    .couple-names { margin: 0.5rem 0; }
    .yasmine-flower { width: 15%; right: -20%; }

    /* Beach section: use clamp so it scales between mobile sizes */
    .section-beach { margin-top: clamp(-380px, -101%, -280px); padding: 0.3rem 16%; }
    .beach-sun { width: 22%; }
    .beach-bottle { width: 8%; }
    .beach-flower-big { width: 16%; }
    .beach-title-row { gap: 0.4rem; }

    /* Blue bird smaller */
    .couple-blue-bird { width: 24%; }

    /* Birds smaller */
    .bird-tr, .bird-bl { width: 14%; }
}

@media (min-width: 601px) {
    .invitation { margin-top: 2rem; margin-bottom: 2rem; }
}

/* ═══════════════════════════════════════════════
   SCROLL ANIMATIONS
   ═══════════════════════════════════════════════ */
.fade-in {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}