/* ════════════════════════════════════════════════════════════
   آزر · azr-arte — التجربة السينمائية
   هوية v.03 (توكنز مستوردة). لا إعادة تعريف لتوكن كانوني هنا.
   البنية: studio-arte · الحركة: ijbdesign (معاد إنتاجها)
   ════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-primary);
  font-size:var(--body-size);
  line-height:var(--body-lh);
  font-weight:var(--w-regular);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  --edge:clamp(20px,6vw,96px);     /* page side padding (non-canon local) */
  --maxw:1240px;
  --duo-a:var(--ink-deep);
  --duo-b:var(--p700);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:normal}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--edge)}

/* ── shared editorial atoms ─────────────────────────── */
.eyebrow{
  display:inline-block;font-family:var(--font-mono);font-size:var(--label-size);
  font-weight:var(--w-medium);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--mut);margin-bottom:var(--space-5);
}
.eyebrow::before{content:"";display:inline-block;width:var(--dot);height:var(--dot);
  border-radius:50%;background:var(--accent);margin-inline-end:10px;vertical-align:middle;transform:translateY(-2px)}
.eyebrow--light{color:var(--text-on-dark-muted)}

.dot{display:inline-block;width:.34em;height:.34em;border-radius:50%;
  background:var(--accent);margin-inline-start:.12em;vertical-align:baseline}

/* line-mask reveal primitive (real authored lines)
   padding-top gives Arabic diacritics (hamza/tashkeel/tanwin) room inside the
   clip box so the mask never shears their tops. */
.line{display:block;overflow:hidden;padding-top:.22em;margin-top:-.12em}
.line-in{display:block;will-change:transform}
.has-js .line-in{transform:translateY(112%)}
.has-js [data-reveal]{opacity:0;transform:translateY(26px)}
.has-js [data-img]{opacity:0}

/* ── custom cursor ──────────────────────────────────── */
.cursor{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--accent);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);mix-blend-mode:normal;
  transition:width .26s var(--ease),height .26s var(--ease),background .26s var(--ease);display:none}
.cursor.is-hover{width:46px;height:46px;background:rgba(150,123,182,.18)}

/* ── scroll progress rail ───────────────────────────── */
.scroll-rail{position:fixed;top:0;right:0;left:0;height:2px;z-index:200;background:transparent}
.scroll-rail__fill{display:block;height:100%;width:0;background:var(--accent);transform-origin:right}

/* ── nav ────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:150;display:flex;align-items:center;
  justify-content:space-between;padding:var(--space-4) var(--edge);
  mix-blend-mode:normal;transition:background .4s var(--ease),padding .4s var(--ease)}
.nav.is-dark{}
.nav__brand img{height:22px;width:auto}
.nav.is-dark .nav__brand img{filter:brightness(0) invert(1)}
.nav__cta{font-family:var(--font-mono);font-size:var(--label-size);letter-spacing:.04em;
  text-transform:uppercase;padding:10px 18px;border:1px solid var(--rule);border-radius:var(--radius-pill);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.nav__cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nav.is-dark .nav__cta{color:var(--paper);border-color:var(--border-rule-dark)}
.nav.is-dark .nav__cta:hover{background:var(--paper);color:var(--ink)}

/* ════ S1 · HERO ════ */
.s-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  text-align:right;padding:var(--space-9) var(--edge) var(--space-7);position:relative;max-width:var(--maxw);margin-inline:auto}
.hero__title{font-family:var(--font-primary);font-weight:var(--w-medium);
  font-size:var(--d1-size);line-height:.98;letter-spacing:var(--track-display);
  margin:var(--space-3) 0 var(--space-6)}
.hero__title .accent{color:var(--accent)}
.hero__pull{font-size:var(--h3-size);line-height:1.3;max-width:18ch;color:var(--mut);
  font-weight:var(--w-light)}
.hero__pull em{color:var(--ink);font-weight:var(--w-medium)}
.scroll-cue{position:absolute;bottom:var(--space-6);inset-inline-start:var(--edge);
  display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:var(--label-size);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--mut)}
.scroll-cue i{display:block;width:1px;height:46px;background:var(--rule);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--accent);
  animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ════ S2 · STATEMENT ════ */
.s-statement{padding:var(--space-9) 0;display:flex;align-items:center;min-height:90svh}
.statement{font-family:var(--font-primary);font-weight:var(--w-medium);
  font-size:clamp(28px,4.4vw,64px);line-height:1.32;letter-spacing:var(--track-head);max-width:20ch}
.statement b{font-weight:var(--w-medium);color:var(--accent)}
.statement .w{color:var(--mute-soft);transition:color .5s var(--ease)}
.statement .w.on{color:var(--ink)}
.statement b .w.on{color:var(--accent)}

/* ════ S3 · THRESHOLD ════ */
.s-threshold{padding:var(--space-8) 0;text-align:center}
.thr-line{display:block;width:1px;height:88px;margin:0 auto var(--space-5);background:var(--rule);
  transform-origin:top}
.thr-text{font-family:var(--font-display);font-style:italic;font-size:var(--h2-size);color:var(--mut)}

/* ════ band heads (shared) ════ */
.band-head{padding-top:var(--space-8);padding-bottom:var(--space-6)}
.band-title{font-family:var(--font-primary);font-weight:var(--w-medium);
  font-size:var(--h1-size);line-height:1.06;letter-spacing:var(--track-head);max-width:16ch}

/* ════ S4 · UMBRELLAS ════ */
.s-umbrellas{padding-bottom:var(--space-8)}
.umb{max-width:var(--maxw);margin-inline:auto;padding:var(--space-6) var(--edge);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.umb:nth-child(even) .umb__art{order:2}
.umb__art{position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;
  color:var(--paper);
  background:
    radial-gradient(120% 120% at 80% 18%, rgba(150,123,182,.42), transparent 60%),
    linear-gradient(150deg, var(--duo-a), var(--duo-b));
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg)}
.umb__num{position:absolute;top:18px;inset-inline-start:24px;font-family:var(--font-display);
  font-size:clamp(40px,7vw,96px);line-height:1;color:rgba(251,247,238,.16)}
.umb__icon{width:clamp(96px,18vw,168px);height:auto;color:var(--paper);position:relative;z-index:2}
.umb__grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.umb:nth-child(odd) .umb__art{background:
    radial-gradient(120% 120% at 20% 22%, rgba(150,123,182,.5), transparent 58%),
    linear-gradient(210deg, var(--duo-b), var(--duo-a))}
.umb__kicker{display:inline-block;font-family:var(--font-mono);font-size:var(--label-size);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-3)}
.umb__head{font-family:var(--font-primary);font-weight:var(--w-medium);font-size:var(--h2-size);
  line-height:1.18;letter-spacing:var(--track-head);margin-bottom:var(--space-4)}
.umb__body{font-size:var(--lede-size);line-height:1.6;color:var(--mut);max-width:42ch}
.umb__body b{color:var(--ink);font-weight:var(--w-medium)}

/* ════ S5 · IMPACT (dark) ════ */
.s-impact{background:var(--ink-deep);color:var(--paper);padding:var(--space-9) 0;margin-top:var(--space-7)}
.impact__title{font-family:var(--font-primary);font-weight:var(--w-medium);font-size:var(--h1-size);
  line-height:1.08;letter-spacing:var(--track-head);max-width:16ch;margin-bottom:var(--space-7)}
.impact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.metric{padding-top:var(--space-5);border-top:1px solid var(--border-rule-dark)}
.metric__num{font-family:var(--font-display);font-size:clamp(72px,12vw,168px);line-height:.9;color:var(--paper)}
.metric__count{font-feature-settings:"tnum"}
.metric__num::after{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;
  background:var(--accent);margin-inline-start:.1em;vertical-align:.15em}
.metric__unit{font-family:var(--font-mono);font-size:var(--small-size);letter-spacing:.04em;
  color:var(--text-on-dark-muted);margin:var(--space-3) 0 var(--space-4)}
.metric__name{font-size:var(--h3-size);font-weight:var(--w-medium);margin-bottom:var(--space-3)}
.metric__desc{font-size:var(--body-size);line-height:1.7;color:rgba(251,247,238,.74);max-width:44ch}
.impact__quote{margin-top:var(--space-8);font-family:var(--font-primary);font-weight:var(--w-light);
  font-size:clamp(24px,3.4vw,44px);line-height:1.4;max-width:24ch;color:var(--paper);
  border:0;padding-inline-start:var(--space-5);border-inline-start:2px solid var(--accent)}
.impact__quote b{font-weight:var(--w-medium)}

/* ════ S6 · CONCEPTS ════ */
.s-concepts{padding-bottom:var(--space-9);overflow:hidden}
.concepts__track{display:flex;gap:24px;padding-inline:var(--edge);will-change:transform}
.concept{flex:0 0 clamp(280px,32vw,400px);background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);min-height:300px;
  display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.concept:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.concept__i{font-family:var(--font-display);font-size:var(--h2-size);color:var(--accent);margin-bottom:auto}
.concept h3{font-size:var(--h4-size);font-weight:var(--w-medium);line-height:1.3;margin:var(--space-4) 0 var(--space-3)}
.concept p{font-size:var(--body-size);line-height:1.6;color:var(--mut)}

/* ════ S7 · CTA ════ */
.s-cta{padding:var(--space-9) 0;text-align:center}
.cta__title{font-family:var(--font-primary);font-weight:var(--w-medium);font-size:var(--d2-size);
  line-height:1.02;letter-spacing:var(--track-display);margin-bottom:var(--space-5)}
.cta__title .accent{color:var(--accent)}
.cta__sub{font-size:var(--lede-size);line-height:1.6;color:var(--mut);max-width:34ch;margin:0 auto var(--space-6)}
.cta__btn{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:var(--small-size);letter-spacing:.06em;text-transform:uppercase;
  padding:18px 32px;border-radius:var(--radius-pill);transition:gap .3s var(--ease),background .3s var(--ease)}
.cta__btn i{width:7px;height:7px;border-radius:50%;background:var(--accent);transition:transform .3s var(--ease)}
.cta__btn:hover{gap:22px;background:var(--azr-deep)}
.cta__btn:hover i{transform:scale(1.5)}

/* ════ FOOTER ════ */
.foot{background:var(--ink-deep);color:var(--paper);padding:var(--space-7) var(--edge);
  display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:flex-end;justify-content:space-between}
.foot__mark{height:30px;width:auto}
.foot__meta{display:flex;flex-direction:column;gap:8px;text-align:end;font-family:var(--font-mono);
  font-size:var(--small-size);color:var(--text-on-dark-muted)}
.foot__meta a:hover{color:var(--accent)}

/* ════ RESPONSIVE ════ */
@media (max-width:880px){
  .umb{grid-template-columns:1fr;gap:var(--space-4)}
  .umb:nth-child(even) .umb__art{order:0}
  .umb__art{aspect-ratio:16/10}
  .impact__grid{grid-template-columns:1fr;gap:var(--space-7)}
  .hero__pull{max-width:24ch}
}
@media (max-width:520px){
  body{--edge:20px}
  .hero__title{font-size:clamp(48px,15vw,72px)}
  .nav__cta{padding:8px 14px}
  .scroll-cue{display:none}
  .concept{flex-basis:78vw;min-height:260px}
}

/* ════ POINTER / MOTION ════ */
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
  body.cursor-on a,body.cursor-on .hoverable,body.cursor-on .scroll-cue{cursor:none}
}
@media (prefers-reduced-motion:reduce){
  .has-js .line-in,.has-js [data-reveal]{transform:none!important;opacity:1!important}
  .has-js [data-img]{opacity:1!important}
  .scroll-cue i::after{animation:none}
  *{scroll-behavior:auto!important}
}