/* Progressive motion for the accepted portfolio layout. Identity-led choreography; no content depends on it. */
.personal-hero.motion-hero{position:relative;isolation:isolate;overflow:clip}
.motion-hero>.hero-identity,.motion-hero>.credential-panel{position:relative;z-index:1}
.motion-hero-ambient{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:paint}
.motion-ambient-wash{position:absolute;inset:-12% -9% -20% 39%;background:radial-gradient(ellipse at 60% 40%,#a5beff45,transparent 62%),radial-gradient(ellipse at 85% 95%,#f7dcb033,transparent 50%);opacity:.68;transform-origin:70% 50%}
.motion-hero-circuit{position:absolute;width:73%;height:100%;right:-1%;top:0;overflow:visible}
.motion-circuit-track{stroke:#527ff0;stroke-opacity:.24;stroke-width:1.2;fill:none;vector-effect:non-scaling-stroke}
.motion-circuit-packet{stroke:#4c79ed;stroke-opacity:.88;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:70 930;fill:none;vector-effect:non-scaling-stroke}
.motion-circuit-packet.warm{stroke:#dda04f;stroke-opacity:.7}
.motion-circuit-node{fill:#7a9ced;opacity:.45}
.motion-circuit-node.warm{fill:#e4b16b}
.motion-hero .name-dot{display:inline-block;transform-origin:50% 78%}
.motion-hero .credential-panel{isolation:isolate}
.motion-panel-halo{position:absolute;inset:-1px;border-radius:inherit;overflow:hidden;padding:1.4px;pointer-events:none;z-index:2;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor}
.motion-panel-halo>span{position:absolute;inset:-80%;background:conic-gradient(from 30deg,transparent 0deg,transparent 220deg,#96b2fb9c 254deg,#557ef1d9 279deg,#e1b66bb3 294deg,transparent 321deg,transparent 360deg)}
html[data-motion-scene=active] .motion-ambient-wash{animation:nqk-ambient-breathe 7s ease-in-out infinite alternate}
html[data-motion-scene=active] .motion-circuit-packet{animation:nqk-signal-travel 5.8s linear infinite;animation-delay:var(--signal-delay,0s)}
html[data-motion-scene=active] .motion-circuit-node{animation:nqk-node-breathe 2.8s ease-in-out infinite;animation-delay:var(--signal-delay,0s)}
html[data-motion-scene=active] .motion-panel-halo>span{animation:nqk-border-orbit 5.8s linear infinite}
html[data-motion-scene=active] .motion-hero .credential-badge img{animation:nqk-badge-float 4.4s ease-in-out infinite;animation-delay:calc(var(--card-order,0)*-1.6s)}
html[data-motion-scene=active] .motion-hero .name-dot{animation:nqk-name-dot 4.8s ease-in-out infinite}
.motion-hero:not(.motion-scene-visible) .motion-hero-ambient *,
.motion-hero:not(.motion-scene-visible) .motion-panel-halo>span,
.motion-hero:not(.motion-scene-visible) .credential-badge img,
.motion-hero:not(.motion-scene-visible) .name-dot{animation-play-state:paused!important}

/* Content is visible by default. Only a successful observer arms these entries. */
html[data-motion=on] .motion-entry{transition:opacity .8s var(--ease),translate .8s var(--ease),box-shadow .3s,border-color .3s;transition-delay:var(--motion-entry-delay,0ms),var(--motion-entry-delay,0ms),0ms,0ms}
html[data-motion=on] .motion-entry:not(.motion-entered){opacity:0;translate:0 32px}
.motion-entry.motion-entered{opacity:1;translate:none}
.motion-entry:focus-within{opacity:1!important;translate:none!important}

/* Use individual translate so v4's existing hover transforms remain intact. */
.motion-preview .workspace-window{translate:var(--motion-preview-x,0px) var(--motion-preview-y,0px);transition:transform .65s var(--ease),translate .45s var(--ease)}
.motion-preview .recovery-diagram,.motion-preview .automation-diagram{translate:var(--motion-preview-x,0px) var(--motion-preview-y,0px);transition:translate .45s var(--ease)}
.motion-preview:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--motion-light-x,50%) var(--motion-light-y,50%),#ffffff16,transparent 55%);opacity:0;transition:opacity .4s;z-index:0}
.motion-preview:hover:after{opacity:1}
.motion-magnetic{translate:var(--motion-magnet-x,0px) var(--motion-magnet-y,0px);transition:background .25s,box-shadow .3s,transform .3s var(--ease),translate .28s var(--ease),scale .16s}
.motion-magnetic:active{scale:.975}
html[data-motion-scene=active] .motion-magnetic:hover>.icon,
html[data-motion-scene=active] .motion-magnetic:focus-visible>.icon{animation:nqk-action-nudge .5s var(--ease)}

/* Illustrative reading focus; this does not represent a live process or metric. */
.case-flow>li{position:relative;overflow:hidden;transition:background .4s,border-color .4s,box-shadow .4s}
.case-flow>li.motion-flow-current{background:#edf3ff;border-color:#9eb8f1;box-shadow:0 4px 13px #315bf40a;color:#315486}
.case-flow>li.motion-flow-current:before{color:#315bf4}
.case-flow>li.motion-flow-current:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#315bf4,#82a7ff);transform-origin:left;animation:nqk-flow-progress 2.1s linear both;pointer-events:none}

@keyframes nqk-ambient-breathe{from{opacity:.5;transform:translate3d(-16px,8px,0) scale(.96)}to{opacity:.85;transform:translate3d(22px,-14px,0) scale(1.04)}}
@keyframes nqk-signal-travel{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes nqk-node-breathe{0%,100%{opacity:.24}50%{opacity:.75}}
@keyframes nqk-border-orbit{to{transform:rotate(360deg)}}
@keyframes nqk-badge-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes nqk-name-dot{0%,78%,100%{translate:0 0}85%{translate:0 -5px}92%{translate:0 0}}
@keyframes nqk-action-nudge{0%,100%{translate:0 0}45%{translate:2px -2px}}
@keyframes nqk-flow-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:1050px){.motion-hero-circuit{width:100%;right:-14%;opacity:.8}.motion-ambient-wash{left:20%;opacity:.5}}
@media(max-width:600px){.motion-hero-circuit{width:145%;right:-50%;opacity:.55}.motion-ambient-wash{inset:-10% -35% 0 5%}.motion-panel-halo{padding:1.1px}}

/* Motion controls stay accessible from the first screen. */
.header-motion-toggle{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:7px 9px;border:1px solid #dce4f0;border-radius:8px;background:#f6f8fd;color:#314d7c;font-family:inherit;font-size:11px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s}
.header-motion-toggle:hover{background:#edf2ff;border-color:#a6bbee}
.header-motion-toggle[aria-pressed=false]{color:#6d7b90;background:transparent}
.header-motion-toggle:disabled{cursor:default;opacity:.65}
.motion-bars{display:flex;align-items:center;justify-content:center;gap:3px;width:15px;height:17px}
.motion-bars i{display:block;width:3px;height:6px;border-radius:2px;background:currentColor;transform-origin:center}
.motion-bars i:nth-child(2){height:14px}.motion-bars i:nth-child(3){height:10px}
html[data-motion-scene=active] .header-motion-toggle[aria-pressed=true] .motion-bars i{animation:nqk-motion-bars 1.4s ease-in-out infinite alternate}
html[data-motion-scene=active] .motion-bars i:nth-child(2){animation-delay:-.8s!important}
html[data-motion-scene=active] .motion-bars i:nth-child(3){animation-delay:-.4s!important}
.header-motion-toggle[aria-pressed=false] .motion-bars i{height:3px}

/* Short, legible accent movement supports the introduction and credentials. */
.hero-greeting{display:flex;align-items:center;gap:9px}
.hero-greeting:before{content:'';width:22px;height:2px;background:#4269ed;transform-origin:left}
html[data-motion-scene=active] .motion-scene-visible .hero-greeting:before{animation:nqk-greeting-line 3.6s ease-in-out infinite}
.motion-hero .hero-role-secondary{position:relative}
.motion-hero .credential{position:relative;overflow:hidden}
.motion-hero .credential:after{content:'';position:absolute;inset:-50% -90%;background:linear-gradient(110deg,transparent 43%,#719aff1c 48%,#fff9 50%,transparent 57%);translate:-45% 0;opacity:0;pointer-events:none}
html[data-motion-scene=active] .motion-scene-visible .credential:after{animation:nqk-credential-sweep 6s ease-in-out infinite;animation-delay:calc(var(--card-order,0)*.38s)}
.hero-ctas .button-primary{position:relative;overflow:hidden;isolation:isolate}
.hero-ctas .button-primary:before{content:'';position:absolute;inset:-60%;z-index:-1;background:linear-gradient(110deg,transparent 43%,#ffffff30 50%,transparent 57%);translate:-65% 0;pointer-events:none}
html[data-motion-scene=active] .motion-scene-visible .hero-ctas .button-primary:before{animation:nqk-cta-sweep 4.8s ease-in-out infinite}
.motion-hero .name-line{will-change:auto}

/* Scroll entrances and responsive surfaces; text remains the visual priority. */
.motion-spotlight{position:relative;isolation:isolate}
.motion-spotlight:after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(240px circle at var(--motion-light-x,50%) var(--motion-light-y,50%),#4676ff0e,transparent 75%);transition:opacity .25s}
.motion-spotlight:hover:after,.motion-spotlight:focus-within:after{opacity:1}
.business-card{overflow:hidden;transition:box-shadow .3s,border-color .3s,translate .45s var(--ease)}
.business-card:before{content:'';position:absolute;left:20%;right:20%;top:0;height:2px;background:linear-gradient(90deg,transparent,#6d91f2,#dfb477,transparent);transform:translateX(-160%);opacity:0;pointer-events:none}
html[data-motion-scene=active] .business-card.motion-card-in-view:before{animation:nqk-card-trace 5s ease-in-out infinite;animation-delay:var(--motion-entry-delay,0ms)}
html[data-motion-scene=active] .business-card.motion-entered:hover{translate:0 -6px;border-color:#b4c7ef;box-shadow:0 14px 35px #213d6810}
.business-card-icon{transition:rotate .45s var(--ease),background .3s,box-shadow .3s}
html[data-motion-scene=active] .business-card:hover .business-card-icon{rotate:-8deg;background:#e4ecff;box-shadow:0 0 0 5px #edf2ff}
html[data-motion=on] .section-heading.motion-entry:not(.motion-entered),html[data-motion=on] .business-heading.motion-entry:not(.motion-entered){translate:0 40px}
html[data-motion=on] .project-card.motion-entry:not(.motion-entered),html[data-motion=on] .current-card.motion-entry:not(.motion-entered){translate:0 44px}
.section-index{position:relative}
.section-index:after{content:'';display:block;position:absolute;left:0;right:4px;bottom:-5px;height:1px;background:currentColor;transform-origin:left;scale:0 1;transition:scale .9s var(--ease)}
.motion-entered .section-index:after{scale:1 1}
.hero-system:not(.system-playing) .system-art *,html[data-motion-scene=rest] .system-art *{animation-play-state:paused!important}

@keyframes nqk-motion-bars{to{scale:1 .4}}
@keyframes nqk-greeting-line{0%,100%{scale:1 1;opacity:.8}50%{scale:.55 1;opacity:.4}}
@keyframes nqk-credential-sweep{0%,13%{translate:-45% 0;opacity:0}19%{opacity:1}38%{translate:45% 0;opacity:0}100%{translate:45% 0;opacity:0}}
@keyframes nqk-cta-sweep{0%,12%{translate:-65% 0}40%,100%{translate:65% 0}}
@keyframes nqk-card-trace{0%,8%{transform:translateX(-160%);opacity:0}20%{opacity:.9}60%{transform:translateX(160%);opacity:0}100%{transform:translateX(160%);opacity:0}}
@media(max-width:1180px){#header-motion-label{display:none}.header-motion-toggle{width:33px;padding:7px;justify-content:center}}
@media(max-width:600px){.site-header{gap:12px}.header-actions{gap:10px}.header-motion-toggle{min-height:33px}.hero-greeting:before{width:15px}.business-card:before{left:10%;right:10%}}
@media(max-width:420px){.site-header .header-contact{display:none}}

/* A temporary pause preserves unvisited entrances; an explicit off reveals everything. */
html[data-motion-scene=rest] main *,html[data-motion-scene=rest] main *:before,html[data-motion-scene=rest] main *:after,html[data-motion-scene=rest] .motion-bars i{animation-play-state:paused!important;transition:none!important}
html[data-motion=off] .motion-entry{opacity:1!important;translate:none!important;transform:none!important}
html[data-motion=off] .motion-magnetic,html[data-motion-scene=rest] .motion-magnetic,
html[data-motion=off] .motion-preview .workspace-window,html[data-motion-scene=rest] .motion-preview .workspace-window,
html[data-motion=off] .motion-preview .recovery-diagram,html[data-motion-scene=rest] .motion-preview .recovery-diagram,
html[data-motion=off] .motion-preview .automation-diagram,html[data-motion-scene=rest] .motion-preview .automation-diagram{translate:none!important;scale:none!important}
html[data-motion=off] .credential,html[data-motion-scene=rest] .credential,html[data-motion-scene=rest] .system-art{transform:none!important}
html[data-motion=off] .motion-panel-halo,html[data-motion=off] .credential:after{opacity:0}
html[data-motion=off] .business-card,html[data-motion=off] .project-card{translate:none!important}
@media(prefers-reduced-motion:reduce){
  .motion-entry{opacity:1!important;translate:none!important;transform:none!important}
  .motion-magnetic,.motion-preview .workspace-window,.motion-preview .recovery-diagram,.motion-preview .automation-diagram,.motion-hero .credential-badge img,.motion-hero .name-dot{translate:none!important;scale:none!important}
  .motion-panel-halo{display:none}
  .business-card,.project-card{translate:none!important}
}