/* ============================================================================
   MGNTION — BASE / PRIMITIVES / CHROME
   ========================================================================= */

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

/* The document ground is the brand black (#050505 — same as theme-color and the
   manifest background) so first paint and overscroll match the browser chrome.
   The content ground stays the warmer --ink so the page never reads as flat. */
html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--warm);
  font-family: var(--f-body);
  font-size: var(--t-bd);
  line-height: var(--script-body-lead);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; height: 100vh; }

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* Keyboard users land on the nav, the menu and three language buttons before
   they reach a word of the site. This gets them past all of it, and stays
   invisible until it is focused. Logical inset so RTL puts it on the right. */
.skip {
  position: fixed; z-index: 999; top: 0; inset-inline-start: 0;
  transform: translateY(-140%);
  padding: .9rem 1.4rem;
  background: var(--gold); color: var(--ink);
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase;
  transition: transform var(--d-fast) var(--e-out);
}
.skip:focus { transform: none; outline-offset: -4px; }

/* The prerendered transcript. Only ever painted when JavaScript is off, and
   even then it is a fallback document, not the designed one — so it gets
   readable defaults and nothing more. */
.ns { max-width: 46rem; margin: 0 auto; padding: 4rem 1.5rem; }
.ns h1 { font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1.05; letter-spacing: -.03em; }
.ns h2 { margin-top: 3.5rem; font-size: 1.6rem; letter-spacing: -.02em; }
.ns h3 { margin-top: 2.5rem; font-size: 1.2rem; }
.ns h4 { margin-top: 1.6rem; font-size: .95rem; color: var(--gold); letter-spacing: .06em; }
.ns p, .ns li { margin-top: .9rem; color: var(--warm-2); }
.ns ul { padding-inline-start: 1.2rem; }
.ns blockquote { margin: 1.4rem 0; padding-inline-start: 1rem; border-inline-start: 1px solid var(--gold); }
.ns a { color: var(--gold); text-decoration: underline; }
.ns article { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------------------
   TYPE PRIMITIVES
--------------------------------------------------------------------------- */
.display {
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  line-height: var(--script-leading);
  letter-spacing: var(--script-track);
  text-transform: uppercase;
  font-stretch: 105%;
}
[data-lang='he'] .display,
[data-lang='ar'] .display { text-transform: none; }

.serif {
  font-family: var(--f-editorial);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.01em;
}
[data-lang='he'] .serif,
[data-lang='ar'] .serif { font-style: normal; font-weight: 300; opacity: .92; }

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--warm-3);
}
[data-lang='ar'] .mono:not(.lat-mono) {
  font-family: var(--f-body); letter-spacing: 0.06em; font-size: var(--t-sm);
}
[data-lang='he'] .mono:not(.lat-mono) {
  font-family: var(--f-body); letter-spacing: 0.1em; font-size: var(--t-sm); font-weight: 600;
}

.gold { color: var(--gold); }
.red  { color: var(--red-lift); }
.dim  { color: var(--warm-2); }

/* ---------------------------------------------------------------------------
   LAYOUT PRIMITIVES
--------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.section { position: relative; padding-block: var(--act-pad); }

/* the hairline that runs the page */
.rule { height: 1px; background: var(--rule); width: 100%; }
.rule--gold { background: linear-gradient(to right, var(--rule-gold), transparent 70%); }
[dir='rtl'] .rule--gold { background: linear-gradient(to left, var(--rule-gold), transparent 70%); }

/* kicker: the small mono label that opens every section */
.kicker {
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: var(--s-3);
}
.kicker::before {
  content: ''; width: 34px; height: 1px; background: var(--gold); flex: none;
  transform: scaleX(0); transform-origin: var(--logical-start);
  transition: transform var(--d-mid) var(--e-out) 120ms;
}
.is-in .kicker::before { transform: scaleX(1); }

/* ---------------------------------------------------------------------------
   GRAIN — the film layer. Subtle enough to be felt, not seen.
--------------------------------------------------------------------------- */
.grain {
  position: fixed; inset: -120px; z-index: 9000; pointer-events: none;
  opacity: .028; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 700ms steps(1) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0) }
  25%  { transform: translate(-3%, 2%) }
  50%  { transform: translate(2%, -3%) }
  75%  { transform: translate(-2%, -2%) }
  100% { transform: translate(3%, 1%) }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; opacity: .02; } }

/* a slow warm vignette so the black never reads as flat #000 */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(201,162,39,0.055), transparent 62%),
    radial-gradient(90%  60% at 50% 115%, rgba(158,27,27,0.045), transparent 60%);
}

/* ---------------------------------------------------------------------------
   SCROLL PROGRESS — a gold thread along the top edge
--------------------------------------------------------------------------- */
.progress {
  position: fixed; inset-inline: 0; top: 0; height: 1.5px; z-index: 8000;
  background: linear-gradient(to right, var(--gold-deep), var(--gold), var(--gold-lift));
  transform: scaleX(0); transform-origin: var(--logical-start);
  will-change: transform;
}

/* ---------------------------------------------------------------------------
   CURSOR — a ring with mass. Desktop + fine pointer only.
--------------------------------------------------------------------------- */
.cursor, .cursor-dot { display: none; }
@media (hover: hover) and (pointer: fine) {
  body.has-cursor { cursor: none; }
  body.has-cursor a, body.has-cursor button { cursor: none; }

  .cursor {
    display: block; position: fixed; z-index: 9500; top: 0; left: 0;
    width: 38px; height: 38px; margin: -19px 0 0 -19px;
    border: 1px solid rgba(242,237,227,.42); border-radius: 50%;
    pointer-events: none; will-change: transform;
    transition: width var(--d-fast) var(--e-out), height var(--d-fast) var(--e-out),
                margin var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out),
                background-color var(--d-fast) var(--e-out), opacity 220ms linear;
  }
  .cursor-dot {
    display: block; position: fixed; z-index: 9501; top: 0; left: 0;
    width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
    background: var(--warm); pointer-events: none; will-change: transform;
    transition: opacity 200ms linear, transform var(--d-fast) var(--e-out);
  }
  .cursor.is-hot {
    width: 74px; height: 74px; margin: -37px 0 0 -37px;
    border-color: var(--gold); background: rgba(201,162,39,.09);
  }
  .cursor.is-hot ~ .cursor-dot { transform: scale(0); }
  .cursor.is-hidden, .cursor-dot.is-hidden { opacity: 0; }
  .cursor__label {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--f-mono); font-size: 8px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--gold);
    opacity: 0; transition: opacity var(--d-fast) var(--e-out);
  }
  .cursor.is-hot .cursor__label { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   LOADER — a boot, not a spinner. 1.4s, then it wipes.
--------------------------------------------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: 9800; background: var(--void);
  display: grid; place-items: center;
  transition: clip-path var(--d-heavy) var(--e-mask), opacity 1ms linear var(--d-heavy);
  clip-path: inset(0 0 0 0);
}
.loader.is-done { clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; }
.loader__inner { text-align: center; }
.loader__mark {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 7vw, 4.6rem);
  letter-spacing: .04em; color: var(--warm); overflow: hidden;
}
.loader__mark span {
  display: inline-block; transform: translateY(110%);
  animation: loadIn var(--d-slow) var(--e-out) forwards;
}
@keyframes loadIn { to { transform: translateY(0); } }
.loader__line {
  margin-top: 1.1rem; height: 1px; width: 0; background: var(--gold);
  margin-inline: auto; animation: loadRule 1250ms var(--e-inout) 260ms forwards;
}
@keyframes loadRule { to { width: 100%; } }
.loader__meta {
  margin-top: 1.1rem; display: flex; justify-content: space-between;
  opacity: 0; animation: loadFade 700ms var(--e-out) 420ms forwards;
}
@keyframes loadFade { to { opacity: 1; } }
.loader__count { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   NAV — hidden on the hero, then a thin fixed bar.
--------------------------------------------------------------------------- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 7000; height: var(--nav-h);
  display: flex; align-items: center;
  background: linear-gradient(to bottom, rgba(10,9,8,.92), rgba(10,9,8,0));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translateY(-100%);
  transition: transform var(--d-mid) var(--e-inout), background var(--d-mid) linear;
}
.nav.is-shown { transform: translateY(0); }
.nav__in {
  width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.nav__mark {
  font-family: var(--f-display); font-weight: 800; font-size: 1.02rem;
  letter-spacing: .16em; text-transform: uppercase; direction: ltr;
}
.nav__mark b { color: var(--gold); font-weight: inherit; }
.nav__contact { display: none; }
.nav__links { display: flex; gap: clamp(1rem, 2.2vw, 2.4rem); align-items: center; }
.nav__links a { position: relative; padding-block: .35rem; }
.nav__links a::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: var(--logical-end);
  transition: transform var(--d-fast) var(--e-out);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: var(--logical-start); }
@media (max-width: 900px) { .nav__links { display: none; } }

/* language switcher */
.langs { display: flex; align-items: center; gap: .1rem; }
.langs button {
  padding: .45rem .7rem; font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .16em; color: var(--warm-3); text-transform: uppercase;
  transition: color var(--d-fast) var(--e-out);
  position: relative;
}
.langs button[aria-current='true'] { color: var(--gold); }
.langs button:hover { color: var(--warm); }
.langs button + button::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 50%;
  width: 1px; height: 11px; margin-top: -5.5px; background: var(--warm-4);
}
.langs button[data-l='he'] { font-family: var(--f-body); font-weight: 700; letter-spacing: .06em; }
.langs button[data-l='ar'] { font-family: 'IBM Plex Sans Arabic', var(--f-body); font-weight: 600; letter-spacing: 0; font-size: var(--t-sm); }

/* the language change itself is a cut, not a fade */
.lang-wipe {
  position: fixed; inset: 0; z-index: 8500; background: var(--void);
  pointer-events: none; clip-path: inset(0 0 100% 0);
}
.lang-wipe.in  { animation: wipeIn  480ms var(--e-inout) forwards; }
.lang-wipe.out { animation: wipeOut 640ms var(--e-inout) forwards; }
@keyframes wipeIn  { from { clip-path: inset(100% 0 0 0);} to { clip-path: inset(0 0 0 0);} }
@keyframes wipeOut { from { clip-path: inset(0 0 0 0);}   to { clip-path: inset(0 0 100% 0);} }

/* ---------------------------------------------------------------------------
   REVEAL SYSTEM
   One rule set drives every entrance on the page.
--------------------------------------------------------------------------- */

/* line mask: the workhorse. Type rises out of its own clipping box. */
.lm { display: block; overflow: hidden; }
.lm > * {
  display: block;
  transform: translateY(105%);
  transition: transform var(--d-heavy) var(--e-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.is-in .lm > * { transform: translateY(0); }

/* soft rise for body copy */
[data-rise] {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.is-in [data-rise], [data-rise].is-in { opacity: 1; transform: none; }

/* wipe: for rules and bars */
[data-wipe] {
  transform: scaleX(0); transform-origin: var(--logical-start);
  transition: transform var(--d-slow) var(--e-inout);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.is-in [data-wipe], [data-wipe].is-in { transform: scaleX(1); }

/* image mask: the frame opens, the image de-scales behind it */
[data-mask] { overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path var(--d-heavy) var(--e-mask); }
[data-mask] > * { transform: scale(1.14); transition: transform 1900ms var(--e-out); }
.is-in [data-mask], [data-mask].is-in { clip-path: inset(0 0 0 0); }
.is-in [data-mask] > *, [data-mask].is-in > * { transform: scale(1); }

/* word-by-word, driven by scroll position rather than time */
.words span { transition: color 420ms var(--e-out), opacity 420ms var(--e-out); }
.words span.off { color: var(--warm-3); }

@media (prefers-reduced-motion: reduce) {
  .lm > *, [data-rise], [data-wipe], [data-mask], [data-mask] > * {
    transform: none !important; opacity: 1 !important; clip-path: none !important;
  }
  .loader { display: none; }
}