/* Motion 04: orbital depth, typed queries and progressive reveal. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.landing,.app-shell{position:relative}
.topbar{position:relative;z-index:2}
button:focus-visible,a:focus-visible{outline:2px solid #b7dcff;outline-offset:5px}
.hero-card>.orb~*,.hero-card>h2,.hero-card>p,.hero-card>.kicker{position:relative;z-index:1}
.orb{width:310px;height:310px;right:-52px;top:-6px;animation:orbFloat 12s ease-in-out infinite;border-color:#ab8ff22b;transform-style:preserve-3d;background:radial-gradient(circle at center,#8276eb08,transparent 65%)}
.orb:before{inset:22px;border:1px solid #a68bf23d;border-top:2px solid #c5b7ff;border-left-color:transparent;animation:orbSpin 24s linear infinite;box-shadow:0 -4px 20px #9e86f30d}
.orb:after{inset:62px 25px;border:1px solid #76ddff50;border-bottom:2px solid #a8edff;animation:orbTilt 18s linear infinite}
.orb-satellite{position:absolute;inset:0;animation:orbSpin 26s linear infinite}
.orb-satellite:before,.orb-satellite:after{content:'';position:absolute;width:6px;height:6px;background:#c2b5ff;border-radius:50%;top:36px;left:44px;box-shadow:0 0 16px #c2b5ff99}
.orb-satellite:after{width:4px;height:4px;top:auto;left:auto;bottom:42px;right:40px;background:#9fe6ff}
.hero-orbit{position:absolute;width:min(530px,70vw);height:min(530px,70vw);right:-50px;top:8px;z-index:0;opacity:.7;pointer-events:none}
.land-hero{isolation:isolate;overflow:hidden}
.land-hero>.kicker,.land-hero>h1,.land-hero>p,.land-hero>.row,.land-hero>.query-window{position:relative;z-index:1}
.land-hero h1{animation:headlineRise .8s var(--motion-ease) both}
.land-hero h1 em{display:inline-block;animation:headlineRise .9s .12s var(--motion-ease) both}
.land-hero .ambient{z-index:1}
.query-window{border:1px solid #8e7fa34a;background:linear-gradient(120deg,#171220dd,#0b1820d9);border-radius:13px;padding:16px 18px;max-width:550px;margin:25px 0 12px;box-shadow:0 12px 48px #0002}
.query-window .query-label{font-size:9px;letter-spacing:.16em;color:#a19aac;margin-bottom:10px;display:flex;justify-content:space-between}
.query-line{display:flex;align-items:center;gap:12px;min-height:30px}
.query-icon{font-size:21px;color:#a6deed;flex-shrink:0}
.typewriter{min-width:0;min-height:1.75em;color:#e7e0f1;display:block;font-size:12px;line-height:1.75;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.typewriter [data-type-lines]:after{content:'';display:inline-block;height:1.05em;border-right:1px solid #b8e8ff;vertical-align:-.12em;margin-left:3px;animation:caretBlink 1.05s steps(1,end) infinite}
.query-key{margin-left:auto;flex-shrink:0;border:1px solid #5f627657;border-radius:5px;color:#9892ab;padding:1px 6px;font-size:11px}
.agent-terminal{margin-top:21px;padding-top:15px;border-top:1px solid #b5a0e526;display:flex;align-items:center;gap:9px;max-width:470px}
.agent-terminal .dot{color:#9fe9d3;flex:0 0 5px;box-shadow:0 0 8px #7ee6c166}
.agent-terminal .typewriter{font-size:10px;color:#a8a4ba}
.motion-reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){html:not(.motion-off) .motion-reveal:not(.is-visible){opacity:0;transform:translateY(16px)}html:not(.motion-off) .motion-reveal{animation:none;transition:opacity .65s var(--motion-ease),transform .65s var(--motion-ease)}}
.fake-chat .bubble:nth-child(3){transition-delay:80ms}.fake-chat .bubble:nth-child(4){transition-delay:150ms}.fake-chat .bubble:nth-child(5){transition-delay:220ms}
.motion-toggle{position:fixed;right:22px;bottom:20px;z-index:20;border-color:#756c8b70;background:#12121ced;backdrop-filter:blur(10px);padding:8px 13px;font-size:9px;letter-spacing:.07em;color:#c0b8d0;gap:7px;box-shadow:0 4px 22px #0003}
.motion-toggle:hover{background:#252132}.motion-toggle:disabled{opacity:.65;cursor:default}
button:not(:disabled):hover,.button:hover{transform:translateY(-2px)}button:not(:disabled):active,.button:active{transform:translateY(0) scale(.97)}
#toast{animation:toastArrive .2s var(--motion-ease) both}
#content>.intro{animation:headlineRise .4s var(--motion-ease) both}
dialog[open]{animation:dialogArrive .2s var(--motion-ease) both}
.motion-hidden *, .motion-hidden *:before,.motion-hidden *:after{animation-play-state:paused!important}
.motion-off *, .motion-off *:before,.motion-off *:after{animation:none!important;scroll-behavior:auto!important}
.motion-off .motion-reveal{opacity:1!important;transform:none!important}
.motion-off .typewriter [data-type-lines]:after{display:none}
.motion-off button,.motion-off .button{transform:none!important;transition:opacity .15s,background-color .15s,border-color .15s!important}
.motion-off .orb:after{transform:rotate(-24deg)}
@keyframes orbFloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(8px) rotate(8deg)}}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbTilt{0%{transform:rotate(-20deg) scaleX(.78)}50%{transform:rotate(160deg) scaleX(.92)}100%{transform:rotate(340deg) scaleX(.78)}}
@keyframes caretBlink{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes headlineRise{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastArrive{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes dialogArrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:680px){.hero-orbit{width:330px;height:330px;right:-170px;top:14px;opacity:.45}.query-window{padding:13px 14px}.typewriter{font-size:11px}.motion-toggle{bottom:82px;right:12px;padding:8px 10px}.landing~.motion-toggle{bottom:15px}.motion-toggle-label{display:none}.agent-terminal .typewriter{font-size:9px}.hero-card .orb{right:-86px;opacity:.65}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important}.motion-reveal{opacity:1;transform:none}.typewriter [data-type-lines]:after{display:none}button,.button{transform:none!important;transition:background-color .15s,border-color .15s!important}}