/* ==========================================================================
   LawMCP — motion layer (fx.css)
   One idea throughout: raw legal text RESOLVING into structured, citable data.
   Every hidden "before" state is scoped under html.fx, which fx.js / the
   inline head script only set when the visitor has NOT asked for reduced
   motion. Without JS or with reduced motion, the page renders fully static.
   ========================================================================== */

@property --fx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- Scroll progress + logo hinge ---------- */
.fx-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.fx-slash{transform-box:fill-box;transform-origin:50% 60%;will-change:transform}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero > .wrap{position:relative;z-index:1}
.fx-lattice{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.42) 42%,#000 66%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.42) 42%,#000 66%)}
@media (max-width:980px){
  .fx-lattice{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 55%,#000 75%);mask-image:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 55%,#000 75%)}
}

/* split-word reveals (hero h1 + section h2s) */
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .12em 0;margin:0 -.08em -.12em 0}
.fx-w > span{display:inline-block}
.fx .fx-w > span{transform:translateY(108%);transition:transform 1s cubic-bezier(.16,.84,.12,1);transition-delay:var(--d,0ms)}
.fx .fx-in .fx-w > span{transform:none}

.fx .hero .sub,.fx .hero .ctas,.fx .hero-trust,.fx .hero-eyebrow{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,.84,.12,1)}
.fx .hero.fx-in .hero-eyebrow{opacity:1;transform:none;transition-delay:.05s}
.fx .hero.fx-in .sub{opacity:1;transform:none;transition-delay:.55s}
.fx .hero.fx-in .ctas{opacity:1;transform:none;transition-delay:.7s}
.fx .hero.fx-in .hero-trust{opacity:1;transform:none;transition-delay:.85s}

/* hero code card: entrance, tilt, glare, run button */
.hero .code-card{transform-style:preserve-3d;will-change:transform}
.fx .hero .code-card{opacity:0;transform:perspective(1200px) translateY(24px) rotateX(8deg)}
.fx .hero.fx-in .code-card{opacity:1;transition:opacity .8s ease .25s,transform 1.1s cubic-bezier(.16,.84,.12,1) .25s;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.fx .hero.fx-tilting .code-card{transition:transform .25s ease-out}
.code-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,-20%),rgba(111,139,255,.14),transparent 55%)}
.fx-run{margin-left:auto;background:transparent;border:1px solid #2E2E2E;color:#B9B7B0;font:inherit;font-size:11px;letter-spacing:.02em;
  padding:4px 10px;border-radius:99px;cursor:pointer;transition:border-color .15s,color .15s}
.fx-run:hover{border-color:#6F8BFF;color:#fff}
.fx-run:focus-visible{outline:2px solid #6F8BFF;outline-offset:2px}
.fx-run[disabled]{opacity:.45;cursor:default}
.fx-caret{display:inline-block;width:.55em;height:1.05em;vertical-align:-.15em;background:#6F8BFF;margin-left:1px;animation:fxblink 1s steps(1) infinite}
@keyframes fxblink{50%{opacity:0}}
.fx-dots::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:fxdots 1s steps(4) infinite}
@keyframes fxdots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.code-card .res .ok{color:#6F8BFF}

/* ---------- WHY NOW — raw strings resolve into records ---------- */
#why{overflow-x:clip}
.fx-why-track{position:relative}
.fx-why-sticky{position:relative}
.fx-stage{position:relative;height:452px;margin-top:8px}
.fx-stage:empty{display:none}
.fx-stage .fx-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fx-stage .fx-edges path{fill:none;stroke:var(--gold);stroke-width:1.25}
.fx-stage .fx-edges circle{fill:var(--gold)}
.fx-frag{position:absolute;left:0;top:0;transform-origin:0 50%;display:flex;align-items:center;gap:14px;white-space:nowrap;will-change:transform,opacity;color:var(--ink)}
.fx-frag .l{display:inline-block}
.fx-frag .t{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.02em;color:var(--gold-deep);background:var(--gold-soft);border:1px solid rgba(30,64,255,.35);
  padding:2px 8px;border-radius:99px;min-width:104px;text-align:center}
.fx-frag.rec{height:40px}
.fx-frag.rec::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:var(--rule,0)}
/* raw "scanned / pasted" looks */
.fx-frag.m1 .l{font-family:'Instrument Serif',serif;font-style:italic;font-size:23px}
.fx-frag.m2 .l{font-family:'Inter',sans-serif;font-weight:600;font-size:15px;color:var(--ink-3)}
.fx-frag.m3 .l{font-family:'JetBrains Mono',monospace;font-size:12px;text-decoration:underline wavy rgba(10,10,10,.35);text-underline-offset:4px}
.fx-frag.m4 .l{font-family:'Instrument Serif',serif;font-size:19px;color:var(--mute)}
.fx-frag.m5 .l{font-family:'Inter',sans-serif;font-weight:300;font-size:26px;letter-spacing:-.02em}
.fx-frag.m6 .l{font-family:'Times New Roman',serif;font-size:16px;background:#FFF6C9;padding:0 4px}
.fx-stage .fx-frag.clean .l{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;font-style:normal;text-decoration:none;color:var(--ink);letter-spacing:0;background:none;padding:0}
.fx-status{margin-top:18px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mute);display:flex;align-items:center;gap:10px}
.fx-status .led{width:7px;height:7px;border-radius:99px;background:var(--line-2);transition:background .3s,box-shadow .3s}
.fx-status.done .led{background:var(--gold);box-shadow:0 0 0 4px rgba(30,64,255,.14)}
.fx-status.done{color:var(--gold-deep)}
.fx-why-on .why-r p{transition:opacity .5s ease}
.fx-why-on .why-r p.dim{opacity:.32}

@media (min-width:981px){
  .fx-why-sticky.is-sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding-top:72px}
  .fx-why-sticky.is-sticky .wrap{width:100%}
}

/* ---------- COVERAGE MAP ---------- */
.fx-map{margin-bottom:40px}
.fx-map:empty{display:none}
.fx-map canvas{display:block;width:100%;cursor:crosshair}
.fx-map .legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;font-size:13px;color:var(--ink-3)}
.fx-map .legend span{display:inline-flex;align-items:center;gap:8px}
.fx-map .legend i{width:9px;height:9px;border-radius:99px;display:inline-block}
.fx-map .legend .k-it{background:var(--gold)}
.fx-map .legend .k-eu{background:rgba(30,64,255,.3)}
.fx-map .legend .k-de{background:var(--gold);box-shadow:0 0 0 3px rgba(30,64,255,.2);animation:fxpulse 1.6s ease-in-out infinite}
.fx-map .legend .k-b{border:1.5px solid var(--ink-3)}
@keyframes fxpulse{50%{box-shadow:0 0 0 6px rgba(30,64,255,0)}}
.fx-tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bone);font-size:12.5px;line-height:1.35;padding:8px 11px;border-radius:6px;
  transform:translate(-50%,calc(-100% - 12px));white-space:nowrap;opacity:0;transition:opacity .15s;z-index:2}
.fx-tip b{font-weight:500;display:block}
.fx-tip span{color:#B9B7B0}
.fx-tip.on{opacity:1}
.fx-map-wrap{position:relative}
.juris-row{transition:background .2s}
.juris-row.fx-hot{background:linear-gradient(90deg,var(--gold-soft),transparent 80%)}
.juris-row .status:not(.live) .led{transition:background .3s}
.juris-row.fx-rolling .led{background:var(--gold);animation:fxpulse 1.6s ease-in-out infinite;box-shadow:0 0 0 3px rgba(30,64,255,.2)}

/* odometer */
.fx-odo{display:inline-block;height:1em;overflow:hidden;vertical-align:top;line-height:1}
.fx-odo > span{display:flex;flex-direction:column;transition:transform 1.8s cubic-bezier(.16,.84,.12,1)}
.fx-odo > span > span{height:1em;display:block}

/* ---------- SKILLS — the agent loop ---------- */
.fx-chain{display:flex;align-items:center;flex-wrap:nowrap;margin:-24px 0 56px;padding:22px 24px;border:1px solid var(--line);border-radius:6px;background:#fff;overflow-x:auto}
.fx-chain .node{flex:none;font-family:'JetBrains Mono',monospace;font-size:13px;padding:8px 14px;border:1px solid var(--line-2);border-radius:99px;color:var(--ink-2);background:var(--bone);transition:border-color .25s,color .25s,background .25s,box-shadow .25s}
.fx-chain .node.out{font-family:'Inter',sans-serif;font-weight:500}
.fx-chain .node.hot{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-soft);box-shadow:0 0 0 5px rgba(30,64,255,.08)}
.fx-chain .wire{flex:1 1 40px;min-width:40px;height:1px;background:var(--line-2);position:relative;margin:0 6px}
.fx-chain .wire i{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:99px;background:var(--gold);opacity:0;box-shadow:0 0 12px 2px rgba(30,64,255,.45)}
.fx-chain .cap{flex:none;margin-left:18px;font-size:13px;color:var(--mute)}

/* cursor spotlight on cards */
.fx-spot{position:relative}
.fx-spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;border-radius:inherit;z-index:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(30,64,255,.075),transparent 62%)}
.fx-spot:hover::before{opacity:1}
.fx-spot > *{position:relative;z-index:1}
.skill .sig .arg{background:linear-gradient(90deg,var(--gold-deep),var(--gold-deep)) 0 100%/0 1px no-repeat;transition:background-size .5s ease}
.skill:hover .sig .arg{background-size:100% 1px}

/* ---------- MCP — clients wired to the config ---------- */
.mcp{position:relative}
.fx-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.fx-wires path{fill:none;stroke:var(--line-2);stroke-width:1}
.fx-wires path.flow{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:6 220;animation:fxflow 2.6s linear infinite;opacity:.9}
@keyframes fxflow{to{stroke-dashoffset:-226}}
.mcp-text,.mcp .code-card{position:relative;z-index:1}
.mcp-client{transition:border-color .25s,box-shadow .25s}
.mcp-client.hot{border-color:var(--gold);box-shadow:0 0 0 4px rgba(30,64,255,.07)}

/* ---------- CITABLE — answer → paragraph ---------- */
.citation-card{position:relative}
.fx-cite-wire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.citation-card .ans,.citation-card .cite-block,.citation-card .meta{position:relative;z-index:1}
.citation-card .ans .anchor{position:relative}
.fx-cite-wire path{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round}
.fx-cite-wire circle{fill:var(--gold)}
.fx-hl{background:linear-gradient(transparent 58%,rgba(30,64,255,.18) 58%) 0 0/0% 100% no-repeat;transition:background-size 1.1s cubic-bezier(.4,0,.2,1);color:inherit}
.fx-hl.on{background-size:100% 100%}
.citation-card .ans .anchor{transition:background .25s,box-shadow .25s;border-radius:2px}
.citation-card .ans .anchor.on{background:var(--gold-soft);box-shadow:0 0 0 3px var(--gold-soft)}
.fx-pin{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;padding:1px 7px;border-radius:99px;background:var(--gold);color:#fff;font-size:10px;letter-spacing:.04em;
  transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.fx-pin.on{transform:scale(1)}
.citation-card .anchor:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- PRICING — featured tier ---------- */
.price-card.featured{position:relative;isolation:isolate}
.fx .price-card.featured::before{content:"";position:absolute;inset:0;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--fx-a),transparent 0deg,transparent 250deg,#6F8BFF 320deg,#fff 340deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:fxspin 5s linear infinite}
@keyframes fxspin{to{--fx-a:360deg}}

/* ---------- FINAL CTA ---------- */
.final{position:relative;overflow:hidden;isolation:isolate}
.final > .wrap{position:relative;z-index:1}
.final .fx-lattice{-webkit-mask-image:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.25) 0%,rgba(0,0,0,.35) 35%,#000 75%);mask-image:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.25) 0%,rgba(0,0,0,.35) 35%,#000 75%)}

/* magnetic buttons */
.fx .btn.fx-mag{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .15s ease}

/* focus visibility (site-wide quality floor) */
a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (max-width:980px){
  .nav .wrap.nav-row{padding-left:32px;padding-right:32px}
}
@media (max-width:560px){
  .fx-stage .fx-frag .t{min-width:0;font-size:10px;padding:2px 6px}
  .fx-frag{gap:10px}
  .fx-stage .fx-frag.clean .l{font-size:12.5px}
  .fx-chain{margin:-8px 0 40px;padding:16px}
  .fx-chain .cap{display:none}
  /* nav: keep logo + one compact CTA on phones */
  .nav .wrap.nav-row{padding:14px 24px}
  .nav-row .actions .login{display:none}
  .nav-row .actions .btn{padding:10px 16px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .fx-caret,.fx-dots::after,.fx-map .legend .k-de,.juris-row.fx-rolling .led,.fx-wires path.flow,.price-card.featured::before{animation:none!important}
}