/* PHYSICAL: one movement language, three curves, 24px reveals, 80ms stagger. */
:root{
  --ease-snap:cubic-bezier(.22,1,.36,1);
  --spring-snappy:var(--ease-snap);
  --spring-smooth:var(--ease-snap);
  --ease:var(--ease-snap);
}
@supports(animation-timing-function:linear(0,1)){
  :root{
    --spring-snappy:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067 22.5%,1.089 26%,1.079 30.3%,1.049 36%,1.024 42.6%,1.011 50.3%,1.004 59.2%,1.001 69.3%,1);
    --spring-smooth:linear(0,.004,.016 2.3%,.063 4.7%,.141 7.2%,.25 9.9%,.601 16.5%,.815 21%,.929 25.2%,.987 29%,1.025 33.5%,1.042 38%,1.04 43.5%,1.027 50%,1.013 57.5%,1.005 67%,1.001 79%,1);
  }
}
.motion-ready [data-motion]{opacity:0;transform:translateY(24px);transition:transform 620ms var(--spring-snappy),opacity 620ms var(--spring-snappy);transition-delay:var(--reveal-delay,0ms)}
.motion-ready [data-motion="image"]{transform:translateY(24px) scale(.98)}
.motion-ready [data-motion="fade"]{transform:none}
.motion-ready [data-motion].is-revealed{opacity:1;transform:none}
.motion-ready [data-motion].motion-complete{transition-delay:0ms}
.motion-ready [data-entry]{transition-duration:420ms}
.motion-ready [data-entry="art"]{transition-duration:600ms}
.motion-word{display:inline-block;transform:translateY(108%);opacity:0;transition:transform 620ms var(--spring-snappy),opacity 620ms var(--spring-snappy);transition-delay:var(--word-delay,0ms)}
.motion-text.is-revealed .motion-word{transform:none;opacity:1}
.hero-title .motion-word{transition-duration:420ms}
.motion-line{overflow:clip;overflow-clip-margin:.16em}
.hero-title .motion-word,.work-heading h2 .motion-word{line-height:inherit}
.motion-word-mask{display:inline-block;overflow:clip;overflow-clip-margin:.14em;vertical-align:bottom}
.motion-text{overflow:visible}

/* Borders reveal independently of their contents; no width animation. */
.motion-ready .motion-divider{border-top-color:transparent}
.motion-ready .motion-divider:not(.hero-foot){position:relative}
.motion-divider::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 620ms var(--spring-snappy)}
.motion-divider.is-revealed::before{transform:scaleX(1)}
.project-index a::before{content:'';position:absolute;left:16px;right:16px;bottom:14px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 240ms var(--ease-snap)}
.project-index a{position:relative}

/* Pointer-only hover vocabulary. Focus remains instantaneous and visible. */
.brand,.nav-links a,.nav-social,.hero-cta,.project-index a,.project-link,.shot,footer a,.lightbox-close,.lightbox-zoom{
  transition:transform 240ms var(--ease-snap),opacity 240ms var(--ease-snap);
}
.motion-ready .motion-complete:is(a,button){transition:transform 240ms var(--ease-snap),opacity 240ms var(--ease-snap)}
.brand .brand-mark,.workflow svg,.hero-cta svg,.lightbox-close svg{transition:transform 240ms var(--ease-snap)}
footer a,.project-link{position:relative}
footer a::after,.project-link::after{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 240ms var(--ease-snap)}
@media(hover:hover) and (pointer:fine){
  html:not(.motion-disabled):not([data-input="keyboard"]) :is(.brand,.nav-social,.hero-cta,.project-index a,.project-link,.shot,footer a,.lightbox-close,.lightbox-zoom):hover{transform:translateY(-3px)}
  .brand:hover .brand-mark{transform:rotate(12deg)}
  .hero-cta:hover svg{transform:translate(2px,2px)}
  .lightbox-close:hover svg{transform:rotate(90deg)}
  footer a:hover::after,.project-link:hover::after,.project-index a:hover::before{transform:scaleX(1)}
  .workflow li:hover svg{transform:translateY(-3px)}
  .shot:hover .zoom{transform:translateY(-3px)}
}
html:not(.motion-disabled):not([data-input="keyboard"]) :is(a,button):active{transform:scale(.97);transition-duration:160ms;transition-delay:0ms}
.hero-cta{isolation:isolate;overflow:hidden}
.hero-cta::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 3px 8px #0005;pointer-events:none;opacity:0;transition:opacity 160ms var(--ease-snap)}
.hero-cta:active::after{opacity:1}
.cta-ripple{position:absolute;pointer-events:none;width:24px;height:24px;border-radius:50%;background:#fff5;z-index:-1;opacity:0;animation:cta-ripple 620ms var(--spring-smooth) forwards}
@keyframes cta-ripple{from{opacity:.5;transform:translate(-50%,-50%) scale(.95)}to{opacity:0;transform:translate(-50%,-50%) scale(18)}}

/* Native scroll timelines keep scroll work off the JavaScript event loop. */
@supports(animation-timeline:view()){
  @media(min-width:768px) and (hover:hover) and (pointer:fine){
    .hero{view-timeline-name:--hero-depth;view-timeline-axis:block}
    .motion-ready:not(.motion-disabled):not([data-input="keyboard"]) .art-depth{animation:hero-depth var(--ease-snap) both;animation-timeline:--hero-depth;animation-range:exit 0% exit 100%}
  }
}
@keyframes hero-depth{from{transform:translateY(0)}to{transform:translateY(36px)}}
.art-depth{width:100%}
.art-entry{width:100%}
.hero-grid{opacity:.7}
@media(prefers-reduced-motion:no-preference){
  .motion-ready:not(.motion-disabled):not([data-input="keyboard"]) .hero.in-view .art-entry>img{animation:sculpture-sway 8s 800ms var(--ease-snap) infinite alternate}
  .motion-ready:not(.motion-disabled):not([data-input="keyboard"]) .hero.in-view .hero-grid{animation:grid-light 8s var(--ease-snap) infinite alternate}
}
@keyframes sculpture-sway{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes grid-light{from{opacity:.45}to{opacity:.7}}

/* Dialog transitions retarget mid-flight; keyboard actions bypass them. */
.lightbox{background:transparent}
.lightbox::backdrop{background:#242321;opacity:0;transition:opacity 240ms var(--spring-smooth)}
.lightbox.is-present::backdrop{opacity:1}
.lightbox .lightbox-stage{opacity:0;transform:translateY(24px) scale(.97);transform-origin:center;transition:transform 420ms var(--spring-smooth),opacity 240ms var(--spring-smooth)}
.lightbox.is-present .lightbox-stage{opacity:1;transform:none}
.lightbox-toolbar{opacity:0;transform:translateY(-12px);transition:transform 420ms var(--spring-smooth),opacity 240ms var(--spring-smooth)}
.lightbox.is-present .lightbox-toolbar{opacity:1;transform:none}
.lightbox.is-closing .lightbox-stage,.lightbox.is-closing .lightbox-toolbar{transition-duration:240ms}

@media(max-width:767px){footer{flex-wrap:wrap;gap:4px 20px}footer>a{margin-left:auto}.motion-word-mask{overflow-clip-margin:.18em}}

/* Stable content, instant keyboard interaction and dynamic reduced-motion. */
.motion-disabled [data-motion],html[data-input="keyboard"] [data-motion],.motion-disabled .motion-word,html[data-input="keyboard"] .motion-word{opacity:1!important;transform:none!important;transition:none!important}
.motion-disabled .motion-divider::before,html[data-input="keyboard"] .motion-divider::before{transform:scaleX(1);transition:none}
.motion-disabled *,html[data-input="keyboard"] *, .motion-disabled *::before,html[data-input="keyboard"] *::before,.motion-disabled *::after,html[data-input="keyboard"] *::after{animation:none!important;transition:none!important}
.motion-disabled .art-depth,html[data-input="keyboard"] .art-depth,.motion-disabled .art-entry>img,html[data-input="keyboard"] .art-entry>img{transform:none!important}
.motion-disabled .lightbox-stage,.motion-disabled .lightbox-toolbar,html[data-input="keyboard"] .lightbox-stage,html[data-input="keyboard"] .lightbox-toolbar{transform:none!important;opacity:1!important}
.motion-disabled .lightbox::backdrop,html[data-input="keyboard"] .lightbox::backdrop{opacity:1}
@media(prefers-reduced-motion:reduce){
  [data-motion],.motion-word{opacity:1!important;transform:none!important;transition:none!important}
  .motion-divider::before{transform:scaleX(1);transition:none}
  .art-depth,.art-entry>img{transform:none!important}
  .lightbox-stage,.lightbox-toolbar{opacity:1!important;transform:none!important}
  .lightbox::backdrop{opacity:1}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.cta-entry,.cta-magnet{display:inline-flex;vertical-align:middle}
.motion-ready [data-motion="text"]{opacity:1;transform:none;transition:none}
.page-hidden *, .page-hidden *::before,.page-hidden *::after{animation-play-state:paused!important}
.motion-disabled :is(a,button):is(:hover,:active),html[data-input="keyboard"] :is(a,button):is(:hover,:active){transform:none!important}
.motion-disabled :is(a,button) svg,html[data-input="keyboard"] :is(a,button) svg{transform:none!important}
@media(prefers-reduced-motion:reduce){:is(a,button):is(:hover,:active),:is(a,button) svg{transform:none!important}}