/* Continuous motion close to the original, with slightly shorter settles.
   Keep the shared cadence without quantising movement or colour changes. */
:root{
  --motion-ease:cubic-bezier(.25,.8,.3,1);
  --motion-fill:cubic-bezier(.3,0,.3,1);
  --ease:var(--motion-ease);
  --reveal:var(--motion-ease);
}
.next-pair{--nm-motion:var(--motion-ease)}

/* Header controls and the selected-work menu. */
.monogram{transition:color .3s var(--motion-fill),transform .4s var(--motion-ease)!important}
.asterisk{transition:transform .6s var(--motion-ease)!important}
.work-toggle{transition:color .3s var(--motion-fill),background-color .3s var(--motion-fill),border-color .3s var(--motion-fill),box-shadow .3s var(--motion-fill)!important}
.menu-mark{transition:transform .44s var(--motion-ease)!important}
.menu-mark svg{transition:opacity .3s linear,transform .44s var(--motion-ease)!important}
.work-menu nav,.work-menu.is-open nav{transition:opacity .3s linear,transform .42s var(--motion-ease),filter .3s linear,visibility 0s linear var(--menu-hide-delay,.42s)!important}
.work-menu.is-open nav{--menu-hide-delay:0s}
.work-menu nav a{transition:background-color .26s var(--motion-fill),color .26s var(--motion-fill)!important}
.work-menu nav .project-icon{transition:transform .32s var(--motion-ease),box-shadow .26s var(--motion-fill)!important}
.contact-link{transition:width .44s var(--motion-ease),gap .44s var(--motion-ease),background-color .3s var(--motion-fill),border-color .3s var(--motion-fill),color .3s var(--motion-fill),box-shadow .3s var(--motion-fill)!important}
.contact-link svg{transition:transform .44s var(--motion-ease)!important}
.contact-label{transition:max-width .44s var(--motion-ease),opacity .3s linear,filter .3s linear,visibility 0s linear var(--contact-hide-delay,.44s)!important}
.contact-link:is(:hover,:focus-visible) .contact-label{--contact-hide-delay:0s}

/* CV entry changes pose without travel; controls retain their smooth zoom. */
.cv-tile{--reveal:cubic-bezier(.22,.8,.25,1);transition:none!important}
.cv-art{transition:scale .55s var(--reveal)!important}
.cv-lines{transition:none!important}
.cv-actions{transition:none!important}
.cv-tile:is(:hover,:focus-within) .cv-actions{transition:opacity .4s ease-in-out,visibility 0s!important}
.cv-actions :is(a,button){transition:background-color .3s ease-in-out,border-color .3s ease-in-out,color .3s ease-in-out,box-shadow .3s ease-in-out!important}
.cv-open::before{transition:opacity .3s ease-in-out!important}

/* Project surfaces and the staged NextMove screens. */
.nm-brand,.phone-tile.hum-showcase,.tile.hum-brand,.next-preview{transition:background-color .38s var(--motion-fill),border-color .38s var(--motion-fill),opacity .32s linear!important}
.nm-brand .nm-logo-art{transition:transform .56s var(--motion-ease),filter .38s var(--motion-fill),opacity .3s linear!important}
.nm-brand .nm-filmstrip{transition:opacity .3s linear,transform .44s var(--motion-ease)!important}
.nm-brand .nm-filmstrip>span{transition:transform .5s var(--motion-ease),width .5s var(--motion-ease)!important}
.nm-brand .nm-filmstrip>span::after{transition:opacity .3s var(--motion-fill)!important}
.nm-filmstrip img{transition:filter .34s var(--motion-fill)!important}
.next-pair .nm-play,.next-pair .nm-play-rest{transition:opacity .24s linear,background-color .24s var(--motion-fill),border-color .24s var(--motion-fill)!important}
.next-pair .nm-brand{transition:background-color .38s var(--motion-fill),border-color .38s var(--motion-fill),opacity .24s linear!important}
.nm-pitch-window{transition:transform .24s var(--motion-ease),box-shadow .24s var(--motion-fill),border-color .24s var(--motion-fill)!important}
.nm-field-lines{transition:color .34s var(--motion-fill)!important}
.dashboard-frame{transition:transform .6s var(--motion-ease),left .6s var(--motion-ease),top .6s var(--motion-ease),width .6s var(--motion-ease)!important}
.dashboard-frame img{transition:filter .38s var(--motion-fill),opacity .32s linear!important}
.tile-action{transition:opacity .3s linear,transform .44s var(--motion-ease)!important}
.changing-word{transition:color .3s var(--motion-fill)!important}

/* HUM retains its complete story, with firmer changes between screen states. */
.hum-device{transition:transform .74s var(--motion-ease),left .74s var(--motion-ease),top .74s var(--motion-ease),box-shadow .38s var(--motion-fill)!important}
.hum-sheet{transition:transform .6s var(--motion-ease)!important}
.hum-home-screen>img,.hum-record-face::before{transition:filter .38s var(--motion-fill)!important}
.hum-chip-color{transition:opacity .34s var(--motion-fill)!important}
.hum-published-screen{transition:opacity .42s linear!important}
.hum-showcase.is-engaged .hum-record-halo{transition:opacity .32s linear!important}
.hum-brand-symbol{transition:color .38s var(--motion-fill),transform .5s var(--motion-ease)!important}
.hum-brand-word{transition:opacity .32s linear,filter .3s linear,transform .44s var(--motion-ease)!important}

/* Stationary arrows, short button fills and compact label disclosures. */
.nm-project-link,.hum-project-link,.hum-showcase.is-engaged .hum-project-link,.hum-brand.is-engaged .hum-project-link,.hum-project-link:focus-visible{
  transition:gap .44s var(--motion-ease),opacity .3s linear,visibility 0s linear var(--project-hide-delay,.3s)!important;
}
.next-pair:has(.nm-brand.is-engaged) .nm-project-link,.next-pair.is-expanded .nm-project-link,.nm-project-link:focus-visible,.hum-showcase.is-engaged .hum-project-link,.hum-brand.is-engaged .hum-project-link,.hum-project-link:focus-visible{--project-hide-delay:0s}
.nm-link-icon,.hum-link-icon{transition:background-color .24s var(--motion-fill),color .24s var(--motion-fill),border-color .24s var(--motion-fill),box-shadow .24s var(--motion-fill)!important}
.nm-one-liner,.hum-one-liner{transition:max-width .44s var(--motion-ease),padding .44s var(--motion-ease),opacity .3s linear,transform .4s var(--motion-ease),filter .3s linear,border-color .26s var(--motion-fill),box-shadow .26s var(--motion-fill)!important}

/* Preserve the approved story stages and ambient pulses while respecting
   reduced motion for layout/pose transitions. Layered important declarations
   take precedence over the component transition overrides above. */
@layer reducedMotionAccessibility {
  @media (prefers-reduced-motion:reduce) {
    html {scroll-behavior:auto!important}
    .monogram,.asterisk,.menu-mark,.menu-mark svg,.work-menu nav,
    .work-menu nav .project-icon,.contact-link,.contact-link svg,.contact-label,
    .cv-art,.nm-logo-art,.nm-filmstrip,.nm-filmstrip>span,.nm-pitch-window,
    .dashboard-frame,.tile-action,.hum-device,.hum-sheet,.hum-brand-symbol,
    .hum-brand-word,.nm-project-link,.hum-project-link,.nm-one-liner,.hum-one-liner {
      transition:opacity .2s linear,color .2s linear,background-color .2s linear,
        border-color .2s linear,box-shadow .2s linear,filter .2s linear!important;
    }
  }
}