/* Motion changes presentation only; every control remains usable throughout. */
:root{--motion-ease:cubic-bezier(.22,.61,.36,1)}
.hero-line,.hero-prose{display:inline-block;max-width:100%;vertical-align:top}
.page-tab-indicator{display:none}
.metric-counting{position:relative}
.metric-final{opacity:0}
.metric-count{position:absolute;inset-inline:0;top:0;pointer-events:none;user-select:none}

@supports selector(:has(*)){
 body>header.portfolio-header .page-tabs{position:relative}
 body>header.portfolio-header .page-tabs>a[aria-current="page"]{border-bottom-color:transparent}
 .page-tab-indicator{display:block;position:absolute;inset-inline-start:0;bottom:0;width:50%;height:2px;background:var(--ink);pointer-events:none}
 .page-tabs:has(.nav-story[aria-current="page"]) .page-tab-indicator{transform:translateX(100%)}
 html[dir=rtl] .page-tabs:has(.nav-story[aria-current="page"]) .page-tab-indicator{transform:translateX(-100%)}
}

@media(prefers-reduced-motion:no-preference){
 @keyframes hero-entrance{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
 }
 .hero-enter{animation:hero-entrance 1s var(--motion-ease) backwards}
 [data-hero-part=statement].hero-enter{animation-delay:.3s}
 [data-hero-part=description].hero-enter{animation-delay:.6s}
 [data-hero-part=location].hero-enter{animation-delay:.8s}
 [data-hero-part=resume].hero-enter{animation-delay:1s}

 @keyframes quiet-reveal{
  from{opacity:.6;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
 }
 @keyframes screenshot-reveal{
  from{opacity:.5;transform:scale(.985)}
  to{opacity:1;transform:scale(1)}
 }
 @keyframes metric-reveal{
  from{opacity:.5;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
 }
 .motion-reveal-in{animation:quiet-reveal .5s var(--motion-ease) var(--reveal-delay,0ms) backwards}
 .motion-reveal-in[data-motion-kind=shot]{animation-name:screenshot-reveal;animation-duration:.55s}
 .motion-reveal-in[data-motion-kind=metric]{animation-name:metric-reveal;animation-duration:.45s}
 .hero:focus-within .hero-enter,.motion-reveal-in:focus-within{animation:none}

 .page-tabs>a,.header-actions>a,.header-actions>button,.header-actions>.language-control,
 .hero a,#contact a,.featured-project summary{
  transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
 }
 .page-tab-indicator{transition:transform .28s var(--motion-ease)}

 /* Native cross-document transitions never intercept or postpone link clicks. */
 @view-transition{navigation:auto}
 :root{view-transition-name:none}
 main{view-transition-name:portfolio-content}
 .page-tab-indicator{view-transition-name:portfolio-underline}
 @keyframes page-fade-out{to{opacity:0}}
 @keyframes page-fade-in{from{opacity:0}}
 ::view-transition-old(portfolio-content){animation:page-fade-out .12s ease both}
 ::view-transition-new(portfolio-content){animation:page-fade-in .18s ease both}
 ::view-transition-group(portfolio-underline){animation-duration:.28s;animation-timing-function:var(--motion-ease)}
 ::view-transition-old(portfolio-underline),::view-transition-new(portfolio-underline){animation:none;mix-blend-mode:normal}
 ::view-transition{pointer-events:none}
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .featured-project .project-disclosure-label{transition:color .18s ease}
 .featured-project .project-overview:hover,.hero .resume-link:hover,#contact .socials a:hover{background:var(--panel)}
 #contact .email:hover{border-bottom-color:var(--ink)}
 .featured-project .project-shot{transition:transform .3s var(--motion-ease),box-shadow .3s ease}
 .featured-project .project-shot:hover{transform:translateY(-2px)}
 .featured-project .project-shot img{transition:transform .4s var(--motion-ease)}
 .featured-project .project-shot:hover img{transform:scale(1.015)}
}

@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .hero-enter,.motion-reveal-in{animation:none!important;transform:none!important;opacity:1!important}
}