/* Motion follows individual visible cards, including long project sections. */
@media(prefers-reduced-motion:no-preference){
 .screens-ready #projects.is-in-view .has-preview{animation:none}
 .project-card{position:relative;overflow:hidden}
 .project-card.motion-enter .project-preview{animation:preview-unfold .95s cubic-bezier(.16,1,.3,1) both}
 .project-card.motion-enter .project-preview img{animation:preview-focus 1.25s cubic-bezier(.16,1,.3,1) backwards}
 .project-card.motion-enter .project-content h3{animation:content-rise .8s .12s cubic-bezier(.16,1,.3,1) both}
 .project-card.motion-enter .project-content>p{animation:content-rise .85s .21s cubic-bezier(.16,1,.3,1) both}
 .project-card.motion-enter .project-meta{animation:content-rise .85s .3s cubic-bezier(.16,1,.3,1) both}
 .project-card.motion-enter .project-content .tags{animation:content-rise .8s .38s cubic-bezier(.16,1,.3,1) both}
 .project-card.motion-enter::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 20%,#ffffff07 48%,transparent 76%);animation:card-pass 1.2s ease-out both}
 .screens-ready #overview.is-in-view h1{animation:title-uncover 1s .08s cubic-bezier(.16,1,.3,1) both}
 .screens-ready #overview.is-in-view .affiliations{animation:none}
 .affiliations.motion-enter .affiliation{animation:brand-land .85s cubic-bezier(.16,1,.3,1) both}
 .affiliations.motion-enter .affiliation:nth-child(2){animation-delay:.1s}
 .affiliations.motion-enter .affiliation:nth-child(3){animation-delay:.2s}
 .education-card.motion-enter .education-row>.company-icon{animation:brand-land .8s cubic-bezier(.16,1,.3,1) both}
 .education-card.motion-enter .education-row>div{animation:content-rise .85s .12s cubic-bezier(.16,1,.3,1) both}
 .education-card.motion-enter .education-row:nth-child(2)>*{animation-delay:.2s}
 .education-card.motion-enter .education-row:nth-child(3)>*{animation-delay:.32s}
 .screens-ready .experience-stage.is-present .proof strong{animation:metric-pop .95s .45s cubic-bezier(.16,1,.3,1) both}
 .screens-ready .experience-stage.is-present .contribution::before{animation:dot-arrive .6s .55s cubic-bezier(.16,1,.3,1) both}
 .screens-ready .experience-stage.is-present .contribution:nth-child(2)::before{animation-delay:.7s}
 .screens-ready .experience-stage.is-present .contribution:nth-child(3)::before{animation-delay:.85s}
 .project-preview img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
 .project-preview:hover img{transform:scale(1.055)}
 .affiliation .brand-tile{transition:transform .5s cubic-bezier(.2,1.5,.4,1)}
 .affiliation:hover .brand-tile{transform:translateY(-4px) rotate(-7deg) scale(1.08)}
 .work-screen .experience-head:hover .company-icon img{transform:rotate(-6deg) scale(1.07)}
 .work-screen .company-icon img{transition:transform .45s cubic-bezier(.2,1.5,.4,1)}
 .project-preview:active,.affiliation:active{transform:scale(.98)}
 #project-viewer[open] .viewer-stage img{animation:preview-focus .6s cubic-bezier(.16,1,.3,1)}
}
@keyframes preview-unfold{from{clip-path:inset(0 0 100% 0 round 6px);opacity:.4}to{clip-path:inset(0 round 6px);opacity:1}}
@keyframes preview-focus{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes content-rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes title-uncover{from{clip-path:inset(0 0 100%);transform:translateY(26px);opacity:.2}to{clip-path:inset(0);transform:none;opacity:1}}
@keyframes brand-land{from{opacity:0;transform:translateY(38px) rotate(-3deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes metric-pop{from{opacity:0;transform:translateY(18px) scale(.84);transform-origin:left bottom}to{opacity:1;transform:none}}
@keyframes dot-arrive{from{transform:scale(0)}60%{transform:scale(1.5)}to{transform:scale(1)}}
@keyframes card-pass{0%{opacity:0;transform:translateX(-100%)}30%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
.motion-paused .motion-enter *,.motion-paused #overview h1,.motion-paused #project-viewer .viewer-stage img{animation:none!important;clip-path:none!important}
.motion-paused .motion-enter::after{animation:none!important;opacity:0!important}
.motion-paused .experience-card img,.motion-paused .affiliation .brand-tile,.motion-paused .project-preview img{transition:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.motion-enter *{animation:none!important}.project-preview:hover img,.affiliation:hover .brand-tile{transform:none}}

.motion-paused .contribution::before{animation:none!important;transform:none!important}