.focus-heading{filter:blur(var(--heading-blur,0px));transition:filter .55s cubic-bezier(.16,1,.3,1)}

@media(prefers-reduced-motion:reduce){.focus-heading,.focus-heading:hover{filter:none!important;transition:none!important}}

/* Project names come into focus only while selected. */
.project h3{transition:transform .7s var(--motion-ease),filter .45s ease}
@media(hover:hover) and (pointer:fine){
 .project h3{filter:blur(2.5px)}
 .project:hover h3,.project:focus-visible h3{filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){.project h3{transition:none}}

.project p{transition:filter .45s ease}
@media(hover:hover) and (pointer:fine){.project p{filter:blur(2.5px)}.project:hover p,.project:focus-visible p{filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.project p{transition:none}}

@media(hover:none),(pointer:coarse){
.project h3,.project p{filter:blur(2.5px)}
.project.is-current h3,.project.is-current p,.project:focus-visible h3,.project:focus-visible p{filter:none}
.project.is-current:before{transform:scaleY(1)}
}
@media(prefers-reduced-motion:reduce){.project h3,.project p{filter:none!important}}

/* Blur the shared text container so title and subtitle always match on touch. */
@media(hover:none),(pointer:coarse),(max-width:700px){
.project>div{filter:blur(2.5px);transition:filter .45s ease}
.project h3,.project p{filter:none!important}
.project.is-current>div{filter:none}
}
@media(prefers-reduced-motion:reduce){.project>div{transition:none}}

@media(hover:none),(pointer:coarse),(max-width:700px){.project>div{filter:none!important}.project:not(.is-current) h3,.project:not(.is-current) p,.project:not(.is-current) .destination{filter:blur(3px)!important}.project.is-current h3,.project.is-current p,.project.is-current .destination{filter:none!important}}