/* ==========================================================================
   Welcome page (templates/pages/welcome.html).
   The CEO's and the GM's letters with large, sharp portraits in gold arch frames.
   Motion: only opacity / translate / scale (Motion rule); everything also reads right in calm mode.
   ========================================================================== */

/* ---------------------------------------------------------------- index under the hero (both faces at a glance) */
.welcome-index { position: relative; z-index: var(--z-raise); margin-top: calc(-1 * clamp(1.75rem, 1rem + 2.4vw, 3rem)); }
.welcome-index__list { display: grid; gap: .75rem; max-width: 62rem; margin-inline: auto; }
@media (min-width: 760px) { .welcome-index__list { grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
.welcome-index__link {
  position: relative; display: flex; align-items: center; gap: 1rem;
  min-height: 84px; padding: .7rem .8rem; padding-inline-end: 1.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow-2);
  transition: transform .5s var(--ease-out);
}
.welcome-index__face { flex: none; display: block; width: 68px; height: 68px; padding: 2px; border-radius: 50%; background: var(--gold-gradient); }
.welcome-index__face picture, .welcome-index__face img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.welcome-index__face img { object-fit: cover; background: var(--stone-100); }
.welcome-index__text { flex: 1; min-width: 0; display: grid; gap: .1rem; line-height: 1.45; }
.welcome-index__label { font-size: var(--fs-small); font-weight: 600; color: var(--accent-ink); }
.welcome-index__name { font-family: var(--font-display); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); font-weight: 700; color: var(--ink); }
:lang(en) .welcome-index__name { font-weight: 600; }
.welcome-index__arrow { flex: none; width: 1.2rem; height: 1.2rem; color: var(--gold-600); transition: translate .45s var(--ease-out); }
@media (hover: hover) {
  .welcome-index__link:hover { transform: translateY(-3px); }
  .welcome-index__link:hover .welcome-index__arrow { translate: 0 3px; }
}

/* ---------------------------------------------------------------- letter section */
.welcome-letter { position: relative; padding-block: var(--section-y); }
.welcome-letter--ceo { padding-top: clamp(3.25rem, 2rem + 4.5vw, 6.5rem); }
.welcome-letter__grid { display: grid; gap: clamp(2.75rem, 1.6rem + 4.5vw, 5.5rem); align-items: start; }
@media (min-width: 900px) {
  .welcome-letter__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .welcome-letter--flip .welcome-letter__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .welcome-letter--flip .welcome-portrait { order: 2; }
  /* the portrait stays in view while the letter is read (sticky = no script, no animation) */
  .welcome-portrait { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}

/* ---------------------------------------------------------------- portrait */
.welcome-portrait { margin: 0; display: grid; justify-items: center; gap: clamp(1.4rem, 1rem + 1vw, 2rem); }
.welcome-portrait__stage { position: relative; isolation: isolate; width: min(100%, 420px); margin-top: 16px; }
/* as large as the screen allows while the portrait + name plate still fit beside the letter (a 1536×730 laptop too) */
@media (min-width: 900px) { .welcome-portrait__stage { width: min(100%, clamp(300px, calc((100svh - var(--header-h) - 13rem) * .8), 460px)); } }
.welcome-portrait__frame { position: relative; z-index: 1; --curtain: var(--stone-200); background: var(--stone-100); box-shadow: var(--shadow-3); }
.welcome-portrait__frame img { object-position: 50% 30%; }
/* gold hairline arch, offset behind the photo */
.welcome-portrait__outline { position: absolute; inset: 0; z-index: 0; border: 1px solid var(--gold-500); border-radius: var(--r-arch); translate: calc(var(--dir) * -16px) 16px; pointer-events: none; }
.welcome-letter--flip .welcome-portrait__outline { translate: calc(var(--dir) * 16px) 16px; }
/* soft stone panel with the mashrabiya lattice, peeking out behind */
.welcome-portrait__halo { position: absolute; z-index: -1; top: 22%; bottom: -7%; inset-inline: -9% 22%; border-radius: var(--r-lg); background: var(--stone-100); --pattern-opacity: .16; --pattern-size: 44px; }
.welcome-letter--flip .welcome-portrait__halo { inset-inline: 22% -9%; background: var(--stone-200); }
@media (max-width: 899px) { .welcome-portrait__halo { inset-inline: -4% 30%; } .welcome-letter--flip .welcome-portrait__halo { inset-inline: 30% -4%; } }
/* small gold diamond at the top of the arch */
.welcome-portrait__star { position: absolute; z-index: 2; top: -14px; left: 50%; translate: -50% 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); color: var(--gold-500); }
.welcome-letter--flip .welcome-portrait__star { background: var(--stone-50); }
.welcome-portrait__star .icon { width: 16px; height: 16px; }

.welcome-portrait__plate { display: grid; justify-items: center; gap: .15rem; max-width: 26rem; text-align: center; }
.welcome-portrait__name { font-family: var(--font-display); font-size: clamp(1.55rem, 1.3rem + .9vw, 2.05rem); font-weight: 700; line-height: 1.35; color: var(--ink); }
:lang(en) .welcome-portrait__name { font-weight: 600; }
.welcome-portrait__role { display: inline-flex; align-items: center; gap: .7rem; font-weight: 600; color: var(--accent-ink); }
.welcome-portrait__role::before, .welcome-portrait__role::after { content: ""; width: 1.4rem; height: 1px; background: var(--gold-500); }
.welcome-portrait__org { font-size: var(--fs-small); color: var(--muted); }

/* ---------------------------------------------------------------- letter */
.welcome-letter__body { min-width: 0; max-width: 41rem; }
.welcome-letter__head { display: grid; justify-items: start; gap: var(--space-s); margin-bottom: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.welcome-letter__title { font-size: var(--fs-h2); }
/* the letter's own headline: the city on a line of its own, then the line itself (the "|" stays for screen readers) */
.welcome-letter__headline { display: grid; gap: .15rem; font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); line-height: 1.6; color: var(--accent-ink); }
:lang(en) .welcome-letter__headline { line-height: 1.3; font-style: italic; }
.welcome-letter__kicker { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; line-height: 1.6; color: var(--ink); }
.welcome-letter__kicker::after { content: ""; width: 1.6rem; height: 1px; background: var(--gold-500); }
:lang(en) .welcome-letter__kicker { font-style: normal; font-size: .8rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.welcome-letter__pipe { display: none; }
/* stacked layout: the name plate right above already names the company / group */
@media (max-width: 899px) { .welcome-letter__eyebrow { display: none; } }
.welcome-letter__ornament { margin-top: .35rem; }

.welcome-letter__text { display: grid; gap: 1.2em; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 2.05; color: var(--ink-soft); }
:lang(en) .welcome-letter__text { line-height: 1.8; }
.welcome-letter__intro { font-size: 1.12em; color: var(--ink); }
.welcome-letter__closing {
  margin-top: .4em; padding-block: .3rem; padding-inline-start: clamp(1rem, .8rem + .8vw, 1.5rem);
  border-inline-start: 2px solid var(--gold-500);
  font-family: var(--font-display); font-size: clamp(1.3rem, 1.12rem + .75vw, 1.7rem); line-height: 1.75; color: var(--ink);
}
:lang(en) .welcome-letter__closing { line-height: 1.45; font-style: italic; }

/* signature */
.welcome-sign { display: grid; justify-items: start; gap: .25rem; margin-top: clamp(2.25rem, 1.7rem + 1.6vw, 3.25rem); }
.welcome-sign__off { color: var(--muted); }
:lang(en) .welcome-sign__off { font-style: italic; }
.welcome-sign__rule { display: block; width: 76px; height: 1px; margin-block: .7rem .35rem; background: var(--gold-500); transform-origin: var(--origin-start); }
.welcome-sign__name {
  font-family: var(--font-display); font-size: clamp(1.95rem, 1.45rem + 1.8vw, 2.8rem); font-weight: 700; line-height: 1.35;
  background: linear-gradient(100deg, var(--gold-800) 0%, var(--gold-600) 45%, var(--gold-700) 72%, var(--gold-800) 100%);
  -webkit-background-clip: text; background-clip: text; color: var(--gold-700); -webkit-text-fill-color: transparent;
  /* background-clip:text only paints inside the box: the Arabic display font's swashes (the tail of «ح» in «صلاح»)
     reach past it and came out invisible. Pad the box so the gradient covers them; the negative margin keeps the layout. */
  /* Amiri reaches ~.2em past the line box above and below (hamza under «إ», the tail of «م» in «إبراهيم»): room for both */
  display: inline-block; padding: .32em .6em .58em; margin: -.32em -.6em -.58em;
}
:lang(en) .welcome-sign__name { font-weight: 600; font-style: italic; }
.welcome-sign__line { font-weight: 600; color: var(--ink); line-height: 1.6; }
.welcome-sign__line + .welcome-sign__line { font-weight: 400; color: var(--muted); font-size: var(--fs-small); }
.welcome-letter__note { display: flex; align-items: center; gap: .5rem; margin-top: var(--space-l); font-size: var(--fs-xs); color: var(--muted); }
.welcome-letter__note .icon { color: var(--gold-600); }

/* ---------------------------------------------------------------- closing motto */
.welcome-motto { padding-block: clamp(4rem, 2.6rem + 6vw, 8rem); background: var(--ivory); text-align: center; --pattern-opacity: .1; }
.welcome-motto__inner { display: grid; justify-items: center; gap: var(--space-m); }
.welcome-motto__mark { display: block; }
.welcome-motto__mark-img { width: 92px; height: auto; }
.welcome-motto__text { max-width: 22ch; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1.45; color: var(--navy-800); text-wrap: balance; }
:lang(en) .welcome-motto__text { font-weight: 500; font-style: italic; line-height: 1.2; }

/* ---------------------------------------------------------------- motion (full mode only; calm mode = the base fades) */
html.js[data-motion="full"] .welcome-portrait__outline { transition-property: opacity, translate; transition-duration: 1s, 1.5s; transition-timing-function: var(--ease-out), var(--ease-expo); }
html.js[data-motion="full"] .welcome-portrait__outline:not(.is-in) { translate: 0 0; }
html.js[data-motion="full"] .welcome-portrait__halo:not(.is-in) { translate: calc(var(--dir) * 24px) 0; }
html.js[data-motion="full"] .welcome-letter--flip .welcome-portrait__halo:not(.is-in) { translate: calc(var(--dir) * -24px) 0; }
html.js[data-motion="full"] .welcome-portrait__halo { transition-property: opacity, translate; transition-duration: 1.1s, 1.6s; transition-timing-function: var(--ease-out), var(--ease-expo); }
html.js[data-motion="full"] .welcome-portrait__star:not(.is-in) { scale: .4; }
html.js[data-motion="full"] .welcome-sign__rule:not(.is-in) { scale: 0 1; }
html.js[data-motion="full"] .welcome-sign__rule { transition-property: opacity, scale; transition-duration: .6s, 1.3s; transition-timing-function: var(--ease-out), var(--ease-expo); }