/* Motion layer (pages with body.fx). Everything stays readable without JS and with reduced motion. */

/* line-by-line text reveal */
.fxjs .fx-split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.fxjs .fx-split .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--l,0) * 110ms + var(--d,0ms))}
.fxjs .fx-split.is-in .w>span{transform:none}

/* image unmasking */
.fxjs .um{clip-path:inset(0 0 100% 0 round 22px);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
.fxjs .um img{transform:scale(1.18);transition:transform 1.6s cubic-bezier(.2,.75,.2,1)}
.fxjs .um.is-in{clip-path:inset(0 0 0 0 round 22px)}
.fxjs .um.is-in img{transform:none}

/* body must not become a scroll container, or sticky sections stop pinning */
body{overflow-x:clip}

/* hide the hero heading until it is split, so it never flashes before animating */
.fxjs .phero h1:not(.fx-split){opacity:0}

/* hero image: visible from the first frame, opens out softly instead of starting blank */
.fxjs .hero-in{clip-path:inset(5% 5% 5% 5% round 22px);transition:clip-path 1.3s cubic-bezier(.2,.75,.2,1)}
.fxjs .hero-in img{transform:scale(1.1);transition:transform 1.8s cubic-bezier(.2,.75,.2,1)}
.fxjs .hero-in.is-in{clip-path:inset(0 0 0 0 round 22px)}
.fxjs .hero-in.is-in img{transform:none}

/* animated integration hub diagram */
.dg-wrap{margin:0;position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh2)}
.dg-wrap::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--blue) 22%,transparent) 1px,transparent 1.2px);background-size:22px 22px;opacity:.55}
.dg-wrap::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,var(--b-or1),var(--b-indigo),var(--b-cyan))}
.dg{position:relative;width:100%;height:100%;display:block}
.dg .ln{stroke:var(--line2);stroke-width:1.6;fill:none;stroke-dasharray:4 6;transition:stroke .3s}
.dg .pk{fill:var(--blue)}
.dg .pk.b{fill:var(--orange)}
.dg .nd rect{fill:var(--card);stroke:var(--line2);stroke-width:1.4;transition:fill .3s,stroke .3s}
.dg .nd text{font:600 13px var(--fb);fill:var(--ink);transition:fill .3s}
.dg .sp{cursor:default;outline:none}
.dg .sp:hover .ln,.dg .sp:focus .ln{stroke:var(--orange);stroke-dasharray:none;stroke-width:2.2}
.dg .sp:hover rect,.dg .sp:focus rect{fill:var(--orange);stroke:var(--orange)}
.dg .sp:hover text,.dg .sp:focus text{fill:#fff}
.dg .hub-ring{fill:none;stroke:var(--blue);stroke-width:1.5;opacity:.5;transform-origin:300px 222px;animation:hubp 3s ease-out infinite}
.dg .hub-ring.r2{animation-delay:1.5s}
@keyframes hubp{0%{transform:scale(.85);opacity:.6}100%{transform:scale(1.55);opacity:0}}
.dg .hub-t{font:700 15px var(--fd);fill:#fff;letter-spacing:-.02em}
.dg .hub-s{font:500 10.5px var(--fm);fill:#CFE0F5;letter-spacing:.12em}
.dg-cap{position:absolute;left:18px;top:16px;font:500 11px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);z-index:1}

/* pinned methodology */
.pinsec{position:relative}
.pin-track{position:relative;height:calc(var(--n) * calc(55vh / var(--vz,1)) + calc(100vh / var(--vz,1)))}
.pin-sticky{position:sticky;top:0;height:calc(100vh / var(--vz,1));display:flex;align-items:center;overflow:hidden}
.pin-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(36px,5vw,80px);align-items:center;width:100%}
.ringbox{position:relative;aspect-ratio:1/1;max-width:min(520px,calc(62vh / var(--vz,1)));width:100%;margin-inline:auto}
.ringbox svg{width:100%;height:100%;overflow:visible}
.ring-track{fill:none;stroke:var(--line);stroke-width:3}
.ring-prog{fill:none;stroke:url(#rg);stroke-width:4;stroke-linecap:round;transform:rotate(-90deg);transform-origin:200px 200px}
.ring-node circle{fill:var(--card);stroke:var(--line2);stroke-width:2;transition:fill .4s,stroke .4s,r .4s}
.ring-node text{font:600 12px var(--fd);fill:var(--mute);text-anchor:middle;dominant-baseline:central;transition:fill .4s}
.ring-node.done circle{stroke:var(--blue)}
.ring-node.done text{fill:var(--blue)}
.ring-node.on circle{fill:var(--orange);stroke:var(--orange)}
.ring-node.on text{fill:#fff}
.ring-c{position:absolute;inset:22%;display:grid;place-content:center;text-align:center;gap:8px}
.pin-num{font:700 clamp(3rem,7vw,5.2rem)/1 var(--fd);letter-spacing:-.06em;background:linear-gradient(135deg,#F7931D,#4041FB 60%,#00C2FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.pin-ttl{font:600 clamp(1rem,1.5vw,1.2rem)/1.3 var(--fd);color:var(--ink);letter-spacing:-.02em}
.pin-of{font:500 12px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pin-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pin-list li{display:grid;grid-template-columns:40px 1fr;gap:4px 16px;padding:14px 18px;border-radius:14px;cursor:pointer;transition:background .4s,opacity .4s;opacity:.55}
.pin-list li .k{font:600 13px/1.6 var(--fm);color:var(--mute)}
.pin-list li h3{font-size:1.02rem;transition:color .3s}
.pin-list li p{grid-column:2;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s;font-size:16px}
.pin-list li.on{opacity:1;background:var(--card);box-shadow:var(--sh1)}
.pin-list li.on .k{color:var(--orange)}
.pin-list li.on h3{color:var(--blue)}
.pin-list li.on p{max-height:160px;opacity:1}
.pin-list li:hover{opacity:1}
.pin-mobile{display:none}
@media (max-width:899px){.pin-track{height:auto}.pin-sticky{position:static;height:auto}.pin-grid{display:none}.pin-mobile{display:block}}

@media (prefers-reduced-motion:reduce){
 .fxjs .fx-split .w>span{transform:none!important}
 .fxjs .um{clip-path:none!important}.fxjs .um img{transform:none!important}
 .fxjs .hero-in{clip-path:none!important}.fxjs .hero-in img{transform:none!important}
 .dg .hub-ring{animation:none}
}

/* ---- page graphics: shared ---- */
.dg .nd rect{fill:var(--card);stroke:var(--line2);stroke-width:1.4}
.dg .nd text{font:600 13px var(--fb);fill:var(--ink)}

/* path: stages along a route */
.dg-path .route{fill:none;stroke:var(--line2);stroke-width:2;stroke-dasharray:5 7}
.dg-path .route-on{fill:none;stroke:url(#none);stroke:var(--orange);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1;animation:dgdraw 3.2s cubic-bezier(.6,0,.2,1) .3s forwards;opacity:.7}
@keyframes dgdraw{to{stroke-dashoffset:0}}
.dg-path .runner{fill:var(--orange);filter:drop-shadow(0 0 6px var(--orange))}
.dg-path .num{fill:var(--blue)}
.dg-path .numt{font:700 10px var(--fm);fill:#fff}
.dg-path .stg .nd rect{animation:stglow var(--T) infinite;animation-delay:var(--d)}
@keyframes stglow{0%,100%{stroke:var(--line2);fill:var(--card)}6%,22%{stroke:var(--orange);fill:color-mix(in srgb,var(--orange) 12%,var(--card))}}

/* stack: isometric layers */
.dg-stack .tp{fill:color-mix(in srgb,var(--blue) 22%,var(--card));stroke:color-mix(in srgb,var(--blue) 55%,transparent);stroke-width:1.2}
.dg-stack .sl{fill:color-mix(in srgb,var(--blue) 45%,#0A1A3A)}
.dg-stack .sr{fill:color-mix(in srgb,var(--blue) 30%,#0A1A3A)}
.dg-stack .lead{stroke:var(--line2);stroke-width:1.2;stroke-dasharray:3 5;fill:none}
.dg-stack .plate{animation:lift var(--T) infinite ease-in-out;animation-delay:var(--d);transform-box:fill-box}
@keyframes lift{0%,100%{transform:translateY(0)}10%,24%{transform:translateY(-10px)}}
.dg-stack .lyr .tp{animation:lyrc var(--T) infinite;animation-delay:var(--d)}
@keyframes lyrc{0%,100%{fill:color-mix(in srgb,var(--blue) 22%,var(--card))}10%,24%{fill:color-mix(in srgb,var(--orange) 70%,var(--card))}}
.dg-stack .lbl rect{animation:stglow var(--T) infinite;animation-delay:var(--d)}

/* monitor: live status panel */
.dg-monitor .panel{fill:color-mix(in srgb,var(--card) 92%,var(--blue));stroke:var(--line2)}
.dg-monitor .ptitle{font:600 11px var(--fm);letter-spacing:.14em;fill:var(--mute)}
.dg-monitor .live{fill:#13A36B;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.dg-monitor .grid-l{stroke:var(--line);stroke-dasharray:2 6}
.dg-monitor .pulse{fill:none;stroke:var(--orange);stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:.3 .7;stroke-dashoffset:1;animation:pulse 3.4s linear infinite}
@keyframes pulse{to{stroke-dashoffset:0}}
.dg-monitor .rbg{fill:var(--card);stroke:var(--line)}
.dg-monitor .rtxt{font:600 13px var(--fb);fill:var(--ink)}
.dg-monitor .tick{fill:var(--line2);animation:tick var(--T) infinite;animation-delay:var(--d)}
.dg-monitor .tk{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes tick{0%,8%{fill:var(--line2)}14%,100%{fill:#13A36B}}
.dg-monitor .bar{fill:var(--line)}
.dg-monitor .barf{fill:var(--blue);transform-box:fill-box;transform-origin:left;animation:barf var(--T) infinite;animation-delay:var(--d)}
@keyframes barf{0%{transform:scaleX(.05)}14%,100%{transform:scaleX(1)}}

/* orbit */
.dg-orbit .orb{fill:none;stroke:var(--line2);stroke-dasharray:3 7}
.dg-orbit .o2{stroke:color-mix(in srgb,var(--orange) 40%,transparent)}
.dg-orbit .o3{stroke:var(--line);stroke-dasharray:1 9}
.dg-orbit .core-ring{fill:none;stroke:var(--orange);stroke-width:1.5;opacity:.5;transform-origin:300px 222px;animation:hubp 3s ease-out infinite}

@media (prefers-reduced-motion:reduce){.dg-path .stg .nd rect,.dg-stack .plate,.dg-stack .lyr .tp,.dg-stack .lbl rect,.dg-monitor .pulse,.dg-monitor .tick,.dg-monitor .barf,.dg-monitor .live,.dg-orbit .core-ring{animation:none}.dg-monitor .tick{fill:#13A36B}}