/* Motion layers preserve layout and keep all content available without JavaScript. */
.motion-toggle{display:none}
.chat-body{height:490px;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#526d5c transparent}
.chat-body>*{flex-shrink:0}
body[data-motion] .motion-toggle{display:inline-flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid #5740f22b;border-radius:4px;background:#0a120dcc;color:#b7c6ba;font:400 12px var(--body);letter-spacing:0;cursor:pointer;margin-top:-8px;margin-bottom:-8px}
.motion-toggle:hover{border-color:#5740f270;color:var(--green)}
.motion-toggle:disabled{cursor:default;opacity:.65}
.motion-symbol{width:8px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.motion-toggle[aria-pressed=true] .motion-symbol{width:0;height:0;border:5px solid transparent;border-left:7px solid currentColor;border-right:0}
.hero-art{transform-origin:68% 49%;translate:var(--pointer-x,0px) var(--pointer-y,0px);transition:translate 1.3s cubic-bezier(.16,1,.3,1)}
body[data-motion=on] .hero-art{animation:orbital-breathe 15s ease-in-out infinite}
body[data-motion=on] .hero .spark{animation:spark-turn 20s linear infinite}
body[data-motion=on] .hero-content>.eyebrow{animation:hero-arrive .85s .05s both}
body[data-motion=on] .hero h1{animation:hero-arrive 1.1s .14s both}
body[data-motion=on] .hero-description{animation:hero-arrive 1s .3s both}
body[data-motion=on] .hero-actions{animation:hero-arrive 1s .43s both}
body[data-motion=on] .hero-note{animation:hero-arrive 1s .53s both}
body[data-motion=on] .hero-bottom>a span{animation:explore-nudge 2.8s ease-in-out infinite}
body[data-motion=on] h1>span{background:linear-gradient(105deg,#5740f2 12%,#5740f2 36%,#edfff0 47%,#5740f2 58%,#5740f2 90%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:title-light 9s ease-in-out infinite}
.button{position:relative;overflow:hidden}
.button>span{transition:transform .35s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){
  body[data-motion=on] .button:hover>span{transform:translate(3px,-3px)}
  body[data-motion=on] .feature:hover .feature-icon{transform:translateY(-5px) rotate(-5deg);border-color:#5740f280;background-color:#5740f212}
  body[data-motion=on] .plan:hover{translate:0 -6px;border-color:#5740f288;box-shadow:0 18px 45px #0003}
}
.feature-icon{transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s,background-color .4s}
.plan{transition:translate .5s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s}
body[data-motion=on] .scroll-reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .85s var(--reveal-delay,0ms),transform .85s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms)}
body[data-motion=on] .scroll-reveal.is-visible,body[data-motion=on] .scroll-reveal:focus-within{opacity:1;transform:translateZ(0)}
body[data-motion=on] .bubble{animation:message-arrive .5s cubic-bezier(.16,1,.3,1) var(--message-delay,0ms) both}
body[data-motion=on] .chat:focus-within .bubble{animation:none}
.step:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#5740f255,var(--green));pointer-events:none}
body[data-motion=on] .demo-playing .step.active:after{animation:step-progress 8.5s linear both}
body[data-motion=on] .demo-playing .chat-header .avatar{animation:assistant-glow 4s ease-in-out infinite}
body[data-motion=on] .faq-list details[open] p{animation:message-arrive .4s ease both}
.closing:after{content:'';position:absolute;z-index:0;inset:30% 0 -40%;background:radial-gradient(ellipse at 50% 100%,#84ffac14,transparent 64%);pointer-events:none;transform-origin:50% 100%}
.closing>*{position:relative;z-index:1}
body[data-motion=on] .closing:after{animation:closing-glow 10s ease-in-out infinite}
body[data-motion=off] .hero-art{translate:0 0;transform:none}
body[data-motion=off] *,body[data-motion=off] *:before,body[data-motion=off] *:after{animation:none!important;transition:none!important}
body[data-motion=off] .scroll-reveal{opacity:1;transform:none}
body.page-inactive *,body.page-inactive *:before,body.page-inactive *:after,.hero.scene-paused *{animation-play-state:paused!important}
@keyframes orbital-breathe{0%,100%{transform:translate3d(0,0,0) rotate(-1deg) scale(1.015)}50%{transform:translate3d(-13px,-17px,0) rotate(1.8deg) scale(1.065)}}
@keyframes hero-arrive{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes title-light{0%,15%{background-position:100% 50%}65%,100%{background-position:0% 50%}}
@keyframes spark-turn{to{transform:rotate(360deg)}}
@keyframes explore-nudge{0%,65%,100%{transform:translateY(0)}80%{transform:translateY(5px)}}
@keyframes message-arrive{from{opacity:0;transform:translate3d(0,9px,0) scale(.985)}to{opacity:1;transform:translateZ(0) scale(1)}}
@keyframes step-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes assistant-glow{0%,100%{box-shadow:0 0 0 0 #5740f200}50%{box-shadow:0 0 22px 1px #5740f21c}}
@keyframes closing-glow{0%,100%{opacity:.25;transform:scale(.88)}50%{opacity:1;transform:scale(1.1)}}
@media(max-width:760px){
  .chat-body{height:520px;min-height:0}
  .hero-bottom{flex-wrap:wrap;align-items:center;gap:18px 10px}
  .hero-bottom>span{flex-basis:100%;font-size:12px}
  .hero-bottom>a{margin-left:auto}
  .hero{padding-bottom:140px;min-height:900px}
  .orbit-note{bottom:142px}
  body[data-motion=on] .hero-art{animation-name:orbital-breathe-mobile;animation-duration:17s}
  body[data-motion] .motion-toggle{min-height:38px}
  body[data-motion=on] .scroll-reveal{transform:translate3d(0,18px,0)}
  body[data-motion=on] .scroll-reveal.is-visible,body[data-motion=on] .scroll-reveal:focus-within{transform:none}
}
@keyframes orbital-breathe-mobile{0%,100%{transform:translate3d(0,0,0) scale(1.015)}50%{transform:translate3d(-6px,-9px,0) scale(1.055)}}
@media(prefers-reduced-motion:reduce){
  .hero-art{translate:0 0!important;transform:none!important}
  .scroll-reveal{opacity:1!important;transform:none!important}
  h1>span{background:none!important;color:var(--green)!important}
  *,*:before,*:after{animation:none!important;transition:none!important}
}