/* Shared motion rhythm: brief feedback, soft entrances, native scrolling. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--motion-fast:180ms;--motion-settle:360ms}
/* Only JS-prepared content waits for its entrance; native scrolling stays intact. */
[data-enter-pending]{opacity:0}
[data-enter-pending]:focus-within{opacity:1!important;translate:none!important}
.hero-primary,.hero-secondary,.header-cta,.whatsapp-sticky,.case-filters button{transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,transform var(--motion-fast) var(--ease-out)}
.hero-primary:active,.hero-secondary:active,.header-cta:active,.whatsapp-sticky:active{transform:scale(.98)}
/* Pause at the current frame when interacting; never snap a tilted preview flat. */
.budget-direction:focus-within .showcase-browser{animation:showcase-float 8s ease-in-out infinite;animation-play-state:paused;transform:rotateY(var(--showcase-y)) rotateX(var(--showcase-x))}
.studio-scene--4{transition:background-color 600ms ease,color 400ms ease}
.material-panel:not([hidden]){animation:panel-enter 240ms var(--ease-out) both}
@keyframes panel-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){
 .header--calm nav.open{transform-origin:top center;animation:menu-enter 220ms var(--ease-out) both}
 .menu-toggle span{transition:transform 220ms var(--ease-out)}
 .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
 .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
}
@keyframes menu-enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
/* Customer/category labels remain ordinary readable text, not preview graphics. */
.project .project-client .project-category,.case-card .case-heading>span{font-size:var(--text-min,16px)}
@media(prefers-reduced-motion:reduce){
 [data-enter-pending]{opacity:1!important;translate:none!important}
 html{scroll-behavior:auto}
 .hero-primary,.hero-secondary,.header-cta,.whatsapp-sticky,.case-filters button,.menu-toggle span,.studio-scene--4{transition:none}
 .header--calm nav.open,.material-panel:not([hidden]),.budget-direction:focus-within .showcase-browser{animation:none;transform:none}
 .hero-primary:active,.hero-secondary:active,.header-cta:active,.whatsapp-sticky:active{transform:none}
}