/* ==========================================================================
   Marriage in Georgia (sections/marriage.php, assets/js/marriage.js): one screen after the hero of
   deltacafes.com/en, the client's reference. Its palette too: cocoa and a blush peach. The headline and its button
   sit low on the inline-start side, the steps run under a line of progress bars, the cluster of boxes stands on the
   inline-end side. While the 3D hall is live this screen lies under the hall's last screens (.is-over): the hall
   draws the walk and the view, and here --u (0 at the window … 1 on arrival, from journal.js) brings in the picture
   and the words. Without the hall it is an ordinary first screen.
   ========================================================================== */
.wed {
  --peach: #E3C1AD; --peach-soft: rgb(242 222 206 / .45); --cocoa: #2B1B14; --cocoa-2: #3A2219; --btn-ink: #35221A;
  --cell: rgb(38 23 17 / .62); --line: rgb(227 193 173 / .28);
  --wed-k: 1.08;    /* the pictures' scale: journal.js VIEW_K frames the hall's last view to exactly this */
  --dur: 9s;        /* one step */
  --grid-w: clamp(330px, 27.5vw, 440px);
  --u: 1;
  position: relative; z-index: 7; color: var(--peach); background: var(--cocoa);
}
.wed.is-over { background: transparent; }

/* ---------- the screen, and its place under the hall ---------- */
.wed__intro { position: relative; }
.wed__anchor { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; outline: none; }
.wed__stage { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; overflow: clip; }
.wed.is-over .wed__intro { margin-top: calc(var(--wed-pull) * -1); height: var(--wed-pull); pointer-events: none; }
.wed.is-over .wed__anchor { top: var(--wed-arrive); }
.wed.is-over .wed__stage { position: sticky; top: 0; min-height: 0; }
.wed.is-over:not(.is-near) .wed-hero { visibility: hidden; }
.wed.is-over.is-here .wed-hero { pointer-events: auto; }
/* arriving: first the words over the hall's own view, then this screen's picture over that same view */
.wed__stage { --in: clamp(0, (var(--u) - .8) * 5, 1); --bg-in: clamp(0, (var(--u) - .9) * 12.5, 1); }
/* staying and leaving: after you arrive the screen holds still for a screen of scrolling (marriage.js: two scrolls,
   the picture slowly moving in), then the student section rises over it like a sheet of paper (students.css,
   ch_sec3) for one more screen while it darkens (.wed__cover: students.js sets its opacity) */
@media (prefers-reduced-motion: no-preference) {
  html.js .wed__intro { height: calc(max(600px, 100vh) + 200vh); height: calc(max(600px, 100svh) + 200svh); }
  html.js .wed__stage { position: sticky; top: 0; }
  html.js .wed.is-over .wed__intro { height: calc(var(--wed-pull) + 200vh); height: calc(var(--wed-pull) + 200svh); }
}
.wed__cover { position: absolute; z-index: 3; inset: 0; background: #140B07; opacity: 0; pointer-events: none; will-change: opacity; }
/* coming in over the real estate section like a sheet of paper (ch_sec3, marriage.js); that section holds still
   under it for a screen (realestate.css). The screen is the sheet: its own colour, its top corners rounded. */
@media (prefers-reduced-motion: no-preference) {
  html.js .re:not(.is-flat) + .wed { margin-top: -100vh; margin-top: -100svh; background: transparent; }
  html.js .re:not(.is-flat) + .wed .wed__stage { background: var(--cocoa); border-radius: 28px 28px 0 0; transform-origin: 50% 0; box-shadow: 0 -24px 70px -26px rgb(10 5 2 / .6); will-change: transform; }
}

/* the chapter mark (Ⴁ, the second chapter of the homepage), top inline-start, coming in with the words */
.wed__chap {
  position: absolute; z-index: 2; inset-inline-start: var(--qnav-clear); top: calc(var(--header-h) + 22px);
  font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--peach);
  opacity: var(--in); text-shadow: 0 1px 14px rgb(30 16 10 / .5);
}
html[lang="en"] .wed__chap { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.wed__chap > span:last-child { display: inline-flex; align-items: center; gap: 12px; }
.wed__chap > span:last-child::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5; }
.wed.is-over:not(.is-near) .wed__chap { visibility: hidden; }

/* ---------- backgrounds ---------- */
.wed-bg { position: absolute; z-index: 0; inset: 0; margin: 0; padding: 0; list-style: none; opacity: var(--bg-in); will-change: transform; }
/* the next picture comes in over the last one, which stays whole underneath until it is covered, then resets */
.wed-bg__item { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-40px); transition: opacity 0s 1.6s, transform 0s 1.6s, visibility 0s 1.6s; }
.wed-bg__item.is-on { z-index: 1; opacity: 1; visibility: visible; transform: none; transition: opacity 1.2s var(--ease-io), transform 1.6s var(--ease-out), visibility 0s; }
.wed-bg__item img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--wed-k)); }
/* the same vignette the hall's shader puts on its view (1 − .55·r², hall-gl.js vig), so the hand-over is seamless */
.wed-bg__vignette {
  position: absolute; z-index: 2; inset: 0;
  background: radial-gradient(ellipse farthest-corner at 50% 50%, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .017) 25%, rgb(0 0 0 / .069) 50%, rgb(0 0 0 / .155) 75%, rgb(0 0 0 / .275) 100%);
}
.wed__shade {
  position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: var(--in);
  background:
    linear-gradient(to top, rgb(36 20 13 / .82), rgb(36 20 13 / .3) 38%, rgb(36 20 13 / .08) 62%, rgb(36 20 13 / .22)),
    linear-gradient(to var(--to-end, left), rgb(36 20 13 / .32), rgb(36 20 13 / 0) 55%);
}
[dir="ltr"] .wed__shade { --to-end: right; }

/* ---------- the content: headline and button, the cluster, the steps ---------- */
.wed-hero {
  position: absolute; z-index: 2; inset: auto 0 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--grid-w);
  grid-template-areas: "title grid" "tabs tabs"; align-items: end; column-gap: 40px;
  padding: 0 var(--gutter) clamp(22px, 4.2vh, 44px);
  opacity: var(--in); transform: translateY(calc((1 - var(--in)) * 30px));
}
.wed-titles { grid-area: title; display: grid; margin: 0; padding: 0; list-style: none; }
.wed-title {
  --x: 10px;
  grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; transform: translateX(var(--x));
  transition: opacity .5s var(--ease-io), transform .8s var(--ease-out), visibility 0s .5s;
}
[dir="rtl"] .wed-title { --x: -10px; }
.wed-title.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease-io) .25s, transform 1s var(--ease-out) .25s, visibility 0s; }
.wed-title__h { max-width: 10.5em; font-family: var(--font-body); font-size: clamp(40px, 5.37vw, 96px); font-weight: 300; line-height: 1; letter-spacing: -.04em; text-wrap: balance; color: var(--peach); }
html[lang="fa"] .wed-title__h { max-width: 11em; font-size: clamp(34px, 4.3vw, 78px); line-height: 1.32; letter-spacing: -.01em; }
.wed-btn { display: inline-flex; gap: 2px; margin-top: 20px; text-decoration: none; }
html[lang="fa"] .wed-btn { margin-top: 14px; }
.wed-btn__label { display: flex; align-items: center; height: 52px; padding: 0 23px; border-radius: 999px; background: var(--peach); color: var(--btn-ink); font-size: 14px; font-weight: 550; transition: background-color .3s; }
.wed-btn__go { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--cocoa-2); color: var(--peach); transition: background-color .3s, color .3s, translate .4s var(--ease-out); }
.wed-btn:hover .wed-btn__label { background: #EDD3C3; }
.wed-btn:hover .wed-btn__go { background: var(--peach); color: var(--btn-ink); translate: 4px 0; }
[dir="rtl"] .wed-btn:hover .wed-btn__go { translate: -4px 0; }
.wed-btn:focus-visible { outline: 2px solid var(--peach); outline-offset: 4px; border-radius: 999px; }

/* the cluster: four dark boxes; two of them change with the step */
.wed-grid {
  grid-area: grid; display: grid; grid-template-columns: 18fr 22fr;
  grid-template-rows: 44px calc(var(--grid-w) * .369) calc(var(--grid-w) * .369); gap: 8px;
}
.wed-cell {
  position: relative; overflow: hidden; border-radius: 10px; background: var(--cell); color: var(--peach); text-decoration: none;
  font-size: 13.6px; font-weight: 420; line-height: 1.2;
}
html[lang="fa"] .wed-cell { font-size: 13px; line-height: 1.6; }
/* frosted only once you stand here: over the hall's moving view the blur would be redone every frame */
.wed:not(.is-over) .wed-cell, .wed.is-here .wed-cell { -webkit-backdrop-filter: blur(12px) saturate(115%); backdrop-filter: blur(12px) saturate(115%); }
/* (not while the screen comes in tilted: a blur under a moving layer is recomputed every frame) */
.wed.is-rising .wed-cell { -webkit-backdrop-filter: none; backdrop-filter: none; }
a.wed-cell:focus-visible, .wed-box a:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }
.wed-cell .arrow { width: 22px; height: 22px; flex: none; transition: translate .4s var(--ease-out); }
.wed-cell--cta { grid-area: 1 / 1; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 16px; }
.wed-cell--cta:hover .arrow { translate: 4px 0; }
[dir="rtl"] .wed-cell--cta:hover .arrow { translate: -4px 0; }
.wed-cell--famous { grid-area: 1 / 2 / 3 / 3; padding: 6px; }
.wed-cell--rings { grid-area: 2 / 1; display: grid; place-items: center; padding: 12px 12px 34px; }
.wed-cell--box { grid-area: 3 / 1 / 4 / 3; }
.wed-cell__label { position: absolute; inset-inline: 16px; bottom: 14px; }
.wed-rings__pic { width: 62%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; box-shadow: 0 14px 24px -12px rgb(0 0 0 / .7); transition: transform .6s var(--ease-out); }
.wed-rings__pic img { width: 100%; height: 100%; object-fit: cover; }
.wed-cell--rings:hover .wed-rings__pic { transform: translateY(-3px) scale(1.03); }

/* boxes that change with the step: the items lie on one another and cross-fade */
.wed-swap { display: grid; height: 100%; margin: 0; padding: 0; list-style: none; }
.wed-swap > li { grid-area: 1 / 1; min-height: 0; opacity: 0; visibility: hidden; transform: scale(.95); transition: opacity .5s var(--ease-io), transform .8s var(--ease-out), visibility 0s .5s; }
.wed-swap > li.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease-io) .3s, transform 1s var(--ease-out) .3s, visibility 0s; }
.wed-famous { position: relative; border-radius: 6px; overflow: hidden; }
.wed-famous img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wed-famous::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(30 16 10 / .82), rgb(30 16 10 / 0) 58%); }
.wed-famous__text { position: absolute; z-index: 1; inset-inline: 12px; bottom: 10px; display: grid; gap: 3px; margin: 0; }
.wed-famous__text b { font-weight: 450; }
.wed-famous__text span { font-size: 12px; color: var(--peach-soft); }
.wed-famous__tag { position: absolute; z-index: 2; inset-inline-start: 14px; top: 14px; padding: 4px 9px; border-radius: 999px; background: rgb(38 23 17 / .7); font-size: 12px; letter-spacing: .02em; }
.wed-box a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; height: 100%; padding: 16px; color: inherit; text-decoration: none; }
.wed-box__pic { width: calc(var(--grid-w) * .3); height: 100%; display: grid; place-items: center; border-radius: 50%; aspect-ratio: 1; max-height: 100%; justify-self: center; background: radial-gradient(circle at 35% 30%, #5A3A2B, #2E1B13 70%); color: var(--peach); box-shadow: inset 0 0 0 1px rgb(227 193 173 / .18); }
.wed-box__pic svg { width: 44%; height: 44%; }
.wed-box__text { display: grid; align-content: start; gap: 6px; padding-top: 6px; }
.wed-box__text b { font-weight: 450; }
.wed-box__text span { color: var(--peach-soft); }
.wed-box .arrow { margin-top: 4px; }
.wed-box a:hover .arrow { translate: 4px 0; }
[dir="rtl"] .wed-box a:hover .arrow { translate: -4px 0; }

/* the steps: a progress bar over each; the one that is on fills, then the next comes (marriage.js) */
.wed-tabs { grid-area: tabs; display: flex; align-items: flex-start; margin-top: 20px; }
.wed-tabs__list { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wed-tabs__rest { flex: 1; height: 1px; margin-inline-start: 32px; background: var(--line); }
.wed-tab button {
  position: relative; display: grid; grid-template-columns: 102px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px;
  width: clamp(200px, 16.7vw, 260px); padding: 18px 0 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.wed-tab button:focus-visible { outline: 2px solid var(--peach); outline-offset: 4px; border-radius: 4px; }
.wed-tab__bar { position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--line); overflow: hidden; }
.wed-tab__bar i { position: absolute; inset: 0; background: var(--peach); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .wed-tab__bar i { transform-origin: right; }
.wed-tab.is-done .wed-tab__bar i { transform: none; }
.wed-tab.is-on .wed-tab__bar i { animation: wed-fill var(--dur) linear forwards; }
.wed.is-paused .wed-tab.is-on .wed-tab__bar i { animation-play-state: paused; }
@keyframes wed-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wed-tab__pic { grid-row: 1 / 3; width: 102px; height: 62px; object-fit: cover; border-radius: 4px; transition: opacity .4s; }
.wed-tab__no, .wed-tab__title { font-size: 12px; font-weight: 550; line-height: 1.2; }
.wed-tab__title { align-self: end; }
html[lang="fa"] .wed-tab__no, html[lang="fa"] .wed-tab__title { font-size: 12.5px; line-height: 1.5; }
.wed-tab button:hover .wed-tab__pic { opacity: .82; }

/* ---------- tablets: the cluster gets smaller ---------- */
@media (max-width: 1100px) {
  .wed { --grid-w: 300px; }
  .wed-hero { column-gap: 24px; }
  .wed-tabs__rest { display: none; }
}
/* ---------- phones: the headline over the picture, the steps in a row to swipe, no cluster (as the reference) ---------- */
@media (max-width: 860px) {
  .wed-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "tabs"; padding-bottom: 96px; }   /* the steps stay clear of the quick nav button */
  .wed-grid { display: none; }
  .wed-title__h { font-size: clamp(38px, 11.3vw, 60px); }
  html[lang="fa"] .wed-title__h { font-size: clamp(30px, 8.6vw, 48px); }
  .wed-btn__label, .wed-btn__go { height: 50px; }
  .wed-btn__go { width: 50px; }
  .wed-tabs { margin-inline: calc(var(--gutter) * -1); }
  .wed-tabs__list { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); gap: 14px; }
  .wed-tabs__list::-webkit-scrollbar { display: none; }
  .wed-tab { scroll-snap-align: start; }
  .wed-tab button { width: min(210px, 54vw); grid-template-columns: 46% minmax(0, 1fr); }
  .wed-tab__pic { width: 100%; height: auto; aspect-ratio: 1.6; }
}

/* ---------- reduced motion: nothing moves by itself (marriage.js does not advance), changes are instant ---------- */
@media (prefers-reduced-motion: reduce) {
  .wed-bg__item, .wed-bg__item.is-on, .wed-title, .wed-title.is-on, .wed-swap > li, .wed-swap > li.is-on { transition: none; transform: none; }
  .wed-tab.is-on .wed-tab__bar i { animation: none; transform: none; }
}