@import url('catalog.css');
/* Primary copy and actions render immediately. Motion explains the product sequence. */
.motion-toggle{background:transparent;color:inherit;border:0;padding:0;font:inherit;cursor:pointer}
.motion-toggle:disabled{cursor:default;opacity:.65}
.motion-paused *, .motion-paused *:before,.motion-paused *:after{animation:none!important}
.motion-paused .reveal{opacity:1;transform:none;transition:none}
@media(max-width:760px){.orbit{display:none}}
@media (prefers-reduced-motion:no-preference){
 .hero .product-window{animation:window-enter 1.1s .25s both}
 .hero .base-card{animation:base-glow 9s 2s 2}
 .hero .question{animation:conversation-enter .8s 1s both}
 .hero .answer{animation:conversation-enter .8s 1.5s both}
 .hero .source-pill{animation:source-glow 9s 2s 2}
 .hero .chat-actions{animation:conversation-enter .8s 2s both}
 .hero .source-note{animation:enter .8s 2.2s both,bob 6s 3s ease-in-out infinite}
}
@keyframes enter{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}
@keyframes window-enter{from{opacity:0;translate:0 25px}to{opacity:1;translate:0 0}}
@keyframes conversation-enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes base-glow{0%,40%,100%{box-shadow:0 0 0 1px transparent}15%,25%{box-shadow:0 0 0 1px #dd82467a,0 0 20px #ff7a2410}}
@keyframes source-glow{0%,30%,75%,100%{box-shadow:0 0 0 1px transparent}50%,60%{box-shadow:0 0 0 1px #dd82467a,0 0 20px #ff7a2410}}