/* ============ Amr Abdelghani — «قبل أن تُقرّر» ============ */
:root{
  --ink:#0B0A08;
  --surface:#14110C;
  --gold:#C6A15B;
  --gold-dim:#8f7440;
  --bone:#EDE6D8;
  --muted:#948A78;
  --font-ar-display:'Amiri',serif;
  --font-ar:'Almarai',sans-serif;
  --font-en-display:'Cormorant Garamond',serif;
  --font-en:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-ar);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html[lang="en"] body{font-family:var(--font-en)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- grain ---------- */
.grain{
  position:fixed;inset:-50%;z-index:70;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(9) infinite;
}
@keyframes grainShift{
  0%,100%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-5%)}60%{transform:translate(-5%,-2%)}80%{transform:translate(4%,4%)}
}

/* ---------- preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:100;background:var(--ink);
  display:none;align-items:center;justify-content:center;
}
.js:not(.intro-failed) .preloader{display:flex}
.preloader-phrase{
  font-family:var(--font-ar-display);
  font-size:clamp(2.4rem,7vw,5.5rem);
  color:var(--gold);
  display:flex;gap:.35em;
}
.preloader-phrase span{opacity:0;transform:translateY(.4em);display:inline-block}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;right:0;left:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem clamp(1.2rem,4vw,3rem);
  transition:transform .5s cubic-bezier(.22,1,.36,1),background .4s;
}
.nav.scrolled{background:linear-gradient(to bottom,rgba(11,10,8,.85),transparent)}
.nav.hidden{transform:translateY(-110%)}
.nav-name{
  font-weight:800;font-size:1.05rem;letter-spacing:.02em;color:var(--bone);
}
.lang-toggle{
  background:none;border:1px solid var(--gold-dim);color:var(--gold);
  font-family:var(--font-en);font-size:.8rem;letter-spacing:.14em;
  padding:.45em 1.1em;border-radius:2em;cursor:pointer;
  transition:all .3s;
}
.lang-toggle:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* ---------- hero ---------- */
.hero{position:sticky;top:0;height:100svh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transform:scale(1.15)}
.hero-veil{position:absolute;inset:0}
html[dir="rtl"] .hero-veil{
  background:
    linear-gradient(270deg,rgba(11,10,8,.88) 8%,rgba(11,10,8,.45) 45%,rgba(11,10,8,.15) 75%),
    linear-gradient(to top,var(--ink) 4%,transparent 40%);
}
html[dir="ltr"] .hero-veil{
  background:
    linear-gradient(90deg,rgba(11,10,8,.88) 8%,rgba(11,10,8,.45) 45%,rgba(11,10,8,.15) 75%),
    linear-gradient(to top,var(--ink) 4%,transparent 40%);
}
.hero-content{
  position:relative;z-index:2;width:100%;
  padding:0 clamp(1.2rem,5vw,4.5rem) clamp(4rem,9vh,7rem);
}
.hero-kicker{
  color:var(--gold);font-size:clamp(.85rem,1.6vw,1.05rem);font-weight:400;
  letter-spacing:.05em;margin-bottom:.9rem;
}
.hero-name{
  font-weight:800;line-height:1.1;
  font-size:clamp(3.4rem,12vw,9.5rem);
  color:var(--bone);
}
html[lang="en"] .hero-name{font-family:var(--font-en-display);font-weight:600}
.hero-spine{
  font-family:var(--font-ar-display);
  color:var(--gold);
  font-size:clamp(1.5rem,3.6vw,2.7rem);
  margin-top:1rem;
}
html[lang="en"] .hero-spine{font-family:var(--font-en-display);font-style:italic}
.hero-sub{
  color:var(--muted);font-size:clamp(.95rem,1.8vw,1.2rem);
  margin-top:.7rem;font-weight:300;letter-spacing:normal;
}
html[lang="en"] .hero-sub{letter-spacing:.04em}
.hero-spec{
  color:var(--gold);font-size:13px;font-weight:300;
  font-family:var(--font-ar);letter-spacing:normal;
  margin-top:.8rem;display:flex;align-items:center;flex-wrap:wrap;
}
html[lang="en"] .hero-spec{font-family:var(--font-en)}
.hero-spec i{font-style:normal;font-size:.6em;opacity:.7;margin-inline:.7em}
.scroll-cue{position:absolute;bottom:2.2rem;inset-inline-start:50%;transform:translateX(50%);z-index:3}
html[dir="ltr"] .scroll-cue{transform:translateX(-50%)}
.scroll-line{
  display:block;width:1px;height:56px;background:var(--gold);
  transform-origin:top;animation:cue 2.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:top}55%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:600px){.scroll-cue,html[dir="ltr"] .scroll-cue{inset-inline-start:auto;inset-inline-end:1.2rem;transform:none}}

/* ---------- marquee ---------- */
.marquee-band{
  border-block:1px solid rgba(198,161,91,.22);
  padding:1.35rem 0;overflow:hidden;background:var(--surface);
  position:relative;z-index:10;
}
.marquee-track{
  display:flex;align-items:center;gap:2.8rem;width:max-content;
  font-size:clamp(.85rem,1.5vw,1rem);color:var(--muted);letter-spacing:.03em;white-space:nowrap;
  padding-inline-end:2.8rem;
}
.marquee-track i{color:var(--gold);font-style:normal;font-size:.55em}

/* ---------- sections shared ---------- */
section{position:relative}
.section-label{
  color:var(--gold);font-size:.8rem;letter-spacing:normal;font-weight:700;
  margin-bottom:1.1rem;text-transform:uppercase;
}
html[lang="en"] .section-label{letter-spacing:.28em}
.manifesto,.arenas,.proof,.cta{padding:clamp(5rem,12vh,9rem) clamp(1.2rem,5vw,4.5rem)}
.manifesto,.arenas,.proof,.statement,.cta,.footer{position:relative;z-index:10}

/* ---------- manifesto ---------- */
.manifesto{background:var(--ink)}
.manifesto-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,6vw,6rem);
  align-items:center;max-width:1300px;margin-inline:auto;
}
.manifesto-heading{
  font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:800;line-height:1.25;margin-bottom:1.6rem;
}
html[lang="en"] .manifesto-heading{font-family:var(--font-en-display);font-weight:600}
.manifesto-body{color:var(--muted);font-size:clamp(1rem,1.9vw,1.18rem);line-height:2;font-weight:300;max-width:34em}
.manifesto-quote{
  font-family:var(--font-ar-display);color:var(--gold);
  font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.8;margin-top:2rem;
}
html[lang="en"] .manifesto-quote{font-family:var(--font-en-display);font-style:italic}
.manifesto-figure figcaption,.proof-item figcaption{
  color:var(--muted);font-size:.8rem;margin-top:.8rem;letter-spacing:.04em;font-weight:300;
}
.img-clip{overflow:hidden;border-radius:2px}
.img-clip img{transform:scale(1.12);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.proof-item:hover .img-clip img,.manifesto-figure:hover .img-clip img{transform:scale(1.045)}

/* ---------- arenas (bone color-flip chapter) ---------- */
.arenas{background:#EDE6D8;text-align:center}
.arenas-heading{
  color:var(--ink);
  font-size:clamp(2rem,4.8vw,3.6rem);font-weight:800;margin-bottom:clamp(2.5rem,6vh,4.5rem);
}
html[lang="en"] .arenas-heading{font-family:var(--font-en-display);font-weight:600}
.arena-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem);
  max-width:1300px;margin-inline:auto;text-align:start;
}
.arena-card{
  border:1px solid rgba(11,10,8,.15);border-radius:3px;
  padding:clamp(1.6rem,3vw,2.6rem);
  background:linear-gradient(160deg,rgba(11,10,8,.04),transparent 55%);
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .5s;
}
.arena-card:hover{transform:translateY(-8px);border-color:rgba(198,161,91,.55)}
.arena-num{
  font-family:var(--font-ar-display);color:var(--gold);font-size:1.1rem;letter-spacing:.1em;
}
.arena-card h3{color:var(--ink);font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:800;margin:1rem 0 .8rem}
html[lang="en"] .arena-card h3{font-family:var(--font-en-display);font-weight:600}
.arena-card p{color:rgba(11,10,8,.7);font-weight:300;line-height:1.9;font-size:.98rem}

/* ---------- proof wall ---------- */
.proof{background:var(--ink)}
.proof-heading{
  font-size:clamp(2rem,4.8vw,3.6rem);font-weight:800;margin-bottom:clamp(2.5rem,6vh,4rem);
}
html[lang="en"] .proof-heading{font-family:var(--font-en-display);font-weight:600}
.proof-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1.2rem,3vw,2.4rem);
  max-width:1300px;margin-inline:auto;
}
.proof-item{grid-column:span 2}
.proof-item.span-2{grid-column:span 6}
.proof-item .img-clip{aspect-ratio:4/3}
.proof-item.span-2 .img-clip{aspect-ratio:21/9}
.proof-item img{width:100%;height:100%;object-fit:cover}

/* ---------- statement ---------- */
.statement{
  position:relative;min-height:78svh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;padding:6rem clamp(1.2rem,5vw,4rem);
}
.statement-bg{position:absolute;inset:0}
.statement-bg img{width:100%;height:115%;object-fit:cover;object-position:center 20%}
.statement-veil{position:absolute;inset:0;background:rgba(11,10,8,.82)}
.statement-quote{
  position:relative;z-index:2;
  font-family:var(--font-ar-display);
  font-size:clamp(1.6rem,4.2vw,3.1rem);line-height:1.9;color:var(--bone);
  max-width:22em;
}
html[lang="en"] .statement-quote{font-family:var(--font-en-display);font-style:italic;line-height:1.6}

/* ---------- CTA ---------- */
.cta{background:var(--surface);text-align:center;border-top:1px solid rgba(198,161,91,.15)}
.cta-spine{
  font-family:var(--font-ar-display);color:var(--gold);
  font-size:clamp(1.3rem,2.8vw,1.9rem);margin-bottom:1.4rem;
}
html[lang="en"] .cta-spine{font-family:var(--font-en-display);font-style:italic}
.cta-heading{font-size:clamp(1.9rem,4.5vw,3.4rem);font-weight:800;margin-bottom:2.6rem}
html[lang="en"] .cta-heading{font-family:var(--font-en-display);font-weight:600}
.cta-btn{
  display:inline-block;background:var(--gold);color:var(--ink);
  font-weight:800;font-size:1.05rem;letter-spacing:.03em;
  padding:1.05em 3.2em;border-radius:3em;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;
}
.cta-btn:hover{transform:translateY(-4px);box-shadow:0 18px 50px -12px rgba(198,161,91,.45)}

/* ---------- closer ---------- */
.closer{background:var(--ink);padding:clamp(3rem,8vh,6rem) clamp(1.2rem,4vw,3rem);position:relative;z-index:10}
.closer-name{display:flex;align-items:center;justify-content:center;gap:.18em;font-weight:800;font-size:clamp(3.2rem,13vw,12rem);line-height:1.1;color:var(--bone);white-space:nowrap;overflow:hidden}
.closer-img{height:.85em;width:auto;border-radius:3px;object-fit:cover;aspect-ratio:3/4}
html[lang="en"] .closer-name{font-family:var(--font-en-display);font-weight:600}

/* ---------- footer ---------- */
.footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:2rem clamp(1.2rem,4vw,3rem);background:var(--ink);
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--muted);font-size:.85rem;
}
.footer-mark{font-family:var(--font-en);letter-spacing:.12em}

/* ---------- reveal initial states (JS animates) ---------- */
.reveal,.reveal-img,.reveal-hero{opacity:1}
.js:not(.intro-failed) .reveal,.js:not(.intro-failed) .reveal-img,.js:not(.intro-failed) .reveal-hero{opacity:0}

/* ---------- intro-failed fallback (watchdog / no-js) ---------- */
.intro-failed .preloader{display:none!important}
.intro-failed .reveal,.intro-failed .reveal-img,.intro-failed .reveal-hero{opacity:1!important;transform:none!important}
.intro-failed .img-clip{clip-path:none!important}
.intro-failed .wm-i{transform:none!important;opacity:1!important}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .manifesto-grid{grid-template-columns:1fr}
  .manifesto-figure{max-width:520px}
  .arena-cards{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr}
  .proof-item,.proof-item.span-2{grid-column:span 1}
  .proof-item.span-2 .img-clip{aspect-ratio:16/10}
}
@media (prefers-reduced-motion: reduce){
  .preloader{display:none!important}
  .grain,.scroll-line{animation:none!important}
  .reveal,.reveal-img,.reveal-hero{opacity:1!important;transform:none!important}
  .img-clip{clip-path:none!important}
  [data-parallax]{transform:none!important}
  #heroImg{transform:scale(1.15)!important}
  .wm-i{transform:none!important;opacity:1!important}
}