/* CRUDO / Motion System v2
   Principles: purposeful motion, transform/opacity/clip-path only, no gesture capture. */
:root{
  --motion-ease-out:cubic-bezier(.23,1,.32,1);
  --motion-ease-in-out:cubic-bezier(.77,0,.175,1);
  --motion-fast:140ms;
  --motion-ui:220ms;
  --motion-editorial:720ms;
  --motion-red:#9f3029;
}

/* Content is visible at rest. Reveals use finite WAAPI effects without fill. */
.motion-reveal,.motion-mask,.motion-heading{opacity:1;transform:none;clip-path:none}
.motion-rule{position:relative}
.motion-rule::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;background:currentColor;opacity:.18;transform-origin:left}

/* Image motion stays inside the frame. */
.work-card figure img,.hero-stage img,.story-frame img,.project-canvas img,.output-frame canvas,.orbit-project img{
  backface-visibility:hidden;
}

/* Buttons / links: frequent interaction = near-imperceptible feedback only. */
.primary-link,.footer-link,.nav-contact,.mobile-menu-cta,.next-threshold a,.project-back{
  transition:transform var(--motion-fast) ease,opacity var(--motion-fast) ease,background-color var(--motion-fast) ease,color var(--motion-fast) ease!important;
}
.primary-link:active,.footer-link:active,.nav-contact:active,.mobile-menu-cta:active,.next-threshold a:active,.project-back:active{transform:scale(.98)}
.primary-link b,.footer-link b,.nav-contact span,.mobile-menu-cta span,.next-threshold b{
  transition:transform var(--motion-ui) var(--motion-ease-out);
}
.primary-link:active b,.footer-link:active b,.mobile-menu-cta:active span,.next-threshold a:active b{transform:translate3d(2px,-2px,0)}

/* LAB gets its own entrance language; projects stay spatially fixed after arrival. */
html.crudo-motion .orbit-core{opacity:1;transform:translate(-50%,-50%)}
html.crudo-motion.motion-mounted .orbit-core{
  opacity:1;transform:translate(-50%,-50%) scale(1);
  transition:opacity 520ms var(--motion-ease-out) 180ms,transform 720ms var(--motion-ease-out) 180ms;
}
html.crudo-motion .orbit-project{opacity:1}
html.crudo-motion.motion-mounted .orbit-project{opacity:1;transform:none;transition:opacity 440ms var(--motion-ease-out),transform 620ms var(--motion-ease-out)}
html.crudo-motion.motion-mounted .orbit-project--01{transition-delay:230ms}
html.crudo-motion.motion-mounted .orbit-project--02{transition-delay:280ms}
html.crudo-motion.motion-mounted .orbit-project--03{transition-delay:330ms}
html.crudo-motion.motion-mounted .orbit-project--04{transition-delay:380ms}
html.crudo-motion.motion-mounted .orbit-project--05{transition-delay:430ms}
html.crudo-motion.motion-mounted .orbit-project--06{transition-delay:480ms}
html.crudo-motion.motion-mounted .orbit-project--07{transition-delay:530ms}
html.crudo-motion.motion-mounted .orbit-project--08{transition-delay:580ms}

/* A very restrained pulse belongs only to the LAB instrument/core. */
.orbit-core::after{
  animation:crudo-core-breathe 5.2s var(--motion-ease-in-out) infinite;
}
@keyframes crudo-core-breathe{
  0%,100%{transform:scale(.985);opacity:.42}
  50%{transform:scale(1.035);opacity:.72}
}

/* Project detail pages */
.project-facts>div,.project-variables>div{
  transition:background-color var(--motion-ui) ease,color var(--motion-ui) ease,transform var(--motion-ui) var(--motion-ease-out);
}

/* Hover motion only where a true hover device exists. */
@media (hover:hover) and (pointer:fine){
  .work-card figure,.story-frame,.project-canvas,.output-frame,.orbit-project{overflow:hidden}
  .work-card figure img,.story-frame img,.project-canvas img,.orbit-project img{
    transition:transform 520ms var(--motion-ease-out),filter 260ms ease!important;
  }
  .work-card:hover figure img,.story-frame:hover img,.project-canvas:hover img{transform:scale(1.018)!important}
  .orbit-project:hover img{transform:scale(1.045)!important}
  .orbit-project{transition:filter 180ms ease!important}
  .orbit-project:hover{filter:brightness(1.12)}
  .primary-link:hover b,.footer-link:hover b,.mobile-menu-cta:hover span,.next-threshold a:hover b{transform:translate3d(3px,-3px,0)}
  .project-facts>div:hover,.project-variables>div:hover{transform:translate3d(0,-2px,0)}
}

/* Mobile: movement is shorter and never tied to scroll position. */
@media (max-width:850px){



  .orbit-core::after{animation-duration:6.5s}
  .project-facts>div,.project-variables>div{transform:none!important}
}

@media (prefers-reduced-motion:reduce){
  html.crudo-motion body,
  html.crudo-motion .site-nav>.nav-brand,
  html.crudo-motion .desktop-nav>a,
  html.crudo-motion .site-nav>.nav-contact,
  html.crudo-motion .site-nav>.nav-menu,
  html.crudo-motion .orbit-core,
  html.crudo-motion .orbit-project,
  .motion-reveal,.motion-mask,.motion-heading{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:opacity 180ms ease!important;animation:none!important;
  }
  html.crudo-motion .orbit-core{transform:translate(-50%,-50%)!important}
  .motion-rule::after{transform:scaleX(1)!important;transition:none!important}
  .orbit-core::after{animation:none!important}
}


/* 2026-09-09 / smoother motion pass */
:root{
  --motion-ease-out:cubic-bezier(.16,1,.3,1);
  --motion-ease-in-out:cubic-bezier(.65,0,.35,1);
  --motion-fast:220ms;
  --motion-ui:340ms;
  --motion-editorial:980ms;
}
.primary-link,.footer-link,.nav-contact,.mobile-menu-cta,.next-threshold a,.project-back{
  transition:transform var(--motion-ui) var(--motion-ease-out),opacity var(--motion-ui) ease,background-color var(--motion-ui) ease,color var(--motion-ui) ease!important;
}
.primary-link:active,.footer-link:active,.nav-contact:active,.mobile-menu-cta:active,.next-threshold a:active,.project-back:active{transform:scale(.992)!important}
@media (hover:hover) and (pointer:fine){
  .work-card figure img,.story-frame img,.project-canvas img,.orbit-project img{transition-duration:900ms,420ms!important;transition-timing-function:var(--motion-ease-out),ease!important}
  .work-card:hover figure img,.story-frame:hover img,.project-canvas:hover img{transform:scale(1.012)!important}
  .orbit-project:hover img{transform:scale(1.026)!important}
  .primary-link:hover b,.footer-link:hover b,.mobile-menu-cta:hover span,.next-threshold a:hover b{transform:translate3d(2px,-2px,0)!important}
}
html.crudo-motion.motion-mounted .orbit-core{transition-duration:780ms,1080ms!important;transition-timing-function:var(--motion-ease-out)!important}
html.crudo-motion.motion-mounted .orbit-project{transition-duration:720ms,980ms!important;transition-timing-function:var(--motion-ease-out)!important}