/* ==========================================================================
   Ittihad Society — motion layer  (v1)
   Loaded AFTER site.css. Everything here is additive: remove this file and the
   two tags that load it, and the site is exactly as it was.

   Rules of the house
   - Nothing is ever hidden unless JavaScript is running AND the visitor has not
     asked for reduced motion. motion.js adds `jsm` to <html> only in that case,
     and every "hidden" state below is scoped to `.jsm`.
   - Each piece plays ONCE, when it is first scrolled into view.
   - Movement follows reading direction: content arrives from the right in
     Arabic and from the left in English.
   ========================================================================== */

:root{
  --m-ease:cubic-bezier(.2,.8,.2,1);     /* arrive: fast out, soft landing */
  --m-ease-soft:cubic-bezier(.3,0,.2,1);
  --m-dur:.72s;
}

/* direction sign: +1 in RTL, -1 in LTR — used for "enter from reading side" */
.jsm{--m-dir:1}
.jsm[dir="ltr"]{--m-dir:-1}

/* The site ships a Chrome-only scroll-driven reveal. While the motion layer is
   running it owns these elements instead, so the two never fight over opacity,
   and the reveal works in Firefox and Safari too. */
.jsm .sec-head,.jsm .inst,.jsm .news-card,.jsm .prog,.jsm .stat,.jsm .give-card,
.jsm .ar-doc,.jsm .era,.jsm .contact-card,.jsm .gallery figure,.jsm .howto__step,
.jsm .dept,.jsm .doc{animation:none!important}

/* ---------- the reveal engine ---------- */
.jsm [data-m]{will-change:opacity,transform}
.jsm [data-m]:not(.m-on){opacity:0}
.jsm [data-m].m-on{animation-duration:var(--m-dur);animation-timing-function:var(--m-ease);
  animation-fill-mode:both;animation-delay:calc(var(--d,0)*1ms)}

.jsm [data-m="rise"]:not(.m-on){transform:translateY(26px)}
.jsm [data-m="rise"].m-on{animation-name:m-rise}
@keyframes m-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.jsm [data-m="rise-sm"]:not(.m-on){transform:translateY(14px)}
.jsm [data-m="rise-sm"].m-on{animation-name:m-rise-sm}
@keyframes m-rise-sm{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* cards: a hint of depth, never a full flip */
.jsm [data-m="tilt"]:not(.m-on){transform:perspective(1100px) rotateY(calc(var(--m-dir)*7deg)) translateY(22px)}
.jsm [data-m="tilt"].m-on{animation-name:m-tilt}
@keyframes m-tilt{from{opacity:0;transform:perspective(1100px) rotateY(calc(var(--m-dir)*7deg)) translateY(22px)}
  to{opacity:1;transform:none}}

/* rows that slide in from the reading side */
.jsm [data-m="slide"]:not(.m-on){transform:translateX(calc(var(--m-dir)*34px))}
.jsm [data-m="slide"].m-on{animation-name:m-slide}
@keyframes m-slide{from{opacity:0;transform:translateX(calc(var(--m-dir)*34px))}to{opacity:1;transform:none}}

.jsm [data-m="pop"]:not(.m-on){transform:scale(.82)}
.jsm [data-m="pop"].m-on{animation-name:m-pop;animation-timing-function:cubic-bezier(.2,1.25,.35,1)}
@keyframes m-pop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}

/* ---------- headline: word by word ---------- */
.m-w{display:inline-block;overflow:hidden;vertical-align:bottom}
.m-w>i{display:inline-block;font-style:normal;will-change:transform}
.jsm .m-split:not(.m-on) .m-w>i{transform:translateY(112%)}
.jsm .m-split.m-on .m-w>i{animation:m-word .78s var(--m-ease) both;animation-delay:calc(var(--d,0)*1ms + var(--i)*62ms)}
@keyframes m-word{from{transform:translateY(112%)}to{transform:translateY(0)}}

/* a tatreez stitch that draws under a section heading */
.m-rule{display:block;height:6px;margin-top:.75rem;width:clamp(72px,18%,132px);
  background:repeating-linear-gradient(90deg,var(--thread) 0 7px,transparent 7px 13px);
  transform-origin:100% 50%;border-radius:2px}
[dir="ltr"] .m-rule{transform-origin:0 50%}
.sec-head--center .m-rule,.sec-head--center .m-rule{margin-inline:auto}
.section--ink .m-rule,.section--olive .m-rule,.page-head .m-rule,.donate-band .m-rule{
  background-image:repeating-linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 10px)}
.jsm .m-rule:not(.m-on){transform:scaleX(0)}
.jsm .m-rule.m-on{animation:m-ruleIn .75s var(--m-ease-soft) both;animation-delay:calc(var(--d,0)*1ms + 170ms)}
@keyframes m-ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- hero ---------- */
.jsm .hero__eyebrow::before{transform-origin:100% 50%}
.jsm[dir="ltr"] .hero__eyebrow::before{transform-origin:0 50%}
.jsm .hero:not(.m-on) .hero__eyebrow::before{transform:scaleX(0)}
.jsm .hero.m-on .hero__eyebrow::before{animation:m-ruleIn .55s var(--m-ease) .18s both}
.jsm .hero:not(.m-on) .hero__eyebrow{opacity:0}
.jsm .hero.m-on .hero__eyebrow{animation:m-rise-sm .6s var(--m-ease) .1s both}
.jsm .hero:not(.m-on) .hero__lead,
.jsm .hero:not(.m-on) .hero__cta{opacity:0;transform:translateY(16px)}
.jsm .hero.m-on .hero__lead{animation:m-rise-sm .7s var(--m-ease) .62s both}
.jsm .hero.m-on .hero__cta{animation:m-rise-sm .7s var(--m-ease) .76s both}

/* the stage: media arrives as a soft unveil, seal lands with a drawn gold ring */
.jsm .hero:not(.m-on) .hero__media{opacity:0;transform:translateY(22px) scale(.985)}
.jsm .hero.m-on .hero__media{animation:m-stage 1.05s var(--m-ease) .3s both}
@keyframes m-stage{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.jsm .hero:not(.m-on) .hero__seal{opacity:0;transform:scale(.72) rotate(-12deg)}
.jsm .hero.m-on .hero__seal{animation:m-seal .85s cubic-bezier(.2,1.1,.3,1) .92s both}
@keyframes m-seal{from{opacity:0;transform:scale(.72) rotate(-12deg)}to{opacity:1;transform:none}}
.m-sealring{position:absolute;inset:-9px;pointer-events:none;overflow:visible}
.m-sealring circle{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.jsm .hero.m-on .m-sealring circle{animation:m-draw 1.35s var(--m-ease-soft) 1.15s both}
@keyframes m-draw{to{stroke-dashoffset:0}}
.jsm .hero:not(.m-on) .hero__scroll{opacity:0;transform:translate(var(--m-sx,-50%),10px)}
.jsm .hero.m-on .hero__scroll{animation:m-scrollin .7s var(--m-ease) 1.25s both}
@keyframes m-scrollin{from{opacity:0;transform:translate(var(--m-sx,-50%),10px)}
  to{opacity:1;transform:translate(var(--m-sx,-50%),0)}}
.jsm .hero.m-on .hero__scroll svg{animation:m-bob 2.4s ease-in-out 2.4s infinite}
@keyframes m-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- stitched dividers ---------- */
.jsm .stitch.m-has{background-image:none}
.m-stitch{display:block;width:100%;height:100%;overflow:visible}
.m-stitch path{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.m-stitch .a{stroke:var(--thread)}
.m-stitch .b{stroke:var(--gold)}
.stitch--gold .m-stitch .a{stroke:var(--gold)}
.stitch--gold .m-stitch .b{stroke:#F0DCA8}
.jsm .stitch.m-on .m-stitch path{animation:m-draw .42s ease both;animation-delay:calc(var(--i)*26ms)}

/* ---------- about: the arch outline draws itself ---------- */
.about__photo{position:relative}
.m-arch{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:visible}
.m-arch path{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:.9}
.jsm .about__photo.m-on .m-arch path{animation:m-draw 1.7s var(--m-ease-soft) .35s both}
.jsm .about__photo:not(.m-on) img{opacity:0;transform:scale(1.07)}
.jsm .about__photo.m-on img{animation:m-unveil 1.5s var(--m-ease-soft) both}
@keyframes m-unveil{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}
.jsm .values .value:not(.m-on){opacity:0;transform:translateY(12px)}
.jsm .values .value.m-on{animation:m-rise-sm .6s var(--m-ease) both;animation-delay:calc(var(--i)*85ms)}

/* ---------- stats: a gold thread draws under each number ---------- */
.stat{position:relative}
.m-underline{display:block;height:3px;width:46px;margin:.55rem auto 0;border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--thread));transform-origin:100% 50%}
[dir="ltr"] .m-underline{transform-origin:0 50%}
.jsm .stat:not(.m-on) .m-underline{transform:scaleX(0)}
.jsm .stat.m-on .m-underline{animation:m-ruleIn .8s var(--m-ease-soft) both;animation-delay:calc(var(--d,0)*1ms + 260ms)}

/* ---------- institutions: one sweep of light across each logo ---------- */
.inst{position:relative;overflow:hidden}
.m-shine{position:absolute;top:0;bottom:0;width:42%;z-index:4;pointer-events:none;inset-inline-start:-50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);opacity:0}
.jsm .inst.m-on .m-shine{animation:m-shine 1.05s var(--m-ease-soft) both;animation-delay:calc(var(--d,0)*1ms + 280ms)}
@keyframes m-shine{0%{inset-inline-start:-50%;opacity:0}12%{opacity:1}88%{opacity:1}100%{inset-inline-start:118%;opacity:0}}

/* the hospital card: sunlight crosses the stone once */
.inst--lead .inst__photo{position:relative;overflow:hidden}
.m-sun{position:absolute;top:-35%;bottom:-35%;width:48%;z-index:3;pointer-events:none;inset-inline-start:-65%;
  background:linear-gradient(105deg,transparent,rgba(255,244,214,.8),transparent);filter:blur(4px);opacity:0}
.jsm .inst--lead.m-on .m-sun{animation:m-sun 1.9s var(--m-ease-soft) .5s both}
@keyframes m-sun{0%{inset-inline-start:-65%;opacity:0}15%{opacity:1}85%{opacity:1}100%{inset-inline-start:132%;opacity:0}}
.jsm .inst--lead:not(.m-on) .lead-facts li{opacity:0;transform:translateY(12px)}
.jsm .inst--lead.m-on .lead-facts li{animation:m-rise-sm .6s var(--m-ease) both;animation-delay:calc(.45s + var(--i)*110ms)}

/* ---------- timeline: the stations land in order ----------
   This design already draws its own connector (.tl__dot::before) and diamond
   (.tl__dot::after), so the motion layer animates THOSE rather than adding a
   second rail. Note the diamond is the ::after — rotating .tl__dot itself
   would swing its connector line into a diagonal. */
.jsm .tl__dot::before{transform-origin:100% 50%}
.jsm[dir="ltr"] .tl__dot::before{transform-origin:0 50%}
.jsm .tl-viewport:not(.m-on) .tl__item:not(.is-clone) .tl__dot::before{transform:scaleX(0)}
.jsm .tl-viewport.m-on .tl__item:not(.is-clone) .tl__dot::before{
  animation:m-ruleIn .7s var(--m-ease-soft) both;animation-delay:calc(.12s + var(--i)*170ms)}
.jsm .tl-viewport:not(.m-on) .tl__item:not(.is-clone) .tl__dot::after{transform:rotate(45deg) scale(0)}
.jsm .tl-viewport.m-on .tl__item:not(.is-clone) .tl__dot::after{
  animation:m-dot .5s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.25s + var(--i)*170ms)}
@keyframes m-dot{from{transform:rotate(45deg) scale(0)}to{transform:rotate(45deg) scale(1)}}
.jsm .tl-viewport:not(.m-on) .tl__item:not(.is-clone) .tl__year,
.jsm .tl-viewport:not(.m-on) .tl__item:not(.is-clone) .tl__text{opacity:0;transform:translateY(10px)}
.jsm .tl-viewport.m-on .tl__item:not(.is-clone) .tl__year{animation:m-rise-sm .55s var(--m-ease) both;animation-delay:calc(.18s + var(--i)*170ms)}
.jsm .tl-viewport.m-on .tl__item:not(.is-clone) .tl__text{animation:m-rise-sm .55s var(--m-ease) both;animation-delay:calc(.3s + var(--i)*170ms)}

/* ---------- programmes: the support chip slides on hover ---------- */
.prog__go{transition:transform .28s var(--m-ease),background-color .25s,color .25s}
.prog:hover .prog__go{transform:translateX(calc(var(--m-dir,1)*-6px))}

/* ---------- transparency seal: circle and tick are drawn ---------- */
.trust__seal{position:relative}
.jsm .trust__seal.m-has{color:transparent}
.m-tick{position:absolute;inset:0;width:100%;height:100%}
.m-tick circle,.m-tick path{fill:none;stroke:var(--gold);stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.m-tick circle{stroke-width:2.4;opacity:.75}
.m-tick path{stroke-width:5}
.jsm .trust.m-on .m-tick circle{animation:m-draw 1.1s var(--m-ease-soft) .15s both}
.jsm .trust.m-on .m-tick path{animation:m-draw .55s var(--m-ease) .85s both}

/* ---------- centenary medallion: a slow turn of light ---------- */
.seal-figure{position:relative;overflow:hidden}
.m-gleam{position:absolute;top:-40%;bottom:-40%;width:40%;z-index:2;pointer-events:none;inset-inline-start:-55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);filter:blur(2px);opacity:0}
.jsm .donate-band.m-on .m-gleam{animation:m-sun 2.2s var(--m-ease-soft) .6s both}
.jsm .donate-band:not(.m-on) .seal-figure img{opacity:0;transform:scale(.9)}
.jsm .donate-band.m-on .seal-figure img{animation:m-pop .95s cubic-bezier(.2,1.1,.3,1) .2s both}
@media (prefers-reduced-motion:no-preference){
  .jsm .donate-band.m-on .seal-figure img{animation:m-pop .95s cubic-bezier(.2,1.1,.3,1) .2s both,m-float 7s ease-in-out 1.2s infinite}
  @keyframes m-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
}

/* ---------- quick links: the icon ring fills on hover ---------- */
.quick__ico{position:relative}
.quick__ico::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--thread);
  opacity:0;transform:scale(.8);transition:opacity .3s,transform .35s var(--m-ease)}
.quick:hover .quick__ico::after{opacity:.55;transform:scale(1)}

/* ---------- reading progress on the header's edge ---------- */
.m-progress{position:absolute;inset-inline:0;bottom:-1px;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--thread),var(--gold),var(--olive-600));
  transform:scaleX(var(--m-p,0));transform-origin:100% 50%;transition:transform .12s linear;opacity:.9}
[dir="ltr"] .m-progress{transform-origin:0 50%}

/* ---------- news media: a gentle push in on hover ---------- */
.news-card__media img,.news-card__media video{transition:transform .6s var(--m-ease)}
.news-card:hover .news-card__media img,.news-card:hover .news-card__media video{transform:scale(1.045)}

/* ---------- safety net ----------
   If anything above is ever left mid-flight (a tab restored from the back/forward
   cache, an observer that never fired), this makes the content visible again. */
.jsm .m-done [data-m],.jsm [data-m].m-on{opacity:1}
@media print{.jsm [data-m]{opacity:1!important;transform:none!important}}

/* the scroll hint is centred with a translate, so its reveal must keep that */
.jsm .hero__scroll{--m-sx:-50%}
.jsm[dir="rtl"] .hero__scroll{--m-sx:50%}

/* ---------- a single sheen crosses a primary button on hover ---------- */
.btn-donate,.btn-primary,.btn-gold{position:relative;overflow:hidden;isolation:isolate}
.btn-donate::after,.btn-primary::after,.btn-gold::after{content:"";position:absolute;top:-60%;bottom:-60%;width:38%;
  inset-inline-start:-50%;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent)}
.btn-donate:hover::after,.btn-primary:hover::after,.btn-gold:hover::after{animation:m-sheen .72s var(--m-ease-soft)}
@keyframes m-sheen{0%{inset-inline-start:-50%;opacity:0}20%{opacity:1}80%{opacity:1}100%{inset-inline-start:120%;opacity:0}}

/* ---------- quick links lift a little under the pointer ---------- */
.quick{transition:transform .28s var(--m-ease),background-color .22s}
.quick:hover{transform:translateY(-3px)}

/* ---------- institution cards settle, rather than snap, on hover ---------- */
.inst{transition:transform .34s var(--m-ease),box-shadow .34s,border-color .24s}