/* =====================================================================
   AR Motion Kit v1 — motion.css
   Ali Raza Solutions · GSAP 3 + ScrollTrigger for Elementor
   Paste into: Elementor > Site Settings > Custom CSS (loads in <head>)
   ===================================================================== */

:root {
  --ar-a1: #6ed0ff;   /* accent 1 (light blue) */
  --ar-a2: #00b4ff;   /* accent 2 (primary blue) */
}

/* Hide animated elements ONLY while JS motion is active.
   No JS / GSAP failed to load  ->  everything stays visible. */
html.ar-motion .ar-nav,
html.ar-motion .ar-reveal,
html.ar-motion .ar-item,
html.ar-motion .ar-split,
html.ar-motion .ar-draw { visibility: hidden; }

/* Word-split headings */
.ar-w  { display: inline-block; overflow: hidden; vertical-align: top;
         padding-bottom: .1em; margin-bottom: -.1em; }
.ar-wi { display: inline-block; will-change: transform; }

/* Gradient text (works before and after splitting) */
.ar-grad:not(.is-split),
.ar-grad.is-split .ar-wi {
  background: linear-gradient(95deg, var(--ar-a1), var(--ar-a2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Cursor-follow glow for cards (desktop pointer only, set by JS) */
.ar-glow { position: relative; isolation: isolate; }
.ar-glow::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%),
              rgba(0, 180, 255, .14), transparent 45%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: -1;
}
.ar-glow:hover::before { opacity: 1; }

/* Process steps: progress line + active step */
.ar-progress { transform-origin: top center; }
.ar-step { transition: opacity .45s ease; }
.ar-steps.is-live .ar-step:not(.is-active) { opacity: .4; }

@media (prefers-reduced-motion: reduce) {
  .ar-step, .ar-glow::before { transition: none; }
}