/* Motion is progressive enhancement: content stays visible without JavaScript. */
.hero-line{display:inline-block}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
 .project .project-image>img,.archive-card .archive-image>img{transition:transform 480ms cubic-bezier(.2,.65,.25,1)}
 .project:hover .project-image>img,.project:focus-visible .project-image>img,.archive-card:hover .archive-image>img,.archive-card:focus-visible .archive-image>img{transform:scale(1.025)}
 .project .project-open{transition:transform 280ms cubic-bezier(.2,.65,.25,1)}
 .project:hover .project-open,.project:focus-visible .project-open{transform:translate(2px,-2px)}
 .archive-caption .icon-arrow-up-right{transition:transform 220ms ease}
 .archive-card:hover .archive-caption .icon-arrow-up-right,.archive-card:focus-visible .archive-caption .icon-arrow-up-right{transform:translate(3px,-3px)}
}
@media(prefers-reduced-motion:reduce){.project:hover img,.project:hover .project-image>img,.project:hover .project-open,.archive-card:hover img{transform:none!important}}
@media print{.hero-line{opacity:1!important;transform:none!important}}
@media(hover:none),(pointer:coarse){.project:hover img,.project:hover .project-image>img,.project:hover .project-open,.archive-card:hover img{transform:none!important}}

/* Two faces share one accessible link label; only desktop pointers animate. */
.site-header nav .nav-flip{position:relative;display:inline-grid;vertical-align:middle;overflow:hidden;perspective:400px;font:inherit;margin:0;line-height:1.5}
.site-header nav .nav-flip-face{grid-area:1/1;display:inline-block;font:inherit;margin:0;backface-visibility:hidden;transform-origin:center center}
.site-header nav .nav-flip-back{visibility:hidden}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
 .site-header nav .nav-flip-face{transition:transform 320ms cubic-bezier(.2,.65,.25,1),opacity 320ms ease}
 .site-header nav .nav-flip-back{visibility:visible;transform:translateY(100%) rotateX(-80deg);opacity:0}
 .site-header nav a:hover .nav-flip-face:first-child{transform:translateY(-100%) rotateX(80deg);opacity:0}
 .site-header nav a:hover .nav-flip-back{transform:translateY(0) rotateX(0);opacity:1}
}