/* Live surfaces for the MCP pages (/connect and the landing's Ask your AI
   section), 2026-10-19. Classes come from web/agentfx.js only: .fx (spotlight,
   cursor border, sheen), .is-on and .has-on (scroll focus), .tilt. Without
   that script, or with reduced motion, none of this applies. */
/* live surfaces: spotlight under the cursor, a border that follows it, a sheen */
html.afx .fx { position: relative; isolation: isolate;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease, border-color .4s, box-shadow .6s; }
html.afx .fx::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -40%), rgba(198,242,78,.85), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .35s; }
html.afx .fx.lit::before, html.afx .fx.is-on::before { opacity: 1; }
html.afx .fx.is-on::before { background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), rgba(198,242,78,.9), rgba(198,242,78,.25) 60%, rgba(198,242,78,.12)); }
html.afx .fx > .fx-spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; overflow: hidden; }
html.afx .fx > .fx-spot::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(198,242,78,.09), transparent 65%); }
html.afx .fx.lit > .fx-spot::before { opacity: 1; }
html.afx .fx > .fx-spot::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; transform: translateX(-180%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(228,255,161,.10) 40%, rgba(255,255,255,.16) 50%, rgba(228,255,161,.10) 60%, transparent); }
html.afx .fx.sweep > .fx-spot::after { animation: fxSweep 1.15s cubic-bezier(.3,.6,.2,1) forwards; }
@keyframes fxSweep { to { transform: translateX(280%) skewX(-18deg); } }
html.afx .fx > :not(.fx-spot):not(.lp-aurora) { position: relative; z-index: 1; }

/* scroll focus: the card at the centre is the active one, the rest rest */
html.afx .has-on .fx { opacity: .55; }
html.afx .has-on .fx.is-on { opacity: 1; transform: scale(1.015); border-color: rgba(198,242,78,.55);
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 60px rgba(198,242,78,.10); }
html.afx .cn-step .cn-num { transition: box-shadow .5s, transform .5s cubic-bezier(.2,.8,.2,1), filter .5s; }
html.afx .cn-steps.has-on .cn-step:not(.on) .cn-num { filter: saturate(.55) brightness(.8); }
html.afx .cn-step.on .cn-num { transform: scale(1.06); box-shadow: 0 0 0 6px #07080a, 0 0 0 7px rgba(198,242,78,.45), 0 0 50px rgba(198,242,78,.6); }
/* the tilt, desktop only: agentfx.js writes --rx/--ry */
html.afx .tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1)); }
html.afx .has-on .tilt.is-on { --s: 1.015; }

@media (prefers-reduced-motion: reduce) { html.afx .fx, html.afx .fx::before { transition: none; } }