/* motion layer: only active when motion.js adds .m to <html> (skipped for reduced motion) */
.m body{overflow-x:clip}
.m-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* scroll progress + cursor glow */
.m-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--green),var(--cyan));pointer-events:none}
.m-glow{position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,#4ce2a017,transparent 65%);opacity:0;transition:opacity .4s}
@media(pointer:fine){.m .m-glow{opacity:1}}

/* hero network mesh */
.m .hero,.m .case-hero{position:relative}
.m .hero>*:not(.m-net),.m .case-hero>*:not(.m-net){position:relative;z-index:1}
.m-net{position:absolute;top:0;bottom:0;--vw:calc(100vw - var(--m-sbw,0px));left:calc(50% - var(--vw) / 2);width:var(--vw);z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
.m-net canvas{width:100%;height:100%;display:block}
.m h1 span{background:linear-gradient(90deg,var(--green),var(--cyan) 50%,var(--green));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:m-shimmer 7s linear infinite}
@keyframes m-shimmer{to{background-position:-200% 0}}

/* terminal replay */
.m .terminal-body p.m-in{animation:m-fade .3s ease both}
@keyframes m-fade{from{opacity:0;transform:translateY(4px)}}
.m .terminal-body.m-out{opacity:0;transition:opacity .5s}
.m .terminal-body.m-ops p{margin-bottom:7px}
.m .terminal-body.m-ops .terminal-cursor{margin-top:14px!important}
.m .terminal-body .m-t-amber{color:var(--amber)}
.m .terminal-body .m-t-cyan{color:var(--cyan)}

/* migration flow */
.m .flow-track{position:relative}
.m .flow-track i{animation:m-dash 1.4s ease-in-out infinite}
.m .flow-track i:nth-child(2){animation-delay:.18s}.m .flow-track i:nth-child(3){animation-delay:.36s}
@keyframes m-dash{0%,100%{opacity:.25;transform:scaleX(.6)}45%{opacity:1;transform:scaleX(1);box-shadow:0 0 8px var(--green)}}
.m .flow-track:after{content:'';position:absolute;top:50%;left:0;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--green),0 0 20px var(--green);animation:m-packet 1.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes m-packet{0%{left:-6px;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% + 2px);opacity:0}}
.m .migration-modern{animation:m-receive 1.4s ease-out infinite}
@keyframes m-receive{0%,70%{box-shadow:0 0 0 0 #4ce2a000}85%{box-shadow:0 0 0 1px #4ce2a066,0 0 26px -4px #4ce2a080}100%{box-shadow:0 0 0 0 #4ce2a000}}
.m .pipeline-steps button{position:relative;overflow:hidden}
.m .pipeline-steps.m-auto button[aria-selected=true]:after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--green);transform-origin:left;animation:m-tab 4.2s linear forwards}
@keyframes m-tab{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.m .phase-panel>*{animation:m-fade .35s ease both}

/* platform map */
.m .platform-traces i{position:relative}
.m .platform-traces i:after{content:'';position:absolute;left:-2px;top:0;width:5px;height:12px;border-radius:3px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:m-down 1.9s cubic-bezier(.5,0,.5,1) infinite}
.m .platform-traces i:nth-child(2):after{animation-delay:.6s}.m .platform-traces i:nth-child(3):after{animation-delay:1.2s}
@keyframes m-down{0%{top:-12px;opacity:0}20%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
.m .cloud-nodes>div{animation:m-node 5.7s ease-in-out infinite;transition:transform .3s}
.m .cloud-nodes>div:nth-child(2){animation-delay:1.9s}.m .cloud-nodes>div:nth-child(3){animation-delay:3.8s}
.m .cloud-nodes>div:hover{transform:translateY(-3px)}
@keyframes m-node{0%,100%{border-color:#49616e;box-shadow:none}12%{border-color:var(--cyan);box-shadow:0 0 28px -6px var(--cyan)}28%{border-color:#49616e;box-shadow:none}}
.m .platform-core{animation:m-core 1.9s ease-out infinite}
@keyframes m-core{0%,80%,100%{box-shadow:0 0 0 0 #4ce2a000}90%{box-shadow:0 0 0 1px #4ce2a055,0 0 30px -6px #4ce2a0}}
.m .platform-core span{animation:m-chip 5.7s ease-in-out infinite}
.m .platform-core span:nth-child(2){animation-delay:1.9s}.m .platform-core span:nth-child(3){animation-delay:3.8s}
@keyframes m-chip{0%,30%,100%{text-shadow:none;color:var(--green)}12%{color:#fff;text-shadow:0 0 12px var(--green)}}

/* signal graph */
.m .signal-graph{position:relative;overflow:hidden}
.m .signal-graph span{transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .3s}
.m .signal-graph.m-on span{transform:scaleY(1)}
.m .signal-graph span:hover{opacity:1}
.m .signal-graph:after{content:'';position:absolute;top:0;bottom:0;width:40px;left:-40px;background:linear-gradient(90deg,transparent,#67d4ed30,transparent);animation:m-scan 3.6s linear infinite}
@keyframes m-scan{to{left:100%}}

/* toolkit marquee */
.m-marquee{margin-top:34px;overflow:hidden;display:grid;gap:10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.m-track{display:flex;gap:10px;width:max-content;animation:m-mq 42s linear infinite}
.m-marquee .m-track:nth-child(2){animation-direction:reverse;animation-duration:50s}
.m-marquee:hover .m-track{animation-play-state:paused}
@keyframes m-mq{to{transform:translateX(-50%)}}
.m-chip{display:flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--line);border-radius:99px;background:var(--panel);font:13px var(--mono);color:var(--text);white-space:nowrap}
.m-chip i{width:7px;height:7px;border-radius:50%}

/* spotlight + magnetic */
.m-host{position:relative}
.m-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),#67d4ed14,transparent 45%)}
.m-host:hover>.m-spot{opacity:1}
.m .button{will-change:transform}

/* case study */
.m .m-rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.m .m-rv.m-rv-on{opacity:1;transform:none}
.m-mark{background:linear-gradient(90deg,#4ce2a040,#67d4ed40) no-repeat 0 88%/0% 38%;color:inherit;padding:0 2px;transition:background-size 1.1s cubic-bezier(.2,.8,.2,1) .2s}
.m-on .m-mark{background-size:100% 38%}
.m-rail{position:relative;height:18px;margin:0 0 14px}
@media(max-width:900px){.m-rail{display:none}}
.m-rail:before{content:'';position:absolute;left:0;right:0;top:8px;height:2px;background:var(--line-strong);border-radius:2px}
.m-rail-fill{position:absolute;left:0;top:8px;height:2px;width:0;background:linear-gradient(90deg,var(--green),var(--cyan));border-radius:2px;box-shadow:0 0 10px #4ce2a080;transition:width 1s cubic-bezier(.5,0,.3,1)}
.m-rail-dot{position:absolute;top:4px;left:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--green),0 0 22px var(--green);transition:left 1s cubic-bezier(.5,0,.3,1)}
.m-rail span{position:absolute;top:3px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--bg);border:2px solid var(--line-strong);transition:border-color .4s,background .4s}
.m-rail span.m-lit{border-color:var(--green);background:#123a2e}
.m .method-grid article{transition:border-color .4s,box-shadow .4s,transform .4s,opacity .7s ease}
.m .method-grid article.m-rv-on{transition:border-color .4s,box-shadow .4s,transform .4s,opacity .7s ease}
.m .method-grid article.m-active{border-color:#4ce2a0aa;box-shadow:0 0 36px -10px #4ce2a0aa;transform:translateY(-4px)}
.m .method-grid article.m-done{border-color:#4ce2a044}
.m .method-grid article>span{transition:color .3s}
.m .method-grid article.m-active>span:after{content:' · running';color:var(--amber)}
.m .method-grid article.m-done>span:after{content:' ✓';color:var(--green)}
.m .evidence-list a{position:relative;overflow:hidden;transition:background .3s,padding .3s}
.m .evidence-list a:before{content:'';position:absolute;top:0;bottom:0;width:120px;left:-120px;background:linear-gradient(90deg,transparent,#4ce2a01c,transparent);pointer-events:none}
.m .evidence-list a:hover:before{animation:m-sweep .9s ease}
@keyframes m-sweep{to{left:100%}}
.m .evidence-list a:hover{padding-left:16px}
.m .evidence-list em{transition:transform .3s}
.m .evidence-list a:hover em{transform:translateX(4px)}
.m-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:10px;vertical-align:3px;animation:m-ping 2s infinite}
@keyframes m-ping{0%{box-shadow:0 0 0 0 #4ce2a0b0}70%{box-shadow:0 0 0 9px #4ce2a000}100%{box-shadow:0 0 0 0 #4ce2a000}}
.m .case-next a{transition:letter-spacing .3s}
.m .case-next a:hover{letter-spacing:.04em}

/* IaC replay */
.m .iac-res li{transition:opacity .4s,border-color .4s,background .4s}
.m .iac-res li:after{content:'';position:absolute;left:0;bottom:0;height:2px;width:var(--b,0%);background:var(--amber);transition:width var(--d,1.5s) ease-in-out}
.m .iac-res li.m-pend{opacity:.4;border-style:dashed;border-color:var(--line-strong);background:transparent}
.m .iac-res li.m-pend .iac-st{color:var(--dim)}
.m .iac-res li.m-creating{border-color:#ffbd6680;background:#1b1912}
.m .iac-res li.m-creating .iac-st{color:var(--amber)}
.m .iac-res li.m-made{animation:m-made .6s ease}
@keyframes m-made{0%{box-shadow:0 0 0 0 #4ce2a000}40%{box-shadow:0 0 0 1px #4ce2a080,0 0 26px -4px #4ce2a0}100%{box-shadow:0 0 0 0 #4ce2a000}}
.m .iac-apply.m-busy{color:var(--muted)}

/* Kubernetes simulation */
.m #k-svg .k-ring{transform-origin:250px 250px;animation:spin-k 60s linear infinite}
.m #k-svg .k-ring.k-rev{animation-duration:90s;animation-direction:reverse}
@keyframes spin-k{to{transform:rotate(360deg)}}
.m #k-svg .k-traffic{animation:m-kdash 1s linear infinite}
@keyframes m-kdash{to{stroke-dashoffset:-12}}
.m #k-svg .k-pod{transform-box:fill-box;transform-origin:center;animation:m-pod .45s cubic-bezier(.3,1.7,.5,1);transition:opacity .45s,fill .2s}
.m #k-svg .k-pod.crash{fill:#ff6b81;filter:drop-shadow(0 0 6px #ff6b81e6);animation:m-shake .3s 2}
.m #k-svg .k-pod.out{opacity:0;fill:var(--dim)}
@keyframes m-pod{from{transform:scale(0)}}
@keyframes m-shake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.m .k8s-events li{animation:m-fade .3s ease both}
/* career git log */
.m .git-log svg .gl-track{fill:none;stroke:#1f3a35;stroke-width:2}
.m .git-log svg .gl-draw{fill:none;stroke-width:2.5;stroke-linecap:round}
.m .git-log svg .gl-draw.m{stroke:var(--green);filter:drop-shadow(0 0 4px #4ce2a080)}
.m .git-log svg .gl-draw.b{stroke:#a99bff;filter:drop-shadow(0 0 4px #a99bff80)}
.m .gl-row:before{transform:scale(.55);opacity:.45;transition:transform .45s cubic-bezier(.3,1.7,.5,1),opacity .3s,box-shadow .3s}
.m .gl-row.m-lit:before{transform:scale(1);opacity:1}
.m .gl-main.m-lit:before{box-shadow:0 0 0 4px #4ce2a026,0 0 14px var(--green)}
.m .gl-branch.m-lit:before{box-shadow:0 0 0 4px #a99bff26,0 0 14px #a99bff}
.m .gl-row .gl-body,.m .gl-row .gl-hash{transition:opacity .4s}
.m .gl-row:not(.m-lit) .gl-body,.m .gl-row:not(.m-lit) .gl-hash{opacity:.55}
/* latency chart */
.m .lat-static{display:none}
/* status bars */
.m .up-bars i{transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .2s}
.m .up-bars.m-on i{transform:scaleY(1)}
.m .up-bars.m-on i:hover{opacity:1;transform:scaleY(1.18);transition-delay:0s!important}
.m-paused *,.m-paused *:before,.m-paused *:after{animation-play-state:paused!important}