/* Shared motion choreography. Layout and content remain fully usable without JS. */

.motion-surface{position:relative;isolation:isolate}
.glass-light{position:absolute;inset:1px;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:-1;contain:paint}
.glass-light:before{content:'';position:absolute;inset:-40% -60%;background:linear-gradient(112deg,transparent 30%,#c5ff3d00 42%,#dfff9921 48%,#faffdf16 51%,transparent 59%);transform:translate3d(-28%,0,0);animation:glass-travel var(--motion-light) ease-in-out infinite alternate}
.opening:before{animation:aurora-breathe 18s ease-in-out infinite alternate;transform-origin:50% 80%}
.hero-scene{transform:perspective(1400px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-style:flat;perspective:none;isolation:isolate}
.hero-scene:focus-within{transform:none}
.hero-gradient{background-size:180% 100%;animation:neon-shift 14s ease-in-out infinite alternate}
.scene-note{animation:note-float 9s ease-in-out infinite;animation-delay:-4s}
.scene-tag{animation:note-float 11s ease-in-out infinite;animation-delay:-7s}
.brand-card{animation:specimen-float 10s ease-in-out infinite}
.type-card{animation:specimen-float 11s ease-in-out infinite reverse;animation-delay:-4s}
.palette{animation:specimen-float 9s ease-in-out infinite;animation-delay:-3s}
.web-browser{animation:specimen-float 12s ease-in-out infinite}
.web-phone{animation:specimen-float 10s ease-in-out infinite reverse;animation-delay:-3s}
.hello-tile{animation:specimen-float 10s ease-in-out infinite}
.hello-message{animation:specimen-float 9s ease-in-out infinite}.message-us{animation-delay:-4s}
.task-progress{overflow:hidden}.task-progress span{transform-origin:left;animation:task-fill 7s var(--motion-ease) infinite}
.crm-toast{animation:toast-arrive 7s var(--motion-ease) infinite}
.crm-art .contact-card{animation:contact-lift 7s var(--motion-ease) infinite}.crm-art .contact-card.secondary{animation-delay:-3s}
.automation-art .flow-node{animation:none}
.workflow-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.workflow-route{fill:none;stroke:var(--green);stroke-opacity:.2;stroke-width:1.5}
.workflow-pulse{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:9 100;stroke-dashoffset:110;animation:workflow-travel 6s var(--motion-ease) infinite}
.workflow-pulse.second{animation-delay:2s}
.flow-node>span{animation:workflow-step 6s ease-in-out infinite}.node-two>span{animation-delay:2s}.node-three>span{animation-delay:4s}
.conversation .bubble{animation:conversation-in 8s var(--motion-ease) infinite}.conversation .bubble.second{animation-delay:.9s}
.scope-paper p strong{animation:scope-check 6s ease-in-out infinite}.scope-paper p:nth-of-type(2) strong{animation-delay:1s}.scope-paper p:nth-of-type(3) strong{animation-delay:2s}
.launch-ring{animation:launch-breathe 8s ease-in-out infinite}.launch-stamp{animation:specimen-float 8s ease-in-out infinite;animation-delay:-3s}
.button,.header-cta,.nav-cta{position:relative;isolation:isolate;overflow:hidden;transition:transform 260ms var(--motion-ease),background 180ms,box-shadow 260ms var(--motion-ease)}
.button:before,.header-cta:before,.nav-cta:before{content:'';position:absolute;inset:-70% -30%;pointer-events:none;background:linear-gradient(110deg,transparent 37%,#fafcf54d 50%,transparent 63%);transform:translateX(-120%);transition:transform 700ms var(--motion-ease)}
.button:hover:before,.header-cta:hover:before,.nav-cta:hover:before{transform:translateX(120%)}
.button svg,.button>span[aria-hidden],.header-cta>span,.quiet-link svg,.solution-label a svg{transition:translate 300ms var(--motion-ease)}
.button:hover svg,.button:hover>span[aria-hidden],.header-cta:hover>span,.quiet-link:hover svg,.solution-label a:hover svg{translate:2px -2px}
.button:active,.header-cta:active,.nav-cta:active{transform:translateY(1px) scale(.975);transition-duration:var(--motion-press)}
.nav-pill>a:not(.nav-cta){position:relative}.nav-pill>a:not(.nav-cta):after{content:'';position:absolute;inset-inline:18px;bottom:8px;height:1px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--motion-ease)}.nav-pill>a:not(.nav-cta):hover:after{transform:scaleX(1)}
.menu span,.menu-toggle span{transition:transform 260ms var(--motion-ease)}
.menu[aria-expanded=true] span:first-child,.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu[aria-expanded=true] span:last-child,.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.faq-list summary span{transition:transform 350ms var(--motion-ease)}
#motion-toggle{position:fixed;bottom:14px;right:18px;z-index:50;padding:9px 15px;min-height:38px;font:10px/1.5 var(--font);background:var(--glass);color:var(--ink);border:1px solid var(--glass-edge);backdrop-filter:blur(20px);border-radius:var(--pill);box-shadow:var(--shadow-low);cursor:pointer}
#motion-toggle:focus-visible{outline:3px solid var(--green);outline-offset:4px}#motion-toggle:disabled{cursor:default}
@keyframes glass-travel{to{transform:translate3d(28%,0,0)}}
@keyframes aurora-breathe{from{transform:translate3d(-3%,1%,0) scale(.98)}to{transform:translate3d(3%,-2%,0) scale(1.05)}}
@keyframes neon-shift{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes note-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes specimen-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes task-fill{0%,12%{transform:scaleX(.3)}45%,85%{transform:scaleX(1)}100%{transform:scaleX(.3)}}
@keyframes toast-arrive{0%,16%{opacity:0;translate:32px 22px;scale:.86}29%{opacity:1;translate:-3px -4px;scale:1.035}37%,82%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:12px -8px;scale:.97}}
@keyframes contact-lift{0%,100%{translate:0 0}35%,55%{translate:0 -4px}}
@keyframes workflow-travel{0%,10%{stroke-dashoffset:110;opacity:0}15%{opacity:1}48%{stroke-dashoffset:-10;opacity:1}55%,100%{stroke-dashoffset:-10;opacity:0}}
@keyframes workflow-step{0%,28%{background:var(--signal);color:var(--night);box-shadow:0 0 0 5px #c5ff3d20}35%,100%{background:var(--surface);color:var(--green);box-shadow:0 0 0 0 #c5ff3d00}}
@keyframes conversation-in{0%{opacity:.25;translate:0 8px}12%,86%{opacity:1;translate:0 0}100%{opacity:.25;translate:0 8px}}
@keyframes scope-check{0%,25%{opacity:1}50%{opacity:.45}75%,100%{opacity:1}}
@keyframes launch-breathe{0%,100%{scale:1}50%{scale:1.045}}
/* A scene assembles, fans out, and settles into a small amount of idle motion. */
.hero-scene{transform:translateY(var(--scroll-lift,0px)) perspective(1400px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.scene-window{--fan:var(--fan-scroll,0);animation:scene-drift 10s ease-in-out infinite;transition:transform var(--motion-fan) var(--motion-spring),box-shadow var(--motion-fan) var(--motion-ease);transform-origin:50% 75%}
.scene-main{transform:translateY(calc(var(--fan)*-18px)) rotate(calc(-3deg + var(--fan)*3deg));transition-delay:60ms}
.scene-slab{transform:translate(calc(var(--fan)*-18px),calc(var(--fan)*8px)) rotate(calc(-10deg - var(--fan)*4deg));animation-delay:-3s;transition-delay:0ms}
.scene-phone{transform:translate(calc(var(--fan)*18px),calc(var(--fan)*-12px)) rotate(calc(9deg + var(--fan)*4deg));animation-delay:-6s;transition-delay:120ms}
.scene-window:focus-visible{z-index:8;outline-color:var(--signal);box-shadow:var(--shadow-float)}
@media(hover:hover) and (pointer:fine){
  .hero-scene:hover .scene-window,.hero-scene:focus-within .scene-window{--fan:1}
  .hero-scene .scene-window:hover,.hero-scene .scene-window:focus-visible{z-index:8;scale:1.025}
  .scene-window{transition:transform var(--motion-fan) var(--motion-spring),scale var(--motion-fan) var(--motion-spring),box-shadow var(--motion-fan) var(--motion-ease)}
}
.palette{isolation:isolate}.palette i{position:relative;border:1px solid var(--glass-edge);transition:transform var(--motion-fan) var(--motion-spring);transform:translateX(var(--swatch-x)) rotate(var(--swatch-turn));z-index:var(--swatch-z)}
.palette i:nth-child(1){--swatch-x:18px;--swatch-turn:-12deg;--swatch-z:4}
.palette i:nth-child(2){--swatch-x:6px;--swatch-turn:-4deg;--swatch-z:3;transition-delay:55ms}
.palette i:nth-child(3){--swatch-x:-6px;--swatch-turn:4deg;--swatch-z:2;transition-delay:110ms}
.palette i:nth-child(4){--swatch-x:-18px;--swatch-turn:12deg;--swatch-z:1;transition-delay:165ms}
.brand-solution:is(:hover,:focus-within) .palette i{transform:translate(0,calc(var(--swatch-z)*-2px)) rotate(0deg)}
.brand-solution:is(:hover,:focus-within) .palette i:hover{z-index:5;transform:translateY(-10px) scale(1.1)}

/* Three independent radial lights cross-fade and drift under the content. */
.ambient-mesh{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:-1;pointer-events:none;contain:paint}
.ambient-mesh:before,.ambient-mesh:after{content:'';position:absolute;inset:10% -25% -30%;background:radial-gradient(ellipse at 25% 70%,var(--glow-lime),transparent 48%),radial-gradient(ellipse at 75% 40%,var(--glow-fog),transparent 50%);filter:blur(36px);animation:mesh-drift 19s ease-in-out infinite alternate}
.ambient-mesh:after{background:radial-gradient(ellipse at 70% 80%,var(--glow-lime),transparent 58%);animation-duration:27s;animation-direction:alternate-reverse;animation-delay:-9s}
.opening .ambient-mesh{inset:38% 0 0}.hello-art{isolation:isolate}
@keyframes mesh-drift{0%{transform:translate3d(-7%,3%,0) scale(.92);opacity:.35}50%{opacity:.85}100%{transform:translate3d(8%,-5%,0) scale(1.09);opacity:.6}}
@keyframes scene-drift{0%,100%{translate:0 0}50%{translate:2px calc(var(--motion-drift)*-1)}}

/* Blur changes are bounded to small panes, never a full-viewport blur animation. */
.nav-pill,.aurora-inner .header nav{backdrop-filter:blur(var(--glass-blur-rest));transition:backdrop-filter var(--motion-fan) var(--motion-ease),border-color var(--motion-fan),box-shadow var(--motion-fan)}
.nav-pill:is(:hover,:focus-within),.aurora-inner .header nav:is(:hover,:focus-within){backdrop-filter:blur(var(--glass-blur-active));border-color:var(--glow-edge);box-shadow:var(--shadow-interactive)}
.scene-note{backdrop-filter:blur(var(--scroll-blur,var(--glass-blur-rest)));transition:backdrop-filter var(--motion-fan),border-color var(--motion-fan)}
.type-card,.hello-tile{transition:backdrop-filter var(--motion-fan) var(--motion-ease),border-color var(--motion-fan),box-shadow var(--motion-fan)}
.brand-solution:is(:hover,:focus-within) .type-card,.hello-art:is(:hover,:focus-within) .hello-tile{backdrop-filter:blur(var(--glass-blur-active)) saturate(.8);border-color:var(--glow-edge);box-shadow:var(--shadow-interactive)}

/* Small, spring-eased controls and a two-part assembly of the original mark. */
.button,.header-cta,.nav-cta,.solution-label a{transition:scale 440ms var(--motion-spring),transform 440ms var(--motion-spring),background var(--fast),box-shadow 440ms var(--motion-ease)}
@media(hover:hover){.button:hover,.header-cta:hover,.nav-cta:hover,.solution-label a:hover{scale:var(--motion-hover-scale);box-shadow:var(--shadow-interactive)}}
.button:focus-visible,.header-cta:focus-visible,.nav-cta:focus-visible,.solution-label a:focus-visible{box-shadow:var(--shadow-interactive)}
.button:active,.header-cta:active,.nav-cta:active,.solution-label a:active{scale:.975;transition-duration:var(--motion-press)}
.launch-ring .assembly-mark{overflow:visible;transform:rotate(var(--mark-turn,0deg));transition:transform 180ms linear}
.mark-part{transform-box:view-box;transform-origin:center;animation:mark-connect 9s var(--motion-ease) infinite}
.mark-part.second{animation-name:mark-connect-second}
@keyframes mark-connect{0%,15%,85%,100%{transform:translate(0,0) rotate(0)}42%,58%{transform:translate(-3px,-3px) rotate(-8deg)}}
@keyframes mark-connect-second{0%,15%,85%,100%{transform:translate(0,0) rotate(0)}42%,58%{transform:translate(3px,3px) rotate(8deg)}}

.offscreen,.offscreen:before,.offscreen:after,.offscreen *,.offscreen *:before,.offscreen *:after,.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{transition:none!important}
.motion-paused .hero-scene{transform:none}.motion-paused .crm-toast{opacity:1;translate:none;animation:none}
@media(hover:none),(pointer:coarse){.hero-scene{transform:none}.button:hover:before,.header-cta:hover:before,.nav-cta:hover:before{transform:translateX(-120%)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-scene{transform:none}.glass-light{display:none}.crm-toast{opacity:1;translate:none}.workflow-pulse{display:none}}
html.motion-paused{scroll-behavior:auto}
body:not(.motion-ready) *,body:not(.motion-ready) *:before,body:not(.motion-ready) *:after{animation:none!important}
#motion-toggle{display:none}.motion-ready #motion-toggle{display:block}

@media(max-width:700px){.hero-scene{transform:none}}

/* Static modes keep every linked card in its ordinary, reachable layout. */
.motion-paused .hero-scene .scene-window{--fan:0;scale:1;translate:none;animation:none}
.motion-paused .scene-note{backdrop-filter:blur(var(--glass-blur-rest))}
.motion-paused .brand-solution .palette i{transform:none}
.motion-paused .launch-ring .assembly-mark,.motion-paused .mark-part{animation:none;transform:none}
.motion-paused .crm-toast{scale:1}
@media(prefers-reduced-motion:reduce){.hero-scene:is(:hover,:focus-within) .scene-window{--fan:0;scale:1;translate:none}.brand-solution:is(:hover,:focus-within) .palette i,.launch-ring .assembly-mark,.mark-part{transform:none}.crm-toast{scale:1}.ambient-mesh{display:none}.button:hover,.header-cta:hover,.nav-cta:hover,.solution-label a:hover{scale:1}}
@media(max-width:700px){.hero-scene .scene-window{--fan:0}.scene-window:hover{scale:1}}