@keyframes panelEntry{from{clip-path:inset(0 0 100%);translate:0 30px}to{clip-path:inset(-10%);translate:0 0}}
@keyframes titleEntry{from{clip-path:inset(0 100% 0 0);translate:-20px 0}to{clip-path:inset(-10%);translate:0 0}}
@keyframes portraitEntry{from{clip-path:inset(46% 0 round 180px);scale:.92}to{clip-path:inset(0 round 180px 180px 20px 20px);scale:1}}
@keyframes lineFlow{from{stroke-dashoffset:340}to{stroke-dashoffset:0}}
@keyframes packet{0%{left:0;opacity:0}20%,80%{opacity:1}100%{left:calc(100% - 5px);opacity:0}}
@keyframes packetDown{0%{translate:0 0;opacity:0}20%,80%{opacity:1}100%{translate:0 30px;opacity:0}}
@keyframes floatNote{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes dialogEntry{from{clip-path:inset(48% 0);translate:0 15px}to{clip-path:inset(0);translate:0 0}}
.reveal{opacity:1;transform:none;filter:none}.motion-ready .reveal.revealed{animation:panelEntry .8s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) backwards}.motion-ready .section-heading.revealed{animation:titleEntry .8s cubic-bezier(.16,1,.3,1) backwards}.hero-title{animation:titleEntry 1.1s cubic-bezier(.16,1,.3,1) backwards}.hero-system{transform:perspective(1200px) rotateX(var(--hero-tilt-x,0deg)) rotateY(var(--hero-tilt-y,0deg));transition:transform .3s ease-out}.hero-system.reveal.revealed{animation:none}.system-frame{animation:portraitEntry 1.2s cubic-bezier(.16,1,.3,1) .1s backwards}.system-card{animation:floatNote 7s ease-in-out infinite}.card-infra{animation-delay:-3s}.scan-line{display:none}.topology-link::after{animation:packet 3.5s linear infinite}.system-lines .lines-flow path{animation:lineFlow 5s linear infinite}.section::after{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--accent);transform:scaleX(var(--section-progress,0));transform-origin:left;opacity:.35}.scroll-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:1200;pointer-events:none}.scroll-progress span{display:block;width:100%;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}.modal-overlay.open .modal,.palette.open .palette-box,.terminal.open .terminal-box{animation:dialogEntry .35s var(--ease) backwards}.mobile-menu.open .mobile-menu-link{animation:titleEntry .5s var(--ease) backwards}.project-image img{transition:filter .25s}.service-card,.skill-card,.capability-card,.github-repo{transition:translate .25s,border-color .25s,box-shadow .25s}.btn svg,.project-action svg{transition:translate .25s}.btn:hover svg,.project-action:hover svg{translate:3px 0}
@media(hover:hover){.service-card:hover,.skill-card:hover,.capability-card:hover,.github-repo:hover{translate:0 -4px;border-color:var(--accent);box-shadow:0 10px 28px rgba(var(--accent-rgb),.05)}}
@media(max-width:860px){.hero-system{transform:none}.topology-link::after{left:-2px;top:0;animation:packetDown 3.5s linear infinite}.system-lines .lines-flow path{filter:none!important}}
.motion-ready main>section:not(.in-view) *,.motion-ready main>section:not(.in-view) *::before,.motion-ready main>section:not(.in-view) *::after,.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
html.motion-lite *,html.motion-lite *::before,html.motion-lite *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html.motion-lite .hero-system{transform:none}html.motion-lite .section::after,html.motion-lite .lines-flow,html.motion-lite .topology-link::after{display:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-system{transform:none}.section::after,.lines-flow,.topology-link::after{display:none}}

/* Branded system handshake shown only while JavaScript controls its exit. */
@keyframes bootGrid{to{background-position:64px 64px}}
@keyframes bootSweep{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
@keyframes bootMeter{0%{transform:scaleX(0)}35%{transform:scaleX(.18)}70%{transform:scaleX(.72)}100%{transform:scaleX(1)}}
@keyframes bootMark{0%{clip-path:inset(50%);transform:scale(.75) rotate(-8deg)}100%{clip-path:inset(0);transform:scale(1) rotate(0)}}
@keyframes bootCopy{from{clip-path:inset(0 100% 0 0);transform:translateX(-15px)}to{clip-path:inset(0);transform:none}}
@keyframes bootExit{to{opacity:0;visibility:hidden;transform:scale(1.025);filter:blur(8px)}}
.boot-sequence{display:none}.js .boot-sequence{position:fixed;z-index:6000;inset:0;display:grid;place-content:center;overflow:hidden;padding:32px;background:#080c13;color:#f2f5fa;isolation:isolate}.js .boot-sequence::before{content:"";position:absolute;inset:-80px;background-image:linear-gradient(rgba(128,202,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(128,202,255,.055) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(circle,#000 8%,transparent 65%);animation:bootGrid 3s linear infinite}.js .boot-sequence::after{content:"";position:absolute;left:-35%;top:50%;width:55%;height:1px;background:linear-gradient(90deg,transparent,#80caff,transparent);box-shadow:0 0 28px rgba(128,202,255,.8);animation:bootSweep 1.3s cubic-bezier(.7,0,.3,1) infinite}.boot-sequence.is-complete{animation:bootExit .65s cubic-bezier(.7,0,.2,1) forwards;pointer-events:none}.boot-field{position:absolute;inset:22px;pointer-events:none}.boot-field i{position:absolute;width:28px;height:28px;border-color:rgba(128,202,255,.42);border-style:solid}.boot-field i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.boot-field i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}.boot-field i:nth-child(3){right:0;bottom:0;border-width:0 1px 1px 0}.boot-field i:nth-child(4){left:0;bottom:0;border-width:0 0 1px 1px}.boot-wordmark{position:relative;z-index:2;display:flex;align-items:center;gap:20px}.boot-mark{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:#80caff;color:#080c13;font:800 1.15rem var(--mono);box-shadow:0 0 60px rgba(128,202,255,.2);animation:bootMark .7s cubic-bezier(.16,1,.3,1) backwards}.boot-wordmark p{display:grid;gap:6px;animation:bootCopy .75s cubic-bezier(.16,1,.3,1) .18s backwards}.boot-wordmark strong{font:700 1.05rem var(--font);letter-spacing:.04em}.boot-wordmark small{color:#98a8bd;font:500 .625rem var(--mono);letter-spacing:.16em}.boot-readout{position:relative;z-index:2;display:flex;justify-content:space-between;gap:40px;margin-top:38px;color:#98a8bd;font:500 .625rem var(--mono);letter-spacing:.12em}.boot-readout b{color:#80caff;font-weight:500}.boot-meter{position:relative;z-index:2;width:min(520px,78vw);height:2px;margin-top:14px;background:rgba(255,255,255,.1);overflow:hidden}.boot-meter span{display:block;width:100%;height:100%;transform-origin:left;background:linear-gradient(90deg,#80caff,#a4b9ff);box-shadow:0 0 16px #80caff;animation:bootMeter 1.15s cubic-bezier(.65,0,.2,1) forwards}.boot-count{position:relative;z-index:2;display:flex;justify-content:space-between;margin-top:10px;color:#64748a;font:500 .55rem var(--mono)}body.is-booting{overflow:hidden}
.motion-lite .boot-sequence{display:none}.motion-lite body.is-booting,html.motion-lite body.is-booting{overflow:auto}
@media(max-width:620px){.js .boot-sequence{padding:22px}.boot-wordmark{gap:14px}.boot-mark{width:60px;height:60px}.boot-wordmark strong{font-size:.875rem}.boot-readout{gap:18px;font-size:.52rem}.boot-readout span{display:none}.boot-field{inset:14px}}
@media(prefers-reduced-motion:reduce){.boot-sequence{display:none!important}body.is-booting{overflow:auto}}
/* Section-specific choreography; only decorative lab signals loop. */
@keyframes timelineEntry{from{clip-path:inset(0 100% 0 0);translate:18px 0}to{clip-path:inset(-5%);translate:0 0}}
@keyframes cardEntry{from{transform:perspective(1100px) rotateX(7deg);clip-path:inset(0 0 15%)}to{transform:perspective(1100px) rotateX(0);clip-path:inset(-5%)}}
@keyframes imageEntry{from{clip-path:inset(8% 8%);scale:.97}to{clip-path:inset(0);scale:1}}
@keyframes fieldEntry{from{translate:0 12px}to{translate:0 0}}
.motion-ready .timeline article.revealed{animation-name:timelineEntry}
.motion-ready .service-card.revealed,.motion-ready .achievements-grid>.revealed{animation-name:cardEntry;transform-origin:center bottom}
.motion-ready .about-photo.revealed,.motion-ready .case-cover.revealed{animation-name:imageEntry}
.motion-ready .contact-form.revealed .form-group{animation:fieldEntry .65s var(--ease) backwards}
.motion-ready .contact-form.revealed>.form-group:nth-child(2){animation-delay:80ms}.motion-ready .contact-form.revealed>.form-group:nth-child(3){animation-delay:160ms}
.section-disclosure[open]>.supporting-section{animation:panelEntry .45s var(--ease) backwards}
.section-disclosure>summary span{transition:rotate .25s}.mobile-menu.open .mobile-menu-link{animation-delay:var(--menu-delay,0ms)}
.modal-overlay.open .case-study-dialog{animation:dialogEntry .35s var(--ease) backwards}
.contact-links>a svg{transition:translate .25s}.contact-links>a:hover svg{translate:3px -2px}
.form-input,.form-textarea{transition:border-color .2s,box-shadow .2s}.form-input:focus,.form-textarea:focus{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1)}
html.motion-lite .node-inspector{clip-path:none!important;translate:none!important}
@media(prefers-reduced-motion:reduce){.node-inspector{clip-path:none!important;translate:none!important}}
html:not(.js) body.is-booting{overflow:auto}