/* NovaLab shared explainer scenes, redesign 2026-11. Loaded by any page that has a dark stage scene (.xp), after css/base.css, with js/explainers.js.
   Scenes are drawn in HTML and CSS (no video files), id-free so the same markup can be cloned. One dark stage, the site's blue as light.
   The scene runs only while it is on screen: js/explainers.js adds .run, and without .run every animation is off.
   Pause: the [data-motion-toggle] button (js/base.js) sets html.motion-paused, which pauses them all (css/base.css section 13).
   A page puts a .xp inside a box that sets the size (the scene fills it and scales in cqw); that box needs position:relative and overflow:hidden if it is not already.
   Scenes: chat agent (xp), SEO and AI visibility globe (xp-seo), website that builds itself (xp-web). */
/* service explainers: looping scenes drawn in HTML and CSS (no video files). One dark stage, the site's blue as light.
   Sizes are in cqw so a scene scales with its box. Motion only under no-preference; otherwise the finished state shows. */
.has-xp{background:#0b0d12}
.xp{position:absolute;inset:0;container-type:inline-size;overflow:hidden;background:#0b0d12;color:#eaf6fc;font-family:var(--sans)}
.xp-glow{position:absolute;left:50%;top:46%;width:120cqw;height:120cqw;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(79,184,230,.26),rgba(79,184,230,.07) 55%,rgba(79,184,230,0) 72%);pointer-events:none}
.xp .xp-kicker{max-width:none;position:absolute;left:8cqw;top:7cqw;margin:0;font:italic 400 5.6cqw/1.1 var(--serif);color:#eaf6fc;opacity:.9}
.xp-chat{position:absolute;left:8cqw;right:8cqw;top:21cqw;display:flex;flex-direction:column;gap:4.2cqw}
.xp .xb{color:#eaf6fc;margin:0;max-width:76%;padding:3.4cqw 4cqw;border:1px solid rgba(79,184,230,.5);border-radius:3.6cqw;background:rgba(234,246,252,.06);font-size:4.1cqw;line-height:1.35;box-shadow:0 0 6cqw rgba(79,184,230,.12)}
.xb-in{align-self:flex-start;border-bottom-left-radius:.8cqw}
.xb-out{align-self:flex-end;border-bottom-right-radius:.8cqw}
.xb-meta{display:block;position:relative;height:4.4cqw;margin-bottom:1cqw;font-size:2.9cqw;line-height:4.4cqw;color:#9fd8f1}
.xb-meta span{position:absolute;left:0;top:0;white-space:nowrap}
.xnode{position:relative;align-self:center;height:12cqw;width:100%}
.xring{position:absolute;left:50%;top:50%;width:12cqw;height:12cqw;margin:-6cqw 0 0 -6cqw;border-radius:50%;border:1px solid #4fb8e6;background:radial-gradient(circle at 35% 30%,#8fd6f5,#1a6f96 70%)}
.xnode-l{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 2.7cqw/1 var(--sans);color:#06141b}
.xtool{position:absolute;top:50%;padding:1.2cqw 2.6cqw;border:1px solid rgba(79,184,230,.5);border-radius:99cqw;font-size:3cqw;transform:translateY(-50%);background:#0b0d12}
.xtool.xt1{left:0}.xtool.xt2{right:0}
.xnode::before,.xnode::after{content:"";position:absolute;top:50%;height:1px;background:#4fb8e6;opacity:.7}
.xnode::before{left:19cqw;right:calc(50% + 6.5cqw);transform-origin:100% 50%}
.xnode::after{left:calc(50% + 6.5cqw);right:19cqw;transform-origin:0 50%}
.xp .xsent{align-self:flex-end;margin:-2cqw 0 0;font-size:3cqw;color:#9fd8f1}
.xsent::before{content:"";display:inline-block;width:2.4cqw;height:1.2cqw;margin-right:1.4cqw;border-left:1.5px solid #4fb8e6;border-bottom:1.5px solid #4fb8e6;transform:rotate(-45deg) translateY(-.6cqw)}
.xp-steps{position:absolute;left:8cqw;right:8cqw;bottom:7cqw;margin:0;padding:0;list-style:none;height:9cqw;border-top:1px solid rgba(234,246,252,.18)}
.xp-steps li{position:absolute;left:0;top:2.6cqw;font:400 5.2cqw/1.15 var(--serif);white-space:nowrap}
/* finished state (also the reduced-motion state): reply approved and sent, last step named */
.m-draft,.xp-steps .xs1,.xp-steps .xs2,.xp-steps .xs3{opacity:0}
.xp .xb-out{background:#4fb8e6;border-color:#4fb8e6;color:#06141b}
.xb-out .xb-meta{color:#0b3a4f}
@media(prefers-reduced-motion:no-preference){
  .xp *,.xp .xnode::before,.xp .xnode::after{animation-duration:12s;animation-iteration-count:infinite;animation-timing-function:var(--ease);animation-fill-mode:both}
  .xp .xa1{animation-name:xpA1}.xp .xa2{animation-name:xpA2}.xp .xa3{animation-name:xpA3}.xp .xa5{animation-name:xpA5}
  .xp .xring{animation-name:xpRing}.xp .xt1{animation-name:xpT1}.xp .xt2{animation-name:xpT2}.xp .xnode::before{animation-name:xpLine}.xp .xnode::after{animation-name:xpLine2}
  .xp .m-draft{animation-name:xpDraft}.xp .m-ok{animation-name:xpOk}
  .xp .xs1{animation-name:xpS1}.xp .xs2{animation-name:xpS2}.xp .xs3{animation-name:xpS3}.xp .xs4{animation-name:xpS4}
  .xp .xp-glow{animation-name:xpGlow}
  .xp:not(.run) *,.xp:not(.run) .xnode::before,.xp:not(.run) .xnode::after{animation-name:none!important}
}
@keyframes xpA1{0%,3%{opacity:0;transform:translateY(4cqw)}9%,93%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes xpA2{0%,17%{opacity:0;transform:scale(.9)}23%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes xpRing{0%,22%{box-shadow:0 0 0 0 rgba(79,184,230,.5)}30%{box-shadow:0 0 0 3.5cqw rgba(79,184,230,0)}31%{box-shadow:0 0 0 0 rgba(79,184,230,.5)}39%{box-shadow:0 0 0 3.5cqw rgba(79,184,230,0)}40%,100%{box-shadow:0 0 0 0 rgba(79,184,230,0)}}
@keyframes xpLine{0%,24%{transform:scaleX(0);opacity:0}30%,93%{transform:scaleX(1);opacity:.7}98%,100%{opacity:0}}
@keyframes xpLine2{0%,29%{transform:scaleX(0);opacity:0}35%,93%{transform:scaleX(1);opacity:.7}98%,100%{opacity:0}}
@keyframes xpT1{0%,26%{opacity:0;box-shadow:none}31%{opacity:1;box-shadow:0 0 4cqw rgba(79,184,230,.6)}40%,93%{opacity:1;box-shadow:none}98%,100%{opacity:0}}
@keyframes xpT2{0%,31%{opacity:0;box-shadow:none}36%{opacity:1;box-shadow:0 0 4cqw rgba(79,184,230,.6)}45%,93%{opacity:1;box-shadow:none}98%,100%{opacity:0}}
@keyframes xpA3{0%,43%{opacity:0;transform:translateY(4cqw);background:rgba(234,246,252,.06);border-color:rgba(79,184,230,.5);border-style:dashed;color:#eaf6fc}50%,66%{opacity:1;transform:none;background:rgba(234,246,252,.06);border-color:rgba(79,184,230,.5);border-style:dashed;color:#eaf6fc}72%,93%{opacity:1;transform:none;background:#4fb8e6;border-color:#4fb8e6;border-style:solid;color:#06141b}98%,100%{opacity:0;transform:none}}
@keyframes xpDraft{0%,43%{opacity:0}50%,64%{opacity:1;color:#9fd8f1}68%,100%{opacity:0}}
@keyframes xpOk{0%,67%{opacity:0}72%,93%{opacity:1;color:#0b3a4f}98%,100%{opacity:0}}
@keyframes xpA5{0%,78%{opacity:0}83%,93%{opacity:1}98%,100%{opacity:0}}
@keyframes xpS1{0%,3%{opacity:0;transform:translateY(2cqw)}8%,18%{opacity:1;transform:none}22%,100%{opacity:0;transform:translateY(-2cqw)}}
@keyframes xpS2{0%,20%{opacity:0;transform:translateY(2cqw)}25%,60%{opacity:1;transform:none}64%,100%{opacity:0;transform:translateY(-2cqw)}}
@keyframes xpS3{0%,63%{opacity:0;transform:translateY(2cqw)}68%,77%{opacity:1;transform:none}81%,100%{opacity:0;transform:translateY(-2cqw)}}
@keyframes xpS4{0%,80%{opacity:0;transform:translateY(2cqw)}85%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes xpGlow{0%,100%{opacity:.75}50%{opacity:1}}

/* SEO and AI visibility scene: wireframe globe over a neon grid floor, a gold pin with radar rings, lines out to the three places people search */
.xg-floor{position:absolute;left:-40%;right:-40%;top:52%;bottom:-30%;background:repeating-linear-gradient(90deg,rgba(79,184,230,.28) 0 1px,transparent 1px 7cqw),repeating-linear-gradient(0deg,rgba(79,184,230,.28) 0 1px,transparent 1px 7cqw);transform:perspective(60cqw) rotateX(64deg);transform-origin:50% 0;-webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 78%);mask-image:radial-gradient(closest-side,#000 20%,transparent 78%)}
.xg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.xg-globe{stroke:#4fb8e6;stroke-width:.22;opacity:.9}
.xg-globe circle{stroke-width:.45;fill:rgba(11,13,18,.82);filter:drop-shadow(0 0 1.8px rgba(79,184,230,.95))}
.xg-lat{opacity:.55}
.xg-m{vector-effect:non-scaling-stroke;stroke-width:.7px;transform-box:fill-box;transform-origin:50% 50%;opacity:.6}
.xg-m2{transform:scaleX(.82)}.xg-m3{transform:scaleX(.5)}.xg-m4{transform:scaleX(.12)}.xg-m5{transform:scaleX(.5)}.xg-m6{transform:scaleX(.82)}
.xg-arc{stroke:#f2b95a;stroke-width:.35;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 1px rgba(242,185,90,.9))}
.xg-ring{stroke:#f2b95a;stroke-width:.45;filter:drop-shadow(0 0 1px rgba(242,185,90,.8));transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.xg-pin{fill:#f2b95a;filter:drop-shadow(0 0 1.6px #f2b95a)}
.xg-you{position:absolute;left:61cqw;top:36.5cqw;font-size:2.9cqw;color:#f6d59c;white-space:nowrap}
.xchip{position:absolute;top:89cqw;width:27cqw;padding:1.6cqw 0;text-align:center;border:1px solid rgba(79,184,230,.55);border-radius:99cqw;background:#0b0d12;font-size:3cqw;color:#eaf6fc;white-space:nowrap}
.xc1{left:2.5cqw}.xc2{left:36.5cqw}.xc3{left:70.5cqw}
.xchip{border-color:#f2b95a;box-shadow:0 0 4cqw rgba(242,185,90,.35)}
@media(prefers-reduced-motion:no-preference){
  .xp-seo .xg-floor{animation-name:xqFloor;animation-duration:6s;animation-timing-function:linear}
  .xp-seo .xg-globe{animation-name:xqIn}
  .xp-seo .xg-m{animation-name:xqSpin;animation-duration:9s;animation-timing-function:cubic-bezier(.37,0,.63,1);animation-direction:alternate}
  .xp-seo .xg-m2{animation-delay:-1.5s}.xp-seo .xg-m3{animation-delay:-3s}.xp-seo .xg-m4{animation-delay:-4.5s}.xp-seo .xg-m5{animation-delay:-6s}.xp-seo .xg-m6{animation-delay:-7.5s}
  .xp-seo .xg-pin,.xp-seo .xg-you{animation-name:xqPin}
  .xp-seo .xg-ring{animation-name:xqRing;animation-duration:3s;animation-timing-function:ease-out;animation-delay:1.4s}
  .xp-seo .xg-ring2{animation-delay:2.4s}.xp-seo .xg-ring3{animation-delay:3.4s}
  .xp-seo .xg-arc1{animation-name:xqArc1}.xp-seo .xg-arc2{animation-name:xqArc2}.xp-seo .xg-arc3{animation-name:xqArc3}
  .xp-seo .xc1{animation-name:xqC1}.xp-seo .xc2{animation-name:xqC2}.xp-seo .xc3{animation-name:xqC3}
  .xp-seo .xs1{animation-name:xqS1}.xp-seo .xs2{animation-name:xqS2}.xp-seo .xs3{animation-name:xqS3}.xp-seo .xs4{animation-name:xqS4}
}
@keyframes xqFloor{from{background-position:0 0,0 0}to{background-position:0 0,0 7cqw}}
@keyframes xqIn{0%{opacity:0}6%,94%{opacity:.9}100%{opacity:0}}
@keyframes xqSpin{from{transform:scaleX(1)}to{transform:scaleX(-1)}}
@keyframes xqPin{0%,7%{opacity:0}12%,94%{opacity:1}100%{opacity:0}}
@keyframes xqRing{0%{transform:scale(.12);opacity:0}12%{opacity:1}100%{transform:scale(1.7);opacity:0}}
@keyframes xqArc1{0%,19%{stroke-dashoffset:1;opacity:0}20%{stroke-dashoffset:1;opacity:1}30%,94%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes xqArc2{0%,39%{stroke-dashoffset:1;opacity:0}40%{stroke-dashoffset:1;opacity:1}50%,94%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes xqArc3{0%,59%{stroke-dashoffset:1;opacity:0}60%{stroke-dashoffset:1;opacity:1}70%,94%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes xqC1{0%,6%{opacity:0;border-color:rgba(79,184,230,.55);box-shadow:none}11%,28%{opacity:1;border-color:rgba(79,184,230,.55);box-shadow:none}32%,94%{opacity:1;border-color:#f2b95a;box-shadow:0 0 4cqw rgba(242,185,90,.35)}100%{opacity:0}}
@keyframes xqC2{0%,6%{opacity:0;border-color:rgba(79,184,230,.55);box-shadow:none}11%,48%{opacity:1;border-color:rgba(79,184,230,.55);box-shadow:none}52%,94%{opacity:1;border-color:#f2b95a;box-shadow:0 0 4cqw rgba(242,185,90,.35)}100%{opacity:0}}
@keyframes xqC3{0%,6%{opacity:0;border-color:rgba(79,184,230,.55);box-shadow:none}11%,68%{opacity:1;border-color:rgba(79,184,230,.55);box-shadow:none}72%,94%{opacity:1;border-color:#f2b95a;box-shadow:0 0 4cqw rgba(242,185,90,.35)}100%{opacity:0}}
@keyframes xqS1{0%,3%{opacity:0;transform:translateY(2cqw)}8%,17%{opacity:1;transform:none}21%,100%{opacity:0;transform:translateY(-2cqw)}}
@keyframes xqS2{0%,20%{opacity:0;transform:translateY(2cqw)}25%,37%{opacity:1;transform:none}41%,100%{opacity:0;transform:translateY(-2cqw)}}
@keyframes xqS3{0%,40%{opacity:0;transform:translateY(2cqw)}45%,57%{opacity:1;transform:none}61%,100%{opacity:0;transform:translateY(-2cqw)}}
@keyframes xqS4{0%,60%{opacity:0;transform:translateY(2cqw)}65%,94%{opacity:1;transform:none}100%{opacity:0}}

/* websites scene: a browser window whose page assembles itself, marked Demo, then Live */
.xw-win{position:absolute;left:8cqw;right:8cqw;top:22cqw;height:74cqw;border:1px solid rgba(79,184,230,.55);border-radius:3cqw;background:rgba(11,13,18,.7);box-shadow:0 0 8cqw rgba(79,184,230,.16);overflow:hidden}
.xw-bar{position:relative;height:8cqw;border-bottom:1px solid rgba(79,184,230,.35);display:flex;align-items:center;gap:1.3cqw;padding:0 3cqw}
.xw-bar i{width:1.7cqw;height:1.7cqw;border-radius:50%;border:1px solid rgba(79,184,230,.7)}
.xw-url{margin-left:2cqw;padding:.8cqw 3cqw;border:1px solid rgba(79,184,230,.35);border-radius:99cqw;font-size:2.7cqw;color:#9fd8f1}
.xw-tag{position:relative;margin-left:auto;width:13cqw;height:5cqw;border-radius:99cqw;background:#4fb8e6;color:#06141b;font:500 2.8cqw/5cqw var(--sans);text-align:center}
.xw-tag span{position:absolute;inset:0}
.xw-demo{opacity:0}
.xw-page{position:absolute;left:5cqw;right:5cqw;top:13cqw;bottom:5cqw}
.xw-page span{position:absolute;left:0;border-radius:99cqw;transform-origin:0 50%}
.xw-nav{top:0;width:100%;height:1px;background:rgba(234,246,252,.3)}
.xw-h{height:5cqw;background:#eaf6fc}
.xw-h1{top:6cqw;width:64%}.xw-h2{top:13cqw;width:46%}
.xw-p{height:1.5cqw;background:rgba(234,246,252,.4)}
.xw-p1{top:22cqw;width:58%}.xw-p2{top:25.5cqw;width:40%}
.xw-btn{top:31cqw;width:22cqw;height:6.5cqw;background:#4fb8e6}
.xw-page .xw-img{top:auto;bottom:0;width:100%;height:14cqw;border-radius:2cqw;background:linear-gradient(120deg,#1a6f96,#4fb8e6 55%,#9fd8f1)}
@media(prefers-reduced-motion:no-preference){
  .xp-web .xw-win{animation-name:xwWin}
  .xp-web .xw-nav{animation-name:xwG1}.xp-web .xw-h1{animation-name:xwG2}.xp-web .xw-h2{animation-name:xwG3}
  .xp-web .xw-p1{animation-name:xwG4}.xp-web .xw-p2{animation-name:xwG5}
  .xp-web .xw-btn{animation-name:xwPop}.xp-web .xw-img{animation-name:xwImg}
  .xp-web .xw-tag{animation-name:xwTag}.xp-web .xw-demo{animation-name:xwDemo}.xp-web .xw-live{animation-name:xwLive}
  .xp-web .xs1{animation-name:xwS1}.xp-web .xs2{animation-name:xwS2}.xp-web .xs3{animation-name:xwS3}.xp-web .xs4{animation-name:xwS4}
}
@keyframes xwWin{0%,2%{opacity:0;transform:scale(.96);border-color:rgba(79,184,230,.55);box-shadow:0 0 8cqw rgba(79,184,230,.16)}8%,74%{opacity:1;transform:none;border-color:rgba(79,184,230,.55);box-shadow:0 0 8cqw rgba(79,184,230,.16)}80%,94%{opacity:1;transform:none;border-color:#4fb8e6;box-shadow:0 0 12cqw rgba(79,184,230,.45)}100%{opacity:0;transform:none}}
@keyframes xwG1{0%,9%{transform:scaleX(0);opacity:0}15%,94%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes xwG2{0%,15%{transform:scaleX(0);opacity:0}22%,94%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes xwG3{0%,19%{transform:scaleX(0);opacity:0}26%,94%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes xwG4{0%,25%{transform:scaleX(0);opacity:0}31%,94%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes xwG5{0%,28%{transform:scaleX(0);opacity:0}34%,94%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes xwPop{0%,36%{transform:scale(0);opacity:0}42%,94%{transform:scale(1);opacity:1}100%{opacity:0}}
@keyframes xwImg{0%,30%{opacity:0;transform:translateY(3cqw)}40%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes xwTag{0%,46%{opacity:0;transform:scale(.8)}51%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes xwDemo{0%,76%{opacity:1}79%,100%{opacity:0}}
@keyframes xwLive{0%,77%{opacity:0}80%,100%{opacity:1}}
@keyframes xwS1{0%,3%{opacity:0;transform:translateY(2cqw)}8%,42%{opacity:1;transform:none}46%,100%{opacity:0;transform:translateY(-2cqw)}}
@keyframes xwS2{0%,45%{opacity:0;transform:translateY(2cqw)}50%,60%{opacity:1;transform:none}64%,100%{opacity:0;transform:translateY(-2cqw)}}
@keyframes xwS3{0%,63%{opacity:0;transform:translateY(2cqw)}68%,74%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(-2cqw)}}
@keyframes xwS4{0%,77%{opacity:0;transform:translateY(2cqw)}82%,94%{opacity:1;transform:none}100%{opacity:0}}