/* backgrounds — swap these two URLs to drop in real photography instead */

/* ============================================================
   Three concepts — one structure, three visual worlds.
   Concept A (Ivory & Gold) is the :root palette in styles.css.
   B and C only redefine tokens, plus one silhouette change each.
   ============================================================ */

/* ------------------------------------------------------------
   A · Champagne — concept 2's gold-and-contrast character, lifted
   off the dark ground onto the champagne/ivory of her floral board
   ------------------------------------------------------------ */
:root[data-concept="a"]{
  /* Champagne Noir — her board's palette on the black ground she asked for.
     "not باهت (washed out), not مزعج للنظر (harsh)": so a WARM near-black
     rather than #000, and warm ivory rather than #FFF. 16:1, not 21:1.     */
  --cream:#0B0805;
  --ink:#F4E9D4;            /* 16.1:1 on the card — bright without glare */
  --ink-2:#DCCDB0;          /* 12.4:1 */
  --gold-deep:#D9AE5C;      /*  9.4:1 — text-safe on black */
  --gold:#B2813C;           /*  5.6:1 here — her exact gold, and it carries text on black */
  --gold-line:rgba(217,174,92,.42);

  --glass:rgba(255,248,235,.045);
  --glass-2:rgba(255,248,235,.06);
  --glass-brd:rgba(217,174,92,.30);
  --shadow:0 40px 90px -34px rgba(0,0,0,.9);
  --shadow-sm:0 14px 34px -14px rgba(0,0,0,.8);

  --btn-bg:#D9AE5C; --btn-fg:#161009; --btn-bg-hover:#E8C177;
  --inset-bg:rgba(255,245,225,.055);
  --inset-bg-2:rgba(255,245,225,.08);
  --hover-bg:rgba(255,245,225,.11);
  --tint:rgba(217,174,92,.18);
  --check-ico:#2A1E0C;
  --ph:#A2937A;
  --grain:.05;

  --m1:#F4E0AE; --m2:#C99B45; --m3:#FFF6DE;
  --m4:#DCC4A2; --m5:#8A6222; --m6:#E3C88C;
}
:root[data-concept="a"] .bg__photo{background-image:none;opacity:0}
:root[data-concept="a"] .bg__bokeh{opacity:0}
:root[data-concept="a"] .bg__sprig{display:none}
:root[data-concept="a"] .bg__pampas{display:none}
/* the flat ring outline steps aside for the rendered bands */
:root[data-concept="a"] .gate{background:rgba(10,8,6,.42)}

/* metal stops for the rings ornament, swapped per concept */
:root{
  --m1:#E4C88F; --m2:#A97F41; --m3:#F2E1BC;
  --m4:#B8945F; --m5:#8A6A34; --m6:#DCC393;
}

/* the photographic ground — B and C bring their own */
.bg__photo{position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat;opacity:0;transition:opacity .8s var(--ease)}

/* ============================================================
   Concept switcher — this is the chooser, not part of the invitation
   ============================================================ */
  font-family:'Jost',system-ui,sans-serif;font-size:.66rem;letter-spacing:.08em;color:#EFE7DA;
  white-space:nowrap;transition:background .3s var(--ease)}
.switch__b i{width:11px;height:11px;border-radius:999px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.switch__b[aria-pressed="true"]{background:rgba(255,255,255,.16)}
.switch__b:hover{background:rgba(255,255,255,.10)}
.switch__b:focus-visible{outline:2px solid #EFE7DA;outline-offset:2px}

/* the switcher lives in the empty band above the cards, so it never
   covers content at any scroll position */
@media (max-width:980px){
    .screen{padding-top:calc(7.4rem + var(--gut))}
}

@media (max-width:980px){
  .switch__b span{display:none}
  .switch__b{padding:.55rem .6rem}
  .switch__b i{width:13px;height:13px}
}

/* ============================================================
   New sections from the client's brief
   ============================================================ */

/* ---- 1 · the rings, as the opening image ---- */
.gate__rings{width:clamp(150px,24vw,224px);margin-bottom:2.5rem}

/* ---- 2 · both families ---- */
.fam{display:grid;gap:.5rem}
.fam__houses{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(.75rem,3vw,2rem);
  align-items:start;margin:.5rem 0 .25rem}
.fam__amp{align-self:center}
.fam__house{line-height:1.3;text-wrap:balance}
.fam__pre{display:block;font-family:var(--sans);font-size:.76rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.45rem}
.fam__nm{display:block;font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(1.2rem,2.9vw,1.65rem)}
html[dir="rtl"] .fam__pre{letter-spacing:0;text-transform:none;font-size:.92rem}
.fam__amp{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,3vw,1.9rem);
  color:var(--gold-deep)}
.fam__req{margin-top:1.1rem}
.fam__names{font-size:clamp(2.4rem,8vw,4.2rem);margin:.35rem 0 .1rem}
@media (max-width:560px){
  .fam__houses{grid-template-columns:1fr;gap:.35rem}
  .fam__amp{font-size:1.5rem}
}

/* ---- 3 · the journey ---- */
.route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(.5rem,2vw,1.5rem);margin-top:.5rem}
.stop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem}
.stop__disc{width:clamp(92px,15vw,128px);aspect-ratio:1;border-radius:999px;display:grid;
  place-items:center;border:1px solid var(--gold-line);background:var(--inset-bg);
  position:relative}
.stop__disc::after{content:'';position:absolute;inset:7px;border-radius:999px;
  border:1px solid var(--gold-line);opacity:.5}
.stop__disc svg{width:clamp(34px,5.5vw,46px);height:auto;color:var(--gold-deep);stroke-width:1.1}
.stop__n{font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep)}
.stop__t{font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,2.8vw,1.5rem);
  color:var(--ink);line-height:1.25}
.stop__time{font-family:var(--serif);font-weight:600;color:var(--gold-deep);
  font-size:clamp(1.3rem,3vw,1.7rem);font-variant-numeric:lining-nums tabular-nums}
.route__link{width:100%;min-width:64px}
.route__link svg{width:100%;height:auto;color:var(--gold);display:block}
/* `display:block` above out-specifies a bare [hidden]; a stretched vertical
   SVG turns the dashes into a column of blobs, so kill it explicitly. */
.route__link svg[hidden]{display:none}
.route__link .dash{stroke-dasharray:2 12;stroke-linecap:round;fill:none;stroke-width:2.4}
html[dir="rtl"] .stop__n{letter-spacing:0;text-transform:none;font-size:.92rem}
@media (max-width:720px){
  .route{grid-template-columns:1fr;gap:.5rem}
  /* a stretched SVG turns dashes into blobs — draw the vertical run in CSS */
  .route__link{height:76px;display:grid;place-items:center;min-width:0}
  .route__link svg{display:none}
  .route__link::before{content:'';width:3px;height:100%;border-radius:99px;
    background:repeating-linear-gradient(to bottom,var(--gold) 0 3px,transparent 3px 13px)}
}

/* ---- 6 · gifts ---- */
.gift{display:grid;gap:1rem;margin-top:1.75rem}
.gift__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;text-align:start;border-radius:16px;padding:1.1rem 1.35rem;
  background:var(--inset-bg-2);border:1px solid var(--glass-brd)}
.gift__label{font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep)}
.gift__value{font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,2.8vw,1.4rem);
  color:var(--ink);margin-top:.25rem;font-variant-numeric:lining-nums tabular-nums;
  direction:ltr;unicode-bidi:isolate}
.gift__act{flex:none}
.copied{color:var(--gold-deep);font-size:.8rem;font-weight:500}
html[dir="rtl"] .gift__label{letter-spacing:0;text-transform:none;font-size:.92rem}
@media (max-width:480px){
  .gift__row{flex-direction:column;align-items:stretch}
  .gift__act,.gift__act .btn{width:100%}
}

/* dried pampas + baby's breath — the Champagne board's botanical.
   Hidden everywhere else; each concept keeps its own ornament. */
.bg__pampas{position:absolute;display:none;width:clamp(190px,26vw,380px)}
.bg__pampas--tl{top:-4%;left:-4%;transform:scaleY(-1) rotate(-8deg)}
.bg__pampas--br{bottom:-4%;right:-4%;transform:scaleX(-1)}
@media (max-width:640px){ .bg__pampas{width:190px;opacity:.24} }

/* the rendered gold bands — only the concept that asked for them shows these */

/* ============================================================
   Champagne Noir · a clean black
   The soft-focus ground and the backdrop blur were what made the
   black read hazy. Both are gone: a flat deep black, and every gold
   line and letter sitting crisply on top of it.
   ============================================================ */
:root[data-concept="a"] .bg{
  background:linear-gradient(180deg,#0A0806 0%,#0C0A07 55%,#100C08 100%)}
:root[data-concept="a"] .glass,
:root[data-concept="a"] .gate,
:root[data-concept="a"] .pill,
:root[data-concept="a"] .music{backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-concept="a"] .card{border-radius:3px}
:root[data-concept="a"] .day__card,
:root[data-concept="a"] .rsvp__party,
:root[data-concept="a"] .day__note,
:root[data-concept="a"] .gift__row,
:root[data-concept="a"] .stepper,
:root[data-concept="a"] .choice__box,
:root[data-concept="a"] textarea{border-radius:2px}
/* a fine gold rule just inside the card edge — sharp, not a glow */
:root[data-concept="a"] .card{position:relative}
:root[data-concept="a"] .card::before{
  content:'';position:absolute;inset:10px;border:1px solid rgba(217,174,92,.22);
  border-radius:1px;pointer-events:none}

/* switcher swatches — keyed to the concept so the order can change */

/* ============================================================
   RSVP — invited capacity, review summary, action pair.
   All token-driven, so every concept keeps its own colours.
   ============================================================ */
.cap{display:flex;justify-content:center;gap:clamp(1.5rem,6vw,3rem);margin-top:1rem}
.cap__u{text-align:center}
.cap__n{font-family:var(--serif);font-weight:600;line-height:1;color:var(--ink);
  font-size:clamp(1.6rem,4.5vw,2.1rem);
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.cap__l{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin-top:.5rem}
html[dir="rtl"] .cap__l{letter-spacing:0;text-transform:none;font-size:.86rem}

.notice{border:1px solid var(--gold-line);border-radius:2px;padding:.85rem 1.1rem;
  margin-bottom:1.5rem;font-size:.98rem;color:var(--ink-2);background:var(--inset-bg)}

.sum{text-align:start;margin-top:1.5rem;border-top:1px solid var(--gold-line)}
.sum__row{display:flex;justify-content:space-between;align-items:baseline;gap:1.25rem;
  padding:.9rem .15rem;border-bottom:1px solid var(--gold-line)}
.sum__k{flex:none;font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep)}
.sum__v{font-family:var(--serif);font-weight:500;font-size:1.12rem;color:var(--ink);
  text-align:end;font-variant-numeric:lining-nums tabular-nums}
html[dir="rtl"] .sum__k{letter-spacing:0;text-transform:none;font-size:.9rem}

.acts{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.85rem}
.acts .btn{width:100%}
@media (max-width:480px){ .acts{grid-template-columns:1fr} }

.done__seal circle{stroke-dasharray:190;stroke-dashoffset:190;animation:draw 1.1s var(--ease) .1s forwards}
.done .sum{margin-top:1.75rem}

/* switcher swatches for the three */

/* ---- the opening card's bouquet ----
   The client's own image, graded into the champagne palette. It arrives on
   pure black, so `screen` composites it with no matte at all: black stays
   exactly the ground, only the flowers add — no cut-out, soft edges intact.
   It hangs off the top-left corner and only its tail enters the card, with
   a mask fading that tail out before it can reach any type. */
:root{ --img-bouquet-card:url('assets/bouquet-card.png'); }
.fam__bloom{display:none}
:root[data-concept="a"] .fam__bloom{
  display:block;position:absolute;pointer-events:none;z-index:0;
  /* centred on the card's top-left corner — half of it inside the card,
     half outside, on both axes. Anchoring by top/left percentages made the
     overlap depend on the card's height, which is why it kept landing on
     the names at one width and floating free at another. */
  top:0;left:0;transform:translate(-50%,-50%);
  width:38%;aspect-ratio:680/1020;
  background-image:var(--img-bouquet-card);background-size:contain;
  background-repeat:no-repeat;background-position:center;
  opacity:.94;
  -webkit-mask-image:radial-gradient(115% 115% at 34% 34%,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%);
          mask-image:radial-gradient(115% 115% at 34% 34%,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%)}
:root[data-concept="a"] #fam-card > :not(.fam__bloom){position:relative;z-index:1}
:root[data-concept="a"][dir="rtl"] .fam__bloom{left:auto;right:0;
  transform:translate(50%,-50%) scaleX(-1);
  -webkit-mask-image:radial-gradient(115% 115% at 34% 34%,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%);
          mask-image:radial-gradient(115% 115% at 34% 34%,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%)}
/* the corner anchor holds at every width; only the size changes */
@media (max-width:900px){ :root[data-concept="a"] .fam__bloom{width:42%} }
@media (max-width:560px){ :root[data-concept="a"] .fam__bloom{width:52%} }

/* ---- the rings photograph, under the opening card only ----
   Graded to a champagne duotone and faded off at every edge, so it never
   reads as a rectangle pasted onto the black. It rides the same .at-first
   class the corner ornaments do, so photo in and ornaments out happen on
   the same half-second. */
:root{ --img-rings:url('assets/bg-rings.jpg'); }
.bg__rings{position:absolute;inset:0;display:none;background-size:cover;
  background-position:50% 46%;background-repeat:no-repeat;
  opacity:0;transition:opacity .6s var(--ease)}
:root[data-concept="a"] .bg__rings{display:block;background-image:var(--img-rings)}
:root[data-concept="a"].at-first .bg__rings{opacity:1}
/* over the photograph the near-transparent card is not enough on its own —
   it takes a scrim so the ivory keeps its contrast */
:root[data-concept="a"].at-first #fam-card{background:rgba(9,7,5,.42)}
#fam-card{transition:background .6s var(--ease)}

/* ---- the corner ornament ----
   The client's ivory roses. It arrives on pure black and lives inside .bg,
   which paints its own ground, so `screen` has a backdrop to blend against
   and drops the black with no matte — a 234KB JPEG rather than a 1.6MB
   alpha PNG. The opening card can't use that trick (it makes its own
   stacking context), so that copy carries a real alpha channel instead. */
:root{ --img-roses:url('assets/bouquet-roses.jpg'); }
.bg__bouquet{position:absolute;display:none;
  background-image:var(--img-roses);background-size:contain;
  background-repeat:no-repeat;background-position:center;
  width:clamp(150px,19vw,268px);aspect-ratio:760/1140;
  mix-blend-mode:screen;opacity:.9;transition:opacity .55s var(--ease)}
.bg__bouquet--tl{top:-4%;left:-4%}
.bg__bouquet--br{bottom:-4%;right:-4%;transform:scaleX(-1)}
:root[data-concept="a"] .bg__bouquet{display:block}
/* the opening card brings its own bouquet — the corners step aside while
   it is on screen, and come back for every other section */
:root[data-concept="a"].at-first .bg__bouquet{opacity:0}
@media (max-width:640px){ .bg__bouquet{width:132px;opacity:.62} }

/* ---- the Whish mark ----
   The brand supplies no dark version and its grey wordmark would sit at
   about 2:1 on this card, so it keeps its own paper under it. */
:root{ --img-whish:url('assets/whish.png'); }
.gift__logo{width:132px;aspect-ratio:1024/246;
  background-image:var(--img-whish);background-size:contain;
  background-repeat:no-repeat;background-position:left center;margin-bottom:.45rem}
html[dir="rtl"] .gift__logo{background-position:right center}

/* ---- reply-by, moved out of the journey and under the RSVP button ---- */
.replyby{display:flex;flex-direction:column;align-items:center;gap:.15rem;
  margin-top:1rem;text-align:center}
.replyby__k{font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.replyby__v{font-family:var(--serif);font-weight:600;color:var(--ink-2);
  font-size:1.05rem;font-variant-numeric:lining-nums tabular-nums}
html[dir="rtl"] .replyby__k{letter-spacing:0;text-transform:none;font-size:.9rem}

/* ---- Matthew 19:6, above the eyebrow on the opening card ----
   The Arabic is set in Amiri and never letterspaced; the English reading
   is italic serif so the two sides carry the same weight of voice. */
.verse{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  margin:0 0 1.5rem;text-align:center}
.verse__t{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.05rem,2.5vw,1.32rem);line-height:1.75;color:var(--ink-2);
  max-width:30ch;text-wrap:balance}
html[dir="rtl"] .verse__t{font-family:var(--ar-serif);font-style:normal;
  font-size:clamp(1.25rem,3.1vw,1.62rem);line-height:2;color:var(--ink);
  max-width:34ch}
.verse__r{font-family:var(--sans);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);
  font-variant-numeric:lining-nums tabular-nums}
html[dir="rtl"] .verse__r{font-family:var(--ar-serif);letter-spacing:0;
  text-transform:none;font-size:.95rem}
.verse::after{content:'';width:44px;height:1px;background:var(--gold-line);margin-top:.35rem}

/* The opening section was reading as flat black. Rather than shift any
   colour, the ground is lifted in tone and a warm pool sits behind the
   card — same hues, more light. */
:root[data-concept="a"] .bg__glow{position:absolute;inset:0;display:none;
  background:radial-gradient(58% 42% at 50% 46%,rgba(214,170,96,.16) 0%,
             rgba(214,170,96,.07) 38%,transparent 72%);
  opacity:0;transition:opacity .6s var(--ease)}
:root[data-concept="a"] .bg__glow{display:block}
:root[data-concept="a"].at-first .bg__glow{opacity:1}

/* the gate stands on the same ground as the opening card, at the same
   strength — a .42 scrim over the photograph, not a solid black lid */
:root[data-concept="a"].at-gate .bg__rings,
:root[data-concept="a"].at-gate .bg__glow{opacity:1}
/* …and because the gate is now a scrim rather than a lid, the invitation
   behind it would read straight through it. It is held back until the
   gate opens, and fades up on the gate's own 1.4s so the handover is one
   movement rather than a pop. */
#main{transition:opacity 1.4s var(--ease)}
:root[data-concept="a"].at-gate #main{opacity:0}
/* the corner roses are out on the opening card; the gate shares its
   ground, so they are out here too */
:root[data-concept="a"].at-gate .bg__bouquet{opacity:0}