/* ============================================================
   CHARBEL & ALINE — WEDDING INVITATION
   Reference design (AreOne) — green #3F432A on beige #F9F5E9
   ============================================================ */

:root {
    --ink: #3F432A;
    --paper: #F9F5E9;
    --card: #FFFDF6;
    --leaf: #9CAF88;
    --line: rgba(63,67,42,.35);
    --decline: #A3543F;
    --font-script: 'Pinyon Script', cursive;
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Jost', sans-serif;
}

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

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: #DDDCCB;
    font-weight: 300;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit
}

/* ============================================================
   ENVELOPE OVERLAY
   ============================================================ */
#envelope-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,#FDFBF4,var(--paper));
    transition: opacity 1s ease .9s, visibility 1s .9s;
}

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

.wc {
    position: absolute;
    width: 62vmin;
    height: 62vmin;
    border-radius: 50%;
    filter: blur(46px);
    pointer-events: none;
    background: radial-gradient(circle at 42% 40%, rgba(156,175,136,.45), rgba(201,212,187,.3) 55%, transparent 76%);
}

.wash-tl {
    top: -18vmin;
    left: -16vmin
}

.wash-br {
    bottom: -20vmin;
    right: -16vmin
}

.ov-leaf {
    position: absolute;
    pointer-events: none
}

.ov-leaf-tl {
    width: min(30vmin,170px);
    top: -30px;
    left: -26px;
    transform: rotate(160deg)
}

.ov-leaf-br {
    width: min(50vmin,170px);
    bottom: -80px;
    right: -24px;
    transform: rotate(-12deg)
}

.env-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px;
    position: relative;
    z-index: 2;
}

.mono-badge {
    width: 64px;
    height: 88px;
    border: 1.5px solid var(--ink);
    border-radius: 50%/38%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 6px;
}

    .mono-badge span {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 1.5rem;
        color: var(--ink)
    }

    .mono-badge i {
        width: 1px;
        height: 30px;
        background: var(--ink);
        transform: rotate(14deg)
    }

.greet-script {
    font-family: var(--font-script);
    font-size: clamp(2.4rem,9vw,3.2rem);
    color: var(--ink);
    line-height: 1.1;
}

.greet-sub {
    font-size: .95rem;
    color: var(--ink);
    opacity: .8;
    margin-bottom: 18px
}

.envelope {
    position: relative;
    width: min(86vw,400px);
    aspect-ratio: 10/6.6;
    cursor: pointer;
    outline-offset: 10px;
    filter: drop-shadow(0 26px 34px rgba(63,67,42,.25));
    transition: transform .4s ease;
    animation: envFloat 5s ease-in-out infinite;
    perspective: 1100px;
}

    .envelope.open {
        animation-play-state: paused
    }

.env-card, .env-flap {
    will-change: transform, opacity
}

.envelope:hover {
    transform: translateY(-4px)
}

.envelope:focus-visible {
    outline: 2px solid var(--ink)
}

@keyframes envFloat {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

.env-body {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(170deg,#F7F2E4,#EFE7D5);
}

.env-liner {
    position: absolute;
    inset: 0;
    border-radius: 8px 8px 0 0;
    clip-path: polygon(0 0,100% 0,50% 62%);
    background: linear-gradient(170deg,#F7F3E7,#E7E2D2 75%);
    opacity: 0;
    transition: opacity .3s .45s;
}

.envelope.open .env-liner {
    opacity: 1
}

.env-card {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 24%;
    bottom: 8%;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.7), transparent 60%), linear-gradient(175deg,#FDFCF6,var(--paper));
    border-radius: 3px;
    box-shadow: 0 -10px 26px rgba(63,67,42,.18), inset 0 0 0 1px rgba(63,67,42,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(4%);
    opacity: 0;
    z-index: 2; /* envelope fully behind the card */
}

.envelope.open .env-card {
    animation: cardPull 1.5s cubic-bezier(.3,.05,.15,1) 1.15s forwards;
}

@keyframes cardPull {
    0% {
        opacity: 0;
        transform: translate3d(0,4%,0)
    }

    12% {
        opacity: 1
    }

    100% {
        opacity: 1;
        transform: translate3d(0,-150%,0)
    }
}

#envelope-overlay.opening .mono-badge,
#envelope-overlay.opening .greet-script,
#envelope-overlay.opening .greet-sub,
#envelope-overlay.opening .tap-hint {
    opacity: 0;
    transition: opacity .6s ease
}

.card-frame {
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(63,67,42,.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    padding: 10px;
}

    .card-frame::before {
        content: "";
        position: absolute;
        inset: 4px;
        border: 1px solid rgba(63,67,42,.16);
        pointer-events: none
    }

.cf-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--ink);
    border-style: solid;
    border-width: 0;
    opacity: .75
}

    .cf-corner.tl {
        top: -4px;
        left: -4px;
        border-top-width: 2px;
        border-left-width: 2px
    }

    .cf-corner.tr {
        top: -4px;
        right: -4px;
        border-top-width: 2px;
        border-right-width: 2px
    }

    .cf-corner.bl {
        bottom: -4px;
        left: -4px;
        border-bottom-width: 2px;
        border-left-width: 2px
    }

    .cf-corner.br {
        bottom: -4px;
        right: -4px;
        border-bottom-width: 2px;
        border-right-width: 2px
    }

.card-eyebrow {
    font-size: .55rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    text-indent: .32em;
    color: var(--ink);
    opacity: .65
}

.card-monogram {
    font-family: var(--font-script);
    font-size: clamp(2.4rem,8vw,3rem);
    line-height: 1;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: .12em;
    text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

    .card-monogram em {
        font-size: .45em;
        color: var(--leaf);
        font-style: normal
    }

.card-names {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: .9rem;
    letter-spacing: .3em;
    text-indent: .3em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: .9
}

.card-date {
    font-size: .64rem;
    letter-spacing: .3em;
    text-indent: .3em;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px
}

    .card-date i {
        font-style: normal;
        font-size: .5rem;
        color: var(--leaf)
    }

.env-pocket {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    z-index: 3;
    clip-path: polygon(0 0,0 100%,100% 100%,100% 0,99.6% 0,50% 60%,.4% 0);
    background: linear-gradient(to bottom right, transparent 49.7%, rgba(63,67,42,.10) 50%, transparent 50.5%), linear-gradient(to bottom left, transparent 49.7%, rgba(63,67,42,.10) 50%, transparent 50.5%), linear-gradient(180deg,#F7F2E4,#EAE1CC);
}

.env-flap {
    position: absolute;
    inset: 0;
    z-index: 4;
    clip-path: polygon(0 0,100% 0,50% 62%);
    background: linear-gradient(180deg,#F8F3E6 20%,#ECE4D0);
    filter: drop-shadow(0 5px 5px rgba(63,67,42,.14));
    transform-origin: top center;
    transition: transform 1.2s cubic-bezier(.5,.05,.2,1), z-index 0s .55s;
    backface-visibility: visible;
}

.envelope.open .env-flap {
    transform: rotateX(-180deg);
    z-index: 1;
    /*opacity: 0;*/
}

.env-seal {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 60%;
    width: 86px;
    height: 86px;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 5px 12px rgba(63,67,42,.4)); /* static — cheap */
    transition: transform .45s ease, opacity .45s ease;
    animation: sealPulse 3.2s ease-in-out infinite;
}

    .env-seal img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.envelope.open .env-seal {
    transform: translate(-50%,-50%) scale(.35);
    opacity: 0;
    animation: none
}

@keyframes sealPulse {
    0%,100% {
        transform: translate(-50%,-50%) scale(1)
    }

    50% {
        transform: translate(-50%,-50%) scale(1.045)
    }
}

.tap-hint {
    font-size: .7rem;
    letter-spacing: .5em;
    text-transform: uppercase;
    text-indent: .5em;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 16px;
    animation: pulse 2.2s ease-in-out infinite;
    margin-top: 10px;
}

    .tap-hint::before, .tap-hint::after {
        content: "";
        width: 44px;
        height: 1px;
        background: var(--line)
    }

@keyframes pulse {
    0%,100% {
        opacity: .45
    }

    50% {
        opacity: 1
    }
}

/* ============================================================
   MUSIC BUTTON
   ============================================================ */
.music-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(249,245,233,.95);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(63,67,42,.2);
}

.icon-music {
    width: 22px;
    height: 22px;
    stroke: var(--ink);
    fill: var(--ink)
}

.music-btn.muted .icon-music {
    opacity: .35
}

/* ============================================================
   MAIN CARD
   ============================================================ */
main {
    max-width: 560px;
    margin: 34px auto 60px;
    background: var(--paper);
    border-radius: 6px;
    box-shadow: 0 26px 70px rgba(63,67,42,.3);
    overflow: hidden;
    position: relative;
}

@media(max-width:600px) {
    main {
        margin: 0 auto;
        border-radius: 0;
        box-shadow: none
    }
}

.video-section video {
    width: 100%;
    display: block
}

.leaf {
    position: absolute;
    pointer-events: none;
    z-index: 0
}

/* ============================================================
   PART 1 — HERO
   ============================================================ */
.hero {
    position: relative;
    text-align: center;
    padding: 120px 26px 44px;
    z-index: 1
}

.leaf-top {
    top: -80px;
    left: -8px;
    width: 105%;
    max-width: none;
    z-index: 2
}

.hero-verse {
    position: relative;
    z-index: 3;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: .98rem;
    letter-spacing: .05em;
    color: var(--ink);
    max-width: 300px;
    margin: 30px auto 6px;
    line-height: 1.75;
    margin-top:0 !important;
}

.hero-verse-ref {
    position: relative;
    z-index: 3;
    font-size: .6rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    opacity: .65;
    margin-bottom: 30px
}

.hero-mono {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
    position: relative;
    z-index: 3
}

    .hero-mono span {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 3.4rem;
        line-height: 1;
        color: var(--ink)
    }

    .hero-mono i {
        width: 1.5px;
        height: 56px;
        background: var(--ink)
    }

.hero-our {
    font-size: .72rem;
    letter-spacing: .5em;
    text-indent: .5em;
    text-transform: uppercase;
    opacity: .85;
    padding-bottom: 14px;
    margin-bottom: 28px;
    position: relative;
    z-index: 3;
}

    .hero-our::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 54px;
        height: 1px;
        background: var(--leaf)
    }

.hero-photo {
    margin: 0 -26px 34px;
    position: relative;
    z-index: 1
}

    .hero-photo img {
        width: 100%;
        display: block
    }

.invite-copy {
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 2;
    max-width: 340px;
    margin: 0 auto 34px;
    position: relative;
    z-index: 1;
}

.leaf-parents-right {
    right: -47px;
    width: 130px;
    transform: rotate(-8deg);
    margin-top: 68px;
    opacity: .95;
}

.parents-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 420px;
    margin: 0 auto 44px;
    position: relative;
    z-index: 1;
}

    .parents-grid h4 {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: .66rem;
        letter-spacing: .22em;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .parents-grid p {
        font-size: 1rem;
        line-height: 1.7;
        white-space: pre-line;
        font-weight: bold;
    }

.leaf-names-left {
    left: -48px;
    width: 120px;
    transform: rotate(20deg) scaleX(-1);
    margin-top: 10px;
    opacity: .95;
}

.couple-names {
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .02em;
    position: relative;
    z-index: 1
}

.script-name {
    font-family: var(--font-script);
    font-size: clamp(3.2rem,13vw,4.8rem);
    line-height: 1.1;
    color: var(--ink)
}

.amp {
    font-family: var(--font-script);
    font-size: clamp(1.6rem,6vw,2.2rem);
    color: var(--ink);
    margin: -.12em 0;
    opacity: .85
}

.honor-line {
    margin: 26px auto 40px;
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 2;
    position: relative;
    z-index: 1;
}

.db-month {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: .5em;
    text-indent: .5em;
    text-transform: uppercase;
    margin-bottom: 12px
}

.hero-dateblock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px
}

.db-side {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: .88rem;
    letter-spacing: .24em;
    text-indent: .24em;
    text-transform: uppercase;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 8px 0;
    min-width: 96px;
}

.db-num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--ink)
}

.mini-orn {
    display: block;
    width: 170px;
    margin: 36px auto 0
}

.closing .mini-orn {
    margin: 0 auto
}

/* ============================================================
   COUNTDOWN
   ============================================================ */
.countdown {
    padding: 26px 26px 40px
}

.count-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    max-width: 420px;
    margin: 0 auto
}

.count-cell {
    background: var(--card);
    border: 1px solid rgba(63,67,42,.2);
    border-radius: 4px;
    padding: 14px 4px 10px;
    text-align: center;
}

.count-num {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem,6vw,2rem);
    color: var(--ink);
    line-height: 1
}

.count-label {
    display: block;
    margin-top: 5px;
    font-size: .58rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .7
}

/* ============================================================
   PART 2 — EVENTS
   ============================================================ */
.event {
    text-align: center;
    padding: 34px 26px 8px;
    position: relative;
    z-index: 1
}

.ev-time {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: .24em;
    text-indent: .24em;
    margin-bottom: 6px
}

.ev-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: .26em;
    text-indent: .26em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ev-place {
    font-size: .82rem;
    letter-spacing: .12em;
    opacity: .85;
    margin-bottom: 18px;
    line-height: 1.8
}

.btn-view {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: .68rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    text-indent: .28em;
    color: var(--paper);
    background: var(--ink);
    padding: 11px 30px;
    border-radius: 6px;
    border: 1px solid var(--ink);
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-view::before {
        content: "";
        position: absolute;
        top: 0;
        left: -70%;
        width: 45%;
        height: 100%;
        background: linear-gradient(105deg,transparent,rgba(255,255,255,.3),transparent);
        transform: skewX(-18deg);
        transition: left .7s ease;
    }

    .btn-view:hover::before {
        left: 130%
    }

    .btn-view:hover {
        background: #2E311E
    }

    .btn-view.ghost {
        background: transparent;
        color: var(--ink)
    }

        .btn-view.ghost:hover {
            background: var(--ink);
            color: var(--paper)
        }

    .btn-view.wide {
        width: 100%;
        max-width: 320px;
        border: none
    }

.heart-div {
    display: flex;
    justify-content: center;
    padding: 26px 26px 0
}

    .heart-div img {
        width: min(74%,300px);
        opacity: 0;
        transform: scaleX(.6);
        transition: opacity .9s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
    }

    .heart-div.in img {
        opacity: 1;
        transform: scaleX(1)
    }

/* ============================================================
   ITINERARY — torn watercolor panel
   ============================================================ */
.sec-cap {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .26em;
    text-indent: .26em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink);
}

    .sec-cap.left {
        text-indent: 0;
        letter-spacing: .2em;
        line-height: 1.5
    }

.itinerary {
    padding: 48px 0 10px;
    position: relative;
    z-index: 1
}

    .itinerary .sec-cap {
        margin-bottom: 6px
    }

.itin-panel {
    background: url("../assets/Photoo.png") center/110% 100% no-repeat;
    padding: 70px 40px 78px;
    margin: -6px 0 0;
}

.itin {
    list-style: none;
    max-width: 330px;
    margin: 0 auto
}

    .itin li {
        display: grid;
        grid-template-columns: 56px 34px 1fr;
        align-items: stretch
    }

.it-icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px
}

    .it-icon img {
        width: 36px;
        height: 36px;
        object-fit: contain
    }

.it-line {
    position: relative;
    display: flex;
    justify-content: center
}

    .it-line::before {
        content: "";
        position: absolute;
        top: 14px;
        bottom: -14px;
        width: 1px;
        background: var(--ink);
        opacity: .7
    }

    .it-line.last::before {
        display: none
    }

    .it-line i {
        position: relative;
        z-index: 1;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--ink);
        margin-top: 12px;
        box-shadow: 0 0 0 3px rgba(249,245,233,.6);
    }

.it-text {
    padding: 4px 0 34px 14px;
    text-align: left
}

.itin li:last-child .it-text {
    padding-bottom: 0
}

.it-text b {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: .8rem;
    letter-spacing: .14em;
    display: block
}

.it-text p {
    font-size: .82rem;
    opacity: .85
}

/* ============================================================
   MEETING POINT
   ============================================================ */
.meeting {
    padding: 44px 26px 10px;
    position: relative;
    z-index: 1
}

    .meeting .sec-cap {
        margin-bottom: 26px
    }

.meeting-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

@media(max-width:480px) {
    .meeting-grid {
        grid-template-columns: 1fr
    }
}

.meet-card {
    /*background: var(--card);*/
    border: 1px solid rgba(63,67,42,.18);
    border-radius: 4px;
    padding: 22px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.meet-role {
    font-size: .6rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    text-indent: .3em;
    opacity: .65
}

.meet-name {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: 1.8rem;
    color: var(--ink)
}

.meet-address {
    font-size: .8rem;
    opacity: .85;
    flex-grow: 1;
    margin-bottom: 12px
}

/* ============================================================
   RESERVED SEATS
   ============================================================ */
.seats {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*gap: 14px;*/
    padding: 46px 26px 10px;
    position: relative;
    z-index: 1;
    text-align: center;
}

    .seats .seats-box {
        margin-left: 0
    }
 /*   .seats .seats-box {
        margin-left: auto
    }*/
.seats-row {
    display: flex;
    align-items: center;
    gap: 12px
}
.row-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain
}
.rsvp .gift-head.center {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.seats-box {
    min-width: 52px;
    height: 52px;
    border: 1px solid var(--ink);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}

    .seats-box span {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 1.7rem;
        color: var(--ink)
    }

.seats-label {
    font-size: .7rem;
    letter-spacing: .26em;
    text-transform: uppercase
}

/* ============================================================
   GIFT
   ============================================================ */
.gift {
    padding: 44px 34px 10px;
    max-width: 430px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
}

.gift-head {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

    .gift-head.center {
        justify-content: center
    }

.gift-copy {
    font-size: .84rem;
    line-height: 1.9;
    opacity: .9;
    margin-bottom: 14px
}

.gift-sub {
    justify-content: center;
}

.mini-ic {
    width: 20px;
    height: 20px;
    object-fit: contain
}

.registry-card {
    display: inline-block;
    /*background: var(--card);*/
    border: 1px solid rgba(63,67,42,.2);
    border-radius: 4px;
    padding: 16px 34px;
    text-align: center;
}

    .registry-card h3 {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1.05rem;
        letter-spacing: .06em
    }

.registry-account {
    font-size: 1rem;
    letter-spacing: .14em;
    margin-top: 4px
}

.leaf-lower-right {
    right: -88px;
    width: 180px;
    transform: rotate(-10deg);
    margin-top: -135px;
    opacity: .95;
}
#attendee-fields input[readonly] {
    pointer-events: none
}
    /* ============================================================
   CONFIRMATION / RSVP
   ============================================================ */
    .rsvp {
    text-align: center;
    padding: 46px 26px 20px;
    position: relative;
    z-index: 1
}

.rsvp-deadline {
    font-size: .86rem;
    line-height: 1.9;
    margin: 6px 0 8px
}

    .rsvp-deadline strong {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1rem
    }

.rsvp-count {
    font-size: .82rem;
    margin-bottom: 22px;
    opacity: .9
}

.rsvp-list-label {
    font-size: .66rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    text-indent: .3em;
    opacity: .7;
    margin-bottom: 14px
}

#attendee-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
    margin: 0 auto 24px
}

    #attendee-fields input {
        width: 100%;
        padding: 12px 18px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--card);
        font-family: var(--font-body);
        font-size: .92rem;
        text-align: center;
        color: var(--ink);
    }

        #attendee-fields input:focus {
            outline: 2px solid var(--leaf);
            outline-offset: 1px
        }

.att-row {
    display: flex;
    align-items: center;
    gap: 10px
}

    .att-row input {
        flex: 1;
        min-width: 0
    }

.att-btn {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--line);
    transition: all .25s ease;
}

    .att-btn svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .att-btn.yes svg {
        stroke: var(--ink)
    }

    .att-btn.no svg {
        stroke: var(--decline)
    }

    .att-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(63,67,42,.14)
    }

    .att-btn.yes.selected {
        background: var(--ink);
        border-color: var(--ink)
    }

        .att-btn.yes.selected svg {
            stroke: var(--paper)
        }

    .att-btn.no.selected {
        background: var(--decline);
        border-color: var(--decline)
    }

        .att-btn.no.selected svg {
            stroke: var(--paper)
        }

.rsvp-success {
    margin-top: 16px;
    color: var(--ink);
    font-family: var(--font-display);
    font-style: italic
}

.rsvp-error {
    margin-top: 16px;
    color: var(--decline);
    font-size: .85rem
}

.rsvp-whatsapp {
    margin-top: 20px;
    font-size: .8rem;
    opacity: .85
}

    .rsvp-whatsapp a {
        display: inline-flex;
        align-items: center;
        gap: 6px
    }

.wa-ic {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: inline-block
}

/* ============================================================
   CLOSING
   ============================================================ */
.closing {
    text-align: center;
    padding: 46px 0 0;
    position: relative;
    z-index: 1
}

.closing-cap {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .26em;
    text-indent: .26em;
    text-transform: uppercase;
    line-height: 2.1;
    margin: 14px 0 30px;
}

.closing-photo {
    margin: 0
}

    .closing-photo img {
        width: 100%;
        display: block;
        transform: scale(1.06);
        transition: transform 6s cubic-bezier(.22,1,.36,1)
    }

.closing.in .closing-photo img {
    transform: scale(1)
}

.closing-line {
    font-family: var(--font-display);
    font-style: italic;
    font-size: .98rem;
    color: var(--ink);
    max-width: 380px;
    margin: 0 auto;
    padding: 26px 20px 40px;
}

/* ============================================================
   MOTION
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s ease, transform .9s ease
}

    .reveal.in {
        opacity: 1;
        transform: none
    }

.hero-verse, .hero-verse-ref, .hero-mono, .hero-our, .hero-photo,
.hero .script-name, .hero .amp, .invite-copy, .parents-grid, .honor-line,
.db-month, .hero-dateblock, .mini-orn {
    opacity: 0
}

body.site-open .hero-verse {
    animation: riseIn 1s ease .15s forwards
}

body.site-open .hero-verse-ref {
    animation: riseIn 1s ease .3s forwards
}

body.site-open .hero-mono {
    animation: riseIn 1.1s ease .5s forwards
}

body.site-open .hero-our {
    animation: riseIn 1.1s ease .7s forwards
}

body.site-open .hero-photo {
    animation: riseIn 1.3s cubic-bezier(.22,1,.36,1) .9s forwards
}

body.site-open .invite-copy {
    animation: riseIn 1.2s ease 1.2s forwards
}

body.site-open .parents-grid {
    animation: riseIn 1.2s ease 1.4s forwards
}

body.site-open .hero #hero-groom {
    animation: riseIn 1.2s cubic-bezier(.22,1,.36,1) 1.6s forwards
}

body.site-open .hero .amp {
    animation: riseIn 1.2s cubic-bezier(.22,1,.36,1) 1.8s forwards
}

body.site-open .hero #hero-bride {
    animation: riseIn 1.2s cubic-bezier(.22,1,.36,1) 2s forwards
}

body.site-open .honor-line {
    animation: riseIn 1.2s ease 2.3s forwards
}

body.site-open .db-month {
    animation: riseIn 1.1s ease 2.5s forwards
}

body.site-open .hero-dateblock {
    animation: riseIn 1.1s ease 2.65s forwards
}

body.site-open .mini-orn {
    animation: riseIn 1.1s ease 2.85s forwards
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(26px);
        filter: blur(5px)
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0)
    }
}

.reveal .count-cell {
    opacity: 0;
    transform: translateY(18px) scale(.97);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1)
}

.reveal.in .count-cell:nth-child(1) {
    transition-delay: .05s
}

.reveal.in .count-cell:nth-child(2) {
    transition-delay: .18s
}

.reveal.in .count-cell:nth-child(3) {
    transition-delay: .31s
}

.reveal.in .count-cell:nth-child(4) {
    transition-delay: .44s
}

.reveal.in .count-cell {
    opacity: 1;
    transform: none
}

.reveal .meet-card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s ease, transform .8s ease
}

.reveal.in .meet-card:first-child {
    transition-delay: .1s
}

.reveal.in .meet-card:last-child {
    transition-delay: .28s
}

.reveal.in .meet-card {
    opacity: 1;
    transform: none
}

.itin li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s ease, transform .7s ease
}

.reveal.in .itin li {
    opacity: 1;
    transform: none
}

    .reveal.in .itin li:nth-child(1) {
        transition-delay: .1s
    }

    .reveal.in .itin li:nth-child(2) {
        transition-delay: .25s
    }

    .reveal.in .itin li:nth-child(3) {
        transition-delay: .4s
    }

    .reveal.in .itin li:nth-child(4) {
        transition-delay: .55s
    }

    .reveal.in .itin li:nth-child(5) {
        transition-delay: .7s
    }

    .reveal.in .itin li:nth-child(6) {
        transition-delay: .85s
    }

.count-num.tick {
    animation: numTick .45s ease
}

@keyframes numTick {
    0% {
        opacity: .2;
        transform: translateY(-7px)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .envelope, .env-seal {
        animation: none !important
    }

    .reveal, .heart-div img, .itin li {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important
    }

    .hero-verse, .hero-verse-ref, .hero-mono, .hero-our, .hero-photo,
    .hero .script-name, .hero .amp, .invite-copy, .parents-grid, .honor-line,
    .db-month, .hero-dateblock, .mini-orn {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important
    }

    .closing-photo img {
        transform: none !important
    }
}

/* ============================================================
   TORN-PAPER EDGES — hero & closing photos
   ============================================================ */
/*.hero-photo, .closing-photo {
    overflow: hidden;
    filter: drop-shadow(0 14px 26px rgba(63,67,42,.20));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 7 L9 11 L21 3 L30 9 L47 5 L58 12 L66 6 L83 10 L95 2 L104 8 L122 12 L131 5 L150 9 L163 3 L172 11 L190 6 L199 12 L216 4 L228 9 L237 3 L255 8 L269 13 L278 5 L296 9 L305 2 L322 7 L336 12 L345 6 L363 10 L374 4 L386 9 L400 5 L400 294 L389 290 L377 297 L364 291 L349 295 L338 288 L327 294 L311 298 L300 291 L285 295 L272 289 L263 296 L246 292 L233 297 L224 290 L207 294 L196 288 L183 295 L170 291 L157 297 L148 290 L131 294 L118 289 L109 296 L92 292 L81 297 L68 290 L55 294 L44 288 L31 295 L18 291 L7 296 L0 290 Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 7 L9 11 L21 3 L30 9 L47 5 L58 12 L66 6 L83 10 L95 2 L104 8 L122 12 L131 5 L150 9 L163 3 L172 11 L190 6 L199 12 L216 4 L228 9 L237 3 L255 8 L269 13 L278 5 L296 9 L305 2 L322 7 L336 12 L345 6 L363 10 L374 4 L386 9 L400 5 L400 294 L389 290 L377 297 L364 291 L349 295 L338 288 L327 294 L311 298 L300 291 L285 295 L272 289 L263 296 L246 292 L233 297 L224 290 L207 294 L196 288 L183 295 L170 291 L157 297 L148 290 L131 294 L118 289 L109 296 L92 292 L81 297 L68 290 L55 294 L44 288 L31 295 L18 291 L7 296 L0 290 Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}*/
/* ============================================================
   ARABIC MODE — appended; activates with body.ar
   ============================================================ */
body.ar {
    --font-script: 'Aref Ruqaa', serif;
    --font-display: 'Amiri', serif;
    --font-body: 'Cairo', sans-serif;
}

    /* Arabic joins letters — spacing/indent must be zero everywhere */
    body.ar main *, body.ar #envelope-overlay * {
        letter-spacing: 0 !important;
        text-indent: 0 !important;
    }

    /* right-to-left inside the card */
    body.ar main {
        direction: rtl
    }

    body.ar .tap-hint {
        direction: rtl
    }

    /* keep numbers and codes left-to-right */
    body.ar .hero-dateblock,
    body.ar .card-date,
    body.ar .count-grid,
    body.ar .registry-account,
    body.ar .seats-box {
        direction: ltr
    }

    /* itinerary: text column aligns right, padding flips */
    body.ar .it-text {
        padding: 4px 14px 34px 0;
        text-align: right
    }

    body.ar .itin li:last-child .it-text {
        padding-bottom: 0
    }

    body.ar .it-text b {
        font-family: var(--font-body);
        direction: ltr;
        unicode-bidi: embed;
        text-align: right
    }

    /* type tuning — Arabic faces sit differently */
    body.ar .script-name {
        font-size: clamp(2.6rem, 10vw, 3.8rem);
        line-height: 1.5
    }

    body.ar .amp {
        display: block;
        font-family: var(--font-script);
        font-size: clamp(1.5rem, 5.5vw, 2.1rem);
        line-height: 1.3;
        opacity: .85;
    }
    /* the و is part of the names line */
    body.ar .greet-script {
        font-size: clamp(2rem, 8vw, 2.7rem);
        line-height: 1.6
    }

    body.ar .hero-verse {
        font-style: normal;
        font-size: 1.05rem;
        line-height: 2
    }

    body.ar .sec-cap, body.ar .ev-title {
        font-weight: 700
    }

    body.ar .honor-line, body.ar .invite-copy {
        text-transform: none;
        font-size: .95rem
    }

    body.ar .closing-cap {
        text-transform: none;
        font-weight: 700;
        font-size: 1.05rem
    }

    body.ar .card-eyebrow, body.ar .card-names,
    body.ar .db-month, body.ar .db-side,
    body.ar .meet-role, body.ar .seats-label,
    body.ar .rsvp-list-label, body.ar .gift-sub,
    body.ar .count-label, body.ar .btn-view {
        text-transform: none
    }

    body.ar .btn-view {
        font-size: .82rem;
        font-weight: 600
    }

    body.ar #attendee-fields input {
        font-size: 1rem
    }