/* Optional micro-interactions. No entrance or continuous animation. */
.project-image{overflow:hidden}
.project-image .image-address{position:relative;z-index:1}
@media(prefers-reduced-motion:no-preference){
 .button{transition:transform 100ms ease-out,box-shadow 100ms ease-out}
 .button:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #fff}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .portrait,.side-note,.personal-note,.project-note{transition:transform 220ms ease-out,box-shadow 220ms ease-out}
 .portrait:hover{transform:rotate(-1deg) translateY(-3px);box-shadow:12px 14px 0 #07031588}
 .side-note:hover,.personal-note:hover,.project-note:hover{transform:rotate(0deg) translateY(-2px);box-shadow:7px 8px 0 var(--pink)}
 .project-image img{transition:transform 260ms ease-out}
 .project-image:hover img{transform:scale(1.025)}
}
@media(prefers-reduced-motion:reduce){
 .button,.portrait,.side-note,.personal-note,.project-note,.project-image img{transition:none!important;animation:none!important}
 .button:active{transform:none;box-shadow:5px 5px 0 #fff}
}