/* Expressive feedback stays local to the control under the pointer. */
.metal,.ref-scroll,.folder-summary,.ref-project,.enquiry-option,.contact-socials a,.ref-all-work,.portrait-open{--hover-x:0px;--hover-y:0px;--tilt-x:0deg;--tilt-y:0deg;transition:transform .28s cubic-bezier(.16,1,.3,1),translate .22s ease-out,box-shadow .22s ease-out,border-color .2s,color .2s,background-color .2s}
.metal{position:relative;isolation:isolate;overflow:hidden}.metal::after{content:'';position:absolute;inset:-60% auto -60% -50%;width:24%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transform:skewX(-20deg) translateX(-200%);pointer-events:none;z-index:1;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.metal:focus-visible,.ref-all-work:focus-visible,.ref-project:focus-visible,.folder-summary:focus-visible,.portrait-open:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
#navigation>a{position:relative;transition:color .18s,translate .2s}#navigation>a::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .22s ease-out}#navigation>a:focus-visible::after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){
 .metal:hover{translate:var(--hover-x) calc(var(--hover-y) - 3px);box-shadow:4px 5px 0 var(--blue);border-color:var(--blue)}.metal:hover::after{transform:skewX(-20deg) translateX(850%)}
 .ref-scroll:hover{translate:var(--hover-x) calc(var(--hover-y) - 3px);box-shadow:4px 5px 0 var(--ink);rotate:-2deg}.ref-scroll:hover span{color:var(--blue)}
 .ref-project:hover{transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-5px)}.ref-project img{transition:box-shadow .3s,border-color .25s}.ref-project:hover img{box-shadow:5px 7px 0 var(--ink);border-color:var(--ink)}.ref-project-info>span{transition:transform .25s,color .2s}.ref-project:hover .ref-project-info>span{transform:translate(3px,-3px);color:var(--blue)}
 #archive .bento-tile:nth-child(n){transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .2s;transform-origin:center}#archive .bento-tile:hover{transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-4px);box-shadow:4px 6px 0 var(--blue);z-index:3}
 .folder-summary:hover{transform:translateX(4px);background:var(--ink);color:var(--bg);box-shadow:4px 4px 0 var(--blue)}.folder-summary:hover small,.folder-summary:hover .folder-index{color:var(--bg)}.folder-summary strong,.folder-toggle{transition:transform .25s,color .2s}.folder-summary:hover strong{transform:translateX(4px);color:var(--bg)}.folder-summary:hover .folder-toggle{transform:rotate(90deg);color:#cda2ff}
 .single-contact .enquiry-option:hover,.single-contact .contact-socials a:hover{transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-4px);box-shadow:4px 5px 0 var(--ink)}
 #about .portrait-open:hover{transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-3px);box-shadow:5px 6px 0 var(--blue)}
 .ref-all-work:hover{translate:0 -2px;color:var(--blue)}#navigation>a:hover{translate:0 -2px;color:var(--blue)}#navigation>a:hover::after{transform:scaleX(1)}
 .ref-contents-links a{transition:padding .22s,color .2s,background-color .2s}.ref-contents-links a:hover{padding-left:9px;padding-right:9px;background:rgba(145,75,210,.12)}.ref-contents-links a>span:last-child{transition:transform .22s}.ref-contents-links a:hover>span:last-child{transform:translate(3px,-3px)}
}
.metal:active,.ref-scroll:active{translate:1px 2px!important;rotate:0deg;box-shadow:0 0 0 var(--ink)!important;transition-duration:.08s}.folder-summary:active,.ref-project:active,#archive .bento-tile:active{transform:scale(.985)!important;transition-duration:.08s}.project-window-bar button{transition:background .18s,color .18s,rotate .2s}.project-window-bar button:hover{background:var(--ink);color:var(--bg);rotate:5deg}.project-window-bar button:active{scale:.94}
@media(prefers-reduced-motion:reduce){.metal,.ref-scroll,.folder-summary,.ref-project,.enquiry-option,.contact-socials a,.ref-all-work,.portrait-open,#archive .bento-tile:nth-child(n),#navigation>a,.ref-contents-links a{transition:none!important;transform:none!important;translate:none!important;rotate:none!important}.metal::after{display:none}.ref-project-info>span,.folder-summary strong,.folder-toggle,#navigation>a::after,.ref-contents-links a>span:last-child{transition:none!important;transform:none!important}}