/* =====================================================================
   NESAM — motion.css
   Scroll-driven animation primitives.
   Elements opt in with [data-anim]; scroll.js adds .is-in when they
   enter, and writes --p (0 → 1 scroll progress) on [data-scrub] blocks.
   Everything degrades to "visible, no motion" if JS or motion is off.
   ===================================================================== */

/* ---- Base state: only applied once JS confirms it is running ---- */
html.js-motion [data-anim]{
  opacity:0;
  will-change:opacity, transform, clip-path, filter;
  transition:
    opacity   .9s var(--ease-out),
    transform .9s var(--ease-out),
    clip-path 1.1s var(--ease-out),
    filter    .9s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
html.js-motion [data-anim].is-in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); filter:none; }

html.js-motion [data-anim="fade-up"]   { transform:translate3d(0,38px,0); }
html.js-motion [data-anim="fade-down"] { transform:translate3d(0,-28px,0); }
html.js-motion [data-anim="fade-in"]   { transform:none; }
html.js-motion [data-anim="slide-s"]   { transform:translate3d(var(--from-x,-46px),0,0); }
html.js-motion [data-anim="slide-e"]   { transform:translate3d(var(--from-x,46px),0,0); }
html.js-motion [data-anim="scale-in"]  { transform:scale(.9); }
html.js-motion [data-anim="rise"]      { transform:translate3d(0,54px,0) scale(.97); }
html.js-motion [data-anim="blur-in"]   { filter:blur(14px); transform:translate3d(0,18px,0); }
html.js-motion [data-anim="mask-up"]   { clip-path:inset(0 0 100% 0); transform:translate3d(0,26px,0); }
html.js-motion [data-anim="wipe"]      { clip-path:inset(0 100% 0 0); }
html.js-motion [data-anim="flip"]      { transform:perspective(1000px) rotateX(16deg) translate3d(0,42px,0); transform-origin:top center; }

/* RTL mirrors the directional ones */
html[dir="rtl"].js-motion [data-anim="slide-s"]{ transform:translate3d(46px,0,0); }
html[dir="rtl"].js-motion [data-anim="slide-e"]{ transform:translate3d(-46px,0,0); }
html[dir="rtl"].js-motion [data-anim="wipe"]   { clip-path:inset(0 0 0 100%); }

/* ---- Line-by-line headline reveal ---- */
.split-line{ display:block; overflow:hidden; }
.split-line > i{ display:block; font-style:inherit; transform:translate3d(0,105%,0); transition:transform 1s var(--ease-out); transition-delay:var(--ld,0ms); }
html:not(.js-motion) .split-line > i{ transform:none; }
[data-anim].is-in .split-line > i,
.is-in > .split-line > i{ transform:none; }

/* ---- Parallax layers (scroll.js writes --py) ---- */
[data-parallax]{ will-change:transform; transform:translate3d(0,var(--py,0px),0); }

/* ---- Progress-linked helpers -------------------------------------
   scroll.js sets --p (0→1) on any [data-scrub] element.
   ------------------------------------------------------------------ */
[data-scrub]{ --p:0; }

/* Vertical progress rail that fills as a section scrolls */
.rail{ position:absolute; inset-inline-start:0; top:0; bottom:0; width:2px; background:var(--border); border-radius:2px; overflow:hidden; }
.rail::after{ content:""; position:absolute; inset:0 0 auto 0; height:100%; transform:scaleY(var(--p,0)); transform-origin:top; background:linear-gradient(180deg,var(--teal-bright),var(--blue)); }

/* Stroke-drawing SVG paths — scroll.js sets --p on the wrapper */
.draw{ stroke-dasharray:var(--len,1000); stroke-dashoffset:calc(var(--len,1000) * (1 - var(--p,0))); }

/* Scroll progress bar under the navbar */
.scrollbar{ position:fixed; top:0; inset-inline:0; height:2px; z-index:950; pointer-events:none; }
.scrollbar i{ display:block; height:100%; width:100%; transform:scaleX(var(--p,0)); transform-origin:left center;
  background:linear-gradient(90deg,var(--teal),var(--teal-bright),var(--blue)); }
html[dir="rtl"] .scrollbar i{ transform-origin:right center; }

/* Magnetic-ish hover lift for cards that are not already tilted */
.lift{ transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-fast); }
.lift:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }

/* Section entrance glow that tracks scroll progress */
.glow-edge::before{
  content:""; position:absolute; inset-inline:0; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--teal-bright),transparent);
  transform:scaleX(var(--p,0)); opacity:.8;
}

/* ---- Reduced motion: show everything, animate nothing ---- */
@media (prefers-reduced-motion: reduce){
  html.js-motion [data-anim],
  html.js-motion [data-anim].is-in{ opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important; transition:none !important; }
  .split-line > i{ transform:none !important; transition:none !important; }
  [data-parallax]{ transform:none !important; }
  .draw{ stroke-dashoffset:0 !important; }
}

/* Either observer may fire first — both states count as revealed */
html.js-motion [data-anim].in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); filter:none; }
html.js-motion [data-anim].in .split-line > i{ transform:none; }