/* ═══════════════════════════════════════════════════════
   RAMI & ALAA — SUDANESE LUXURY WEDDING
   Mobile-first design. Base = 390px. Scale up for desktop.
   ═══════════════════════════════════════════════════════ */
@import url("css.css");

/* ── 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;

    /* Unified type: Poppins (Latin) + Tajawal (Arabic companion).
       Browser picks per-glyph, so AR renders Tajawal, EN renders Poppins.
       Only Medium (500) + Bold (700) weights are loaded. */
    --fn-pop: 'Poppins', 'Tajawal', sans-serif;
    --fn-head: 'Poppins', 'Tajawal', sans-serif;
    --fn-scrpt: 'Poppins', 'Tajawal', sans-serif;
    --fn-ar: 'Poppins', 'Tajawal', sans-serif;
    --fn-ar-head: 'Poppins', 'Tajawal', sans-serif;
    --fn-body: 'Poppins', 'Tajawal', sans-serif;
    --fn-ui: 'Poppins', 'Tajawal', sans-serif;
    --fn-num: 'Poppins', 'Tajawal', sans-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;
}

body {
    background: var(--paper);
    color: var(--brown);
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-font-smoothing: antialiased;
    touch-action: pan-y; /* allow vertical swipe even before open */
}

/* When invitation is open: allow vertical scroll on mobile/desktop.
   Single scroll container = the document itself. We deliberately do NOT
   put overflow-y:auto + height:100% on BOTH html and body — that creates
   two competing scrollers and causes the stuck/jittery scroll on iOS. */
html.invitation-open {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* No fixed height: let content define document height so the page
       scrolls naturally and the mobile address bar can collapse. */
    touch-action: pan-y;
    /* Prevent pull-to-refresh from fighting with scroll */
    overscroll-behavior-y: none;
}
body.invitation-open {
    overflow-x: hidden;
    overflow-y: visible;          /* body is NOT a second scroll container */
    min-height: 100dvh;           /* dynamic vh — stable with mobile toolbars */
    touch-action: pan-y;
    position: relative;
}

/* ═══════════════════════════════════════════════════════
   UI CONTROLS
   ═══════════════════════════════════════════════════════ */
.ui-controls {
    position: fixed;
    top: env(safe-area-inset-top, 1rem);
    left: 1rem;
    z-index: 9000;
    display: none;   /* hidden until splash is fully open */
}

.pill-btn {
    background: rgba(250, 244, 230, .97);
    border: 2px solid var(--gold);
    color: var(--brown);
    padding: .6rem 1.35rem;
    cursor: pointer;
    font: 700 1.05rem/1.2 var(--fn-pop);
    border-radius: 100px;
    letter-spacing: 0.04em;
    box-shadow: 0 5px 20px rgba(193, 154, 56, .28);
    animation: pillGlowGold 2s ease-in-out infinite;
    transition: transform .2s var(--ease-out-back), box-shadow .2s ease;
}

.pill-btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(193, 154, 56, .65);
    animation: none;
}

.pill-btn:active {
    transform: scale(.93);
    box-shadow: 0 2px 8px rgba(193, 154, 56, .2);
    animation: none;
}

@keyframes pillGlowGold {
    0%, 100% { box-shadow: 0 4px 16px rgba(193, 154, 56, .28); }
    50%       { box-shadow: 0 8px 34px rgba(193, 154, 56, .68), 0 0 10px rgba(230, 185, 70, .35); }
}

.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, .97);
    border: 1.5px solid var(--gold);
    color: var(--brown);
    padding: .44rem .95rem;
    border-radius: 100px;
    cursor: pointer;
    font: 700 .78rem/1 var(--fn-pop);
    box-shadow: 0 4px 16px rgba(193, 154, 56, .28);
    animation: pillGlowGold 2s ease-in-out infinite;
    transition: transform .2s var(--ease-out-back), box-shadow .2s ease;
}

.music-btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(193, 154, 56, .65);
    animation: none;
}

.music-btn:active {
    transform: scale(.93);
    box-shadow: 0 2px 8px rgba(193, 154, 56, .2);
    animation: none;
}

/* ═══════════════════════════════════════════════════════
   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;
    /* Capture all touches on splash; once removed, browser scroll is free */
    touch-action: none;
}


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


/* ── GOLD FRAME CORNERS ── */
.splash-frame {
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    transition: opacity 2s ease-in-out 0.1s;
}

/* Fade frame away as curtains open — in sync with curtain animation */
#splash-screen.open .splash-frame {
    opacity: 0;
}

.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;
    opacity: 1;
    transition: opacity 2s ease-out;
}

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

.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: 700 clamp(1.3rem, 4.6vw, 2.3rem)/1 var(--fn-pop);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(232, 198, 105, 0.95);
    text-shadow:
        0 0 10px rgba(200, 155, 30, .45),
        0 2px 6px rgba(0, 0, 0, .75);
    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: 420px;
    height: 40px;
    margin-top: -20px;
    margin-left: -210px;
    text-align: center;
    font-family: var(--fn-pop);
    font-size: 1.45em;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    color: var(--gold-lt);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
}

.starter-ar {
    font-family: var(--fn-pop);
    font-weight: 700;
}

.starter-en {
    font-family: var(--fn-pop);
    font-weight: 500;
}

.starter-sep {
    font-family: sans-serif;
    opacity: .75;
}

/* ── SIDE DECOR (flowery frame: clear, bold, left & right) ── */
.side-decor {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}
.side-decor-img {
    position: absolute;
    max-width: min(900px, 90vw);
    max-height: 28vh;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.8;
}
@media (min-width: 680px) {
    .side-decor-img {
        max-width: min(960px, 82vw);
        max-height: none;
    }
}

/* ── SCENE (main content) ── */
#main-content {
    position: relative;
    z-index: 5;
    min-height: 100dvh;
    overflow-x: hidden;
    opacity: 1;
    background-color: var(--paper);
    box-shadow: 0 0 0 1px rgba(193, 154, 56, 0.35) 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 — promoted to their own GPU compositing layers so they
   never invalidate the scroll layer or trigger main-thread repaints */
#smoke-canvas,
#leaves-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;   /* stable full-viewport fill across mobile toolbar changes */
    pointer-events: none;
    /* GPU compositing layer — eliminates scroll jank from canvas repaints */
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

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

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

/* 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 32px, rgba(193, 154, 56, .03) 32px, rgba(193, 154, 56, .03) 33px),
        repeating-linear-gradient(90deg, transparent, transparent 32px, rgba(139, 90, 24, .025) 32px, rgba(139, 90, 24, .025) 33px);
}

/* ── 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 .25rem;
}

/* ── Quranic verse (Ar-Rum 30:21) — calligraphic plaque ── */
.quran-plaque {
    position: relative;
    direction: rtl;
    text-align: center;
    max-width: 440px;
    margin: 0 auto clamp(1.2rem, 4vw, 1.7rem);
    padding: clamp(.9rem, 3vw, 1.3rem) clamp(.85rem, 3vw, 1.2rem);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(193, 154, 56, .07), transparent 70%),
        linear-gradient(180deg, rgba(255, 252, 244, .5), rgba(193, 154, 56, .02));
    border: 1px solid rgba(193, 154, 56, .35);
    border-radius: 4px;
    box-shadow:
        inset 0 0 0 4px rgba(255, 252, 244, .55),
        inset 0 0 0 5px rgba(193, 154, 56, .25),
        0 6px 24px rgba(193, 154, 56, .12);
}

/* Gold corner flourishes — frame the plaque like a calligraphic panel */
.quran-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 0 solid var(--gold);
    opacity: .8;
}
.quran-corner-tl { top: 8px;    right: 8px;  border-top-width: 2px;    border-right-width: 2px;    border-top-right-radius: 6px; }
.quran-corner-tr { top: 8px;    left: 8px;   border-top-width: 2px;    border-left-width: 2px;     border-top-left-radius: 6px; }
.quran-corner-bl { bottom: 8px; right: 8px;  border-bottom-width: 2px; border-right-width: 2px;    border-bottom-right-radius: 6px; }
.quran-corner-br { bottom: 8px; left: 8px;   border-bottom-width: 2px; border-left-width: 2px;     border-bottom-left-radius: 6px; }

/* Bismillah — small, gold, on top (as in the reference) */
.quran-basmala {
    font: 400 clamp(.85rem, 3.2vw, 1.05rem)/1.7 'Amiri Quran', serif;
    color: var(--gold);
    margin: 0 0 clamp(.5rem, 2vw, .8rem);
    opacity: .92;
}

/* Main verse — medium centerpiece */
.quran-main {
    font: 400 clamp(1.05rem, 4.2vw, 1.45rem)/2.05 'Amiri Quran', serif;
    color: var(--gold-dk);
    margin: 0;
    text-shadow: 0 1px 3px rgba(193, 154, 56, .2);
}

/* Sub-line — slightly smaller continuation */
.quran-sub {
    font: 400 clamp(.95rem, 3.7vw, 1.25rem)/2 'Amiri Quran', serif;
    color: var(--gold-dk);
    margin: clamp(.35rem, 1.6vw, .65rem) 0 0;
    opacity: .96;
    text-shadow: 0 1px 3px rgba(193, 154, 56, .18);
}

.quran-source {
    display: block;
    font: 400 clamp(.85rem, 3vw, 1.05rem)/1.6 'Amiri Quran', serif;
    color: var(--gold);
    opacity: .8;
    margin-top: clamp(.7rem, 3vw, 1.1rem);
}

/* ── Poetic invitation intro (after Quran) ── */
.invite-intro {
    direction: rtl;
    text-align: center;
    max-width: 600px;
    margin: 0 auto clamp(1.4rem, 5vw, 2rem);
}

.intro-line {
    font: 500 clamp(1.05rem, 4.3vw, 1.4rem)/1.95 var(--fn-pop);
    color: var(--brown-mid);
}

/* Follow page language direction for the intro */
html[dir="ltr"] .invite-intro {
    direction: ltr;
}
html[dir="ltr"] .intro-line {
    font-size: clamp(.95rem, 3.6vw, 1.2rem);
}

.intro-line-1 {
    font-weight: 700;
    color: var(--crimson);
    margin-bottom: clamp(.6rem, 2.5vw, 1rem);
}

.intro-line-3 {
    color: var(--gold-dk);
    font-weight: 700;
}

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

/* Arabic: Aref Ruqaa for family names */
html[lang="ar"] .families-block,
html[lang="ar"] .families-block .fam-name {
    font-family: var(--fn-pop);
    font-weight: 700;
}
html[lang="ar"] .families-block .fam-name {
    font: 700 clamp(1.5rem, 6vw, 1.9rem)/1.55 var(--fn-pop);
    color: #693307eb;
}

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

.fam-name {
    font: 700 clamp(1.45rem, 6vw, 1.8rem)/1.55 var(--fn-ar);
    color: #693307eb;
}

.fam-name-title {
    font-family: var(--fn-pop);
    font-weight: 700;
    color: #693307eb;
    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(1.45rem, 6vw, 1.8rem)/1.55 var(--fn-ar);
    color: #693307eb;
}

/* English: Great Vibes script for family names */
html[dir="ltr"] .families-block .fam-name {
    font-family: var(--fn-pop);
    font-weight: 500;
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    line-height: 1.4;
    color: #693307eb;
}
html[dir="ltr"] .fam-name {
    font-family: var(--fn-body);
    font-size: clamp(1.2rem, 5vw, 1.55rem);
    color: #693307eb;
}

.fam-sub {
    font: 500 clamp(.82rem, 3.5vw, .98rem)/1.6 var(--fn-ar-head);
    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: 500 2.4rem/1 var(--fn-scrpt);
    color: var(--gold);
    flex-shrink: 0;
}

html[dir="rtl"] .fam-divider-amp {
    font-family: var(--fn-pop);
}

/* ── Preamble ── */
.preamble {
    font: 500 clamp(.77rem, 3.02vw, 1.03rem)/1.8 var(--fn-pop);
    color: var(--brown-lt);
    margin: .6rem auto;
    text-align: center;
    max-width: 320px;
}

html[dir="ltr"] .preamble {
    font-size: clamp(.832rem, 3.26vw, 1.112rem);
    max-width: 400px;
}

/* ── Couple names — vertical creative split ── */
.couple-block {
    margin: .15rem 0 .4rem;
}

.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: 500 clamp(2.8rem, 12vw, 5.5rem)/1 var(--fn-pop);
    color: var(--crimson);
    text-shadow:
        0 4px 16px rgba(139, 26, 34, .30),
        0 1px 3px rgba(0, 0, 0, .18),
        0 8px 32px rgba(193, 154, 56, .12);
    display: block;
    font-feature-settings: "liga" 1, "calt" 1;
    animation: name-float-up 5s ease-in-out infinite;
    /* GPU layer for animation — prevents scroll-layer invalidation */
    will-change: transform;
}

/* Second name floats DOWN — opposite of first for see-saw effect */
.cn-name:nth-child(3) {
    animation: name-float-down 5s ease-in-out infinite;
}

@keyframes name-float-up {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-9px); }
}

@keyframes name-float-down {
    0%, 100% { transform: translateY(0);   }
    50%       { transform: translateY(9px); }
}

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

/* The & / و separator — prominent gold script */
.cn-amp {
    font: 500 clamp(2.8rem, 12vw, 5.5rem)/1 var(--fn-ar-head);
    color: var(--gold);
    flex-shrink: 0;
    text-shadow:
        0 4px 16px rgba(193, 154, 56, .35),
        0 1px 3px rgba(0, 0, 0, .15);
    /* Connector floats at half-phase — fluid wave between the two names */
    animation: name-float-up 5s ease-in-out infinite;
    animation-delay: -2.5s;
}

.cn-amp-en {
    font: 500 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;
    /* Medium-large size — not full width */
    max-width: 440px;
    margin: -.5rem auto .25rem;
}

.portrait-fig {
    margin: 0;
}

#couple-portrait {
    width: 100%;
    height: auto;
    display: block;
    /* Subtle edge fade only — image stays clearly visible */
    -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 70%, 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;
    contain: layout paint;
}

.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;
    min-height: 120px;
}

.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: 2.25rem 1.5rem 2.75rem;
    background: transparent;
}

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

html[dir="rtl"] .section-label {
    letter-spacing: 0;
}


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

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

.venue-name {
    font: 600 1.25rem/1.5 var(--fn-ar);
    color: var(--gold-dk);
    margin-bottom: 2rem;
}

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

.countdown {
    font-family: var(--fn-pop);
    font-weight: 700;
    display: flex;
    justify-content: center;
    gap: clamp(.5rem, 2vw, 1rem);
    direction: ltr;
}

.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;
    z-index: 1;
    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: 700 clamp(2rem, 7vw, 2.8rem)/1 var(--fn-pop);
    color: var(--crimson);
    margin-bottom: .28rem;
    position: relative;
}

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

html[dir="rtl"] .time-label {
    letter-spacing: 0;
}


/* ═══════════════════════════════════════════════════════
   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(80px) + gap(1rem) + half-dot(7px) - half-line(1px) */
.ag-line-wrap::before {
    content: '';
    width: calc(80px + 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 {
    font-family: var(--fn-pop);
    width: 80px;
    flex-shrink: 0;
    text-align: center;
    padding-top: .9rem;
}

.ag-time {
    font: 700 1.08rem/1 var(--fn-pop);
    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(1.12rem, 4.6vw, 1.32rem)/1.4 var(--fn-ar);
    color: var(--brown);
    display: flex;
    align-items: center;
    gap: .55rem;
}

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

/* Gold themed icon for each agenda item */
.ag-icon {
    flex-shrink: 0;
    width: 1.35em;
    height: 1.35em;
    color: var(--gold);
    filter: drop-shadow(0 1px 2px rgba(193, 154, 56, .35));
}

.ag-desc {
    font: 500 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%;
}

html[dir="rtl"] .ctas-section {
    gap: 0.75rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 340px;
    text-align: start;
    text-decoration: none;
    font: 600 clamp(.95rem, 2.5vw, 1.05rem)/1 var(--fn-ar);
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: .95rem 1.5rem;
    transition: all .3s ease;
    line-height: 1;
}

.btn-text {
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* Arabic/RTL: text at start (right), icon after (left) */
html[dir="rtl"] .btn {
    direction: rtl;
}

.btn-icon {
    display: block;
    width: 8rem;
    height: 4rem;
    min-width: 4rem;
    min-height: 4rem;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
    align-self: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@media (min-width: 680px) {
    .btn-icon {
        width: 3rem;
        height: 3rem;
        min-width: 3rem;
        min-height: 3rem;
    }
}

.btn-primary {
    background: var(--crimson);
    color: var(--white);
    border: 1.5px solid var(--crimson);
    box-shadow: 0 6px 28px rgba(139, 26, 34, .45);
    animation: btnGlowCrimson 2s ease-in-out infinite;
}

.btn-primary:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 48px rgba(139, 26, 34, .70);
    animation: none;
}

.btn-primary:active {
    transform: scale(.93);
    box-shadow: 0 2px 10px rgba(139, 26, 34, .25);
    animation: none;
}

.btn-secondary {
    background: rgba(193, 154, 56, .35);
    color: var(--crimson);
    border: 1.5px solid rgba(193, 154, 56, .6);
    box-shadow: 0 5px 20px rgba(193, 154, 56, .28);
    animation: btnGlowGold 2s ease-in-out infinite;
}

.btn-secondary:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(193, 154, 56, .65);
    animation: none;
}

.btn-secondary:active {
    transform: scale(.93);
    box-shadow: 0 2px 8px rgba(193, 154, 56, .2);
    animation: none;
}

/* Breathing glow — more visible pulse to signal interactivity */
@keyframes btnGlowCrimson {
    0%, 100% { box-shadow: 0 4px 20px rgba(139, 26, 34, .35); }
    50%       { box-shadow: 0 8px 40px rgba(139, 26, 34, .72), 0 0 10px rgba(200, 50, 60, .35); }
}

@keyframes btnGlowGold {
    0%, 100% { box-shadow: 0 4px 16px rgba(193, 154, 56, .28); }
    50%       { box-shadow: 0 8px 34px rgba(193, 154, 56, .68), 0 0 10px rgba(230, 185, 70, .35); }
}

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

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

html[dir="ltr"] .footer-love {
    font-family: var(--fn-pop);
    font-size: clamp(1.4rem, 5vw, 1.9rem);
}

/* Zain font in English only: countdown, agenda, CTAs, footer */
html[lang="en"] .countdown-section,
html[lang="en"] .countdown-section .section-label,
html[lang="en"] .countdown-section .date-display,
html[lang="en"] .countdown-section .venue-name,
html[lang="en"] .countdown-section .countdown,
html[lang="en"] .countdown-section .time-num,
html[lang="en"] .countdown-section .time-label,
html[lang="en"] .agenda-section,
html[lang="en"] .agenda-section .section-label,
html[lang="en"] .agenda-section .ag-label,
html[lang="en"] .agenda-section .ag-time-wrap,
html[lang="en"] .agenda-section .ag-time,
html[lang="en"] .ctas-section,
html[lang="en"] .ctas-section .btn,
html[lang="en"] .ctas-section .btn-text {
    font-family: var(--fn-pop);
}

/* ═══════════════════════════════════════════════════════
   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;
    /* will-change pre-promotes elements to GPU before they animate in */
    will-change: transform, opacity;
}

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

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

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

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

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

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

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

.anim-scale.is-visible {
    animation: scaleIn 0.75s 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,
.typewriter .typewriter-word {
    display: inline;
    opacity: 0;
    animation: typewriterIn 0.18s 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;
        /* Keep names clear of the floral side-decor: constrain width & center */
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .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: 520px;
    }

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

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

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

/* ═══════════════════════════════════════════════════════
   CLOSING STATEMENT
   ═══════════════════════════════════════════════════════ */
.closing-statement {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 1.5rem 2rem 2rem;
}

.closing-ar {
    font: 700 clamp(1.55rem, 6.5vw, 2.1rem)/1.65 var(--fn-pop);
    color: var(--crimson);
    margin: 0.5rem auto;
    max-width: 520px;
    text-align: center;
    direction: rtl;
    text-shadow:
        0 2px 12px rgba(139, 26, 34, .18),
        0 1px 3px rgba(0, 0, 0, .10);
}

.closing-en {
    font: 500 clamp(.95rem, 3.6vw, 1.2rem)/1.7 var(--fn-pop);
    color: #693307eb;
    margin: 0.4rem auto;
    max-width: 440px;
    text-align: center;
    direction: ltr;
}

/* Welcome line — under the main closing line */
.closing-welcome {
    font: 700 clamp(1.25rem, 5.2vw, 1.7rem)/1.7 var(--fn-pop);
    color: var(--crimson);
    margin: 0.3rem auto 0.9rem;
    max-width: 520px;
    text-align: center;
    direction: rtl;
    text-shadow: 0 2px 10px rgba(139, 26, 34, .14);
}

/* Privacy line with no-photo icon */
.closing-privacy {
    font: 700 clamp(1.1rem, 4.6vw, 1.45rem)/1.6 var(--fn-pop);
    color: var(--gold-dk);
    margin: 0.4rem auto 0.2rem;
    max-width: 520px;
    text-align: center;
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
}

.no-photo-icon {
    flex-shrink: 0;
    width: 1.5em;
    height: 1.5em;
    color: var(--crimson);
}

/* Arabic mode: show Arabic line, hide English */
html[dir="rtl"] .closing-en {
    display: none;
}

/* English mode: show English line, hide Arabic lines */
html[dir="ltr"] .closing-ar,
html[dir="ltr"] .closing-welcome,
html[dir="ltr"] .closing-privacy {
    display: none;
}

/* ── GPU compositing hints for gyroscope parallax elements ── */
.couple-block,
.invite-header {
    will-change: transform;
}