/* ============================================================================
   SOL Motion Standard — v1
   The house motion vocabulary for every SOL Growth marketing surface.
   Include this on every landing / division / marketing page, alongside sol-motion.js.

   Effects (Awwwards "motion vocabulary", tuned for a bilingual AR/EN site):
     • Word-stagger reveal  — headlines rise word-by-word from below the baseline
     • Magnetic CTAs        — primary buttons lean toward the cursor, spring back
     • Odometer counters    — integer stats roll up digit-by-digit on scroll-in
     • Ambient film grain    — a near-invisible SVG grain over the whole page

   Rules baked in: expo.out easing cubic-bezier(.16,1,.3,1); entrances .6–.7s;
   hovers .2s; word-level split ONLY (never per-character — Arabic is a connected
   script and diacritics/descenders must never be clipped); everything collapses to
   a static, fully-visible fallback under prefers-reduced-motion.
   ========================================================================== */

/* ---- Ambient film grain (injected by sol-motion.js) ------------------------ */
.sol-grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;background-repeat:repeat;background-size:180px 180px;
  animation:sol-grain-drift 1.1s steps(3) infinite;
}
html[dir="rtl"] .sol-grain{mix-blend-mode:multiply}
@keyframes sol-grain-drift{
  0%{transform:translate(0,0)}33%{transform:translate(-4%,3%)}
  66%{transform:translate(3%,-4%)}100%{transform:translate(0,0)}
}

/* ---- Word-stagger reveal (#10) --------------------------------------------- */
/* Applied to any element carrying [data-reveal]. sol-motion.js wraps each word in
   .sol-w > span and sets --sol-i (word index) for the cascade. No overflow clip —
   so descenders (g y p) and Arabic diacritics are never cut. */
[data-reveal]{--sol-rv-dur:.7s}
[data-reveal] .sol-w{display:inline-block}
[data-reveal] .sol-w > span{
  display:inline-block;opacity:0;transform:translateY(.72em);
  transition:opacity var(--sol-rv-dur) cubic-bezier(.16,1,.3,1),
             transform var(--sol-rv-dur) cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--sol-i,0) * .05s);
  will-change:opacity,transform;
}
[data-reveal].sol-in .sol-w > span{opacity:1;transform:none}

/* ---- Magnetic CTAs (#6) ---------------------------------------------------- */
[data-magnetic]{will-change:transform}
/* sol-motion.js drives the transform via rAF lerp; the label inside keeps its own
   hover transition, so the two compose smoothly. */

/* ---- Odometer counters (#4) ------------------------------------------------ */
[data-odometer]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---- Reduced motion — hard off switch -------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .sol-grain{display:none}
  [data-reveal] .sol-w > span{opacity:1!important;transform:none!important;transition:none!important}
  [data-magnetic]{transform:none!important}
}