/* Short, predictable feedback; decorative loops keep their natural pace. */
:root{--motion-fast:80ms;--motion-reveal:280ms;--motion-ease:cubic-bezier(.22,1,.36,1)}

/* Enter and exit feedback have the same short duration and no waiting period. */
body main .site-header a,.project-intro svg,.project-utility svg,
.detail-nav a:after,.spatial-case-link:after{
  transition-duration:var(--motion-fast);transition-delay:0s;transition-timing-function:var(--motion-ease);
}

/* Move the already-painted ambient layer instead of repainting its gradients. */
.spatial-ambient{
  background:radial-gradient(ellipse 48% 40% at 30% 70%,rgba(208,174,108,.28),transparent 70%),radial-gradient(ellipse 46% 38% at 76% 22%,rgba(230,170,175,.24),transparent 72%),radial-gradient(circle at 50% 50%,rgba(41,53,111,.055),transparent 46%);
  translate:calc(var(--mx)*-22px) calc(var(--my)*-16px);
  transform:translate3d(0,0,0);
  transition:none;
}
@keyframes ambient-breathe{to{transform:translate3d(18px,-12px,0) scale(1.05)}}
.folio-index .spatial-card{transition:background-color var(--motion-fast) ease}
.folio-index .spatial-card-media{transition:none}
.spatial-card-bottom small,body .folio-index .spatial-years button,body .folio-index .spatial-years button span,.spatial-years button i,body .folio-index .spatial-year-selection,
.spatial-controls button,.spatial-controls button svg,.spatial-controls button:before{
  transition-duration:var(--motion-fast);transition-timing-function:var(--motion-ease);
}
.spatial-profile{transition:visibility 0s 220ms,opacity 180ms ease,transform 220ms var(--motion-ease)}
.is-profile-open .spatial-profile{transition-delay:0s}

.site-cursor{transition:none}
.site-cursor-ring,.site-cursor-glyph,.site-cursor-ring b,.site-cursor-ring i,
.site-cursor-dot,.site-cursor-glyph span,.cursor-expand-stem{
  transition-duration:var(--motion-fast);transition-delay:0s;transition-timing-function:var(--motion-ease);
}
.site-cursor-ring,.site-cursor-dot,.site-cursor-glyph{transition-property:width,height,opacity}
.detail .project-edge-preview{transition:opacity 80ms ease,transform 80ms var(--motion-ease),visibility 80ms}
.project-edge-link svg,.detail .next-project span,.detail .next-project strong,.detail .next-project svg,.detail .next-project:before,.detail .next-project strong:after,
.site-footer a,.site-footer a:after,.site-footer>div:first-child>a:before,.site-footer .footer-email-label strong:after,
.site-footer>div:last-child a:after,
.site-footer .footer-email-action,.site-footer .footer-email-action:before,.site-footer .footer-email-action svg,
.cv-method-card,.method-illustration{
  transition-duration:var(--motion-fast);transition-delay:0s;transition-timing-function:var(--motion-ease);
}

/* Reveal with a small translation, avoiding a large animated clipping surface. */
.motion-ready :is(.project-intro,.media-canvas,.story>*,.about-copy>*,.career li,.detail-brief>*,.block-copy>*,.block-media,.media-caption,.detail-outcome:not(.leto-outcome)>*,.folio-profile>*,.cv-method-card,.cv-thesis>*,.cv-chapter>*,.cv-range>*,.cv-education>*){
  transition-duration:var(--motion-reveal);transition-delay:calc(var(--reveal-order,0)*15ms);transition-timing-function:var(--motion-ease);
}
.motion-ready :is(.project-intro,.media-canvas,.story>*,.about-copy>*,.career li,.cv-method-card,.cv-thesis>*,.cv-chapter>*,.cv-range>*,.cv-education>*):not(.in-view){transform:translateY(12px)}
.motion-ready .block-media{clip-path:none;will-change:transform;transition:opacity 200ms ease,transform var(--motion-reveal) var(--motion-ease)}
.motion-ready .block-media:not(.in-view){transform:translateY(12px)}
.motion-ready .detail .block-copy h2,.motion-ready .detail .block-media.in-view,
.detail .block-copy h2,.detail .block-media img,.detail .block-media video{transition-duration:var(--motion-fast);transition-delay:0s}
.detail.detail-miele .detail-block{transition-duration:var(--motion-fast)}
.motion-ready .cv-opening h1,.motion-ready .cv-opening-foot{animation-duration:var(--motion-reveal);animation-delay:0s}

/* Allocate dots for the visible section only, then pause them outside it. */
.motion-result .motion-result-rail,.motion-result .motion-result-rail i{animation-play-state:paused}
.motion-result[data-animating="true"] .motion-result-rail,.motion-result[data-animating="true"] .motion-result-rail i{animation-play-state:running}

::view-transition-group(root),::view-transition-group(project-hero),
::view-transition-group(portfolio-name),::view-transition-group(portfolio-navigation),
::view-transition-image-pair(project-hero){animation-duration:320ms}
::view-transition-old(root){animation-duration:140ms}
::view-transition-new(root){animation-duration:220ms}

@media(prefers-reduced-motion:reduce){
  .spatial-ambient{animation:none;transition:none;translate:none;transform:none}
  .spatial-profile,.detail .project-edge-preview,.site-cursor *,.next-project *,.next-project:before,
  .spatial-year-selection,.spatial-years button,.spatial-years button i,.spatial-card-bottom small,
  .spatial-controls button,.spatial-controls button svg,.spatial-controls button:before,
  .footer-email-action,.footer-email-action svg,.footer-home,.footer-work,.footer-linkedin{transition:none}
  .motion-ready .block-media,.motion-ready .block-media:not(.in-view){transform:none;transition:none}
  ::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*){animation-duration:1ms;animation-delay:0s}
}