/* ═══════════════════════════════════════════════════════
   RAMI & ALAA — SUDANESE LUXURY WEDDING
   Mobile-first design. Base = 390px. Scale up for desktop.
   ═══════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:800|Roboto+Condensed:700i");

/* ── TOKENS ── */
:root {
    --crimson: #8B1A22;
    --crimson-dk: #5C0C14;
    --gold: #C19A38;
    --gold-lt: #D9B84E;
    --gold-dk: #8A6B1C;
    --green: #3B6E52;
    --brown: #281200;
    --brown-mid: #5C3416;
    --brown-lt: #9A6A3A;
    --cream: #F8F1E0;
    --cream-dk: #EEE0BF;
    --cream-dkr: #E2D09C;
    --paper: #FAF4E6;
    --white: #FFFDF7;

    /* Envelope paper */
    --env-body: #F0E6CC;
    --env-fl: #E8DCC0;
    --env-fr: #E5D9BC;
    --env-fb: #DAC9A0;
    --env-flap: #EFE5C8;
    --env-inner: #FBF8F0;

    --fn-head: 'Cinzel Decorative', serif;
    --fn-scrpt: 'Great Vibes', cursive;
    --fn-ar: 'Amiri', serif;
    /* Well-connected Arabic calligraphy */
    --fn-body: 'Cormorant Garamond', 'Georgia', serif;
    --fn-ui: 'Inter', sans-serif;
    --fn-num: 'Playfair Display', serif;

    /* Animation easing */
    --ease-out-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--paper);
    color: var(--brown);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════
   UI CONTROLS
   ═══════════════════════════════════════════════════════ */
.ui-controls {
    position: fixed;
    top: env(safe-area-inset-top, 1rem);
    left: 1rem;
    z-index: 9000;
}

.pill-btn {
    background: rgba(250, 244, 230, .92);
    backdrop-filter: blur(12px);
    border: 1.5px solid var(--gold);
    color: var(--brown);
    padding: .44rem 1rem;
    cursor: pointer;
    font: 600 .7rem/1 var(--fn-ui);
    border-radius: 100px;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(193, 154, 56, .25);
}

.music-btn {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.2rem);
    right: 1.2rem;
    z-index: 9000;
    display: none;
    align-items: center;
    gap: .4rem;
    background: rgba(250, 244, 230, .92);
    backdrop-filter: blur(12px);
    border: 1.5px solid var(--gold);
    color: var(--brown);
    padding: .44rem .95rem;
    border-radius: 100px;
    cursor: pointer;
    font: 500 .72rem/1 var(--fn-ui);
    box-shadow: 0 2px 10px rgba(193, 154, 56, .25);
}

/* ═══════════════════════════════════════════════════════
   SPLASH — LUXURY VELVET CURTAIN REVEAL
   ═══════════════════════════════════════════════════════ */
#splash-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    cursor: pointer;
    overflow: hidden;
    background: transparent;
    /* Instant cut — NO lingering opacity transition */
    transition: none;
}

#splash-screen.slide-up {
    display: none;
}

/* ── GOLD FRAME CORNERS ── */
.splash-frame {
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
}

.frame-corner,
.frame-border-h,
.frame-border-v {
    position: absolute;
    background: var(--gold);
}

.frame-corner {
    width: 0;
    height: 0;
}

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

.frame-corner::before {
    width: 48px;
    height: 2px;
    top: 10px;
    left: 0;
}

.frame-corner::after {
    width: 2px;
    height: 48px;
    left: 10px;
    top: 0;
}

.frame-tl {
    top: 14px;
    left: 14px;
}

.frame-tr {
    top: 14px;
    right: 14px;
    transform: scaleX(-1);
}

.frame-bl {
    bottom: 14px;
    left: 14px;
    transform: scaleY(-1);
}

.frame-br {
    bottom: 14px;
    right: 14px;
    transform: scale(-1);
}

.frame-border-h {
    height: 1px;
    left: 68px;
    right: 68px;
    opacity: .35;
}

.frame-border-v {
    width: 1px;
    top: 68px;
    bottom: 68px;
    opacity: .35;
}

.frame-top {
    top: 20px;
}

.frame-bot {
    bottom: 20px;
}

.frame-lft {
    left: 20px;
}

.frame-rht {
    right: 20px;
}

/* ══════════════════════════════════════════════════════
   MINIMALIST ARCHITECTURAL VALANCE / PELMET
   Clean, structured, no bulk — matching velvet base
   ══════════════════════════════════════════════════════ */
.stage-valance {
    position: absolute;
    top: 0;
    left: 0 !important;
    right: 0 !important;
    z-index: 50;
    pointer-events: none;
}

.valance-fabric {
    height: clamp(52px, 12vw, 76px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Heavy velvet matching curtains — no decoration */
    background: linear-gradient(180deg,
            #2E0508 0%, #4A0810 30%, #400A0E 60%, #2E0508 100%);
    box-shadow:
        0 6px 28px rgba(0, 0, 0, .70),
        inset 0 1px 0 rgba(255, 220, 160, .12),
        inset 0 -1px 0 rgba(255, 200, 80, .25);
    /* thin gold hem line */
}

/* Gold single hem line at bottom of pelmet */
.valance-fabric::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent, rgba(212, 168, 67, .6) 20%,
            rgba(240, 200, 80, .9) 50%,
            rgba(212, 168, 67, .6) 80%, transparent);
    box-shadow: 0 0 6px rgba(212, 168, 67, .4);
}

/* Blind-embossed monogram — quiet luxury, not flashy */
.valance-monogram {
    font: 300 clamp(1rem, 3.5vw, 1.8rem)/1 'Cinzel Decorative', 'Cinzel', serif;
    letter-spacing: .3em;
    /* Very subtle — embossed into fabric, barely visible */
    color: transparent;
    text-shadow:
        0 1px 0 rgba(255, 220, 100, .22),
        /* raised highlight */
        0 -1px 0 rgba(0, 0, 0, .50);
    /* inset shadow */
    -webkit-text-stroke: 0.5px rgba(212, 168, 67, .35);
    user-select: none;
    position: relative;
}

/* ══════════════════════════════════════════════════════
   CURTAIN / SCENE / STARTER — theater reveal (wedding colors)
   ══════════════════════════════════════════════════════ */
.curtain-seam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 8px) !important;
    right: auto !important;
    width: 16px;
    z-index: 45;
    transition: opacity .08s;
    pointer-events: none;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, .25) 20%,
            rgba(255, 185, 150, .14) 40%, rgba(255, 255, 255, .07) 46%,
            rgba(255, 255, 255, .04) 50%, rgba(255, 180, 140, .10) 54%,
            rgba(0, 0, 0, .25) 80%, rgba(0, 0, 0, .50) 100%);
}

#splash-screen.curtain-open .curtain-seam,
#splash-screen.open .curtain-seam {
    opacity: 0;
}

/* Curtain container (splash = curtain) */
#splash-screen {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* Curtain panels — keep wedding velvet color */
.curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 40;
    transform-origin: top center;
    overflow: hidden;
    filter: brightness(1.15);
    /* 7-layer velvet (wedding colors) */
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .52) 0%, transparent 24%, transparent 100%),
        radial-gradient(ellipse 52% 62% at 70% 28%, rgba(255, 175, 120, .10) 0%, transparent 52%),
        linear-gradient(180deg,
            rgba(210, 100, 95, .20) 0%, rgba(240, 138, 118, .24) 18%,
            rgba(175, 68, 65, .16) 38%, rgba(230, 110, 100, .22) 58%,
            rgba(155, 50, 48, .32) 80%, rgba(55, 10, 10, .52) 100%),
        repeating-linear-gradient(90deg,
            transparent 0, transparent 3px,
            rgba(0, 0, 0, .60) 3px, rgba(0, 0, 0, .60) 6px,
            rgba(255, 205, 205, .08) 6px, rgba(255, 205, 205, .08) 8px,
            rgba(0, 0, 0, .22) 8px, rgba(0, 0, 0, .22) 12px,
            transparent 12px, transparent 36px,
            rgba(0, 0, 0, .48) 36px, rgba(0, 0, 0, .48) 39px,
            rgba(255, 205, 205, .06) 39px, rgba(255, 205, 205, .06) 41px,
            rgba(0, 0, 0, 0) 41px, transparent 72px,
            rgba(0, 0, 0, .52) 72px, rgba(0, 0, 0, .52) 75px,
            rgba(255, 215, 205, .07) 75px, rgba(255, 215, 205, .07) 77px,
            rgba(0, 0, 0, 0) 77px, transparent 112px),
        repeating-linear-gradient(90deg,
            transparent 0, transparent 52px,
            rgba(205, 162, 50, .75) 52px, rgba(205, 162, 50, .75) 54px,
            rgba(255, 248, 165, .38) 54px, rgba(255, 248, 165, .38) 56px,
            rgba(62, 118, 82, .48) 56px, rgba(62, 118, 82, .48) 59px,
            rgba(255, 255, 255, .22) 59px, rgba(255, 255, 255, .22) 61px,
            rgba(62, 118, 82, .48) 61px, rgba(62, 118, 82, .48) 64px,
            rgba(205, 162, 50, .65) 64px, rgba(205, 162, 50, .65) 66px,
            transparent 66px, transparent 112px),
        linear-gradient(172deg,
            #580810 0%, #7A1220 18%, #48080E 35%,
            #680B16 52%, #48080E 68%, #6C1018 85%, #580810 100%);
}

.curtain-left {
    left: 0 !important;
    right: auto !important;
    transform-origin: top right;
}

.curtain-right {
    right: 0 !important;
    left: auto !important;
    transform-origin: top left;
    background:
        linear-gradient(90deg, transparent 76%, rgba(0, 0, 0, .52) 100%),
        radial-gradient(ellipse 52% 62% at 30% 28%, rgba(255, 175, 120, .10) 0%, transparent 52%),
        linear-gradient(180deg,
            rgba(210, 100, 95, .20) 0%, rgba(240, 138, 118, .24) 18%,
            rgba(175, 68, 65, .16) 38%, rgba(230, 110, 100, .22) 58%,
            rgba(155, 50, 48, .32) 80%, rgba(55, 10, 10, .52) 100%),
        repeating-linear-gradient(90deg,
            transparent 0, transparent 3px,
            rgba(0, 0, 0, .60) 3px, rgba(0, 0, 0, .60) 6px,
            rgba(255, 205, 205, .08) 6px, rgba(255, 205, 205, .08) 8px,
            rgba(0, 0, 0, .22) 8px, rgba(0, 0, 0, .22) 12px,
            transparent 12px, transparent 36px,
            rgba(0, 0, 0, .48) 36px, rgba(0, 0, 0, .48) 39px,
            rgba(255, 205, 205, .06) 39px, rgba(255, 205, 205, .06) 41px,
            rgba(0, 0, 0, 0) 41px, transparent 72px,
            rgba(0, 0, 0, .52) 72px, rgba(0, 0, 0, .52) 75px,
            rgba(255, 215, 205, .07) 75px, rgba(255, 215, 205, .07) 77px,
            rgba(0, 0, 0, 0) 77px, transparent 112px),
        repeating-linear-gradient(90deg,
            transparent 0, transparent 52px,
            rgba(205, 162, 50, .75) 52px, rgba(205, 162, 50, .75) 54px,
            rgba(255, 248, 165, .38) 54px, rgba(255, 248, 165, .38) 56px,
            rgba(62, 118, 82, .48) 56px, rgba(62, 118, 82, .48) 59px,
            rgba(255, 255, 255, .22) 59px, rgba(255, 255, 255, .22) 61px,
            rgba(62, 118, 82, .48) 61px, rgba(62, 118, 82, .48) 64px,
            rgba(205, 162, 50, .65) 64px, rgba(205, 162, 50, .65) 66px,
            transparent 66px, transparent 112px),
        linear-gradient(172deg,
            #580810 0%, #7A1220 18%, #48080E 35%,
            #680B16 52%, #48080E 68%, #6C1018 85%, #580810 100%);
}

.curtain::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 16px 0 45px rgba(0, 0, 0, .58), inset -5px 0 15px rgba(0, 0, 0, .28);
    pointer-events: none;
    z-index: 1;
}

.curtain-right::before {
    box-shadow: inset -16px 0 45px rgba(0, 0, 0, .58), inset 5px 0 15px rgba(0, 0, 0, .28);
}

.curtain::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7px;
    background: linear-gradient(180deg,
            #F8CC44 0%, #FAE484 8%, #C8960E 25%,
            #F5D050 45%, #B28022 62%,
            #F2CA40 78%, #CA9A24 90%, #F8CC44 100%);
    box-shadow: 0 0 18px rgba(240, 195, 60, .80), 0 0 5px rgba(255, 240, 100, .55);
    z-index: 2;
}

.curtain-left::after { right: 0; }
.curtain-right::after { left: 0; }

.curtain-hand {
    position: absolute;
    z-index: 3;
    width: clamp(120px, 38vw, 200px);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.curtain-hand img {
    width: 100%;
    display: block;
    -webkit-user-drag: none;
}

.curtain-hand-left {
    bottom: -8%;
    right: -10%;
    transform: scaleX(-1);
}

.curtain-hand-right {
    bottom: -8%;
    left: -10%;
}

/* Pre-open sway */
@keyframes sway-l {
    0%, 100% { transform: skewX(.35deg); }
    50% { transform: skewX(-.5deg); }
}
@keyframes sway-r {
    0%, 100% { transform: skewX(-.35deg); }
    50% { transform: skewX(.5deg); }
}

.curtain-left { animation: sway-l 5.5s ease-in-out infinite; }
.curtain-right { animation: sway-r 5.5s ease-in-out infinite; }

#splash-screen.curtain-open .curtain-left,
#splash-screen.curtain-open .curtain-right {
    animation: none;
}

/* ── STARTER (tap/click hint) ── */
#starter {
    z-index: 55;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 50px;
    margin-top: -25px;
    margin-left: -150px;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2em;
    font-weight: 600;
    cursor: pointer;
    color: var(--gold-lt);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
}

/* ── SCENE (main content) ── */
#main-content {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    opacity: 1;
    background-color: var(--paper);
    box-shadow: 0 0 0 2px var(--gold) inset;
}

#main-content[aria-hidden="true"] {
    pointer-events: none;
}

#main-content.fade-in {
    pointer-events: auto;
}

/* Opening: curtain open */
#splash-screen.open .curtain-left,
#splash-screen.open .curtain-right {
    filter: brightness(100%);
}

#splash-screen.open .curtain-left {
    animation-fill-mode: forwards;
    animation-name: curtain-opening, left-curtain-opening;
    animation-duration: 2s, 4s;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-delay: 0s, 0s;
    animation-iteration-count: 1, 1;
    animation-direction: normal, normal;
}

#splash-screen.open .curtain-right {
    animation-fill-mode: forwards;
    animation-name: curtain-opening, right-curtain-opening;
    animation-duration: 2s, 4s;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-delay: 0s, 0s;
    animation-iteration-count: 1, 1;
    animation-direction: normal, normal;
}

/* Scene expand (invitation fades in) */
#main-content.expand {
    animation-fill-mode: forwards;
    animation-name: expand-scene-fade;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-delay: 0.5s;
    animation-iteration-count: 1;
    animation-direction: normal;
    box-shadow: 0 0 0 0 var(--gold) inset;
}

.fade-out {
    animation-fill-mode: forwards;
    animation-name: fade-out;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
}

/* ── ANIMATIONS ── */
@keyframes curtain-opening {
    from { filter: brightness(1.15); }
    to { filter: brightness(100%); }
}

@keyframes left-curtain-opening {
    from { transform: translate(0) rotate(0) scale(1, 1); }
    to { transform: translate(-100%) rotate(20deg) scale(0, 2); }
}

@keyframes right-curtain-opening {
    from { transform: translate(0) rotate(0) scale(1, 1); }
    to { transform: translate(100%) rotate(-20deg) scale(0, 2); }
}

@keyframes expand-scene-fade {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fade-out {
    from { color: var(--gold-lt); opacity: 1; }
    to { color: var(--cream); opacity: 0; }
}

.curtain-hint {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 3.5vh);
    left: 50%;
    transform: translateX(-50%);
    font: 500 .70rem/1 var(--fn-ui);
    text-transform: uppercase;
    letter-spacing: 5px;
    color: rgba(232, 202, 80, .80);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
    white-space: nowrap;
    z-index: 55;
    pointer-events: none;
    transition: opacity .3s;
}

#splash-screen.curtain-open .curtain-hint,
#splash-screen.open .curtain-hint {
    opacity: 0;
}

/* ═══════════════════════════════════════════════════════
   MAIN CONTENT (continued)
   ═══════════════════════════════════════════════════════ */
/* Canvases */
#smoke-canvas,
#leaves-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#smoke-canvas {
    z-index: 2;
}

#leaves-canvas {
    z-index: 801;
}

/* Paper overlay */
.paper-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Very subtle warm linen grain — not dominant */
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(193, 154, 56, .04) 28px, rgba(193, 154, 56, .04) 29px),
        repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(139, 90, 24, .03) 28px, rgba(139, 90, 24, .03) 29px);
}

/* ── ORNAMENT ── */
.ornament {
    color: var(--gold);
    opacity: .65;
    width: 100%;
    max-width: 320px;
    margin: .5rem auto;
}

.ornament svg {
    width: 100%;
    height: auto;
}

/* ── GOLD RULE ── */
.gold-rule {
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 1.4rem auto;
    opacity: .75;
}

.gold-rule.wide {
    width: 180px;
}

/* ═══════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════ */
.invite-header {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: clamp(2.5rem, 8vw, 4rem) 1.5rem 1rem;
}

/* ── Families ── */
.families-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 1.4rem 0;
}

/* Arabic: Noto Sans Arabic Medium (500) for family names */
html[lang="ar"] .families-block,
html[lang="ar"] .families-block .fam-name {
    font-family: 'Noto Sans Arabic', sans-serif;
    font-weight: 500;
}
html[lang="ar"] .families-block .fam-name {
    font: 500 clamp(1rem, 4vw, 1.2rem)/1.55 'Noto Sans Arabic', sans-serif;
    color: var(--brown);
}

.family {
    width: 100%;
    padding: .6rem 1.5rem;
}

.fam-name {
    font: 700 clamp(1rem, 4.5vw, 1.3rem)/1.55 var(--fn-ar);
    color: var(--brown);
}

.fam-name-title {
    font: 700 clamp(1rem, 4.5vw, 1.3rem)/1.55 var(--fn-body);
    color: var(--brown);
    direction: ltr;
}

/* Hide on Arabic (RTL), show only on English */
html[dir="rtl"] .fam-name-title {
    display: none;
}

/* Family name — consistent size for both families */
.fam-name {
    font: 700 clamp(1rem, 4vw, 1.2rem)/1.55 var(--fn-ar);
    color: var(--brown);
}

/* English: Great Vibes script for family names */
html[dir="ltr"] .families-block .fam-name {
    font-family: 'Great Vibes', cursive;
    font-weight: 400;
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    line-height: 1.4;
}
html[dir="ltr"] .fam-name {
    font-family: var(--fn-body);
    font-size: clamp(.9rem, 3.8vw, 1.1rem);
}

.fam-sub {
    font: 400 clamp(.82rem, 3.5vw, .98rem)/1.6 var(--fn-ar);
    color: var(--brown-mid);
    font-style: italic;
}

.fam-divider {
    width: 100%;
    display: flex;
    align-items: center;
    padding: .6rem 1.5rem;
    gap: .8rem;
}

.fam-vline {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold) 40%, transparent);
    opacity: .65;
}

html[dir="rtl"] .fam-vline:first-child {
    background: linear-gradient(to left, transparent, var(--gold) 40%, transparent);
}

.fam-divider-amp {
    font: 400 2.4rem/1 var(--fn-scrpt);
    color: var(--gold);
    flex-shrink: 0;
}

/* ── Preamble ── */
.preamble {
    font: 400 clamp(.76rem, 3vw, .88rem)/1.8 var(--fn-ar);
    color: var(--brown-lt);
    margin: .6rem auto;
    text-align: center;
    max-width: 320px;
}

/* ── Couple names — vertical creative split ── */
.couple-block {
    margin: .6rem 0 1.2rem;

}

.couple-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.6rem, 3vw, 1.4rem);
    line-height: 1;
    margin: 10%
}

/* In RTL: Arabic row visible, English row hidden */
html[dir="rtl"] .couple-row-en {
    display: none;
}

html[dir="ltr"] .couple-row-ar {
    display: none;
}

html[dir="ltr"] .couple-row-en {
    display: flex;
}

/* Names — large, distinct fonts */
.cn-name {
    font: 700 clamp(2.8rem, 12vw, 5.5rem)/1 var(--fn-ar);
    color: var(--crimson);
    text-shadow: 0 2px 12px rgba(139, 26, 34, .15);
    display: block;
    /* Arabic ligatures + kerning */
    font-feature-settings: "liga" 1, "calt" 1;
}

.couple-row-en .cn-name {
    font-family: var(--fn-scrpt);
    font-weight: 400;
    font-size: clamp(3rem, 13vw, 6rem);
}

/* The & / و separator — prominent gold script */
.cn-amp {
    font: 400 clamp(2.8rem, 12vw, 5.5rem)/1 var(--fn-ar);
    color: var(--gold);
    flex-shrink: 0;
}

.cn-amp-en {
    font: 400 clamp(2.8rem, 12vw, 5rem)/1 var(--fn-scrpt);
    color: var(--gold);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   PORTRAIT — Full-width hero, edge-to-edge
   ═══════════════════════════════════════════════════════ */
.portrait-section {
    position: relative;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    /* Contained by max-width for very large screens */
    max-width: 540px;
    margin: 0 auto .5rem;
}

.portrait-fig {
    margin: 0;
}

#couple-portrait {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
    /* Fade edges to blend into page */
    -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 45%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════
   DECORATIVE SECTIONS
   Each image gets a proper dedicated section with breathing room.
   ═══════════════════════════════════════════════════════ */
.decor-section {
    position: relative;
    z-index: 10;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem 0;
}

.decor-img {
    display: block;
    height: auto;
    width: auto;
    mix-blend-mode: multiply;
}

/* BRIDE — large portrait, generous size to command the screen */
.decor-bride-section {
    padding: 1rem 0 0;
}

.decor-bride-img {
    width: min(1080px, 98vw);
    -webkit-mask-image: radial-gradient(ellipse 90% 95% at 50% 50%, black 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 95% at 50% 50%, black 55%, transparent 100%);
}

/* BASKETS — wide, centred, used as atmospheric divider */
.decor-baskets-section {
    padding: 1rem 0;
}

.decor-baskets-img {
    width: min(420px, 98vw);
    opacity: .75;
    -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, black 40%, transparent 100%);
}

/* BUKHOUR TRAY — centred, big enough to feel luxurious */
.decor-bukhour-section {
    padding: 1.5rem 0 1rem;
}

.decor-bukhour-img {
    width: min(340px, 88vw);
    -webkit-mask-image: radial-gradient(ellipse 88% 90% at 50% 50%, black 48%, transparent 100%);
    mask-image: radial-gradient(ellipse 88% 90% at 50% 50%, black 48%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════
   COUNTDOWN — clean cream section; themed only on number boxes
   ═══════════════════════════════════════════════════════ */
.countdown-section {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 2rem 1.5rem 2.5rem;
    background: transparent;
}

.section-label {
    font: 700 .72rem/1 var(--fn-head);
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--gold-dk);
    margin-bottom: .8rem;
    display: block;
}

.date-display {
    font: 700 clamp(1.1rem, 4.6vw, 1.6rem)/1.6 var(--fn-ar);
    color: var(--brown);
    margin-bottom: 2rem;
    font-style: normal;
}

html[dir="ltr"] .date-display {
    font-family: var(--fn-body);
}

.countdown {
    display: flex;
    justify-content: center;
    gap: clamp(.5rem, 2vw, 1rem);
}

.time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: clamp(62px, 17vw, 84px);
    /* Warm parchment — Sudanese-themed number card */
    background: linear-gradient(160deg, #FDF7EA 0%, #F5E8C8 100%);
    border: 1.5px solid rgba(193, 154, 56, .65);
    border-radius: 10px;
    padding: clamp(.7rem, 2.5vw, 1.1rem) clamp(.4rem, 2vw, .8rem) clamp(.5rem, 2vw, .8rem);
    box-shadow:
        0 0 0 3px rgba(193, 154, 56, .1),
        0 6px 20px rgba(139, 90, 24, .18),
        inset 0 1.5px 0 rgba(255, 240, 180, .6),
        inset 0 -2px 6px rgba(120, 70, 10, .1);
    position: relative;
    overflow: hidden;
}

/* Basket-weave diagonal micro-pattern on each box */
.time-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(193, 154, 56, .07) 0px, rgba(193, 154, 56, .07) 1px, transparent 1px, transparent 8px),
        repeating-linear-gradient(-45deg, rgba(193, 154, 56, .07) 0px, rgba(193, 154, 56, .07) 1px, transparent 1px, transparent 8px);
    pointer-events: none;
}

.time-num {
    font: 300 clamp(2rem, 7vw, 2.8rem)/1 var(--fn-num);
    color: var(--crimson);
    margin-bottom: .28rem;
    position: relative;
}

.time-label {
    font: 600 clamp(.52rem, 1.4vw, .62rem)/1 var(--fn-ui);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold-dk);
    position: relative;
}


/* ═══════════════════════════════════════════════════════
   AGENDA — single-column vertical timeline for mobile
   ═══════════════════════════════════════════════════════ */
.agenda-section {
    position: relative;
    z-index: 10;
    padding: 1rem 1.8rem 1.5rem;
    width: 100%;
}

.agenda-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 2rem;
    gap: 0;
}

.ag-line-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    height: 36px;
}

/* Center line through dot: time(72px) + gap(1rem) + half-dot(7px) - half-line(1px) */
.ag-line-wrap::before {
    content: '';
    width: calc(72px + 1rem + 7px - 1px);
    flex-shrink: 0;
}

.ag-line-wrap .ag-line {
    width: 2px;
    height: 36px;
    flex-shrink: 0;
}

.ag-line {
    background: linear-gradient(180deg, var(--gold-lt), var(--gold));
    opacity: .4;
}


.agenda-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition-delay: var(--di, 0s);
}

/* In RTL: time on the right (default row puts first item on right) */
html[dir="rtl"] .agenda-item {
    flex-direction: row;
}

.ag-time-wrap {
    width: 72px;
    flex-shrink: 0;
    text-align: center;
    padding-top: .9rem;
}

.ag-time {
    font: 700 .78rem/1 var(--fn-ui);
    color: var(--gold-dk);
    letter-spacing: .5px;
}

.ag-dot {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--crimson);
    margin-top: 1.05rem;
    box-shadow: 0 0 0 4px rgba(139, 26, 34, .16), 0 2px 8px rgba(139, 26, 34, .3);
}

.ag-dot--center {
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(193, 154, 56, .18), 0 2px 8px rgba(193, 154, 56, .35);
}

.ag-body {
    padding: .75rem 0 .5rem;
    flex: 1;
}

.ag-label {
    font: 700 clamp(1rem, 4vw, 1.12rem)/1.4 var(--fn-ar);
    color: var(--brown);
}

html[dir="ltr"] .ag-label {
    font-family: var(--fn-body);
}

.ag-desc {
    font: 400 clamp(.82rem, 3.4vw, .95rem)/1.65 var(--fn-ar);
    color: var(--brown-mid);
    font-style: italic;
    margin-top: .18rem;
}

html[dir="ltr"] .ag-desc {
    font-family: var(--fn-body);
}

/* ═══════════════════════════════════════════════════════
   CTAs
   ═══════════════════════════════════════════════════════ */
.ctas-section {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.5rem 2rem;
    width: 100%;
}

.btn {
    display: block;
    width: 100%;
    max-width: 340px;
    text-align: center;
    text-decoration: none;
    font: 600 .82rem/1 var(--fn-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: .95rem 1.5rem;
    transition: all .3s ease;
}

.btn-primary {
    background: var(--crimson);
    color: var(--white);
    border: 1.5px solid var(--crimson);
    box-shadow: 0 4px 22px rgba(139, 26, 34, .3);
}

.btn-primary:active {
    transform: scale(.97);
}

.btn-secondary {
    background: transparent;
    color: var(--brown);
    border: 1.5px solid var(--gold);
    box-shadow: 0 3px 14px rgba(193, 154, 56, .2);
}

.btn-secondary:active {
    transform: scale(.97);
}

/* ── FOOTER ── */
.site-footer {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 1rem 1.5rem calc(env(safe-area-inset-bottom, 0px) + 2rem);
}

.footer-love {
    font: 400 1rem/1 var(--fn-scrpt);
    color: var(--gold-dk);
    margin-top: .8rem;
}

/* ═══════════════════════════════════════════════════════
   SCROLL ANIMATIONS — text & images
   ═══════════════════════════════════════════════════════ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes imageReveal {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scroll-triggered image entrance: rise + scale + fade */
@keyframes imageRevealScroll {
    from {
        opacity: 0;
        transform: translateY(36px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hero portrait: scale-in only (no slide) */
@keyframes imageRevealScale {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Subtle floating motion for images when visible */
@keyframes softFloat {
    from {
        transform: scale(1) translateY(0);
    }
    to {
        transform: scale(1) translateY(-6px);
    }
}

.anim-up,
.anim-left,
.anim-right,
.anim-scale {
    opacity: 0;
    transition: opacity 0.85s var(--ease-out-smooth), transform 0.85s var(--ease-out-smooth);
}

.anim-up {
    transform: translateY(30px);
}

.anim-up.is-visible {
    animation: fadeInUp 0.9s var(--ease-out-smooth) forwards;
}

.anim-left {
    transform: translateX(-36px);
}

.anim-left.is-visible {
    animation: fadeInLeft 0.9s var(--ease-out-smooth) forwards;
}

.anim-right {
    transform: translateX(36px);
}

.anim-right.is-visible {
    animation: fadeInRight 0.9s var(--ease-out-smooth) forwards;
}

.anim-scale {
    transform: scale(.94);
}

.anim-scale.is-visible {
    animation: scaleIn 0.95s var(--ease-out-back) forwards;
}

/* Fallback for elements that don't use keyframes (e.g. agenda items with delay) */
.is-visible {
    opacity: 1 !important;
}

.agenda-item.anim-up {
    transition-delay: var(--di, 0s);
}

.agenda-item.anim-up.is-visible {
    animation-delay: var(--di, 0s);
}

/* Couple names — staggered fade-in per row */
.couple-block .cn-name {
    opacity: 0;
    animation: fadeInUp 0.8s var(--ease-out-smooth) forwards;
}

.couple-block.is-visible .couple-row-ar .cn-name:nth-child(1) { animation-delay: 0.1s; }
.couple-block.is-visible .couple-row-ar .cn-name:nth-child(3) { animation-delay: 0.25s; }
.couple-block.is-visible .couple-row-en .cn-name:nth-child(1) { animation-delay: 0.2s; }
.couple-block.is-visible .couple-row-en .cn-name:nth-child(3) { animation-delay: 0.35s; }

.couple-block .cn-amp,
.couple-block .cn-amp-en {
    opacity: 0;
    animation: scaleIn 0.5s var(--ease-out-back) forwards;
}
.couple-block.is-visible .cn-amp { animation-delay: 0.18s; }
.couple-block.is-visible .cn-amp-en { animation-delay: 0.28s; }

/* When in English, the English row was display:none when the block became visible,
   so its animation never ran. Ensure English names and ampersand are visible. */
html[dir="ltr"] .couple-block.is-visible .couple-row-en .cn-name,
html[dir="ltr"] .couple-block.is-visible .couple-row-en .cn-amp-en {
    opacity: 1;
}

/* ── Image animations: reveal on scroll + subtle float ── */
.anim-img {
    opacity: 0;
    transform: translateY(36px) scale(0.96);
    transition: none;
}

/* Default: slide up + scale + fade when scrolled into view */
.anim-img.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: imageRevealScroll 1s var(--ease-out-smooth) forwards,
               softFloat 4s ease-in-out 1.2s infinite alternate;
}

/* Hero couple portrait: scale-in only, then gentle float */
.portrait-fig .anim-img {
    transform: scale(0.92);
}
.portrait-fig .anim-img.is-visible {
    transform: scale(1);
    animation: imageRevealScale 1.1s var(--ease-out-back) forwards,
               softFloat 5s ease-in-out 1.4s infinite alternate;
}

/* Decor images (bride, basket): slide up with slightly more travel */
.decor-img.anim-img {
    transform: translateY(44px) scale(0.95);
}
.decor-img.anim-img.is-visible {
    animation: imageRevealScroll 1.05s var(--ease-out-smooth) forwards,
               softFloat 4.5s ease-in-out 1.3s infinite alternate;
}

/* ═══════════════════════════════════════════════════════
   TYPEWRITER EFFECT
   ═══════════════════════════════════════════════════════ */
.typewriter {
    overflow: hidden;
}

.typewriter .typewriter-char {
    display: inline;
    opacity: 0;
    animation: typewriterIn 0.12s ease forwards;
}

.typewriter .typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-inline: 1px;
    vertical-align: text-bottom;
    background: currentColor;
    opacity: 0.85;
    animation: typewriterBlink 0.7s step-end infinite;
}

.typewriter.typewriter-done .typewriter-cursor {
    display: none;
}

@keyframes typewriterIn {
    to {
        opacity: 1;
    }
}

@keyframes typewriterBlink {
    50% {
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════
   DESKTOP ENHANCEMENT (≥ 680px)
   Small tweaks only — not a layout change.
   ═══════════════════════════════════════════════════════ */
@media (min-width: 680px) {
    .families-block {
        flex-direction: row;
        align-items: flex-start;
    }

    .family {
        width: auto;
        flex: 1;
        text-align: center;
    }

    .fam-divider {
        flex-direction: column;
        width: auto;
        padding: 0 .8rem;
        align-items: center;
    }

    .fam-divider::before {
        width: 1px;
        height: 28px;
        flex: none;
        background: linear-gradient(to bottom, transparent, var(--gold));
    }

    .fam-divider::after {
        width: 1px;
        height: 28px;
        flex: none;
        background: linear-gradient(to bottom, var(--gold), transparent);
    }

    .fam-divider-amp {
        padding: .5rem 0;
    }

    .agenda-section {
        max-width: 520px;
        margin: 0 auto;
    }

    .ctas-section {
        flex-direction: row;
        justify-content: center;
    }

    .btn {
        width: auto;
        min-width: 200px;
    }
}

@media (min-width: 960px) {
    .portrait-section {
        max-width: 640px;
    }

    .decor-bride-img {
        width: min(420px, 60vw);
    }

    .decor-baskets-img {
        width: min(560px, 80vw);
    }

    .decor-bukhour-img {
        width: min(400px, 55vw);
    }
}