/* Xporta motion lab (mockup only, NOT shipped). Approved-idea previews on copies of real pages.
   Namespaces: keyframes site-*, tokens --site-motion-*, classes .site-fx-*. No libraries.
   Everything is gated by html.site-fx-lab (added by motion-lab.js unless ?lab=0) and is off under reduced motion. */
html.site-fx-lab{
 --site-motion-ease-spring:cubic-bezier(.34,1.56,.64,1); /* ~10% overshoot */
 --site-motion-ease-pop:cubic-bezier(.34,1.4,.64,1);
 --site-motion-ease-path:cubic-bezier(.45,0,.2,1);
 --site-motion-ease-roll:cubic-bezier(.2,1.25,.4,1);
 --site-motion-dur-roll:320ms;
 --site-motion-dur-draw:900ms;
 --site-motion-dur-node:360ms;
 --site-motion-dur-bento:560ms;
 --site-motion-stagger-bento:90ms;
 --site-motion-dur-word:560ms;
 --site-motion-stagger-word:60ms;
 --site-motion-word-y:.32em;
 --site-motion-glow-size:320px;
 --site-motion-dur-sticky:640ms;
 --site-motion-sticky-y:16px;
 --site-motion-dur-marquee:40s;
 --site-motion-dur-odo:var(--site-motion-dur-roll)}
@media(max-width:700px){html.site-fx-lab{--site-motion-stagger-bento:60ms;--site-motion-dur-word:440ms;--site-motion-stagger-word:35ms;--site-motion-word-y:.2em;--site-motion-dur-draw:700ms;--site-motion-dur-marquee:56s;--site-motion-ease-roll:var(--site-motion-ease)}}

/* 1 Price roll: faster, snappier odometer (existing .site-fx-odo-* columns), plus a 1.04 tick on the price */
.site-fx-lab .site-fx-odo-s{transition-timing-function:var(--site-motion-ease-roll)}
.site-fx-lab .site-fx-roll-hit{animation:site-roll-hit 220ms var(--site-motion-ease) both;display:inline-block}
@keyframes site-roll-hit{40%{transform:scale(1.04)}100%{transform:none}}
@media(max-width:700px){.site-fx-lab .site-fx-roll-hit{animation:none}}

/* 2 Us vs them: coral border draws around the Xporta column, ticks then crosses pop row by row */
.site-fx-lab .cmptw{position:relative}
.site-fx-lab .site-fx-vs-in th.x,.site-fx-lab .site-fx-vs-in td.x,.site-fx-lab .site-fx-vs-in tr:last-child td.x{box-shadow:none}
.site-fx-vsb{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:2}
.site-fx-vsb rect{fill:none;stroke:var(--site-co);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.site-fx-vs-in .site-fx-vsb rect{stroke-dashoffset:0;transition:stroke-dashoffset var(--site-motion-dur-draw) var(--site-motion-ease-path)}
.site-fx-lab .site-fx-vs.site-fx-vs-in .site-fx-chk{transition-delay:calc(var(--site-vsi)*80ms + 300ms);transition-duration:var(--site-motion-dur-node)}
.site-fx-x{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--site-line);color:var(--site-mut);vertical-align:-3px;margin-right:8px}
.site-fx-x svg{width:10px;height:10px;display:block}
.site-fx-vs .site-fx-x{opacity:0;transform:scale(.5)}
.site-fx-vs-in .site-fx-x{opacity:1;transform:none;transition:opacity var(--site-motion-dur-pop) var(--site-motion-ease),transform var(--site-motion-dur-node) var(--site-motion-ease-pop);transition-delay:calc(var(--site-vsi)*80ms + 380ms)}
@media(max-width:700px){.site-fx-lab .site-fx-vs.site-fx-vs-in .site-fx-chk,.site-fx-vs-in .site-fx-x{transition-delay:calc(var(--site-vsi)*40ms + 200ms);transition-timing-function:var(--site-motion-ease)}}

/* 3 Process draw: coral line through the demo's four beats, check pops at each node */
.site-fx-draw{position:relative;max-width:560px;height:28px;margin:40px auto 0}
.site-fx-draw-t,.site-fx-draw-f{position:absolute;left:14px;right:14px;top:13px;height:1.5px;border-radius:1px}
.site-fx-draw-t{background:var(--site-line)}
.site-fx-draw-f{background:var(--site-co);transform-origin:left;transform:scaleX(var(--site-fx-p,0));transition:transform 520ms var(--site-motion-ease)}
.site-fx-draw-n{position:absolute;top:0;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:var(--site-bg);box-shadow:inset 0 0 0 1.5px var(--site-line);display:grid;place-items:center;color:#fff;transition:background 200ms var(--site-motion-ease),box-shadow 200ms var(--site-motion-ease)}
.site-fx-draw-n svg{width:14px;height:14px;transform:scale(0);transition:transform var(--site-motion-dur-node) var(--site-motion-ease-spring)}
.site-fx-draw-n.site-fx-on{background:var(--site-co);box-shadow:inset 0 0 0 1.5px var(--site-co);animation:site-node-bounce var(--site-motion-dur-node) var(--site-motion-ease-spring)}
.site-fx-draw-n.site-fx-on svg{transform:scale(1)}
@keyframes site-node-bounce{0%{transform:scale(.8)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
@media(max-width:700px){.site-fx-draw{max-width:280px;height:20px;margin-top:24px}.site-fx-draw-t,.site-fx-draw-f{top:9px;left:10px;right:10px}.site-fx-draw-n{width:20px;height:20px;margin-left:-10px}.site-fx-draw-n svg{width:11px;height:11px;transition-timing-function:var(--site-motion-ease)}.site-fx-draw-n.site-fx-on{animation:none}}

/* 4 Cursor tour across panels 01–04 (desktop sticky story only) */
.site-fx-tcur{position:absolute;left:0;top:0;width:40px;height:40px;opacity:0;pointer-events:none;z-index:20;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28));transition:opacity 240ms var(--site-motion-ease)}
.site-fx-tcur.site-fx-on{opacity:1}
.site-fx-tcur svg{display:block;width:40px;height:40px;transform-origin:6px 4px;transition:transform var(--site-motion-dur-press) var(--site-motion-ease)}
.site-fx-tcur.site-fx-down svg{transform:scale(.86)}
.site-fx-hit{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;z-index:19;animation:site-tour-hit 520ms var(--site-motion-ease) both}
@keyframes site-tour-hit{0%{box-shadow:0 0 0 0 rgba(255,99,50,.5);background:rgba(255,99,50,.25)}100%{box-shadow:0 0 0 12px rgba(255,99,50,0);background:rgba(255,99,50,0)}}

/* 5 Bento build: tiles scale in with a slight spring, staggered */
.site-fx-bento>*{opacity:0;transform:translateY(12px) scale(.94)}
.site-fx-bento.site-fx-in>*{opacity:1;transform:none;transition:opacity 320ms var(--site-motion-ease),transform var(--site-motion-dur-bento) var(--site-motion-ease-spring);transition-delay:calc(var(--site-fx-i)*var(--site-motion-stagger-bento))}
.site-fx-bento.site-fx-in>*:hover{transition-delay:0s}
.why.site-fx-bento>*{opacity:1;transform:none}
.why.site-fx-bento>*>*{opacity:0;transform:translateY(12px) scale(.96);transform-origin:left bottom}
.why.site-fx-bento.site-fx-in>*>*{opacity:1;transform:none;transition:opacity 320ms var(--site-motion-ease),transform var(--site-motion-dur-bento) var(--site-motion-ease-spring);transition-delay:calc(var(--site-fx-i)*var(--site-motion-stagger-bento))}
@media(max-width:700px){.site-fx-bento>*,.why.site-fx-bento>*>*{transform:translateY(8px)}.site-fx-bento.site-fx-in>*,.why.site-fx-bento.site-fx-in>*>*{transition-timing-function:var(--site-motion-ease)}}

/* 6 Hero headline word by word */
.site-fx-words .site-fx-w{display:inline-block;opacity:0;transform:translateY(var(--site-motion-word-y))}
.site-fx-words.site-fx-in .site-fx-w{opacity:1;transform:none;transition:opacity var(--site-motion-dur-word) var(--site-motion-ease),transform var(--site-motion-dur-word) var(--site-motion-ease);transition-delay:calc(var(--site-fx-i)*var(--site-motion-stagger-word))}
.site-fx-lab .h1.site-fx-words em.s:after{animation-delay:calc(var(--site-fx-n)*var(--site-motion-stagger-word) + 420ms);animation-play-state:paused}
.site-fx-lab .h1.site-fx-words.site-fx-in em.s:after{animation-play-state:running}

/* 7 Cursor-follow glow (desktop hover only) */
.site-fx-glow-l{display:none}
@media(min-width:1024px) and (hover:hover) and (pointer:fine){
 .site-fx-glow{position:relative}
 .site-fx-glow-l{display:block;position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--site-motion-dur-hover) var(--site-motion-ease);z-index:0}
 .site-fx-glow-l:before,.site-fx-glow-l:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(var(--site-motion-glow-size) circle at var(--site-fx-gx,50%) var(--site-fx-gy,50%),var(--site-fx-gc,rgba(255,99,50,.09)),transparent 65%)}
 .site-fx-glow-l:after{--site-fx-gc:rgba(255,99,50,.55);padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
 .site-fx-glow:hover>.site-fx-glow-l{opacity:1}
}

/* 8 Smooth sticky story: panels slide 16px + 0.985 scale with direction, instead of a flat crossfade */
@media(min-width:1101px){
 .site-fx-lab .story.site-fx-sticky .apf{translate:0 var(--site-motion-sticky-y);scale:.985;transition:opacity var(--site-motion-dur-sticky) var(--site-motion-ease),translate var(--site-motion-dur-sticky) var(--site-motion-ease),scale var(--site-motion-dur-sticky) var(--site-motion-ease),visibility 0s var(--site-motion-dur-sticky)}
 .site-fx-lab .story.site-fx-sticky .apf.site-fx-past{translate:0 calc(var(--site-motion-sticky-y)*-1)}
 .site-fx-lab .story.site-fx-sticky .apf.on{translate:0 0;scale:1;transition:opacity var(--site-motion-dur-sticky) var(--site-motion-ease),translate var(--site-motion-dur-sticky) var(--site-motion-ease),scale var(--site-motion-dur-sticky) var(--site-motion-ease),visibility 0s}
 .site-fx-sbar{position:absolute;left:-28px;top:50%;width:2px;height:160px;margin-top:-80px;border-radius:1px;background:var(--site-line);overflow:hidden}
 .site-fx-sbar i{position:absolute;inset:0;background:var(--site-co);transform-origin:top;transform:scaleY(var(--site-fx-sp,0))}
}

/* 9 Trust marquee (Works with logos; swap in approved customer logos when we have them) */
.site-fx-mq{border-bottom:1px solid var(--site-line)}
.site-fx-mq .w{display:flex;align-items:center;gap:32px;padding-top:20px;padding-bottom:20px}
.site-fx-mq-l{flex:none;color:var(--site-mut);font-size:14px}
.site-fx-mq-v{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.site-fx-mq-t{display:flex;width:max-content;animation:site-marquee var(--site-motion-dur-marquee) linear infinite}
.site-fx-mq-t>span{display:flex;align-items:center;gap:8px;margin-right:48px;color:var(--site-mut);font-size:15px;font-weight:500;white-space:nowrap;filter:grayscale(1);opacity:.75;transition:filter var(--site-motion-dur-hover),opacity var(--site-motion-dur-hover)}
.site-fx-mq-t>span:hover{filter:none;opacity:1}
.site-fx-mq-t img{width:20px;height:20px}
.site-fx-mq:hover .site-fx-mq-t,.site-fx-mq.site-fx-off .site-fx-mq-t{animation-play-state:paused}
@keyframes site-marquee{to{transform:translateX(-50%)}}
@media(max-width:700px){.site-fx-mq .w{flex-direction:column;align-items:flex-start;gap:12px}.site-fx-mq-v{width:100%}}

@media(prefers-reduced-motion:reduce){
 .site-fx-bento>*,.why.site-fx-bento>*>*,.site-fx-words .site-fx-w,.site-fx-vs .site-fx-x{opacity:1!important;transform:none!important;transition:none!important}
 .site-fx-vsb rect{stroke-dashoffset:0!important;transition:none!important}
 .site-fx-draw-f{transform:scaleX(1)!important;transition:none!important}
 .site-fx-draw-n{background:var(--site-co)!important}.site-fx-draw-n svg{transform:none!important}
 .site-fx-mq-t{animation:none!important;flex-wrap:wrap;width:auto}.site-fx-mq-t>span[aria-hidden]{display:none}
 .site-fx-glow-l,.site-fx-tcur,.site-fx-sbar{display:none!important}
 .site-fx-roll-hit{animation:none!important}
}