/* AutoAsist Motion Language 2026
   Motion borrows from a route, not from a generic SaaS dashboard: one calm
   market rail, progressive checkpoints, inspection light and measured data
   transitions.  It is additive and respects reduced-motion. */
:root{
  --aa-motion-green:var(--green,var(--accent,#15583c));
  --aa-motion-ink:var(--ink,var(--txt,#191712));
  --aa-motion-paper:var(--paper,var(--bg,#f4f1e9));
  --aa-motion-line:var(--line,var(--border,#e4ddcc));
  --aa-motion-lime:#b8dc72;
}
html{scroll-padding-top:26px}
body{position:relative}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 520px at 84% -10%,color-mix(in srgb,var(--aa-motion-green) 8%,transparent),transparent 68%),
    linear-gradient(115deg,transparent 0 48.8%,color-mix(in srgb,var(--aa-motion-green) 2.5%,transparent) 49%,transparent 49.2%);
}

/* The market rail is both scroll progress and a restrained route metaphor. */
.aa-market-rail{position:fixed;z-index:10000;left:0;right:0;top:0;height:4px;background:color-mix(in srgb,var(--aa-motion-line) 72%,transparent);pointer-events:none}
.aa-market-rail__fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#15583c,#2f8661,#b8dc72);box-shadow:0 0 14px #15583c38;will-change:width}
.aa-market-rail__car{position:absolute;left:0;top:50%;width:11px;height:6px;border-radius:5px 5px 2px 2px;background:var(--aa-motion-green);transform:translate(-50%,-52%);box-shadow:-4px 3px 0 -2px var(--aa-motion-green),4px 3px 0 -2px var(--aa-motion-green);will-change:left}
.aa-market-rail__node{position:absolute;top:50%;width:6px;height:6px;border-radius:50%;background:var(--aa-motion-paper);border:1px solid var(--aa-motion-green);transform:translate(-50%,-50%)}
.aa-market-rail__node:nth-of-type(1){left:9%}.aa-market-rail__node:nth-of-type(2){left:37%}.aa-market-rail__node:nth-of-type(3){left:66%}.aa-market-rail__node:nth-of-type(4){left:91%}

/* An inspection-light sheen follows the pointer without changing the cursor. */
.aa-inspectable{position:relative;isolation:isolate;--aa-x:50%;--aa-y:50%}
.aa-inspectable::after{content:"";position:absolute;z-index:-1;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .32s ease;background:radial-gradient(230px circle at var(--aa-x) var(--aa-y),color-mix(in srgb,var(--aa-motion-green) 11%,transparent),transparent 72%)}
.aa-inspectable:hover::after{opacity:1}

/* Calm staged entrance. JS only applies it below the first viewport. */
.aa-enter{opacity:0;transform:translateY(16px);filter:saturate(.88)}
.aa-enter.aa-entered{opacity:1;transform:none;filter:none;transition:opacity .62s ease,transform .72s cubic-bezier(.2,.75,.2,1),filter .62s ease}
.aa-updated{animation:aa-data-arrival .72s cubic-bezier(.2,.75,.2,1)}
@keyframes aa-data-arrival{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--aa-motion-green) 24%,transparent)}45%{box-shadow:0 0 0 7px transparent}100%{box-shadow:none}}

/* Road-lane underline for primary actions. */
.btn,.go,.btn-primary,button[type="submit"]{position:relative;overflow:hidden}
.btn::after,.go::after,.btn-primary::after,button[type="submit"]::after{content:"";position:absolute;left:-55%;bottom:0;width:42%;height:2px;background:linear-gradient(90deg,transparent,var(--aa-motion-lime),transparent);transition:left .48s ease;pointer-events:none}
.btn:hover::after,.go:hover::after,.btn-primary:hover::after,button[type="submit"]:hover::after{left:112%}

/* Stronger keyboard affordance; no visual noise for mouse users. */
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--aa-motion-green)!important;outline-offset:3px!important}
@media(max-width:700px){.aa-market-rail__node:nth-of-type(2),.aa-market-rail__node:nth-of-type(3){display:none}.aa-inspectable::after{display:none}}
@media(prefers-reduced-motion:reduce){.aa-market-rail__car{display:none}.aa-enter{opacity:1;transform:none;filter:none}.aa-enter.aa-entered{transition:none}.aa-updated{animation:none}.btn::after,.go::after,.btn-primary::after,button[type="submit"]::after{display:none}}
