/* ============================================================
   Aigency — site motion layer (everything below the hero).
   js/motion.js sets html.mo-on and writes progress into --q / --e / --py;
   without it (no JS, reduced motion) the site is exactly the static design.
   Restrained on purpose: things arrive once, move a short distance, and settle.
   Uses the individual translate/scale properties so it never fights the
   hover transforms (card lift, 3D tilt, image zoom).
   ============================================================ */

/* scroll progress: a thin neon line along the bottom of the nav */
.mo-on .nav::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--sp, 0) * 100%);
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple));
  box-shadow: 0 0 12px rgba(243,148,216,.55); pointer-events: none;
}

/* content rises into place with the page, cascading across a row */
.mo-on .reveal { transition: none; opacity: var(--q, 0); transform: none; translate: 0 calc((1 - var(--q, 0)) * 48px); }
.mo-on .reveal.in { opacity: var(--q, 0); }
/* tilt cards keep their own transform for the hover tilt */
.mo-on .tilt.reveal { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* section headings wipe up from their baseline */
.mo-on h2.reveal { clip-path: inset(-0.25em -0.5em calc((1 - var(--q, 0)) * 100%) -0.5em); translate: 0 calc((1 - var(--q, 0)) * 0.5em); opacity: 1; }

/* eyebrow neon line draws in */
.mo-on .eyebrow.reveal::before { width: calc(var(--q, 0) * 26px); }

/* images: open from the bottom, settle from a slight zoom, then drift a touch with the scroll */
.mo-on .work-card.reveal { clip-path: inset(calc((1 - var(--q, 0)) * 30%) 0 0 0 round var(--radius)); opacity: 1; }
.mo-on .work-card img { scale: calc(1.14 - var(--q, 1) * .08); translate: 0 calc(var(--py, 0) * 1px); }
.mo-on .split img, .mo-on .team-card img { scale: calc(1.08 - var(--q, 1) * .08); }
.mo-on .split .reveal:has(> img), .mo-on .team-card.reveal { clip-path: inset(calc((1 - var(--q, 0)) * 22%) 0 0 0 round var(--radius)); }

/* cursor glow on plain cards (the tilt cards already have their own glare) */
.mo-on .card:not(.tilt)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, -400px) var(--my, -400px), rgba(211,143,190,.12), rgba(120,122,186,.06) 40%, transparent 65%);
  opacity: 0; transition: opacity .35s ease;
}
.mo-on .card:not(.tilt):hover::after { opacity: 1; }

/* process steps: each divider draws across as the step arrives, the number lights as you reach it */
.mo-on .process-step { position: relative; border-top-color: transparent; }
.mo-on .process-step::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: calc(var(--q, 0) * 100%);
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple) 60%, rgba(157,140,255,.15));
}
.mo-on .light-sec .process-step::before, .mo-on .tint-sec .process-step::before { background: linear-gradient(90deg, var(--pink), var(--purple) 60%, rgba(120,122,186,.15)); }
.mo-on .process-num { transition: filter .5s ease, letter-spacing .5s ease; }
.mo-on .process-step.lit .process-num { filter: drop-shadow(0 0 10px rgba(243,148,216,.75)); letter-spacing: .04em; }

/* the call to action grows from an inset panel to full width as it arrives */
.mo-on .cta-band { clip-path: inset(0 calc((1 - var(--e, 1)) * 4vw) round calc((1 - var(--e, 1)) * 40px)); }
.mo-on .cta-band .cta-waves { translate: 0 calc(var(--py, 0) * 1px); }

/* gradient words: one steady gradient per word everywhere below the hero (the travelling
   shimmer caught words half-coloured); the home hero keeps its shimmer */
section:not(.hero) .grad-text, .stats .grad-text {
  animation: none; background: linear-gradient(100deg, #f6b9df, #c3b1f3); background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.light-sec .grad-text, .tint-sec .grad-text, .faq .grad-text {
  background: linear-gradient(100deg, #b4679a, #6f68b8); -webkit-background-clip: text; background-clip: text; filter: none;
}