/* Small, finite transitions. Collection images are never hidden or transformed. */
:root{--ease:cubic-bezier(.22,1,.36,1);--motion-quick:200ms;--motion-content:480ms}
.hero-enter{animation-duration:560ms;animation-timing-function:var(--ease)}
.hero-copy .hero-enter:nth-child(2){animation-delay:40ms}
.hero-copy .hero-enter:nth-child(3){animation-delay:80ms}
.hero-copy .hero-enter:nth-child(4){animation-delay:120ms}
.hero-copy .hero-enter:nth-child(5){animation-delay:160ms}
.hero-visual.hero-enter{animation-delay:100ms}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.js-ready .reveal{transform:translateY(10px);transition:opacity var(--motion-content) var(--ease),transform var(--motion-content) var(--ease)}
.js-ready .reveal.is-visible{transform:translateY(0)}
.process-grid .reveal:nth-child(2){transition-delay:40ms}
.process-grid .reveal:nth-child(3){transition-delay:80ms}
.process-grid .reveal:nth-child(4){transition-delay:120ms}
.button,.hero-controls button,.image-navigation button,.dialog-close,.image-close{transition:transform var(--motion-quick) var(--ease),background var(--motion-quick),color var(--motion-quick),border-color var(--motion-quick)}
.button svg,.text-link svg,.contact-circle svg{transition:transform 240ms var(--ease)}
.text-link{transition:color var(--motion-quick)}
.desktop-nav a::after{transition:transform 240ms var(--ease)}
.desktop-nav a[aria-current="page"]::after{transform:scaleX(1)}
.collection-navigation a{transition:background var(--motion-quick),color var(--motion-quick)}
.collection-navigation a>span{transition:transform var(--motion-quick) var(--ease)}
.discipline-preview{transition:transform 360ms var(--ease),box-shadow 360ms var(--ease)}
.discipline-open,.project-open{transition:background var(--motion-quick),transform 280ms var(--ease)}
.discipline-open svg,.project-open svg{transition:transform 280ms var(--ease)}
.discipline-card:hover .discipline-open,.project-image-link:hover .project-open{transform:none}
.collection-item .zoom-image>span{transition:opacity var(--motion-quick),transform var(--motion-quick) var(--ease),background var(--motion-quick)}
.collection-item figcaption>span{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:left bottom;transition:background-size 240ms var(--ease)}
.collection-item:focus-within figcaption>span{background-size:100% 1px}
.collection-item .zoom-image:focus-visible>span{background:var(--lime)}
.hero-image-link{transition:transform 480ms var(--ease)}
.hero-image-link:hover,.hero-image-link:focus-visible{transform:perspective(1200px) rotate(-3deg) translateY(-2px)}
.hero-stage:hover .hero-stamp svg{transform:rotate(12deg)}
.hero-stamp svg{transition:transform 500ms var(--ease)}
.project-image-link:hover>img,.project-image-link:focus-visible>img{transform:scale(1.02)}
.project-image-link>img{transition:transform 480ms var(--ease)}
.contact-circle:hover{transform:none}
.service-row h3{transition:color var(--motion-quick)}
.service-plus,.faq-list summary span{transition:transform 240ms var(--ease)}
html[data-motion="full"] .text-link:is(:hover,:focus-visible) svg,
html[data-motion="full"] .contact-circle:is(:hover,:focus-visible) svg,
html[data-motion="full"] .discipline-card:focus-visible .discipline-open svg,
html[data-motion="full"] .project-image-link:focus-visible .project-open svg{transform:translate(3px,-3px)}
html[data-motion="full"] .discipline-card:focus-visible .discipline-preview{transform:translateY(-3px);box-shadow:0 10px 22px #24261f12}
html[data-motion="full"] dialog[open]::backdrop{animation:backdrop-in 180ms ease-out}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@media(hover:hover) and (pointer:fine){
  html[data-motion="full"] .button:hover{transform:translateY(-2px)}
  html[data-motion="full"] .discipline-card:hover .discipline-preview{transform:translateY(-3px);box-shadow:0 10px 22px #24261f12}
  html[data-motion="full"] .discipline-card:hover .discipline-open svg,
  html[data-motion="full"] .project-image-link:hover .project-open svg,
  html[data-motion="full"] .collection-navigation a:hover>span{transform:translate(2px,-2px)}
  .collection-item:hover figcaption>span{background-size:100% 1px}
  .collection-item .zoom-image:hover>span{background:var(--lime)}
}
html[data-motion="full"] .button:active{transform:translateY(1px)}
html[data-motion="full"] .hero-controls button:active,
html[data-motion="full"] .image-navigation button:active{transform:scale(.96)}
html[data-motion="reduced"] .hero-image-link,
html[data-motion="reduced"] .hero-image-link:hover,
html[data-motion="reduced"] .hero-image-link:focus-visible{transform:perspective(1200px) rotate(-6deg);will-change:auto}
html[data-motion="reduced"] .hero-stamp svg,
html[data-motion="reduced"] .project-image-link>img{transform:none}