/* Motion is an enhancement: content remains visible without JavaScript. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.motion-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid #ffffff30;border-radius:20px;padding:4px 9px;background:transparent;color:inherit;font:inherit;font-size:9px;letter-spacing:0;cursor:pointer;white-space:nowrap;min-height:26px}.motion-toggle::before{content:'';width:5px;height:5px;border-radius:50%;background:#b5a4ff}.motion-toggle[aria-pressed=false]::before{background:#8b8796}.preview-bar>.preview-tools{display:flex;align-items:center;gap:18px}.topbar-right .motion-toggle{color:#726880;border-color:#e6e1ef;background:white}.motion-toggle:focus-visible{outline:2px solid #9b85ff;outline-offset:3px}
html[data-motion=on] .hero-art{transform:translate3d(var(--art-x,0px),var(--art-y,0px),0) scale(1.025);transition:transform 850ms var(--motion-ease);will-change:transform}
html[data-motion=on] .hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--light-x,75%) var(--light-y,40%),#b59aff12,transparent 52%);z-index:0}
html[data-motion=on] :is(.button,.nav-action,.mock-button){transition:transform 220ms var(--motion-ease),box-shadow 220ms ease,border-color 220ms ease,background-color 220ms ease}
html[data-motion=on] :is(.button,.nav-action):active{transform:translateY(1px) scale(.985)}
html[data-motion=on] :is(.button,.nav-action,.inline-link)>span[aria-hidden],html[data-motion=on] .opportunity>svg:last-child{display:inline-block;transition:transform 250ms var(--motion-ease)}
html[data-motion=on] :is(.button,.nav-action,.inline-link):hover>span[aria-hidden]{transform:translate(2px,-2px)}
html[data-motion=on] .nav nav a{position:relative}html[data-motion=on] .nav nav a::after{content:'';position:absolute;left:0;bottom:-8px;height:1px;width:100%;background:#7157ff;transform:scaleX(0);transform-origin:left;transition:transform 240ms var(--motion-ease)}html[data-motion=on] .nav nav a:hover::after{transform:scaleX(1)}
html[data-motion=on] :is(.opportunity,.queue-row,.nav-item,.workflow-tabs button){transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease}
html[data-motion=on] .opportunity:hover>svg:last-child{transform:translateX(3px)}html[data-motion=on] .workflow-tabs button>b{transition:transform 230ms var(--motion-ease)}html[data-motion=on] .workflow-tabs button:hover>b{transform:translate(2px,-2px)}
html[data-motion=on] .product-stage{position:relative;isolation:isolate}html[data-motion=on] .product-stage::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at var(--glow-x,50%) var(--glow-y,0%),#a88cff21,transparent 60%);z-index:-1}
html[data-motion=on] .brand-symbol,html[data-motion=on] .wordmark svg{transition:transform 350ms var(--motion-ease)}html[data-motion=on] :is(.brand,.wordmark):hover svg{transform:translateY(-2px)}
/* Pause is also a visual reset, including existing prototype transitions. */
html[data-motion=off]{scroll-behavior:auto}html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html[data-motion=off] .hero-art{transform:none}html[data-motion=off] .button:hover{transform:none}
@media(max-width:600px){.preview-bar>.preview-tools{gap:10px}.motion-toggle{font-size:8px;padding:3px 7px;min-height:24px}.topbar-right{gap:6px}.topbar-right .demo-pill{font-size:8px}.topbar-right .motion-toggle{font-size:8px}.preview-bar a span{margin-left:2px}}
@media(hover:none),(pointer:coarse){html[data-motion=on] .hero-art{transform:none;will-change:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-art{transform:none!important;will-change:auto!important}}

/* Reserve the final headline geometry while letters are revealed. */
.hero h1>.headline-line{display:inline-block;vertical-align:top;transform-origin:left center}.hero h1>.headline-line:not(.headline-accent){color:#fff}
/* A single light sweep across the accent after typing, without scaling the type. */
@supports (background-clip:text){
  html[data-motion=on] .hero h1>.headline-accent{background-image:linear-gradient(110deg,#b4a2ff 0%,#b4a2ff 40%,#ddd3ff 46%,#fff 50%,#ddd3ff 54%,#b4a2ff 60%,#b4a2ff 100%);background-size:300% 100%;background-position:100% 50%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}