/* Restrained motion for the actions that matter. All timings stay interruptible. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.filters.motion-segmented{display:inline-flex;position:relative;isolation:isolate;padding:4px;gap:3px;background:#eee2d3;border:1px solid var(--line);border-radius:28px;max-width:100%}
.filters.motion-segmented:before,.temperature-track.motion-segmented:before{content:'';position:absolute;left:0;top:0;width:var(--indicator-width);height:var(--indicator-height);transform:translate(var(--indicator-x),var(--indicator-y));border-radius:24px;background:var(--brown);box-shadow:0 3px 9px #4a210c14;pointer-events:none;transition:transform 320ms var(--motion-ease),width 320ms var(--motion-ease),height 320ms var(--motion-ease)}
.filters.motion-segmented .filter{position:relative;z-index:1;background:transparent;border-color:transparent;transition:color 180ms ease;min-height:42px}
.filters.motion-segmented .filter.active{background:transparent;color:var(--cream)}
.temperature-options{display:block}.temperature-track{display:flex;position:relative;gap:4px;padding:4px;background:#ecdfce;border-radius:16px;isolation:isolate}.temperature-track label{position:relative;z-index:1}.temperature-track.motion-segmented:before{border-radius:12px}.temperature-track.motion-segmented span,.temperature-track.motion-segmented input:checked+span{background:transparent;border-color:transparent;box-shadow:none;transition:color 180ms ease}
.checkout-trail.motion-segmented{isolation:isolate}.checkout-trail.motion-segmented:before{content:'';position:absolute;bottom:0;left:0;height:2px;width:var(--indicator-width);background:var(--brown);transform:translateX(var(--indicator-x));transition:transform 280ms var(--motion-ease),width 280ms var(--motion-ease);pointer-events:none}.checkout-trail.motion-segmented button[aria-current="step"]{border-color:transparent}
.button,.add-drink,.mobile-toggle,.quantity-control button,.mobile-order-nav>a,.mobile-order-nav>button{transition:background-color 180ms ease,color 180ms ease,box-shadow 220ms ease,transform 160ms var(--motion-ease)}
.button:active:not(:disabled),.quantity-control button:active:not(:disabled),.mobile-toggle:active{transform:scale(.975)}
.add-drink .ui-icon{transition:transform 200ms var(--motion-ease)}.add-drink:active .ui-icon{transform:scale(.83)}
#toast{transition:opacity 220ms ease,transform 300ms var(--motion-ease);transform:translateY(8px);box-shadow:0 8px 26px #4a210c17}.drink-scene .scene-temperature{transition:box-shadow 220ms ease}
@keyframes chu-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes chu-backdrop-out{from{opacity:1}to{opacity:0}}
dialog[open]::backdrop{animation:chu-backdrop-in 260ms ease both}
dialog.motion-closing::backdrop{animation:chu-backdrop-out 180ms ease both}
@media(max-width:760px){
 .button:hover{transform:none}.button:active:not(:disabled){transform:scale(.98)}
 .mobile-order-nav>a:active,.mobile-order-nav>button:active{transform:scale(.97);background:#eddfcf}
 .checkout-trail button,.filter{transition:color 180ms ease,opacity 180ms ease}
 #drink-dialog .temperature-options span{min-height:48px;padding:13px}
 .filters.motion-segmented .filter{padding-left:14px;padding-right:14px}
 #floating-order:active{transform:scale(.99)}
 #toast{border-radius:14px;background:var(--paper);font-weight:500}
}
@media(max-width:360px){.filters.motion-segmented .filter{padding-left:11px;padding-right:11px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}
 .button:active:not(:disabled),.quantity-control button:active:not(:disabled),.mobile-toggle:active,.mobile-order-nav>a:active,.mobile-order-nav>button:active,#floating-order:active,.add-drink:active .ui-icon{transform:none}
}
.checkout-trail.motion-segmented{position:relative}
@media(max-width:760px){.checkout-trail.motion-segmented{position:sticky}#order-dialog{overflow-x:hidden}}