/* ------------------------------------------------------------------
   TikTok hub: shared styles (dark and gold)
   ------------------------------------------------------------------ */
:root {
  --bg: #222222;
  --gold: #c2a661;
  --gold-hi: #f1e2ad;
  --gold-lo: #8a6d2b;
  --ivory: #f4f0e6;
  --text: #f3ecd9;
  --muted: #b9ad8c;
  --dark-ink: #2b2412;
  --brass: linear-gradient(135deg, #f8edc4 0%, #d8bf74 22%, #a3823a 50%, #dcc57f 76%, #fbf1cc 100%);
  --t0: 0s;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.4;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* timing of the page's own entrance (the logo draws first, then everything else follows) */
body.tt { --t0: .75s; --g0: .05s; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- animated background: gold light, drifting dots, passing beam ---------- */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 35% at 22% 22%, rgba(194, 166, 97, .17), transparent 70%),
    radial-gradient(38% 32% at 82% 68%, rgba(194, 166, 97, .12), transparent 70%),
    radial-gradient(30% 28% at 70% 12%, rgba(255, 232, 170, .08), transparent 70%);
  will-change: transform;
  animation: fade-in 1.4s ease var(--t0) backwards, bg-drift 24s ease-in-out infinite alternate;
}
html::before {
  content: "";
  position: fixed;
  inset: -44px;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(194, 166, 97, .26) 1.2px, transparent 1.7px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 25%, transparent 85%);
          mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 25%, transparent 85%);
  will-change: transform, opacity;
  animation: dots-drift 9s linear infinite, dots-breathe 5s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 36%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 232, 170, .10) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  will-change: transform;
  animation: bg-beam 13s ease-in-out calc(var(--t0) + 1.5s) infinite;
}
@keyframes bg-drift {
  from { transform: translate3d(-5%, -4%, 0) rotate(-4deg) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) rotate(6deg) scale(1.12); }
}
@keyframes dots-drift  { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(22px, 22px, 0); } }
@keyframes dots-breathe { from { opacity: .4; } to { opacity: 1; } }
@keyframes bg-beam {
  0%        { transform: translateX(-130%) skewX(-18deg); }
  45%, 100% { transform: translateX(340%) skewX(-18deg); }
}

/* ---------- page frame and header ---------- */
.wrap { width: 100%; max-width: 420px; margin: 0 auto; padding: 0 16px 56px; }

.top { display: flex; flex-direction: column; align-items: center; padding-top: 54px; }
.tt .logo-svg { width: 66px; color: var(--ivory); }
.name {
  margin: 12px 0 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ivory);
  animation: fade-in .8s ease calc(var(--t0) + .1s) backwards;
}
html[lang="ar"] .name { letter-spacing: 0; text-transform: none; font-size: 1.2rem; }

.caption {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 300px;
  margin: 18px auto 0;
  color: var(--gold);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  animation: fade-in .8s ease calc(var(--t0) + .2s) backwards;
}
.caption::before, .caption::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.caption::after { background: linear-gradient(270deg, transparent, var(--gold)); }
html[lang="ar"] .caption { letter-spacing: 0; text-transform: none; font-size: .95rem; }

/* ---------- language toggle ---------- */
.lang-toggle {
  position: fixed;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 5;
  min-height: 30px;
  padding: 0 11px;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: rgba(34, 34, 34, .85);
  color: var(--gold-hi);
  font: 600 .72rem/1 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: fade-in .8s ease var(--t0) backwards;
}
.lang-toggle:focus-visible, .pn:focus-visible, .plate:focus-visible, .rb:focus-visible, .key:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }

/* ---------- icons ---------- */
.ic { width: 24px; height: 24px; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- brass: plates and nameplates ---------- */
.plate, .np {
  position: relative;
  overflow: hidden;
  background: var(--brass);
  color: var(--dark-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 5px rgba(80, 55, 10, .35), 0 8px 16px rgba(0, 0, 0, .5);
}
.plate::after, .np::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: sheen 6s ease-in-out calc(var(--t0) + 2s) infinite;
}
@keyframes sheen {
  0%        { left: -40%; }
  30%, 100% { left: 130%; }
}
.plate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 24px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  transition: transform .15s ease, filter .15s ease;
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) calc(var(--t0) + 1s) backwards;
}
.plate::before, .np::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 9px 50%, rgba(60, 40, 5, .65) 0 2.3px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 9px) 50%, rgba(60, 40, 5, .65) 0 2.3px, transparent 2.8px);
}
.plate svg { color: var(--dark-ink); }
.plate:active { transform: translateY(2px) scale(.985); filter: brightness(.92); }

.np {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 14px 10px 24px;
  padding-inline: 24px 14px;
  border-radius: 12px;
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) calc(var(--t0) + 1.15s) backwards;
}
.np + .np { animation-delay: calc(var(--t0) + 1.3s); }
.np .city { display: flex; flex-direction: column; line-height: 1.15; }
.np .city b { font-size: 1.15rem; font-weight: 800; }
.np .city small { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
html[lang="ar"] .np .city small { letter-spacing: 0; text-transform: none; }
.np .btns { display: flex; gap: 10px; }

.rb {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #26200f;
  color: var(--gold-hi);
  box-shadow: inset 0 0 0 1.5px rgba(246, 233, 187, .55), 0 2px 5px rgba(0, 0, 0, .45);
  transition: transform .15s ease, background-color .2s ease;
}
.rb svg { width: 22px; height: 22px; }
.rb:active { transform: scale(.92); background: #3a2f12; }

.find { margin-top: 32px; }
.find .caption { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, html::before, .name, .caption, .lang-toggle,
  .plate, .np, .plate::after, .np::after { animation: none; }
  body::after { display: none; }
  body.tt { --t0: 0s; }
}

/* ------------------------------------------------------------------
   Option 1 (v3): The Grand Doorway
   A palace door set into a stone arch. Tap a social tile and the two
   leaves swing open on their hinges, light pours out, then the link opens.
   ------------------------------------------------------------------ */

/* ---------- stone arch around the door ---------- */
.stone {
  --w: min(calc(100vw - 44px), 392px);   /* door width */
  --ar: calc(var(--w) * .34);            /* arch radius */
  --pr: calc(var(--w) / 4 - 42px);       /* half a panel width: gives the arched tops */
  position: relative;
  width: calc(var(--w) + 32px);
  margin: 18px calc(50% - (var(--w) + 32px) / 2) 0;   /* centred even when wider than the page column */
  padding: 16px 16px 0;
  border-radius: calc(var(--ar) + 16px) calc(var(--ar) + 16px) 6px 6px;
  background: linear-gradient(180deg, #5b564d 0%, #3f3c36 38%, #2d2b27 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .22),
    inset 3px 0 6px rgba(255, 255, 255, .05),
    inset -3px 0 6px rgba(0, 0, 0, .35),
    0 26px 44px rgba(0, 0, 0, .65);
  animation: rise .9s cubic-bezier(.2, .7, .2, 1) calc(var(--t0) + .15s) backwards;
}
.stone::before {   /* stone grain */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- the doorway: two leaves that can swing open ---------- */
.doorway {
  --ros: -72deg;           /* how far the leaf on the start side swings (left in English) */
  --roe: 72deg;            /* and the end side */
  position: relative;
  display: flex;
  width: var(--w);
  height: 520px;
  perspective: 1100px;
  border-radius: var(--ar) var(--ar) 0 0;
  background: #0c0b0a;
  box-shadow: 0 0 0 2px #0f0e0c;
}
[dir="rtl"] .doorway { --ros: 72deg; --roe: -72deg; }

/* light behind the doors, with the tapped platform's icon */
.glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: inherit;
  background: radial-gradient(ellipse 85% 70% at 50% 58%, #fff8de 0%, #f0d78e 24%, #b48f3d 52%, #4a3912 82%, #14110a 100%);
  color: #2b2412;
  opacity: 0;
  transition: opacity .55s ease .15s;
}
.glow .big { width: 84px; height: 84px; transform: scale(.55); transition: transform .9s cubic-bezier(.2, .8, .2, 1) .1s; filter: drop-shadow(0 4px 10px rgba(255, 255, 255, .35)); }
.glow span { font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; }
.doorway.opening .glow { opacity: 1; }
.doorway.opening .glow .big { transform: scale(1); }

.half {
  position: relative;
  flex: 1;
  height: 100%;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 235, 190, .07) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .38) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .007' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .62  0 0 0 0 .5  0 0 0 0 .32  1.7 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='.3'/%3E%3C/svg%3E"),
    #222222;
  background-size: auto, 260px 260px, auto;
  box-shadow:
    inset 0 16px 24px rgba(0, 0, 0, .65),
    inset 9px 0 14px rgba(0, 0, 0, .4),
    inset -9px 0 14px rgba(0, 0, 0, .4);
  transition: transform .85s cubic-bezier(.55, .05, .25, 1);
  backface-visibility: hidden;
}
.half-s { transform-origin: left center;  border-start-start-radius: var(--ar); border-inline-end: 2px solid #0d0c0b; }
.half-e { transform-origin: right center; border-start-end-radius: var(--ar);   border-inline-start: 2px solid #0d0c0b; }
[dir="rtl"] .half-s { transform-origin: right center; }
[dir="rtl"] .half-e { transform-origin: left center; }
.doorway.opening .half-s { transform: rotateY(var(--ros)); }
.doorway.opening .half-e { transform: rotateY(var(--roe)); }

/* gold hinges on the outer edges */
.hinge {
  position: absolute;
  width: 9px;
  height: 42px;
  border-radius: 2px;
  background:
    radial-gradient(circle at 50% 20%, #5a4514 1.3px, transparent 1.8px),
    radial-gradient(circle at 50% 80%, #5a4514 1.3px, transparent 1.8px),
    linear-gradient(90deg, #7b6024, #f3e5b0 45%, #8a6d2b);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, .65);
}
.half-s .hinge { inset-inline-start: 3px; }
.half-e .hinge { inset-inline-end: 3px; }
.hinge.a { top: 130px; }
.hinge.b { top: 255px; }
.hinge.c { top: 380px; }

/* the panels sit in the outer part of each leaf, clear of the handle */
.leaf {
  position: absolute;
  top: 80px;
  bottom: 26px;
  width: calc(100% - 84px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.half-s .leaf { inset-inline-start: 16px; }
.half-e .leaf { inset-inline-end: 16px; }

/* raised panels, lit from the top left */
.pn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 3px;
  text-align: center;
  background: linear-gradient(145deg, #34302b, #1f1d1a);
  border: 1px solid #0f0e0c;
  border-radius: 8px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .13),
    inset -1px -1px 0 rgba(0, 0, 0, .65),
    5px 7px 12px rgba(0, 0, 0, .55),
    0 0 0 3px #262420,
    0 0 0 4px rgba(0, 0, 0, .55);
  transition: transform .15s ease, filter .2s ease;
  animation: rise .7s cubic-bezier(.2, .7, .2, 1) backwards;
}
.pn::before {   /* fine gold inlay line */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(194, 166, 97, .6);
  border-radius: inherit;
  pointer-events: none;
}
.pn-arch { flex: 1.35; border-radius: var(--pr) var(--pr) 8px 8px; }
.pn-arch::before { border-radius: calc(var(--pr) - 6px) calc(var(--pr) - 6px) 4px 4px; }
.pn-sq   { flex: 1; }

.pn .ic { width: 34px; height: 34px; color: var(--gold-hi); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); }
.pn b { font-size: .82rem; color: var(--gold-hi); line-height: 1.1; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); }
.pn small { font-size: .62rem; color: var(--muted); direction: ltr; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pn:active { transform: translate(2px, 3px) scale(.985); filter: brightness(1.15); }
@media (hover: hover) { .pn:hover { filter: brightness(1.15); } }

.half-s .pn:nth-child(1) { animation-delay: calc(var(--t0) + .5s); }
.half-s .pn:nth-child(2) { animation-delay: calc(var(--t0) + .7s); }
.half-e .pn:nth-child(1) { animation-delay: calc(var(--t0) + .6s); }
.half-e .pn:nth-child(2) { animation-delay: calc(var(--t0) + .8s); }

/* your coral pull handle on the inner edge of each leaf */
.pull {
  position: absolute;
  top: 50%;
  height: 250px;
  width: auto;
  z-index: 2;
  pointer-events: none;
  transform: translateY(-50%);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .65));
  animation: fade-in 1s ease calc(var(--t0) + .4s) backwards;
}
.half-s .pull { inset-inline-end: 3px; }
.half-e .pull { inset-inline-start: 3px; transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .half-s .pull { transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .half-e .pull { transform: translateY(-50%); }

/* threshold step */
.step {
  --sw: min(calc(100vw - 16px), 450px);
  position: relative;
  width: var(--sw);
  height: 26px;
  margin: 0 calc(50% - var(--sw) / 2);
  border-radius: 3px 3px 6px 6px;
  background: linear-gradient(180deg, #6d685f, #46433c 55%, #34312c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 16px 24px rgba(0, 0, 0, .6);
  animation: fade-in .9s ease calc(var(--t0) + .25s) backwards;
}

/* ---------- links under the door ---------- */
.links3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 412px;
  margin: 30px auto 0;
}
.tl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 86px;
  padding: 10px 6px;
  border-radius: 12px;
  background: linear-gradient(160deg, #2d2a26, #1d1b18);
  border: 1px solid rgba(194, 166, 97, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 16px rgba(0, 0, 0, .45);
  color: var(--gold-hi);
  font-size: .84rem;
  font-weight: 700;
  transition: transform .15s ease, filter .2s ease;
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) calc(var(--t0) + 1s) backwards;
}
.tl:nth-child(2) { animation-delay: calc(var(--t0) + 1.1s); }
.tl:nth-child(3) { animation-delay: calc(var(--t0) + 1.2s); }
.tl .ic { width: 27px; height: 27px; }
.tl:active { transform: scale(.97); filter: brightness(1.2); }
@media (hover: hover) { .tl:hover { filter: brightness(1.2); } }

/* ---------- branches: a minimal list ---------- */
.find { max-width: 412px; margin-inline: auto; }
.branches {
  margin-top: 6px;
  border-top: 1px solid rgba(194, 166, 97, .35);
  animation: fade-in .9s ease calc(var(--t0) + 1.3s) backwards;
}
.br {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(194, 166, 97, .35);
}
.br .city { display: flex; flex-direction: column; line-height: 1.25; }
.br .city b { font-size: 1.18rem; font-weight: 600; color: var(--ivory); }
.br .city small { font-size: .72rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.br .btns { display: flex; gap: 4px; }
.br .rb {
  width: 48px;
  height: 48px;
  background: transparent;
  box-shadow: none;
  color: var(--gold);
  border-radius: 50%;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.br .rb svg { width: 24px; height: 24px; }
.br .rb:active { background: rgba(194, 166, 97, .2); color: var(--gold-hi); transform: scale(.92); }
@media (hover: hover) { .br .rb:hover { background: rgba(194, 166, 97, .14); color: var(--gold-hi); } }

@media (prefers-reduced-motion: reduce) {
  .half { transition: none; }
  .glow { display: none; }
}

/* ------------------------------------------------------------------
   Option 1b: the Grand Doorway with atmosphere
   Builds on opt1.css: stone wall, lanterns, glints on the metal,
   door depth, and a smoother opening with a flare of light.
   ------------------------------------------------------------------ */
/* ---------- the facade: a cut-stone wall across the page ---------- */
.facade {
  position: relative;
  width: 100vw;
  margin: 12px calc(50% - 50vw) 0;
  padding: 36px 0 0;
  overflow-x: clip;   /* nothing inside may push the page wider than the screen */
  background:
    linear-gradient(180deg, rgba(255, 240, 210, .09) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .4) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='76'%3E%3Crect width='160' height='76' fill='%231b1916'/%3E%3Crect x='1' y='1' width='78' height='36' rx='2' fill='%2335322d'/%3E%3Crect x='81' y='1' width='78' height='36' rx='2' fill='%232d2a26'/%3E%3Crect x='41' y='39' width='78' height='36' rx='2' fill='%23302d29'/%3E%3Crect x='121' y='39' width='78' height='36' rx='2' fill='%2336332e'/%3E%3Crect x='-39' y='39' width='78' height='36' rx='2' fill='%2336332e'/%3E%3C/svg%3E") 0 0 / 160px 76px,
    #2b2925;
  box-shadow: 0 30px 50px rgba(0, 0, 0, .55);
}
.facade::before {   /* moulded cornice along the top, with small dentils */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 9px, rgba(0, 0, 0, .38) 9px 12px) 0 100% / 100% 6px no-repeat,
    linear-gradient(180deg, #8a8478, #54504a 55%, #302d29);
  box-shadow: 0 7px 12px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .28);
  z-index: 4;
}
.facade::after {    /* stone grain over the wall */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.facade .stone { margin-top: 0; z-index: 1; transition: transform 1.1s cubic-bezier(.3, .6, .2, 1); }
.facade.opening .stone { transform: scale(1.035); }
.facade .step { margin-top: 0; z-index: 1; }

/* ---------- wall lanterns ---------- */
.lights { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.lantern {
  position: absolute;
  top: 66px;
  z-index: 3;
  width: 40px;
  height: 76px;
  pointer-events: none;
}
.lantern.left  { left: 22px; }
.lantern.right { right: 22px; transform: scaleX(-1); }
.lantern svg { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .6)); }
.lantern::before {   /* warm light thrown onto the stone */
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 190px;
  height: 190px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 196, 110, .38), rgba(255, 160, 60, .13) 42%, transparent 70%);
  animation: flicker 4.6s ease-in-out infinite;
}
.lantern.right::before { animation-delay: -1.9s; }
.flame { transform-origin: 50% 85%; animation: flame 2.4s ease-in-out infinite alternate; }
.lantern.right .flame { animation-delay: -1.1s; }
@keyframes flicker {
  0%, 100% { opacity: .85; }
  20% { opacity: 1; }
  38% { opacity: .78; }
  62% { opacity: .96; }
  80% { opacity: .82; }
}
@keyframes flame {
  from { transform: scale(1, 1); opacity: .92; }
  to   { transform: scale(.88, 1.12); opacity: 1; }
}

/* ---------- door depth ---------- */
.facade .doorway {
  box-shadow:
    0 0 0 2px #0f0e0c,
    0 0 0 8px #181613,
    0 0 0 9px rgba(255, 255, 255, .08);
}
.facade .pull { filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .75)); }

/* ---------- light sliding over the metal ---------- */
.glint {
  position: absolute;
  top: 50%;
  height: 250px;
  aspect-ratio: 217 / 1100;
  z-index: 3;
  pointer-events: none;
  transform: translateY(-50%);
  -webkit-mask: url("assets/handle.webp") center / 100% 100% no-repeat;
          mask: url("assets/handle.webp") center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) 120% 0 / 300% 100% no-repeat;
  animation: glint 8s ease-in-out calc(var(--t0) + 2s) infinite;
}
.half-s .glint { inset-inline-end: 3px; }
.half-e .glint { inset-inline-start: 3px; transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .half-s .glint { transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .half-e .glint { transform: translateY(-50%); }

.hinge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%) 130% 0 / 300% 100% no-repeat;
  animation: glint 8s ease-in-out calc(var(--t0) + 2.3s + var(--gd, 0s)) infinite;
}
.hinge.b { --gd: .35s; }
.hinge.c { --gd: .7s; }

@keyframes glint {
  0%, 62%  { background-position: 120% 0; }
  82%, 100% { background-position: -20% 0; }
}

/* ---------- a flare of light as the doors open ---------- */
.glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 58%, #ffffff 0%, rgba(255, 255, 255, .55) 22%, rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  pointer-events: none;
}
.doorway.opening .glow::before { animation: flare 1.2s ease-out .15s; }
@keyframes flare {
  0%   { opacity: 0; transform: scale(.4); }
  30%  { opacity: .95; }
  100% { opacity: .12; transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .lantern::before, .flame, .glint, .hinge::after { animation: none; }
  .facade .stone { transition: none; }
}


/* ---------- polish: header and bottom (v2) ---------- */

/* header: bigger logo with a soft glow, finer name, small ornament */
.tt .logo-svg { width: 80px; filter: drop-shadow(0 0 16px rgba(244, 240, 230, .24)); }
.top { position: relative; padding-top: 58px; }
.top::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  width: 320px;
  height: 250px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(194, 166, 97, .17), transparent);
  pointer-events: none;
  z-index: -1;
}
.name { margin-top: 16px; font-size: 1.1rem; font-weight: 600; letter-spacing: .26em; }
html[lang="ar"] .name { font-size: 1.38rem; font-weight: 700; letter-spacing: 0; }
.caption { margin-top: 12px; }

/* the three links: raised cards like the door panels */
.links3 { margin-top: 34px; gap: 12px; }
.links3 .tl {
  position: relative;
  min-height: 98px;
  gap: 10px;
  border-color: rgba(194, 166, 97, .72);
  background: linear-gradient(160deg, #34302b, #1b1917);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .11),
    inset -1px -1px 0 rgba(0, 0, 0, .6),
    0 10px 18px rgba(0, 0, 0, .5);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.links3 .tl::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(194, 166, 97, .26);
  border-radius: 8px;
  pointer-events: none;
}
.links3 .tl .ic {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 9px;
  border: 1px solid rgba(194, 166, 97, .6);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .09), rgba(0, 0, 0, .28));
  transition: background-color .25s ease;
}
@media (hover: hover) {
  .links3 .tl:hover {
    filter: none;
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, .14),
      inset -1px -1px 0 rgba(0, 0, 0, .6),
      0 14px 24px rgba(0, 0, 0, .55),
      0 0 26px rgba(194, 166, 97, .3);
  }
  .links3 .tl:hover .ic { background: rgba(194, 166, 97, .2); }
}
.links3 .tl:active { transform: translateY(1px) scale(.98); filter: none; }

/* find us: name and address on one side, labelled actions on the other */
.br { padding: 16px 6px; transition: background .3s ease; }
@media (hover: hover) {
  .br:hover { background: linear-gradient(90deg, rgba(194, 166, 97, .09), transparent 70%); }
  [dir="rtl"] .br:hover { background: linear-gradient(270deg, rgba(194, 166, 97, .09), transparent 70%); }
}
.br .city b { font-size: 1.28rem; }
.br .city small { margin-top: 3px; font-size: .7rem; letter-spacing: .04em; text-transform: none; line-height: 1.35; }
.br .btns { gap: 2px; }
.br .rb {
  width: auto;
  height: auto;
  min-width: 66px;
  padding: 8px 8px 7px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.br .rb svg { width: 24px; height: 24px; }
.br .rl { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1; transition: color .2s ease; }
html[lang="ar"] .br .rl { font-size: .7rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.br .rb:active .rl { color: var(--gold-hi); }
@media (hover: hover) { .br .rb:hover .rl { color: var(--gold-hi); } }

/* footer */
.foot {
  max-width: 412px;
  margin: 40px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: .76rem;
  letter-spacing: .06em;
  animation: fade-in 1s ease calc(var(--t0) + 1.6s) backwards;
}
.foot::before {
  content: "";
  display: block;
  width: 140px;
  height: 1px;
  margin: 0 auto 16px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.foot span { color: var(--gold-hi); }
html[lang="ar"] .foot { letter-spacing: 0; }


/* ========== v3: wedge arch, continuous wall, premium type, details ========== */

/* ---------- premium Arabic + Latin display font, hosted with the page ---------- */
@font-face {
  font-family: "El Messiri";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/elmessiri-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "El Messiri";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/elmessiri-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { --head: "El Messiri", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; }
.name, .caption, .pn b, .tl, .br .city b, .glow span, .foot span { font-family: var(--head); }

/* ---------- one continuous scene: the wall rises behind the header ---------- */
.facade { margin: 0 calc(50% - 50vw); padding: 0; }
.facade::before { content: none; }
.facade .top { padding-top: 56px; }
.course {        /* moulded string-course between the sign area and the entrance */
  position: relative;
  z-index: 4;
  height: 18px;
  margin-top: 22px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 9px, rgba(0, 0, 0, .38) 9px 12px) 0 100% / 100% 6px no-repeat,
    linear-gradient(180deg, #8a8478, #54504a 55%, #302d29);
  box-shadow: 0 7px 12px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .28);
}
.entry { --ep: 26px; position: relative; padding-top: var(--ep); }
.entry .lantern { top: calc(var(--ep) + 22px); }

/* the name on an engraved stone plaque */
.name {
  position: relative;
  display: inline-block;
  margin-top: 18px;
  padding: 9px 30px 8px;
  border: 1px solid rgba(194, 166, 97, .45);
  border-radius: 7px;
  background: linear-gradient(180deg, #1b1916, #27241f);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .85),
    inset 0 0 0 3px #1e1c19,
    inset 0 0 0 4px rgba(194, 166, 97, .22),
    0 1px 0 rgba(255, 255, 255, .14),
    0 10px 16px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 -1px 0 rgba(0, 0, 0, .9);
  letter-spacing: .2em;
}
html[lang="ar"] .name { padding: 6px 34px 7px; }
.caption { font-weight: 600; }

/* ---------- arch built from wedge-shaped stones ---------- */
.stone { --R: calc(var(--ar) + 16px); }
.vs { position: absolute; pointer-events: none; z-index: 0; }
.vs-l, .vs-r { top: 0; width: var(--R); height: var(--R); }
.vs-l {
  left: 0;
  border-top-left-radius: var(--R);
  background: repeating-conic-gradient(from 270deg at 100% 100%, transparent 0 10.2deg, rgba(0, 0, 0, .68) 10.2deg 10.9deg, rgba(255, 255, 255, .15) 10.9deg 11.25deg);
  -webkit-mask-image: radial-gradient(circle at 100% 100%, transparent calc(var(--ar) - 1px), #000 var(--ar));
          mask-image: radial-gradient(circle at 100% 100%, transparent calc(var(--ar) - 1px), #000 var(--ar));
}
.vs-r {
  right: 0;
  border-top-right-radius: var(--R);
  background: repeating-conic-gradient(from 0deg at 0% 100%, transparent 0 10.2deg, rgba(0, 0, 0, .68) 10.2deg 10.9deg, rgba(255, 255, 255, .15) 10.9deg 11.25deg);
  -webkit-mask-image: radial-gradient(circle at 0% 100%, transparent calc(var(--ar) - 1px), #000 var(--ar));
          mask-image: radial-gradient(circle at 0% 100%, transparent calc(var(--ar) - 1px), #000 var(--ar));
}
.vs-t {
  left: var(--R);
  right: var(--R);
  top: 0;
  height: 16px;
  background: repeating-linear-gradient(90deg, transparent 0 51px, rgba(0, 0, 0, .68) 51px 52px, rgba(255, 255, 255, .15) 52px 53px);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(50% - 30px), transparent calc(50% - 30px) calc(50% + 30px), #000 calc(50% + 30px));
          mask-image: linear-gradient(90deg, #000 calc(50% - 30px), transparent calc(50% - 30px) calc(50% + 30px), #000 calc(50% + 30px));
}
.vs-t::after {   /* the keystone: a slightly raised centre block, no ornament */
  content: "";
  position: absolute;
  left: calc(50% - 30px);
  width: 60px;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03));
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .7), inset -1px 0 0 rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.vs-sl, .vs-sr {
  top: var(--R);
  bottom: 0;
  width: 16px;
  background: repeating-linear-gradient(180deg, transparent 0 41px, rgba(0, 0, 0, .68) 41px 42px, rgba(255, 255, 255, .15) 42px 43px);
}
.vs-sl { left: 0; }
.vs-sr { right: 0; }

/* ---------- carved corners on the panels ---------- */
.pn-sq::after, .pn-arch::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
}
.pn-sq::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23c2a661' stroke-linecap='round'%3E%3Cpath d='M1 15V7Q1 1 7 1H15' stroke-opacity='.8' stroke-width='1.1'/%3E%3Cpath d='M5 11Q5 5 11 5' stroke-opacity='.5' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E") left top / 16px 16px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='translate(16 0) scale(-1 1)' fill='none' stroke='%23c2a661' stroke-linecap='round'%3E%3Cpath d='M1 15V7Q1 1 7 1H15' stroke-opacity='.8' stroke-width='1.1'/%3E%3Cpath d='M5 11Q5 5 11 5' stroke-opacity='.5' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E") right top / 16px 16px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='translate(0 16) scale(1 -1)' fill='none' stroke='%23c2a661' stroke-linecap='round'%3E%3Cpath d='M1 15V7Q1 1 7 1H15' stroke-opacity='.8' stroke-width='1.1'/%3E%3Cpath d='M5 11Q5 5 11 5' stroke-opacity='.5' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E") left bottom / 16px 16px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='translate(16 16) scale(-1 -1)' fill='none' stroke='%23c2a661' stroke-linecap='round'%3E%3Cpath d='M1 15V7Q1 1 7 1H15' stroke-opacity='.8' stroke-width='1.1'/%3E%3Cpath d='M5 11Q5 5 11 5' stroke-opacity='.5' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E") right bottom / 16px 16px no-repeat;
}
.pn-arch::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='translate(0 16) scale(1 -1)' fill='none' stroke='%23c2a661' stroke-linecap='round'%3E%3Cpath d='M1 15V7Q1 1 7 1H15' stroke-opacity='.8' stroke-width='1.1'/%3E%3Cpath d='M5 11Q5 5 11 5' stroke-opacity='.5' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E") left bottom / 16px 16px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg transform='translate(16 16) scale(-1 -1)' fill='none' stroke='%23c2a661' stroke-linecap='round'%3E%3Cpath d='M1 15V7Q1 1 7 1H15' stroke-opacity='.8' stroke-width='1.1'/%3E%3Cpath d='M5 11Q5 5 11 5' stroke-opacity='.5' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E") right bottom / 16px 16px no-repeat;
}

/* ---------- bigger lanterns with light pools ---------- */
.lantern { width: 46px; height: 88px; }
.lantern.left  { left: 16px; }
.lantern.right { right: 16px; }
.lantern::before { width: 230px; height: 230px; }
.lantern::after {      /* warm pool of light on the stone below */
  content: "";
  position: absolute;
  left: 50%;
  top: 68%;
  width: 130px;
  height: 64px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255, 190, 100, .3), transparent 70%);
  animation: flicker 4.6s ease-in-out infinite;
}
.lantern.right::after { animation-delay: -1.9s; }

/* ---------- light spilling onto the floor when the doors open ---------- */
.entry::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - 2px);
  width: min(94%, 392px);
  height: 74px;
  transform: translateX(-50%);
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 220, 140, .6), rgba(255, 190, 90, 0));
  filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease .25s;
}
.facade.opening .entry::after { opacity: 1; }
.step { transition: filter .7s ease .25s; }
.facade.opening .step { filter: brightness(1.3); }

/* ---------- a tighter top on short or narrow phones ---------- */
@media (max-height: 760px), (max-width: 380px) {
  .tt .logo-svg { width: 58px; }
  .facade .top { padding-top: 46px; }
  .name { margin-top: 10px; padding: 6px 22px 5px; font-size: .98rem; }
  html[lang="ar"] .name { font-size: 1.2rem; padding: 4px 26px 5px; }
  .caption { margin-top: 8px; }
  .course { margin-top: 14px; }
  .entry { --ep: 20px; }
}

/* narrow phones: slightly smaller type so labels stay inside their panels */
@media (max-width: 380px) {
  .pn b { font-size: .7rem; letter-spacing: -.01em; }
  .pn .ic { width: 30px; height: 30px; }
  .pn small { font-size: .58rem; }
}
/* the very narrowest phones (about 320px): slimmer handles and panels that still fit */
@media (max-width: 340px) {
  .leaf { width: calc(100% - 72px); }
  .pull, .glint { height: 205px; }
  .pn { padding: 6px 2px; }
  .pn b { font-size: .62rem; }
  .pn .ic { width: 26px; height: 26px; }
  .pn small { display: none; }
  .hinge { width: 7px; height: 34px; }
}

/* ---------- the logo: no frame, just a soft pool of shade to calm the bricks behind it ---------- */
.emblem {
  position: relative;
  isolation: isolate;          /* keeps the shade above the wall but below the logo */
  display: grid;
  place-items: center;
}
.emblem::before {
  content: "";
  position: absolute;
  inset: -60px -110px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(13, 12, 10, .55) 0%, rgba(13, 12, 10, .4) 40%, rgba(13, 12, 10, .14) 75%, transparent 100%);
}
.emblem .logo-svg { width: 76px; filter: drop-shadow(0 0 14px rgba(244, 240, 230, .2)); }
@media (max-height: 760px), (max-width: 380px) {
  .emblem .logo-svg { width: 62px; }
  .emblem::before { inset: -44px -90px; }
}

@media (prefers-reduced-motion: reduce) {
  .emblem { animation: none; }
  .lantern::after { animation: none; }
  .step, .entry::after { transition: none; }
}

/* account names wrap cleanly */
.pn small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; text-align: center; }


/* hold all animations until the page has painted */
html.loading *, html.loading *::before, html.loading *::after { animation-play-state: paused !important; }