/* Lambert Badong portfolio - styles (design: "Switchgear Render") */
*{box-sizing:border-box}
body{margin:0;font-family:'IBM Plex Sans',system-ui,sans-serif;background:#e6e9ed;color:#162238;-webkit-font-smoothing:antialiased}
a{color:#1d2b45;text-decoration:none}
a:hover{color:#b8452f}
b{font-weight:600}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
/* ---- hero camera */
.cam,.yaw{transition:transform 1.25s cubic-bezier(.65,0,.25,1)}
@keyframes amb{0%,32%{transform:rotateY(0deg)}50%{transform:rotateY(9deg)}72%{transform:rotateY(-9deg)}90%,100%{transform:rotateY(0deg)}}
.amb{animation:amb 30s cubic-bezier(.45,0,.55,1) infinite}
@keyframes ovlA{0%,30%{opacity:1}33%,91%{opacity:0}94%,100%{opacity:1}}
.ovlA{animation:ovlA 30s linear infinite}
.hold .amb,.hold~* .amb,.hold~* .ovlA{animation-play-state:paused}
.ovlw{transition:opacity .5s ease}
.ovlw.off{opacity:0}
.sec{transition:transform 1.1s cubic-bezier(.65,0,.25,1)}
.sec .xc,.sec .xp,.sec .xf,.sec .xb{transition:transform 1s cubic-bezier(.65,0,.25,1)}
.sec.ex.s0{transform:translateX(-78px)}.sec.ex.s1{transform:translateX(-26px)}.sec.ex.s2{transform:translateX(26px)}.sec.ex.s3{transform:translateX(78px)}
.sec.ex .xc{transform:translateY(-40px);transition-delay:.15s}
.sec.ex .xp{transform:translateY(26px);transition-delay:.15s}
.sec.ex .xf{transform:translateZ(58px);transition-delay:.3s}
.sec.ex .xb{transform:translateZ(34px);transition-delay:.45s}
.hlo{opacity:0;transition:opacity .45s ease;box-shadow:inset 0 0 0 2px var(--acc),inset 0 0 26px rgba(224,103,79,.28)}
.sec.hl .hlo{opacity:1;animation:hlp 1.8s ease-in-out infinite}
@keyframes hlp{0%,100%{box-shadow:inset 0 0 0 2px var(--acc),inset 0 0 26px rgba(224,103,79,.28)}50%{box-shadow:inset 0 0 0 2px var(--acc),inset 0 0 8px rgba(224,103,79,.12)}}
.eyer{transition:border-color .4s}.sec.hle .eyer{border-color:var(--acc)!important;animation:blink 1.2s ease-in-out infinite}
.door{transform:rotateY(0deg);transition:transform .95s cubic-bezier(.6,0,.35,1)}
.door.open{transform:rotateY(-104deg);transition:transform 1.3s cubic-bezier(.45,0,.2,1)}
.bal{transition:transform .35s cubic-bezier(.3,1.5,.5,1),background-color .25s,color .25s,box-shadow .25s;box-shadow:0 2px 6px rgba(22,34,56,.12)}
.bal:hover{transform:scale(1.1);box-shadow:0 0 0 3px rgba(224,103,79,.25)}
.bal:active{transform:scale(.9)}
.bal.on{background:var(--acc)!important;border-color:var(--acc)!important;color:#fff!important;transform:scale(1.14);box-shadow:0 0 0 5px rgba(224,103,79,.22)}
.krow{transition:background-color .2s,box-shadow .2s,transform .15s}
.krow:hover{background-color:#f4f6f8}
.krow:active{transform:scale(.98)}
.krow.on{background-color:#fdf1ed;box-shadow:inset 0 0 0 1.5px var(--acc)}
.trow0{}
.tree{transition:background-color .3s,box-shadow .3s}
.tree.on{background-color:#fdeee9;box-shadow:inset 0 0 0 1.5px var(--acc)}
.cap{opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1);pointer-events:none}
.cap.on{opacity:1;transform:none;pointer-events:auto}
.cbtn{position:relative;overflow:hidden;transition:transform .15s ease,background-color .25s,color .25s,box-shadow .2s}
.cbtn:hover{box-shadow:0 0 0 2px var(--acc)}
.cbtn:active{transform:translateY(1px) scale(.96)}
.cbtn[aria-pressed="true"]{background:#1d2b45!important;color:#fff!important;border-color:#1d2b45!important}
.cbtn svg{transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.cbtn:active svg{transform:rotate(-40deg)}
/* ---- ripple (press) */
.rp{position:relative;overflow:hidden}
.rp::after{content:"";position:absolute;left:50%;top:50%;width:240%;padding-top:240%;border-radius:50%;background:currentColor;opacity:0;transform:translate(-50%,-50%) scale(1);transition:transform .6s ease-out,opacity .7s ease-out;pointer-events:none}
.rp:active::after{opacity:.2;transform:translate(-50%,-50%) scale(0);transition:0s}
.btn,.lnk,.chip,.row{transition:transform .15s ease,box-shadow .2s ease,background-color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--acc),0 10px 22px rgba(22,34,56,0.14)}
.btn:active,.row:active{transform:translateY(1px) scale(.97)}
.chip{cursor:default;user-select:none}
.row:hover{background-color:#fdf1ed;box-shadow:inset 0 0 0 1px var(--acc)}
.lnk{background-image:linear-gradient(var(--acc),var(--acc));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s ease,transform .15s}
.lnk:hover{background-size:100% 2px}
.lnk:active{transform:translateY(1px) scale(.95);background-size:100% 3px}
/* ---- bots */
.botbtn{display:block;padding:0;margin:0;border:0;background:none;cursor:pointer;border-radius:12px}
.botbtn:active .bbody{transform:scale(.94)}
.bbody{transform-box:fill-box;transform-origin:50% 100%;transition:transform .15s}
.wv{transform-box:fill-box;transform-origin:0% 100%}
.wvl{transform-origin:100% 100%}
.botbtn.ta .bbody{animation:hopA .9s cubic-bezier(.3,.7,.3,1)}.botbtn.tb .bbody{animation:hopB .9s cubic-bezier(.3,.7,.3,1)}
.botbtn.ta .wv{animation:waveA .9s ease-in-out}.botbtn.tb .wv{animation:waveB .9s ease-in-out}
.botbtn.ta .wvl{animation:wavelA .9s ease-in-out}.botbtn.tb .wvl{animation:wavelB .9s ease-in-out}
.botbtn.ta .bsh{animation:shA .9s}.botbtn.tb .bsh{animation:shB .9s}
.bsh{transform-box:fill-box;transform-origin:center}
.eye{transform-box:fill-box;transform-origin:center}
.botbtn.ta .eye{animation:eyeA .9s}.botbtn.tb .eye{animation:eyeB .9s}
/* ---- office cut-away */
.oside{transition:transform 1.1s cubic-bezier(.65,0,.25,1) .1s}
.osidef{transition:opacity .7s ease .35s}
.ofc.cut .oside{transform:translateX(150px) translateY(-20px)}
.ofc.cut .osidef{opacity:0}
.oplane{transform:translateX(190px);transition:transform 1.3s cubic-bezier(.65,0,.25,1)}
.oplanef{opacity:0;transition:opacity .5s ease}
.ofc.cut .oplane{transform:translateX(0px)}
.ofc.cut .oplanef{opacity:1}
.ocutf{opacity:0;transition:opacity .4s ease}
.ofc.cut .ocutf{opacity:1;transition-delay:.9s}
.ofc.ta .oplanef{animation:scanA 1.3s ease}.ofc.tb .oplanef{animation:scanB 1.3s ease}
@keyframes osc{0%,100%{transform:rotateY(-58deg)}50%{transform:rotateY(-36deg)}}
.osc{animation:osc 18s ease-in-out infinite}
@keyframes osc2{0%,100%{transform:rotateY(-42deg)}50%{transform:rotateY(-20deg)}}
.osc2{animation:osc2 20s ease-in-out infinite}
/* ---- home */
.scrbtn{display:block}
.scrbtn:active{filter:brightness(1.25)}
.shot{opacity:0;transform:translateX(12px);transition:opacity .45s ease,transform .5s cubic-bezier(.3,1.3,.5,1)}
.shot.on{opacity:1;transform:none}
.lap.ta .glare{animation:glareA .7s ease}.lap.tb .glare{animation:glareB .7s ease}
.hb-flash,.hb-scan,.hb-t1,.hb-t2,.hb-b1,.hb-b2{transform-box:fill-box}
.hud.ta .hb-flash{animation:flashA 2.4s ease}.hud.tb .hb-flash{animation:flashB 2.4s ease}
.hud.ta .hb-scan{animation:scanlA 2.4s ease}.hud.tb .hb-scan{animation:scanlB 2.4s ease}
.hud.ta .hb-t1,.hud.ta .hb-t2{animation:typeA 2.4s steps(1)}.hud.tb .hb-t1,.hud.tb .hb-t2{animation:typeB 2.4s steps(1)}
.hud.ta .hb-ring{animation:spinupA 2.4s cubic-bezier(.2,.7,.2,1)}.hud.tb .hb-ring{animation:spinupB 2.4s cubic-bezier(.2,.7,.2,1)}
.hud.ta .hb-b2{animation:barA 2.4s ease}.hud.tb .hb-b2{animation:barB 2.4s ease}
.hb-b2{transform-origin:0 50%}
/* ---- parts */
.pbtn{transition:transform .15s ease,box-shadow .2s}
.pbtn:hover{box-shadow:0 0 0 2px var(--acc)}
.pbtn:active{transform:scale(.97)}
@keyframes posc{0%,100%{transform:rotateY(-44deg)}50%{transform:rotateY(-14deg)}}
.posc{animation:posc 9s ease-in-out infinite}
.pt.ta{animation:spinA 1.4s cubic-bezier(.45,0,.25,1)}.pt.tb{animation:spinB 1.4s cubic-bezier(.45,0,.25,1)}
.pt.ta .asm-d{animation:drawerA 1.6s cubic-bezier(.4,0,.2,1)}.pt.tb .asm-d{animation:drawerB 1.6s cubic-bezier(.4,0,.2,1)}
.pt.ta .asm-l{animation:lidA 1.6s cubic-bezier(.4,0,.2,1)}.pt.tb .asm-l{animation:lidB 1.6s cubic-bezier(.4,0,.2,1)}
.pt.ta .asm-s{animation:riseA 1.3s cubic-bezier(.22,1,.36,1)}.pt.tb .asm-s{animation:riseB 1.3s cubic-bezier(.22,1,.36,1)}
/* ---- tool rows */
.trow{transition:background-color .25s,box-shadow .25s}
.trow:hover{background-color:#f7f8fa!important}
.trow:active{background-color:#f0f2f5!important}
.trow.on{background-color:#fdf1ed!important;box-shadow:inset 0 0 0 1.5px var(--acc)}
.trow .bar{transform-origin:0 50%}
.trow .ghost{opacity:0;transition:opacity .4s}
.trow.on .ghost{opacity:1}
.trow.ta .bar{animation:shrA 1.4s cubic-bezier(.6,0,.2,1)}.trow.tb .bar{animation:shrB 1.4s cubic-bezier(.6,0,.2,1)}
/* ---- ambient / entrance */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.fade{animation:fade .9s ease both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.draw{stroke-dasharray:1 1;animation:draw 1.4s cubic-bezier(.6,0,.2,1) 1.6s both}
@keyframes ti{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.ti{animation:ti .5s ease both}
@keyframes stg{0%,10%,100%{background-color:#ffffff;box-shadow:0 0 0 0 rgba(0,0,0,0);transform:none}4%{background-color:#fdeee9;box-shadow:0 0 0 1.5px var(--acc);transform:translateY(-2px)}}
.stg{animation:stg 8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.bob{animation:bob 3.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.blink{animation:blink 2.2s ease-in-out infinite}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.eq{transform-origin:50% 100%;animation:eq 1.3s ease-in-out infinite}
@keyframes ring{to{transform:rotate(360deg)}}
.ring{transform-box:fill-box;transform-origin:center;animation:ring 8s linear infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2s ease-out infinite}
@keyframes hudbar{0%{transform:scaleX(.1)}70%,100%{transform:scaleX(1)}}
.hudbar{transform-box:fill-box;transform-origin:0 50%;animation:hudbar 3s ease-in-out infinite}
@keyframes tokB{0%,6%{transform:translateX(0);opacity:1}30%,40%{transform:translateX(240px);opacity:1}64%,74%{transform:translateX(480px);opacity:1}86%,100%{transform:translateX(480px);opacity:0}}
.tokB{animation:tokB 7s ease-in-out infinite}
@keyframes flow{to{stroke-dashoffset:-18}}
.flow{animation:flow 1.4s linear infinite}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.growx{transform-origin:0 50%;animation:growx 1.2s cubic-bezier(.6,0,.2,1) both}
@keyframes stripes{to{background-position:28px 0}}
.wip-stripes{animation:stripes 1.2s linear infinite}
@keyframes sway{0%,100%{transform:rotateZ(-4deg)}50%{transform:rotateZ(4deg)}}
.sway{transform-origin:50% 100%;animation:sway 5s ease-in-out infinite}
@keyframes phead{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
.printhead{animation:phead 2.4s ease-in-out infinite}
@keyframes grow{0%{transform:scaleY(.1)}85%,100%{transform:scaleY(1)}}
.grow{transform-origin:50% 100%;animation:grow 9s ease-in-out infinite}
.card{transition:box-shadow .25s ease}
.card:hover{box-shadow:0 20px 44px rgba(22,34,56,0.12)}
@keyframes hopA{0%{transform:translateY(0)}25%{transform:translateY(-16px) scale(1.04,.96)}45%{transform:translateY(0) scale(1.06,.92)}60%{transform:translateY(-6px)}80%,100%{transform:translateY(0)}}@keyframes hopB{0%{transform:translateY(0)}25%{transform:translateY(-16px) scale(1.04,.96)}45%{transform:translateY(0) scale(1.06,.92)}60%{transform:translateY(-6px)}80%,100%{transform:translateY(0)}}@keyframes waveA{0%,100%{transform:rotate(0deg)}20%{transform:rotate(-38deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-38deg)}80%{transform:rotate(6deg)}}@keyframes waveB{0%,100%{transform:rotate(0deg)}20%{transform:rotate(-38deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-38deg)}80%{transform:rotate(6deg)}}@keyframes wavelA{0%,100%{transform:rotate(0deg)}20%{transform:rotate(38deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(38deg)}80%{transform:rotate(-6deg)}}@keyframes wavelB{0%,100%{transform:rotate(0deg)}20%{transform:rotate(38deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(38deg)}80%{transform:rotate(-6deg)}}@keyframes shA{0%,100%{transform:scale(1);opacity:1}25%{transform:scale(.6);opacity:.5}45%{transform:scale(1.15)}}@keyframes shB{0%,100%{transform:scale(1);opacity:1}25%{transform:scale(.6);opacity:.5}45%{transform:scale(1.15)}}@keyframes eyeA{0%,100%{transform:scaleY(1)}30%{transform:scaleY(.15)}40%{transform:scaleY(1)}}@keyframes eyeB{0%,100%{transform:scaleY(1)}30%{transform:scaleY(.15)}40%{transform:scaleY(1)}}@keyframes spinA{0%{transform:translateY(0) rotateY(0deg)}50%{transform:translateY(-7px) rotateY(180deg)}100%{transform:translateY(0) rotateY(360deg)}}@keyframes spinB{0%{transform:translateY(0) rotateY(0deg)}50%{transform:translateY(-7px) rotateY(180deg)}100%{transform:translateY(0) rotateY(360deg)}}@keyframes drawerA{0%,100%{transform:translateZ(0)}35%,60%{transform:translateZ(34px)}}@keyframes drawerB{0%,100%{transform:translateZ(0)}35%,60%{transform:translateZ(34px)}}@keyframes lidA{0%,100%{transform:rotateX(0deg)}35%,60%{transform:rotateX(62deg)}}@keyframes lidB{0%,100%{transform:rotateX(0deg)}35%,60%{transform:rotateX(62deg)}}@keyframes riseA{0%{transform:translateY(24px)}100%{transform:translateY(0)}}@keyframes riseB{0%{transform:translateY(24px)}100%{transform:translateY(0)}}@keyframes shrA{0%{transform:scaleX(var(--s))}25%{transform:scaleX(var(--s))}100%{transform:scaleX(1)}}@keyframes shrB{0%{transform:scaleX(var(--s))}25%{transform:scaleX(var(--s))}100%{transform:scaleX(1)}}@keyframes flashA{0%{opacity:1}30%{opacity:1}34%{opacity:.2}38%{opacity:.9}44%,100%{opacity:0}}@keyframes flashB{0%{opacity:1}30%{opacity:1}34%{opacity:.2}38%{opacity:.9}44%,100%{opacity:0}}@keyframes scanlA{0%,40%{opacity:0;transform:translateY(0)}45%{opacity:.5}80%{opacity:.25;transform:translateY(54px)}85%,100%{opacity:0;transform:translateY(54px)}}@keyframes scanlB{0%,40%{opacity:0;transform:translateY(0)}45%{opacity:.5}80%{opacity:.25;transform:translateY(54px)}85%,100%{opacity:0;transform:translateY(54px)}}@keyframes typeA{0%,55%{opacity:0}60%,64%{opacity:1}66%{opacity:0}70%,100%{opacity:1}}@keyframes typeB{0%,55%{opacity:0}60%,64%{opacity:1}66%{opacity:0}70%,100%{opacity:1}}@keyframes spinupA{0%,40%{transform:rotate(0deg);opacity:0}45%{opacity:1}100%{transform:rotate(720deg)}}@keyframes spinupB{0%,40%{transform:rotate(0deg);opacity:0}45%{opacity:1}100%{transform:rotate(720deg)}}@keyframes barA{0%,55%{transform:scaleX(0)}100%{transform:scaleX(1)}}@keyframes barB{0%,55%{transform:scaleX(0)}100%{transform:scaleX(1)}}@keyframes hwaveA{0%,50%{opacity:0;transform:scaleY(.1)}58%{opacity:1;transform:scaleY(1.2)}66%{transform:scaleY(.4)}74%{transform:scaleY(1)}82%{transform:scaleY(.5)}90%{transform:scaleY(.9)}100%{opacity:1;transform:scaleY(.7)}}@keyframes hwaveB{0%,50%{opacity:0;transform:scaleY(.1)}58%{opacity:1;transform:scaleY(1.2)}66%{transform:scaleY(.4)}74%{transform:scaleY(1)}82%{transform:scaleY(.5)}90%{transform:scaleY(.9)}100%{opacity:1;transform:scaleY(.7)}}@keyframes glareA{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@keyframes glareB{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@keyframes scanA{0%{box-shadow:inset 0 0 0 1.5px var(--acc),inset 0 0 0 0 rgba(224,103,79,0)}40%{box-shadow:inset 0 0 0 3px var(--acc),inset 0 0 60px rgba(224,103,79,.35)}100%{box-shadow:inset 0 0 0 1.5px var(--acc),inset 0 0 0 0 rgba(224,103,79,0)}}@keyframes scanB{0%{box-shadow:inset 0 0 0 1.5px var(--acc),inset 0 0 0 0 rgba(224,103,79,0)}40%{box-shadow:inset 0 0 0 3px var(--acc),inset 0 0 60px rgba(224,103,79,.35)}100%{box-shadow:inset 0 0 0 1.5px var(--acc),inset 0 0 0 0 rgba(224,103,79,0)}}

/* ===== v2b motion polish ===== */
.ovlw{transition:opacity .6s ease 1.25s}
.ovlw.off{transition:opacity .25s ease 0s}
.srt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* camera: three nested wrappers with offset durations -> orbiting arc */
.zoom{transition:transform 1.05s cubic-bezier(.22,1,.36,1)}
.pitch{transition:transform .9s cubic-bezier(.22,1,.36,1) .06s}
.yaw{transition:transform 1.1s cubic-bezier(.45,0,.2,1)}
/* load-in (plays once; animations only fill backwards so the resting state is always the static style) */
@keyframes flin{from{opacity:0}}
.flin{animation:flin 1s ease .1s backwards}.fl2{animation-delay:.9s}
@keyframes ldin{from{transform:translate3d(0,-120px,-60px)}}
.ldin{animation:ldin 1.2s cubic-bezier(.22,1,.36,1) backwards}
@keyframes doorIn{from{transform:rotateY(0deg)}}
.door{animation:doorIn 1.3s cubic-bezier(.45,0,.2,1) 1.9s backwards}
@keyframes dimx{from{transform:scaleX(0)}}
.dimx{transform-box:fill-box;transform-origin:0% 50%;animation:dimx .75s cubic-bezier(.22,1,.36,1) backwards}
@keyframes fadeIn{from{opacity:0}}
.dwit,.ldr{animation:fadeIn .5s ease backwards}
@keyframes popIn{from{transform:scale(0);opacity:0}}
.diml{transform-box:fill-box;transform-origin:50% 50%;animation:popIn .45s cubic-bezier(.3,1.6,.5,1) backwards}
@keyframes balIn{0%{transform:scale(0);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
.bal{animation:balIn .55s cubic-bezier(.3,.7,.4,1) backwards}
@keyframes odo{from{transform:translateY(0)}}
.odo{animation-name:odo;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:backwards}
/* hover previews a section before click */
.herox:has(.b1:hover,.k1:hover) .s0 .hlo,.herox:has(.b2:hover,.k2:hover) .s1 .hlo,.herox:has(.b3:hover,.k3:hover) .s2 .hlo,.herox:has(.b4:hover,.k4:hover) .s3 .hlo{opacity:.45}
.herox:has(.b5:hover,.k5:hover) .eyer{border-color:#e9a08f!important}
/* explode: staggered parts, reverse order on reassemble */
.sec{transition:transform 1s cubic-bezier(.65,0,.25,1) .45s}
.sec.ex{transition-delay:0s}
.sec .xc{transition:transform .9s cubic-bezier(.65,0,.35,1) .35s}
.sec .xf{transition:transform .8s cubic-bezier(.22,1,.36,1) .25s}
.sec .xb{transition:transform .8s cubic-bezier(.22,1,.36,1) .1s}
.sec .xp{transition:transform .8s cubic-bezier(.22,1,.36,1) 0s}
.sec.ex .xc{transform:translateY(-40px);transition-delay:.1s}
.sec.ex .xf{transform:translateZ(58px);transition-delay:.3s}
.sec.ex .xb{transform:translateZ(34px);transition-delay:.5s}
.sec.ex .xp{transform:translateY(26px);transition-delay:.65s}
.bolt{transition:transform .8s cubic-bezier(.65,0,.35,1) .15s}
.sec.ex .bolt{transform:translateZ(96px) rotateZ(540deg);transition-delay:.22s}
/* living idle details */
@keyframes sheen{0%,72%{transform:translateX(-130%)}100%{transform:translateX(260%)}}
.sheen{animation:sheen 12s linear infinite}
@keyframes led{0%,58%{opacity:1}60%,100%{opacity:.15}}
.led1{animation:led 2.9s steps(1) infinite}.led2{animation:led 3.7s steps(1) -1.2s infinite}.led3{animation:led 5.3s steps(1) -2.1s infinite}
@keyframes bon{0%,86%{opacity:1}88%,100%{opacity:0}}
.bon{animation:bon 6s steps(1) infinite}
.cushim{opacity:0;transition:opacity .9s ease}
.dopen .cushim{opacity:1}
@keyframes chx{0%{transform:translateX(-120%)}100%{transform:translateX(260%)}}
@keyframes cvy{0%{transform:translateY(-120%)}100%{transform:translateY(300%)}}
.ch{animation:chx 4.6s ease-in-out infinite}.cv{animation:cvy 5.4s ease-in-out infinite}
/* office: progressive hatch + scan line */
.ocutf{opacity:0;transition:opacity .2s ease}
.ofc.cut .ocutf{opacity:1;transition-delay:.7s}
.hs,.hse{opacity:0;transition:opacity .45s ease}
.ofc.cut .hs,.ofc.cut .hse{opacity:1}
@keyframes scanl{0%,100%{transform:translateY(8px)}50%{transform:translateY(415px)}}
.scanl{animation:scanl 3.4s ease-in-out infinite}
/* home */
.hb-wave{transform-box:fill-box;transform-origin:50% 50%}
.hud.ta .hb-wave{animation:hwaveA 2.4s ease forwards}.hud.tb .hb-wave{animation:hwaveB 2.4s ease forwards}
@keyframes pgy{0%,100%{transform:translateZ(-14px)}25%,75%{transform:translateZ(-4px)}50%{transform:translateZ(6px)}}
@keyframes phd{0%,100%{transform:translate3d(-22px,0,-14px)}25%{transform:translate3d(22px,0,-4px)}50%{transform:translate3d(-22px,0,6px)}75%{transform:translate3d(22px,0,-4px)}}
.p-gy{animation:pgy 7s linear infinite}.p-hd{animation:phd 7s linear infinite}
@keyframes pprint{0%{transform:scaleY(.08)}88%,100%{transform:scaleY(1)}}
.p-print{animation:pprint 16s steps(12,end) infinite}
@keyframes pbed{0%{transform:translateY(0)}88%,100%{transform:translateY(5px)}}
.p-bed{animation:pbed 16s steps(12,end) infinite}
@keyframes pprog{0%{transform:scaleX(.05)}88%,100%{transform:scaleX(1)}}
.p-prog{transform-origin:0 50%;animation:pprog 16s steps(12,end) infinite}
@keyframes spool{0%{transform:rotate(0deg)}25%,100%{transform:rotate(-540deg)}}
.spool{animation:spool 16s cubic-bezier(.45,0,.55,1) infinite}
.shot{opacity:0;transform:translateX(16px) scale(.98);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.shot.prev{transform:translateX(-16px) scale(.98)}
.shot.on{opacity:1;transform:none}
/* micro-interactions: independent scale / translate / rotate so they never fight transform animations */
.btn,.cbtn,.pbtn,.krow,.row,.chip,.bal,.lnk,.trow,.botbtn{transition-property:transform,box-shadow,background-color,border-color,color,background-size,scale,translate;transition-duration:.2s,.2s,.2s,.2s,.2s,.3s,.5s,.35s;transition-timing-function:ease,ease,ease,ease,ease,ease,cubic-bezier(.3,1.8,.4,1),cubic-bezier(.22,1,.36,1)}
.btn:active,.cbtn:active,.pbtn:active,.krow:active,.row:active,.bal:active,.lnk:active,.trow:active,.botbtn:active{scale:.96;transition-duration:.08s}
.btn:hover{transform:none;translate:0 -2px}
.btn:active,.row:active,.cbtn:active,.krow:active,.bal:active,.chip:active,.lnk:active{transform:none}
.bal.on{transform:scale(1.14)}
.card{transition:box-shadow .3s ease,translate .4s cubic-bezier(.22,1,.36,1)}
.card:hover{translate:0 -4px}
.ptilt{transition:rotate .6s cubic-bezier(.22,1,.36,1)}
.pbtn:has(.hzL:hover) .ptilt{rotate:y -24deg}
.pbtn:has(.hzR:hover) .ptilt{rotate:y 24deg}
/* vault agents pipeline */
@keyframes agtok{0%{transform:translateX(0);opacity:0}4%,15%{transform:translateX(0);opacity:1}25%,40%{transform:translateX(170px)}50%,65%{transform:translateX(340px)}75%,88%{transform:translateX(510px);opacity:1}96%,100%{transform:translateX(510px);opacity:0}}
.agtok{animation:agtok 6s cubic-bezier(.45,0,.2,1) infinite}
@keyframes aglit{0%,18%{opacity:1}26%,100%{opacity:0}}
.aglit{opacity:0;animation:aglit 6s ease infinite}
.agn .agring{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.agn:hover .agring{transform:translateY(-2px);box-shadow:0 6px 14px rgba(22,34,56,.12)}
.agn:active{scale:.96}
.agn.on .agring{box-shadow:0 0 0 2px var(--acc),0 6px 14px rgba(224,103,79,.18)}
.agrole.ta{animation:agrA .45s cubic-bezier(.22,1,.36,1)}.agrole.tb{animation:agrB .45s cubic-bezier(.22,1,.36,1)}
@keyframes agrA{from{opacity:0;transform:translateY(6px)}}@keyframes agrB{from{opacity:0;transform:translateY(6px)}}
/* scroll-driven entrances (only where supported; otherwise everything is simply visible) */
@keyframes srIn{from{opacity:0;transform:translateY(36px)}}
@keyframes srStage{from{opacity:0;transform:translateY(30px) scale(.96)}}
@keyframes srBar{from{transform:scaleX(var(--s))}}
@supports (animation-timeline: view()){
.sr{animation:srIn linear both;animation-timeline:view();animation-range:entry 0% entry 220px}
.srs{animation-name:srStage}
.srbar{animation:srBar cubic-bezier(.6,0,.2,1) both;animation-timeline:view();animation-range:entry 70% cover var(--r,40%)}
}
.still *,.still *::before,.still *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.zoom.v0{transform:translate(0.0px,0.0px) scale(1.0)}.pitch.v0{transform:rotateX(-14deg)}.yaw.v0{transform:rotateY(-30deg)}.zoom.v0f{transform:translate(0.0px,0.0px) scale(1.0)}.pitch.v0f{transform:rotateX(-14deg)}.yaw.v0f{transform:rotateY(30deg)}.zoom.vx{transform:translate(0.0px,10.0px) scale(0.84)}.pitch.vx{transform:rotateX(-18deg)}.yaw.vx{transform:rotateY(-24deg)}.zoom.vxf{transform:translate(0.0px,10.0px) scale(0.84)}.pitch.vxf{transform:rotateX(-18deg)}.yaw.vxf{transform:rotateY(24deg)}.zoom.v1{transform:translate(287.8px,54.9px) scale(1.6)}.pitch.v1{transform:rotateX(-10deg)}.yaw.v1{transform:rotateY(-30deg)}.zoom.v2{transform:translate(130.3px,22.6px) scale(1.55)}.pitch.v2{transform:rotateX(-8deg)}.yaw.v2{transform:rotateY(-18deg)}.zoom.v3{transform:translate(-61.3px,14.0px) scale(1.55)}.pitch.v3{transform:rotateX(-8deg)}.yaw.v3{transform:rotateY(-18deg)}.zoom.v4{transform:translate(-222.7px,0.7px) scale(1.55)}.pitch.v4{transform:rotateX(-8deg)}.yaw.v4{transform:rotateY(-26deg)}.zoom.v5{transform:translate(-0.0px,135.6px) scale(1.2)}.pitch.v5{transform:rotateX(-30deg)}.yaw.v5{transform:rotateY(-28deg)}

/* ===================================================================== site layer (responsive, a11y, JS enhancements) */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{overflow-x:hidden}
img{max-width:100%}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:8px;background:#1d2b45;color:#fff!important;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.site{width:100%!important;height:auto!important;min-height:100vh}
.site>main{display:flex;flex-direction:column}
[id]{scroll-margin-top:84px}
/* centred 1280 container: every band keeps its full-bleed background */
.site>nav,.site>footer,.site>main>section{padding-left:max(clamp(16px,4.4vw,64px),calc((100% - 1280px)/2))!important;padding-right:max(clamp(16px,4.4vw,64px),calc((100% - 1280px)/2))!important}
.site>nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px)}
.navlinks{display:flex;align-items:center;gap:32px}
.navlinks .menu-only{display:none}
.navres{margin-right:-20px}
.menu-btn{display:none;white-space:nowrap;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;border:1px solid #c3cad4;background:#fff;color:#1d2b45;font:500 14px 'IBM Plex Mono',ui-monospace,monospace;cursor:pointer}
.menu-btn svg{transition:transform .3s}
.motion-btn{display:inline-flex;white-space:nowrap;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;border:1px solid #c3cad4;background:#fff;color:#1d2b45;font:500 12.5px 'IBM Plex Mono',ui-monospace,monospace;cursor:pointer}
.motion-btn .dot{width:7px;height:7px;border-radius:50%;background:#4f9a6a}
.motion-btn[aria-pressed="false"] .dot{background:#9aa2ab}
/* type scale */
.site h1{font-size:clamp(44px,5.4vw,74px)!important}
.site h2{font-size:clamp(30px,3.6vw,52px)!important}
.site h3{font-size:clamp(26px,2.8vw,38px)!important}
/* hero */
.herox{align-items:flex-start}
.hero-l{flex:0 1 400px!important;width:auto!important;min-width:0}
.hero-r{flex:1 1 0!important;min-width:0}
.about-r{flex:0 1 620px;min-width:0}
.about-ri{width:auto!important}
.about-ri svg{max-width:100%;height:auto}
.grp>div{min-width:0}
.grp-stage{flex:0 1 620px!important;min-width:0}
/* scaled 3D stages (JS sets --inv / --bz and the height) */
.fit{position:relative;width:100%;overflow:auto}
.js .fit{overflow:visible}
.js .fit>*{transform-origin:0 0}
.bal{width:calc(34px * var(--bz,1))!important;height:calc(34px * var(--bz,1))!important;margin:calc(17px - 17px * var(--bz,1)) 0 0 calc(17px - 17px * var(--bz,1));font-size:calc(14px * var(--bz,1))!important}
.bal::before{content:"";position:absolute;inset:calc((34px * var(--bz,1) - 46px * var(--inv,1)) / 2);border-radius:50%}
.agleft{min-width:0;flex:1 1 auto!important}
.agleft .fit{max-width:650px}
/* JS fallback for scroll reveals (browsers without animation-timeline) */
.io .sr{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.io .srs{transform:translateY(30px) scale(.96)}
.io .sr.in{opacity:1;transform:none}
.io .trow.in .srbar{animation:shrA 1.4s cubic-bezier(.6,0,.2,1) calc(var(--i,0) * .14s) backwards}
.io .trow.ta .bar{animation:shrA 1.4s cubic-bezier(.6,0,.2,1)}.io .trow.tb .bar{animation:shrB 1.4s cubic-bezier(.6,0,.2,1)}
.still .sr,.still .srs{opacity:1!important;transform:none!important}
/* below-the-fold rendering hint */
.cvis{content-visibility:auto;contain-intrinsic-size:auto 1400px}
/* ------------------------------------------------ <= 1180 */
@media (max-width:1180px){
  .hero-l{flex-basis:340px!important}
}
/* ------------------------------------------------ <= 1024 */
@media (max-width:1024px){
  .herox,.about,.grp{flex-direction:column!important;align-items:stretch!important}
  .grp{gap:32px!important}
  .grp-stage{order:2;flex:none!important;width:100%;max-width:620px;margin:0 auto}
  .hero-l{flex:none!important;padding-top:8px!important}
  .hero-r{width:100%}
  .about-r{flex:none}
  .agrow{flex-direction:column!important;align-items:stretch!important}
  .g5:not(.gnum){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .g7{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .ctrlbar{flex-wrap:wrap}
  .ctrlbar>span{margin-left:0!important;width:100%}
}
/* ------------------------------------------------ <= 1100: compact nav */
@media (max-width:1100px){
  .menu-btn{display:inline-flex}
  .site>nav{flex-wrap:wrap;height:auto!important;min-height:64px;gap:12px!important;padding-top:10px!important;padding-bottom:10px!important}
  .site>nav>.btn{display:none!important}
  .navlinks .menu-only{display:block}
  .navlinks{display:none;order:9;width:100%;flex-direction:column;align-items:stretch;gap:2px;padding:6px 0 10px}
  .navlinks a{padding:12px 6px!important;font-size:17px!important;border-radius:8px}
  .navlinks .motion-btn{align-self:flex-start;margin-top:8px}
  nav.open .navlinks{display:flex}
  nav.open .menu-btn{background:#1d2b45;color:#fff;border-color:#1d2b45}
}
/* ------------------------------------------------ <= 768 */
@media (max-width:768px){
  .site>main>section:not(.herox){padding-top:64px!important}
  .g2{grid-template-columns:minmax(0,1fr)!important}
  .g5:not(.gnum):not(.gthumb){grid-template-columns:minmax(0,1fr)!important}
  .gnum{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .gthumb{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .g7{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .g4>div{border-left:0!important;border-top:1px solid #e3e7ec}
  .cardh{flex-wrap:wrap;padding:22px 20px!important;gap:18px!important}
  .cardh>div{flex:1 1 100%!important;min-width:0}
  .cardh>.pbtn,.cardh>button{order:0}
  .cardb{padding:22px 20px 26px!important}
  .ftree,.rtag{display:none!important}
  .cap{width:min(400px,calc(100vw - 40px))!important;left:50%!important;top:calc(10px * var(--inv,1))!important;transform-origin:50% 0;scale:var(--inv,1);translate:-50% 0}
  .thead{display:none!important}
  .trow{grid-template-columns:30px minmax(0,1fr) auto!important;row-gap:6px!important;column-gap:10px!important;padding:12px 14px!important}
  .trow>:nth-child(1){grid-row:1;grid-column:1}
  .trow>:nth-child(2){grid-row:1;grid-column:2}
  .trow>:nth-child(5){grid-row:1;grid-column:3}
  .trow>:nth-child(3){grid-row:2;grid-column:2/4}
  .trow>:nth-child(4){grid-row:3;grid-column:2/4}
  .jobrow{grid-template-columns:96px minmax(0,1fr)!important;row-gap:4px!important}
  .jobrow>span:last-child{grid-column:2}
  .pipe{flex-wrap:wrap}
  .pipe>.stg{flex:1 1 40%!important}
  .pipe>span{display:none}
  .contact-row{flex-direction:column!important;align-items:flex-start!important;padding:32px 24px!important;gap:24px!important}
  .contact-row a{font-size:15px!important;word-break:break-all}
  .foot{flex-wrap:wrap;gap:10px;padding-top:14px!important;padding-bottom:14px!important;justify-content:center!important;text-align:center}
}
/* ------------------------------------------------ <= 480 */
@media (max-width:480px){
  .g3:not(.gnum){grid-template-columns:minmax(0,1fr)!important}
  .gthumb{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .gthumb>figure:last-child{grid-column:1/3}
  .g4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .herox p,.about p{font-size:17px!important}
  .cardh h3+p{font-size:17px!important}
  .ctrlbar .cbtn{flex:1 1 45%;justify-content:center}
  .bots-row{transform:scale(.85);transform-origin:left bottom}
}

/* chips are static labels */
.chip,.chip:hover,.chip:active{scale:1!important;transform:none!important;border-color:#cdd4dd!important;background-color:#ffffff!important;cursor:default}

/* skills: 3 x 2 -> 2 cols (<=1024) -> 1 col (<=640) */
@media (max-width:1024px){.skillgrid.skillgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:640px){.skillgrid.skillgrid{grid-template-columns:minmax(0,1fr)!important}}