/* ==========================================================================
   DUKHĀN — token layer + base + shared section anatomy

   White, bone and beige. Black appears ONLY as type and hairlines: the type
   carries all the weight, so the page stays airy at any size.
   Neutrals are biased warm toward the sand accent — never true grey.
   ========================================================================== */

:root{
  /* colour ---------------------------------------------------------------- */
  --bg:#FCFBF8;                       /* warm white — the whole site */
  --panel:#F4EFE6;                    /* bone, one step down */
  --sand:#E9E0D1;                     /* beige fill: chips, rules, hovers */
  --sand-deep:#D8CBB6;                /* beige, pressed/active */
  --ink:#12100D;                      /* near-black, warm */
  /* Alphas are set from measured contrast, not by eye: on --bg an ink alpha
     below .58 fails WCAG AA 4.5:1, and both of these carry real text
     (section labels, specs, the scroll hint). */
  --ink-soft:rgba(18,16,13,.72);
  --ink-faint:rgba(18,16,13,.62);
  --ink-ghost:rgba(18,16,13,.28);   /* decorative only — never text */
  --line:rgba(18,16,13,.13);          /* hairlines */
  --accent:#9A7B52;                   /* warm beige-brown, small marks only */

  /* type ------------------------------------------------------------------ */
  --display:'Gambarino', 'Amiri', Georgia, serif;
  --body:'Switzer', system-ui, -apple-system, sans-serif;
  --mono:'Azeret Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ar-display:'Reem Kufi', 'Noto Kufi Arabic', sans-serif;
  --ar-body:'IBM Plex Sans Arabic', system-ui, sans-serif;
  --ar-classical:'Amiri', serif;

  /* type scale — 1.25 ratio ------------------------------------------------ */
  --step--1:.8rem;
  --step-0:1rem;
  --step-1:1.25rem;
  --step-2:1.563rem;
  --step-3:1.953rem;
  --step-4:2.441rem;
  --step-5:3.052rem;

  /* spacing --------------------------------------------------------------- */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:3rem;   --s8:4rem;
  --s9:6rem;   --s10:8rem;

  /* Airy means generous vertical rhythm — sections breathe more than usual */
  --gutter:clamp(1.25rem, 5vw, 4.5rem);
  --section-y:clamp(4.5rem, 11vw, 8rem);

  --radius:0px;                       /* nothing is rounded */
  --ease:cubic-bezier(.22,.61,.36,1);
  --sweep:cubic-bezier(.76,0,.24,1);  /* the sweeping transition curve */
  --dur:.6s;
  --dur-slow:1.1s;
}

/* ------------------------------------------------------------------ reset */

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

html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* Arabic swaps the whole type stack, not just the direction. */
[dir="rtl"] body,
body[lang="ar"]{
  font-family:var(--ar-body);
  line-height:1.9;
}

img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:1.02;
  text-wrap:balance;
  letter-spacing:-.02em;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  font-family:var(--ar-display);
  line-height:1.4;
  letter-spacing:0;                   /* never letter-space Arabic */
}

p{ text-wrap:pretty; }

/* Any Arabic run inside an LTR page must be its own bidi paragraph, or the
   surrounding neutrals (spaces, punctuation, the harakat at a word edge)
   resolve to the page direction and the words land in the wrong order. */
[lang="ar"]{
  direction:rtl;
  unicode-bidi:isolate;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

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

.skip-link{
  position:absolute; inset-inline-start:var(--gutter); top:-100%;
  z-index:100; background:var(--ink); color:var(--bg);
  padding:var(--s3) var(--s5); font-family:var(--mono); font-size:var(--step--1);
}
.skip-link:focus{ top:var(--s4); }

/* ------------------------------------------------- shared section anatomy */

.section{ padding:var(--section-y) var(--gutter); }
.section--panel{ background:var(--panel); }

.section-label{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:var(--s5);
}
[dir="rtl"] .section-label{
  font-family:var(--ar-body); font-weight:500;
  letter-spacing:0; text-transform:none; font-size:.85rem;
}

.lede{ color:var(--ink-soft); font-size:var(--step-1); max-width:58ch; }
.rule{ height:1px; background:var(--line); border:0; }

.mono{
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.06em;
}
[dir="rtl"] .mono{ font-family:var(--ar-body); letter-spacing:0; }

/* ---------------------------------------------------------------- buttons */

.btn{
  display:inline-flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s7);
  font-family:var(--mono); font-size:var(--step--1);
  letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  position:relative; overflow:hidden;
  transition:color var(--dur) var(--sweep);
}
/* the sweep: a solid wipe from the inline start, not a fade */
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--ink);
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--dur) var(--sweep);
}
[dir="rtl"] .btn::after{ transform-origin:right center; }
.btn:hover{ color:var(--bg); }
.btn:hover::after{ transform:scaleX(1); }
.btn > *{ position:relative; z-index:1; }

.btn--solid{ background:var(--ink); color:var(--bg); }
.btn--solid::after{ background:var(--sand); }
.btn--solid:hover{ color:var(--ink); }

[dir="rtl"] .btn{
  font-family:var(--ar-body); letter-spacing:0; text-transform:none;
  font-size:var(--step-0);
}

/* ------------------------------------------------------- reveal on scroll */
/* Shared, used by every section. Elements start displaced and settle when
   they enter view. One class, one observer (dukhan.js). */

[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--sweep),
             transform var(--dur-slow) var(--sweep);
  transition-delay:var(--reveal-delay, 0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* A word/line that wipes up from behind a mask — the "sweeping" reveal */
.mask{ display:block; overflow:hidden; }
.mask > *{
  display:block;
  transform:translateY(105%);
  transition:transform var(--dur-slow) var(--sweep);
  transition-delay:var(--reveal-delay, 0ms);
}
.is-in .mask > *,
.mask.is-in > *{ transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .mask > *{ transform:none; }
}


/* ==========================================================================
   Load-in
   A bone curtain holds the page, the mark draws, then the curtain lifts.
   Deliberately pure CSS with animation-fill-mode:forwards — if JS never runs
   the curtain still clears itself, so it can never trap the page.
   ========================================================================== */

.boot{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:var(--bg);
  animation:bootLift 1.05s var(--sweep) 1.15s forwards;
}
.boot__mark{
  font-family:var(--ar-display);
  font-size:clamp(3.5rem, 11vw, 8rem);
  line-height:1;
  color:var(--ink);
  opacity:0;
  transform:translateY(18px);
  animation:bootMark .95s var(--sweep) .12s forwards,
            bootMarkOut .5s var(--sweep) 1.05s forwards;
}
.boot__rule{
  position:absolute;
  inset-block-end:0; inset-inline:0;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left center;
  animation:bootRule 1.15s var(--sweep) .1s forwards;
}
[dir="rtl"] .boot__rule{ transform-origin:right center; }

@keyframes bootMark{
  to{ opacity:1; transform:none; }
}
@keyframes bootMarkOut{
  to{ opacity:0; transform:translateY(-14px); }
}
@keyframes bootRule{
  to{ transform:scaleX(1); }
}
@keyframes bootLift{
  to{ transform:translateY(-101%); visibility:hidden; }
}

/* While the curtain is up the page must not be scrollable underneath it. */
body:not(.is-booted){ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .boot{ display:none; }
  body:not(.is-booted){ overflow:visible; }
}