:root{--ease-soft:ease-out;--ease-color:ease-out}
/* Target properties explicitly so layout changes never inherit a blanket transition. */
body,header,footer,p,h1,h2,h3,a,button,.eyebrow,.project-meta,.case-meta,.timeline-item,.note,.lab-study,.empty-gallery,.work-row,.reflection,.next-project,.type-sample,.project-visual,.section-label,.footer-bottom{transition:color 400ms ease-out,background-color 400ms ease-out,border-color 400ms ease-out,text-decoration-color 400ms ease-out}
a{text-decoration-color:transparent}a:hover{text-decoration-color:currentColor}.inline-link,.text-link,.social-links a{text-decoration-color:#aaa}.work-row:hover h3{text-decoration-color:currentColor}.work-row h3{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}.project-visual img{transition:transform 400ms ease-out}.work-row img{transition:transform 400ms ease-out}
@media(hover:hover){.project-visual:hover img{transform:scale(1.018)}.work-row:hover img{transform:scale(1.025)}}
.dock{transition:background-color 400ms ease-out,border-color 400ms ease-out,box-shadow 400ms ease-out}
.dock .dock-item{transition:background-color 400ms ease-out,color 400ms ease-out,box-shadow 400ms ease-out}
.dock-tooltip{transition:width 400ms ease-out,height 400ms ease-out,opacity 400ms ease-out,transform 400ms ease-out,visibility 400ms ease-out,background-color 400ms ease-out,color 400ms ease-out,border-color 400ms ease-out}
.dock-dot{transition:opacity 400ms ease-out,background-color 400ms ease-out}
/* Keep both theme icons rendered so the change can fade and rotate. */
.theme-toggle>svg,.theme-toggle .moon-icon,.theme-toggle .sun-icon,[data-theme=dark] .theme-toggle .moon-icon,[data-theme=dark] .theme-toggle .sun-icon{display:block;position:absolute;transition:width 400ms ease-out,height 400ms ease-out,opacity 400ms ease-out,transform 400ms ease-out}
.theme-toggle .moon-icon{opacity:1;transform:rotate(0) scale(1)}.theme-toggle .sun-icon{opacity:0;transform:rotate(-55deg) scale(.65)}
[data-theme=dark] .theme-toggle .moon-icon{opacity:0;transform:rotate(55deg) scale(.65)}[data-theme=dark] .theme-toggle .sun-icon{opacity:1;transform:rotate(0) scale(1)}
.type-sample{transition:font-size 400ms ease-out,background-color 400ms ease-out,color 400ms ease-out}
/* Internal navigation keeps the dock and document mounted. JavaScript owns the content fade. */
main{animation:none}
@view-transition{navigation:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}::view-transition-old(root),::view-transition-new(root),::view-transition-group(portfolio-dock){animation:none!important}main{opacity:1;transform:none}}
.dock-item svg path,.dock-item svg circle{transition:fill 400ms ease-out}
@media(prefers-reduced-motion:reduce){.dock-item svg path,.dock-item svg circle{transition:none!important}}

/* Dock geometry and icons use the same timing as the rest of the site. */
.dock .dock-item{transition:width 400ms ease-out,height 400ms ease-out,background-color 400ms ease-out,color 400ms ease-out,box-shadow 400ms ease-out}
.dock-item>svg{transition:width 400ms ease-out,height 400ms ease-out}
.theme-toggle>svg{transition:width 400ms ease-out,height 400ms ease-out,opacity 400ms ease-out,transform 400ms ease-out}
@media(prefers-reduced-motion:reduce){.dock .dock-item,.dock-item>svg,.theme-toggle>svg{transition:none!important}}

/* Magnification is explicit: hovered icon, immediate neighbours, then a subtle second ring. */
.dock .dock-item{min-height:0}
.dock-item>svg{width:calc(var(--size)*.46);height:calc(var(--size)*.46)}
@media(max-width:699px){.dock-item>svg{width:18px;height:18px}}
@media(max-width:430px){.dock-item>svg{width:17px;height:17px}}
@media(max-width:370px){.dock-item>svg{width:16px;height:16px}}

/* Animate inherited icon colour once; a separate fill transition causes a delayed fade. */
.dock-item svg path,.dock-item svg circle{transition:none}
.dock-shell,.dock-scrollbar,.dock-scrollbar-thumb{transition:background-color 400ms ease-out,border-color 400ms ease-out,box-shadow 400ms ease-out}
@media(prefers-reduced-motion:reduce){.dock-shell,.dock-scrollbar,.dock-scrollbar-thumb{transition:none}}

/* Pointer-distance magnification owns geometry each frame: no second CSS lag. */
@media(hover:hover) and (pointer:fine) and (min-width:700px){
 .dock .dock-item{transition:background-color 180ms ease-out,color 180ms ease-out,box-shadow 180ms ease-out}
 .dock-item>svg{transition:none}
 .theme-toggle>svg{transition:opacity 180ms ease-out,transform 180ms ease-out}
}
.dock-tooltip{transition:opacity 140ms ease-out,transform 140ms ease-out,visibility 140ms ease-out,background-color 180ms ease-out,color 180ms ease-out}