/* A single scroll-authored sequence. The unenhanced state is a complete diagram. */
.connection-scene{--join:1;--scatter:0;--detail:1;--title-progress:1;--scene-progress:1;background:var(--paper);position:relative;padding:20px 0 36px}
.connection-pin{padding:0 clamp(16px,3vw,48px);height:690px;max-height:800px}
.connection-scene.is-scroll-scene{height:calc(180svh + 36px)}
.is-scroll-scene .connection-pin{position:sticky;top:88px;height:calc(100svh - 100px);min-height:530px}
.connection-panel{height:100%;position:relative;display:flex;flex-direction:column;overflow:hidden;background:#251c38;color:#f8f6f1;border-radius:24px;padding:32px clamp(22px,4vw,64px) 24px;isolation:isolate;transform:scale(calc(.97 + var(--join)*.03));transform-origin:center center}
.connection-top{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:4}
.connection-wordmark{font:600 23px/1 var(--display);letter-spacing:-.04em}.connection-wordmark span{color:#ff927d}
.connection-skip{font-size:11px;text-underline-offset:4px;color:#cbbdd3}
.connection-heading{position:relative;height:120px;overflow:hidden;flex:none;margin:22px 0 0;text-align:center;font:500 clamp(34px,3.7vw,59px)/1.03 var(--display);letter-spacing:-.04em}
.connection-title{position:absolute;inset:0;display:block}
.connection-title-opening{transform:translateY(calc(var(--title-progress)*-125%))}
.connection-title-final{transform:translateY(calc((1 - var(--title-progress))*125%))}
.connection-title-final em{font:italic 400 1.12em/.95 Georgia,serif;color:#ffad99;letter-spacing:-.04em}
.connection-canvas{--spread:clamp(188px,24vw,320px);position:relative;flex:1;min-height:250px;width:100%;perspective:1200px}
.connection-track{position:absolute;top:45%;left:calc(50% - var(--spread));width:calc(var(--spread)*2);height:2px;background:#7c65854d;transform:translateY(-50%)}
.connection-track:after{content:'';display:block;width:100%;height:100%;background:#ffad99;transform:scaleX(var(--join));transform-origin:center}
.connection-platform{position:absolute;top:45%;width:clamp(210px,23vw,300px);height:190px;border-radius:14px;padding:24px;box-shadow:0 24px 45px -24px #0f091f99;backface-visibility:hidden}
.connection-shopify{left:calc(50% - var(--spread));background:#e1edbf;color:#293c2d;transform:translate3d(calc(-50% - var(--scatter)*65px),calc(-50% - var(--scatter)*34px),0) rotateY(calc(var(--scatter)*-24deg)) rotateZ(calc(var(--scatter)*-9deg))}
.connection-odoo{left:calc(50% + var(--spread));background:#f1e4ed;color:#563d58;transform:translate3d(calc(-50% + var(--scatter)*65px),calc(-50% + var(--scatter)*36px),0) rotateY(calc(var(--scatter)*24deg)) rotateZ(calc(var(--scatter)*9deg))}
.connection-platform-name{display:block;font:600 clamp(26px,3vw,42px)/1 var(--display);letter-spacing:-.04em}
.connection-platform p{font-size:12px;margin:8px 0 23px;opacity:.85}
.connection-platform-lines{display:grid;gap:8px}.connection-platform-lines i{height:5px;border-radius:3px;background:currentColor;opacity:.14;width:85%}.connection-platform-lines i:nth-child(2){width:63%}.connection-platform-lines i:nth-child(3){width:72%}
.connection-platform-icon{position:absolute;right:20px;bottom:20px;width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.5}
.connection-hub{position:absolute;z-index:3;left:50%;top:45%;width:76px;height:76px;display:grid;place-items:center;background:#ffad99;color:#251c38;border-radius:18px;font:600 48px/1 var(--display);letter-spacing:-.04em;transform:translate(-50%,-50%) scale(calc(.62 + var(--join)*.38)) rotate(calc(var(--scatter)*-18deg));opacity:calc(.45 + var(--join)*.55);box-shadow:0 14px 26px -18px #10091b}
.connection-hub span{transform:translateY(-3px)}
.connection-caption{position:absolute;top:calc(45% + 54px);left:50%;transform:translate(-50%,calc((1 - var(--detail))*8px));opacity:var(--detail);font-size:9px;letter-spacing:.07em;white-space:nowrap;color:#d1c0d9}
.connection-flows{position:absolute;bottom:4px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:10px;opacity:var(--detail);transform:translateY(calc((1 - var(--detail))*18px))}
.connection-flow{display:flex;align-items:center;gap:9px;font-size:11px;padding:9px 13px;border:1px solid #b6a2c140;border-radius:6px;color:#decfe5}.connection-flow svg{height:15px;width:15px;fill:none;stroke:#ffad99;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.connection-footer{flex:none;display:flex;justify-content:space-between;align-items:end;gap:22px;padding-top:20px;margin-top:16px;border-top:1px solid #baa9c22e}
.connection-footer p{font-size:11px;line-height:1.65;max-width:420px;color:#cbbdd3}
.connection-cta{font-size:12px;font-weight:600;color:#f8f6f1;text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:15px;padding:9px 0;border-bottom:1px solid #f8f6f166}.connection-cta:hover{color:#ffad99}.connection-cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.connection-progress{position:absolute;bottom:0;height:3px;left:0;right:0;background:#ffad99;transform:scaleX(var(--scene-progress));transform-origin:left;opacity:0}
.is-scroll-scene .connection-progress{opacity:1}
.connection-scene.is-active .connection-platform,.connection-scene.is-active .connection-panel{will-change:transform}
.motion-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:850px){.is-scroll-scene .connection-pin{top:76px;height:calc(100svh - 88px)}.connection-panel{padding:23px 25px}.connection-canvas{--spread:24vw}.connection-platform{width:clamp(160px,26vw,210px);height:174px;padding:20px}.connection-heading{font-size:43px;height:102px}.connection-hub{width:64px;height:64px;font-size:41px}.connection-shopify{transform:translate3d(calc(-50% - var(--scatter)*25px),calc(-50% - var(--scatter)*28px),0) rotateY(calc(var(--scatter)*-18deg)) rotateZ(calc(var(--scatter)*-9deg))}.connection-odoo{transform:translate3d(calc(-50% + var(--scatter)*25px),calc(-50% + var(--scatter)*28px),0) rotateY(calc(var(--scatter)*18deg)) rotateZ(calc(var(--scatter)*9deg))}}
@media(max-width:540px){.connection-scene{padding:10px 0 25px}.connection-scene.is-scroll-scene{height:calc(165svh + 25px)}.connection-pin{padding:0 12px;height:585px}.is-scroll-scene .connection-pin{top:72px;height:calc(100svh - 84px);min-height:540px;max-height:720px}.connection-panel{padding:22px 16px 18px;border-radius:17px}.connection-wordmark{font-size:20px}.connection-skip{font-size:10px}.connection-heading{font-size:clamp(31px,8.5vw,41px);height:97px;margin-top:27px}.connection-canvas{--spread:calc((100vw - 60px)*.28);min-height:260px}.connection-platform{width:calc((100vw - 60px)*.4);height:145px;padding:16px 12px;border-radius:10px}.connection-platform-name{font-size:clamp(21px,6vw,29px)}.connection-platform p{font-size:10px;line-height:1.3;margin:8px 0 18px;max-width:86px}.connection-platform-icon{width:19px;height:19px;right:11px;bottom:12px}.connection-hub{width:43px;height:47px;border-radius:11px;font-size:29px}.connection-caption{font-size:7px;top:calc(45% + 93px);letter-spacing:0}.connection-flows{gap:6px;bottom:6px;flex-wrap:wrap}.connection-flow{font-size:9px;padding:6px 8px;gap:5px}.connection-flow svg{width:12px;height:12px}.connection-footer{gap:15px;padding-top:14px;margin-top:12px}.connection-footer p{font-size:9px;max-width:170px}.connection-cta{font-size:10px;gap:7px}.connection-shopify{transform:translate3d(calc(-50% - var(--scatter)*10px),calc(-50% - var(--scatter)*21px),0) rotateY(calc(var(--scatter)*-12deg)) rotateZ(calc(var(--scatter)*-8deg))}.connection-odoo{transform:translate3d(calc(-50% + var(--scatter)*10px),calc(-50% + var(--scatter)*21px),0) rotateY(calc(var(--scatter)*12deg)) rotateZ(calc(var(--scatter)*8deg))}}
@media(prefers-reduced-motion:reduce),(max-height:639px){.connection-scene.is-scroll-scene{height:auto}.connection-scene .connection-pin{position:relative;top:auto;height:585px;min-height:0}.connection-panel{transform:none}.connection-title-opening{opacity:0}.connection-title-final{opacity:1;transform:none}.connection-shopify,.connection-odoo{transform:translate(-50%,-50%)}.connection-track:after{transform:none}.connection-hub{transform:translate(-50%,-50%);opacity:1}.connection-caption{transform:translateX(-50%);opacity:1}.connection-flows{transform:none;opacity:1}.connection-progress{display:none}.connection-skip{visibility:hidden}}
@media print{.connection-scene.is-scroll-scene{height:auto}.connection-pin{position:static!important;height:590px!important}.connection-panel{transform:none}}