/* Native multi-page transitions: no router, click interception, or waiting. */
@media(prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:as-page-out 140ms ease both}
 ::view-transition-new(root){animation:as-page-in var(--motion-page) var(--ease-out) both}
 @keyframes as-page-out{to{opacity:0}}
 @keyframes as-page-in{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}
 @keyframes as-enter{from{opacity:.7;transform:translateY(16px)}to{opacity:1;transform:none}}
 @keyframes as-sheet{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
 .as-reveal{animation:as-enter var(--motion-image) var(--ease-out) both}
 dialog[open]{animation:as-sheet var(--motion-page) var(--ease-out) both}
 dialog[open]::backdrop{animation:as-page-in var(--motion-normal) ease both}
 .step:not([hidden]){animation:as-enter var(--motion-normal) var(--ease-out) both}
 .gallery-frame.is-changing img{animation:as-enter var(--motion-image) var(--ease-out) both}
 .project-card.is-updated{animation:as-enter var(--motion-normal) var(--ease-out)}
}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media(prefers-reduced-motion:reduce){button:active,a:active,.tool:hover,.choice:active{transform:none!important}}
/* Let supporting browsers retain native overlays just long enough to animate
   dismissal. close(), Escape, focus restoration and navigation remain immediate. */
@supports(transition-behavior:allow-discrete){
 @media(prefers-reduced-motion:no-preference){
  dialog{opacity:0;transform:translateY(14px);transition:opacity var(--motion-micro) ease,transform var(--motion-normal) var(--ease-out),display var(--motion-normal) allow-discrete,overlay var(--motion-normal) allow-discrete}
  dialog[open]{opacity:1;transform:none;animation:none}
  dialog::backdrop{opacity:0;transition:opacity var(--motion-normal),display var(--motion-normal) allow-discrete,overlay var(--motion-normal) allow-discrete}
  dialog[open]::backdrop{opacity:1;animation:none}
  @starting-style{dialog[open]{opacity:0;transform:translateY(14px)}dialog[open]::backdrop{opacity:0}}
 }
}