/* =========================================================================
   BAYAN — cinematic hero prototype
   Palette is drawn from the subject, not from a default gradient:
   archival ink, aged parchment, brass office plaque, oxblood wax seal.
   ========================================================================= */

:root{
  /* ink */
  --ink-900:#0B0D10;
  --ink-800:#0F1216;
  --ink-700:#161A20;
  --ink-600:#1E242C;

  /* parchment */
  --bone-100:#EDE6D9;
  --bone-300:#CFC6B6;
  --bone-500:#9A9284;
  --bone-700:#6A655C;

  /* accents */
  --brass:#C0A062;
  --brass-dim:#8C7440;
  --seal:#8E3B2F;

  --font-ar:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-ar-display:"Amiri",Georgia,serif;
  --font-en:"IBM Plex Sans",system-ui,sans-serif;

  --font-ui:var(--font-ar);
  --measure:36ch;

  --ease-out:cubic-bezier(.22,.61,.36,1);
}

html[dir="ltr"]{ --font-ui:var(--font-en); --measure:44ch; }

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

html{ background:var(--ink-900); }

body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--bone-100);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--ink-700) 0%, var(--ink-900) 62%);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- grain: unifies the whole frame ---------- */
.grain{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:60;
  opacity:.16; mix-blend-mode:overlay;
}

/* ---------- top bar ---------- */
.topbar{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:clamp(.9rem,2.2vw,1.5rem) clamp(1rem,4vw,3rem);
}

.brand{ display:flex; align-items:center; gap:.6rem; min-width:0; }

.brand__mark{
  inline-size:26px; block-size:26px; color:var(--brass);
  display:grid; place-items:center; flex:none;
}
.brand__mark svg{ inline-size:100%; block-size:100%; }

.brand__name{
  font-family:var(--font-ar-display);
  font-size:1.4rem; font-weight:700; letter-spacing:.01em;
  line-height:1;
}
html[dir="ltr"] .brand__name{ font-family:var(--font-en); font-size:1.15rem; letter-spacing:.14em; text-transform:uppercase; }

.brand__tag{
  font-size:.72rem; color:var(--bone-700); letter-spacing:.04em;
  padding-inline-start:.6rem;
  border-inline-start:1px solid rgba(207,198,182,.16);
  white-space:nowrap;
}
@media (max-width:620px){ .brand__tag{ display:none; } }

.lang-toggle{
  font-family:var(--font-en);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone-300); background:transparent;
  border:1px solid rgba(207,198,182,.22);
  padding:.5rem .95rem; border-radius:2px;
  cursor:pointer; flex:none;
  transition:color .3s var(--ease-out), border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.lang-toggle:hover{ color:var(--bone-100); border-color:var(--brass); background:rgba(192,160,98,.07); }
.lang-toggle:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* ---------- stage ---------- */
.stage{
  position:relative;
  block-size:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
}

.stage__canvas{
  position:absolute; inset:0;
  inline-size:100%; block-size:100%;
  display:block;
}

.stage__ui{
  position:relative; z-index:20;
  inline-size:min(100% - 2.5rem, 74rem);
  margin-inline:auto;
  display:flex; flex-direction:column;
  align-items:flex-start;
  text-align:start;
  /* the headline lives on the canvas (optical centre ~31svh); UI clears it */
  padding-block-start:min(54svh,30rem);
}

/* kicker */
.kicker{
  display:flex; align-items:center; gap:.75rem;
  margin:0 0 1.15rem;
  font-size:clamp(.7rem,1.5vw,.8rem);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass);
}
html[dir="rtl"] .kicker{ letter-spacing:.06em; }
.kicker__rule{
  inline-size:clamp(28px,6vw,64px); block-size:1px;
  background:linear-gradient(to var(--to-end,left), var(--brass), transparent);
  flex:none;
}
html[dir="ltr"] .kicker__rule{ --to-end:right; }

/* static headline — only for reduced motion */
.static-title{
  display:none;
  margin:0 0 1.1rem;
  font-family:var(--font-ar-display);
  font-weight:700;
  font-size:clamp(2rem,6.4vw,4.4rem);
  line-height:1.24;
  letter-spacing:-.01em;
  color:var(--bone-100);
  max-inline-size:20ch;
}
html[dir="ltr"] .static-title{ font-family:var(--font-en); font-weight:300; line-height:1.1; }

.lede{
  margin:0 0 1.9rem;
  max-inline-size:var(--measure);
  font-size:clamp(.95rem,1.65vw,1.08rem);
  font-weight:300;
  line-height:1.85;
  color:var(--bone-300);
  text-shadow:0 1px 12px rgba(11,13,16,.85); /* legibility safety net */
}
html[dir="ltr"] .lede{ line-height:1.7; }

.actions{ display:flex; flex-wrap:wrap; gap:.7rem; }

.btn{
  --btn-pad:.85rem 1.6rem;
  display:inline-block; padding:var(--btn-pad);
  font-family:inherit; font-size:.88rem; font-weight:500;
  letter-spacing:.02em; text-decoration:none;
  border-radius:2px;
  transition:transform .35s var(--ease-out), background-color .35s var(--ease-out),
             color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.btn:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

.btn--solid{
  background:var(--brass); color:var(--ink-900);
  border:1px solid var(--brass);
}
.btn--solid:hover{ background:#D0B173; border-color:#D0B173; transform:translateY(-2px); }

.btn--ghost{
  background:transparent; color:var(--bone-100);
  border:1px solid rgba(207,198,182,.26);
}
.btn--ghost:hover{ border-color:var(--bone-300); transform:translateY(-2px); }

/* ---------- seal ---------- */
.seal{
  position:absolute; z-index:22;
  inset-block-start:clamp(4.6rem,12svh,8rem);
  inset-inline-end:clamp(1.25rem,5vw,4rem);
  inline-size:clamp(72px,10vw,104px);
  display:grid; place-items:center;
  opacity:0;
  color:var(--brass);
}
.seal svg{ inline-size:100%; block-size:100%; display:block; }
.seal__ring{ fill:none; stroke:currentColor; stroke-width:1; opacity:.55; }
.seal__ring--inner{ stroke-dasharray:3 5; opacity:.35; }
.seal__tick{
  fill:none; stroke:var(--seal); stroke-width:4.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.seal__text{
  position:absolute;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass);
  inset-block-end:-1.35rem;
  white-space:nowrap;
}
@media (max-width:520px){ .seal{ display:none; } }

/* ---------- scroll cue + progress ---------- */
.scrollcue{
  position:absolute; z-index:22;
  inset-block-end:clamp(1.5rem,4svh,2.5rem);
  inset-inline-start:50%;
  transform:translateX(50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-700);
}
html[dir="ltr"] .scrollcue{ transform:translateX(-50%); }
.scrollcue__line{
  inline-size:1px; block-size:34px;
  background:linear-gradient(to bottom,var(--bone-700),transparent);
}

.progress{
  position:absolute; z-index:22;
  inset-block-end:0; inset-inline:0;
  block-size:1px; background:rgba(207,198,182,.10);
}
.progress__bar{
  display:block; block-size:100%; inline-size:0%;
  background:linear-gradient(to var(--to-end,left),var(--brass),var(--brass-dim));
  transform-origin:var(--origin,right);
}
html[dir="ltr"] .progress__bar{ --to-end:right; --origin:left; }

/* ---------- after ---------- */
.after{
  min-block-size:40svh;
  display:grid; place-items:center;
  padding:4rem 1.5rem;
  border-block-start:1px solid rgba(207,198,182,.08);
}
.after__note{
  margin:0; font-size:.8rem; letter-spacing:.06em;
  color:var(--bone-700); text-align:center;
}

/* ---------- reduced motion: static, fully legible ---------- */
@media (prefers-reduced-motion:reduce){
  .stage__canvas,
  .seal,
  .scrollcue,
  .progress{ display:none !important; }

  .stage{ block-size:auto; padding-block:clamp(7rem,18svh,11rem) clamp(3rem,8svh,5rem); }
  .stage__ui{ padding-block-start:0; }
  .static-title{ display:block; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}