/* Motion follows the site's framed layout: short travel, soft settles, no layout shifts. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-fast:180ms;--motion-settle:360ms}
/* One page-level fade works on all browsers, including cross-origin navigation.
   The navigation stays steady; text has no independent stagger or translation. */
main{animation:page-arrive 650ms var(--motion-ease) both}
@keyframes page-arrive{from{opacity:.001}to{opacity:1}}
body,.navigation,.section-box,.project,.portrait-dialogue,.pick-preview,.music-preview,.portrait-pick,.watching-navigation button,.portrait-close{transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease}
.nav-links a{position:relative;transition:background-color var(--motion-fast),color var(--motion-fast)}
.theme-toggle{transition:background-color var(--motion-fast),color var(--motion-fast),scale var(--motion-fast)}
.theme-toggle:active,.portrait-close:active,.watching-navigation button:active,.pick-link:active{scale:.94}
.portrait-close,.watching-navigation button,.pick-link{transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),scale var(--motion-fast)}
.portrait-close svg,.watching-navigation svg{transition:translate 220ms var(--motion-ease)}
.portrait-dialogue{translate:0 6px;transition:translate 300ms var(--motion-ease),border-color var(--motion-fast),color var(--motion-fast),scale var(--motion-fast)}
.dialogue-watching{transition-delay:35ms,0ms,0ms,0ms}.dialogue-reading{transition-delay:70ms,0ms,0ms,0ms}
.portrait-panel.show-dialogues .portrait-dialogue,.portrait-panel:has(:focus-visible) .portrait-dialogue{translate:0 0}
.portrait-dialogue:active{scale:.97}
/* A card stays in its grid; artwork provides the depth instead of enlarging the whole frame. */
.project{will-change:auto;transition:transform var(--motion-settle) var(--motion-ease),opacity 240ms ease,filter 240ms ease,background-color var(--motion-fast)}
.project:hover,.project:focus-visible{transform:none;border-color:var(--line)}
.project-image img{transition:transform 500ms var(--motion-ease);transform-origin:center}
.zoca-thumbnail img{transform-origin:left top}
.projects-grid:has(.project:hover) .project:not(:hover),.projects-grid:has(.project:focus-visible) .project:not(:focus-visible){opacity:.76;filter:saturate(.9)}
.about-photo{transition:translate var(--motion-settle) var(--motion-ease),box-shadow var(--motion-settle) ease}
.experience-row{transition:background-color 240ms ease}
.footer a svg{transition:translate 240ms var(--motion-ease)}
.career-row a,.about-bio a{transition:color var(--motion-fast),text-underline-offset 240ms var(--motion-ease)}
.menu-toggle span{transition:transform 240ms var(--motion-ease),opacity 180ms ease}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(5.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){transform:scaleX(0);opacity:0}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-5.5px) rotate(-45deg)}
@media(hover:hover) and (pointer:fine){
  .portrait-panel:hover .portrait-dialogue{translate:0 0}
  .project:hover{transform:translateY(-2px)}
  .about-photo:hover{translate:0 -4px;box-shadow:0 12px 24px #00000026}
  .experience-row:hover{background:var(--tag)}
  .footer a:hover svg{translate:2px -2px}
  .career-row a:hover,.about-bio a:hover{text-underline-offset:4px}
  .watching-next:hover svg{translate:1px 0}.watching-previous:hover svg{translate:-1px 0}
}
@media(hover:none){
  .project:hover,.project:hover .project-image img{transform:none}
  .projects-grid:has(.project:hover) .project:not(:hover){opacity:1;filter:none}
}
@media(max-width:809.98px){
  .nav-links.is-open{animation:menu-arrive 240ms var(--motion-ease) both}
}
@keyframes menu-arrive{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .portrait-dialogue{translate:none}
  .project:hover,.project:focus-visible,.project:hover .project-image img,.project:focus-visible .project-image img{transform:none}
  .about-photo:hover,.footer a:hover svg,.watching-navigation button:hover svg{translate:none}
  .theme-toggle:active,.portrait-close:active,.watching-navigation button:active,.pick-link:active,.portrait-dialogue:active{scale:1}
}