/* =====================================================================
 * What we connect: one order through the whole stack
 * (template-parts/stages/services.php). Loaded on that page only.
 *
 * .sv-world is the iso plane: x and y are the floor, translateZ is height.
 * A layer (188 by 148, 20 thick, one every 74) is a box: a glass top
 * (.sv-ft), a front face (.sv-ff) and a left face (.sv-fl) stood up on
 * their edges. .sv-mv carries the faces, so a layer can slide out on hover
 * while its hit planes (.sv-lyr itself and .sv-hit) stay where they are.
 * Labels (.sv-bb) undo the iso rotation, so they face the visitor.
 * Never put opacity, filter or overflow on a box that holds 3D children:
 * each of those flattens it. Fades go on the faces themselves.
 * ===================================================================== */
.stage-services .stage-3d{width:620px;height:520px}
.sv-rig{position:absolute;inset:0;transform-style:preserve-3d;animation:sv-float 8s ease-in-out infinite}
@keyframes sv-float{50%{transform:translateY(-8px)}}
.sv-world{position:absolute;left:181px;top:276px;width:188px;height:148px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-40deg)}
.sv-world i{display:block;font-style:normal}

/* ---------- Podium ---------- */
.sv-pod{position:absolute;left:50%;top:50%;width:470px;height:470px;margin:-235px 0 0 -235px;border-radius:50%;transform:translateZ(-30px);
  background:radial-gradient(circle,rgba(47,125,246,.32),rgba(47,125,246,.08) 46%,transparent 68%)}
.sv-pod::before{content:"";position:absolute;inset:18%;border-radius:50%;border:1.5px solid rgba(90,160,255,.45);box-shadow:0 0 30px rgba(90,160,255,.4),inset 0 0 30px rgba(90,160,255,.25)}
.sv-pod::after{content:"";position:absolute;inset:7%;border-radius:50%;border:1px dashed rgba(150,200,255,.2)}

/* ---------- Layers and modules ---------- */
.sv-lyr,.sv-mod{position:absolute;left:0;top:0;width:188px;height:148px;transform-style:preserve-3d;transform:translateZ(var(--lz));pointer-events:auto;--a:90,160,255;--h:20px;
  animation:sv-drop 1s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * .12s + .1s)}
@keyframes sv-drop{from{transform:translateZ(calc(var(--lz) + 150px))}}
.sv-pay{--a:62,213,152}
.sv-erp{--a:214,150,198}
.sv-ai{--a:165,139,255}
.sv-mv{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sv-hit{position:absolute;inset:0;transform:translateZ(var(--h))}
.sv-ft,.sv-ff,.sv-fl{position:absolute;animation:sv-in .7s ease-out backwards;animation-delay:calc(var(--i,0) * .12s + .1s);transition:opacity .35s,background .45s,border-color .45s,box-shadow .45s}
@keyframes sv-in{from{opacity:0}}
.sv-ft{inset:0;transform:translateZ(var(--h));border-radius:3px;border:1px solid rgba(var(--a),.85);
  background:linear-gradient(135deg,rgba(var(--a),.3),rgba(12,19,36,.78) 55%,rgba(var(--a),.14));
  box-shadow:0 0 34px rgba(var(--a),.4),inset 0 0 26px rgba(var(--a),.22)}
.sv-ff{left:0;bottom:0;width:100%;height:var(--h);transform-origin:50% 100%;transform:rotateX(-90deg);
  background:linear-gradient(180deg,rgba(var(--a),.75),rgba(var(--a),.22) 30%,rgba(9,14,27,.94))}
.sv-fl{left:0;top:0;width:var(--h);height:100%;transform-origin:0 50%;transform:rotateY(-90deg);
  background:linear-gradient(90deg,rgba(6,10,20,.96),rgba(var(--a),.12) 70%,rgba(var(--a),.5))}
.sv-ft svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(var(--a),.9);stroke-width:1.5;stroke-linecap:round;transition:stroke .45s}
.sv-ft svg .f{fill:rgba(var(--a),.55);stroke:none}
.sv-ft svg .b{fill:rgba(var(--a),.85);stroke:none}
.sv-ft svg .d{stroke:rgba(var(--a),.35);stroke-dasharray:3 4}
.sv-port{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:1.5px solid rgba(var(--a),.9);background:radial-gradient(circle,rgba(255,255,255,.9),rgba(var(--a),.6) 40%,rgba(5,8,15,.9) 72%);box-shadow:0 0 16px rgba(var(--a),.8)}
.sv-ring{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid rgba(var(--a),1);opacity:0}
.sv-lyr.on .sv-ring{animation:sv-ripple 1.3s cubic-bezier(.2,.7,.2,1) both}
@keyframes sv-ripple{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(4)}}

/* Before the packet reaches a layer it is dark glass. */
.js .sv-lyr:not(.on) .sv-ft{border-color:rgba(var(--a),.3);background:linear-gradient(135deg,rgba(var(--a),.1),rgba(10,16,30,.74) 55%,rgba(var(--a),.05));box-shadow:inset 0 0 22px rgba(var(--a),.08)}
.js .sv-lyr:not(.on) .sv-ff{background:linear-gradient(180deg,rgba(var(--a),.3),rgba(var(--a),.08) 30%,rgba(9,14,27,.94))}
.js .sv-lyr:not(.on) .sv-fl{background:linear-gradient(90deg,rgba(6,10,20,.96),rgba(var(--a),.05) 70%,rgba(var(--a),.2))}
.js .sv-lyr:not(.on) .sv-ft svg{stroke:rgba(var(--a),.35)}
.js .sv-lyr:not(.on) .sv-ft svg .f{fill:rgba(var(--a),.2)}
.js .sv-lyr:not(.on) .sv-ft svg .b{fill:rgba(var(--a),.3)}
.js .sv-lyr:not(.on) .sv-port{background:radial-gradient(circle,rgba(var(--a),.25),rgba(5,8,15,.9) 70%);box-shadow:none;border-color:rgba(var(--a),.4)}
/* While the packet is inside a layer it burns a little brighter. */
.sv-lyr.on:not(.dn) .sv-ft{box-shadow:0 0 54px rgba(var(--a),.7),inset 0 0 36px rgba(var(--a),.4)}

/* Hover: the layer slides out toward its label; the rest of the stack dims. */
.sv-lyr.hot .sv-mv{transform:translate3d(0,26px,6px)}
.sv-mod.hot .sv-mv{transform:translateZ(12px)}
.stage-3d.hovering :is(.sv-lyr,.sv-mod):not(.hot) :is(.sv-ft,.sv-ff,.sv-fl){opacity:.38}

/* ---------- Product modules, docked on the Odoo layer ---------- */
.sv-mod{width:76px;height:60px;--lz:76px;--h:16px;--i:4;left:var(--mx);top:var(--my)}
.sv-flow{--a:232,185,100}
.sv-tail{--a:94,224,210}
.sv-mod .sv-ft svg{inset:11px 17px;width:auto;height:auto;stroke-width:1.6;transform:rotate(40deg)}
/* The docks lie flat, level with the middle of the Odoo layer, and a light
   runs along each from the product into Odoo. */
.sv-dock{position:absolute;transform:translateZ(84px);border-radius:3px;transition:box-shadow .3s}
.sv-dock::after{content:"";position:absolute;border-radius:3px;background:#fff;box-shadow:0 0 10px #fff,0 0 18px rgba(214,150,198,.9);opacity:0}
.sv-dock-flow{left:5px;top:-52px;width:6px;height:52px;background:linear-gradient(180deg,rgba(232,185,100,.85),rgba(214,150,198,.85));box-shadow:0 0 14px rgba(232,185,100,.45)}
.sv-dock-flow::after{left:0;right:0;top:0;height:14px;animation:sv-dock-y 3.2s ease-in-out infinite}
.sv-dock-tail{left:-48px;top:16px;width:48px;height:6px;background:linear-gradient(90deg,rgba(94,224,210,.85),rgba(214,150,198,.85));box-shadow:0 0 14px rgba(94,224,210,.45)}
.sv-dock-tail::after{top:0;bottom:0;left:0;width:14px;animation:sv-dock-x 3.2s ease-in-out 1.6s infinite}
@keyframes sv-dock-y{0%{opacity:0;transform:translateY(0)}20%{opacity:1}70%{opacity:1;transform:translateY(38px)}85%,100%{opacity:0;transform:translateY(38px)}}
@keyframes sv-dock-x{0%{opacity:0;transform:translateX(0)}20%{opacity:1}70%{opacity:1;transform:translateX(34px)}85%,100%{opacity:0;transform:translateX(34px)}}
.sv-dock.hot{box-shadow:0 0 22px rgba(255,255,255,.75)}

/* ---------- The spine and the packet ---------- */
.sv-spine{position:absolute;left:93px;top:-168px;width:2px;height:242px;transform-origin:50% 100%;transform:rotateX(-90deg);
  background:linear-gradient(180deg,rgba(150,200,255,.6),rgba(90,160,255,.12));box-shadow:0 0 8px rgba(90,160,255,.4)}
.sv-pk{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#fff 0 28%,#CFE3FF 42%,rgba(90,160,255,0) 72%);
  box-shadow:0 0 16px 5px rgba(120,180,255,.8),0 0 46px 14px rgba(90,160,255,.35);
  transform:translate3d(94px,74px,242px) rotateZ(40deg) rotateX(-58deg)}
.sv-pk::before{content:"";position:absolute;left:50%;bottom:50%;width:3px;height:70px;margin-left:-1.5px;border-radius:3px;opacity:0;background:linear-gradient(180deg,rgba(150,200,255,0),rgba(200,225,255,.95))}
.sv-pk.on{animation:sv-fall 4600ms linear both}
.sv-pk.on::before{animation:sv-trail 4600ms linear both}
/* Born on the website layer at 600 ms; payments 2120, Odoo 3460, AI 4800; gone at 5200. */
@keyframes sv-fall{
  0%{opacity:0;transform:translate3d(94px,74px,242px) rotateZ(40deg) rotateX(-58deg)}
  5%{opacity:1;transform:translate3d(94px,74px,242px) rotateZ(40deg) rotateX(-58deg)}
  19%{opacity:1;transform:translate3d(94px,74px,242px) rotateZ(40deg) rotateX(-58deg);animation-timing-function:cubic-bezier(.55,0,.35,1)}
  33%{transform:translate3d(94px,74px,168px) rotateZ(40deg) rotateX(-58deg)}
  47%{transform:translate3d(94px,74px,168px) rotateZ(40deg) rotateX(-58deg);animation-timing-function:cubic-bezier(.55,0,.35,1)}
  62.2%{transform:translate3d(94px,74px,94px) rotateZ(40deg) rotateX(-58deg)}
  76%{transform:translate3d(94px,74px,94px) rotateZ(40deg) rotateX(-58deg);animation-timing-function:cubic-bezier(.55,0,.35,1)}
  91.3%{opacity:1;transform:translate3d(94px,74px,20px) rotateZ(40deg) rotateX(-58deg)}
  100%{opacity:0;transform:translate3d(94px,74px,20px) rotateZ(40deg) rotateX(-58deg)}
}
@keyframes sv-trail{0%,19%,33%,47%,62.2%,76%,91.3%,100%{opacity:0}24%,52%,81%{opacity:1}}

/* ---------- Labels: pinned to a corner of the tower, facing the visitor ---------- */
.sv-bb{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;pointer-events:auto;transform:translate3d(var(--bx),var(--by),var(--bz)) rotateZ(40deg) rotateX(-58deg)}
.sv-bb::before{content:"";position:absolute;left:0;top:-.5px;width:14px;height:1px;background:linear-gradient(90deg,rgba(var(--a),.9),rgba(var(--a),.25))}
.sv-bb::after{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:rgba(var(--a),1);box-shadow:0 0 8px rgba(var(--a),.9)}
.sv-tc{position:absolute;left:14px;top:0;transform:translateY(-50%);width:180px;padding:9px 11px 10px 12px;border-radius:11px;
  background:linear-gradient(180deg,rgba(22,30,48,.92),rgba(11,15,25,.94));border:1px solid rgba(140,180,255,.16);
  box-shadow:0 26px 44px -26px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);color:#EAF1FF;font:500 12px/1.3 var(--f-body);
  animation:sv-in .7s ease-out .55s backwards;transition:border-color .3s,background .3s}
.sv-tk{display:flex;align-items:center;gap:7px;font:500 9.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--a),1);white-space:nowrap}
.sv-tk em{font-style:normal;color:rgba(234,241,255,.38)}
.sv-sw{display:grid;margin-top:6px}
.sv-sw>*{grid-area:1/1;min-width:0;transition:opacity .3s,transform .35s,max-height .35s}
.sv-st{display:flex;align-items:center;gap:6px;font:600 12px/1.25 var(--f-body);color:#fff;white-space:nowrap}
.sv-st::after{content:"";flex:none;width:14px;height:14px;margin-left:auto;border-radius:50%;background:#1F9D63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center/9px}
.sv-ds{font-size:11.5px;line-height:1.3;color:rgba(234,241,255,.88);opacity:0;transform:translateY(4px);max-height:15px;overflow:hidden}
.sv-tag.hot .sv-tc{border-color:rgba(var(--a),.6);background:linear-gradient(180deg,rgba(28,38,60,.96),rgba(13,18,30,.97))}
.sv-bb.hot .sv-st{opacity:0;transform:translateY(-4px)}
.sv-bb.hot .sv-ds{opacity:1;transform:none;max-height:32px}
/* The status arrives with the packet; until then a quiet placeholder bar. */
.js .sv-tag:not(.on) .sv-st{opacity:0}
.sv-sw::before{content:"";grid-area:1/1;align-self:center;width:62%;height:7px;border-radius:4px;background:rgba(255,255,255,.07);transition:opacity .3s}
.sv-tag.on .sv-sw::before,.sv-bb.hot .sv-sw::before,html:not(.js) .sv-sw::before{opacity:0}
.sv-tag.on:not(.dn) .sv-st::after{background:rgba(var(--a),.25);box-shadow:inset 0 0 0 1.5px rgba(var(--a),1);animation:blink .9s infinite}
.sv-tag[data-m="web"]{--a:90,160,255}
.sv-tag[data-m="pay"]{--a:62,213,152}
.sv-tag[data-m="erp"]{--a:214,150,198}
.sv-tag[data-m="ai"]{--a:165,139,255}

/* Module name tags hang on a pin: Flowline's above, Tailorline's below. */
.sv-mtag[data-m="flow"]{--a:232,185,100}
.sv-mtag[data-m="tail"]{--a:94,224,210}
.sv-mtag::before{left:-.5px;top:-16px;width:1px;height:16px;background:linear-gradient(0deg,rgba(var(--a),.95),rgba(var(--a),.2))}
.sv-mtag.sv-below::before{top:0;background:linear-gradient(180deg,rgba(var(--a),.95),rgba(var(--a),.2))}
.sv-mtag .sv-tc{left:0;width:max-content;padding:7px 10px 8px;white-space:nowrap;transform:translate(-50%,calc(-100% - 16px))}
.sv-mtag.sv-below .sv-tc{transform:translate(-50%,16px)}
.sv-mtag.hot .sv-tc{border-color:rgba(var(--a),.6)}
.sv-mn{display:flex;align-items:center;gap:7px;font:600 13px/1 var(--f-disp);color:#fff}
.sv-mn em{width:7px;height:7px;border-radius:50%;background:#3ED598;box-shadow:0 0 8px #3ED598;animation:blink 1.6s infinite}
.sv-mtag .sv-sw{margin-top:5px}
.sv-mtag .sv-st{font:500 11px var(--f-body);color:rgba(var(--a),1)}
.sv-mtag .sv-ds{font-size:11px;max-height:none}
.sv-mtag .sv-st::after,.sv-mtag .sv-sw::before{display:none}

/* ---------- WhatsApp update to the customer ---------- */
.sv-wa{pointer-events:none}
.sv-wa::before,.sv-wa::after{display:none}
.sv-wc{position:absolute;left:-12px;top:34px;width:192px;padding:9px 11px 8px;border-radius:13px 13px 13px 4px;background:linear-gradient(180deg,#0D4A3C,#073328);border:1px solid rgba(37,211,102,.35);
  box-shadow:0 26px 44px -24px rgba(0,0,0,.95),0 0 30px -10px rgba(37,211,102,.5);color:#E9FFF6;font:500 12px/1.38 var(--f-body);transition:opacity .4s,transform .55s cubic-bezier(.3,1.5,.5,1)}
.js .sv-wa:not(.on) .sv-wc{opacity:0;transform:translateY(10px)}
.sv-wh{display:flex;align-items:center;gap:7px;font:600 11.5px/1 var(--f-body);color:#fff}
.sv-wh i{width:16px;height:16px;border-radius:50%;background:#25D366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 4a8 8 0 0 0-6.9 12.1L4 20l4-1.1A8 8 0 1 0 12 4Z'/%3E%3C/svg%3E") no-repeat center/10px}
.sv-wh small{margin-left:auto;font:500 9.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(233,255,246,.55)}
.sv-wc p{margin:7px 0 0}
.sv-wt{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:3px;font:500 10px/1 var(--f-mono);color:rgba(233,255,246,.6)}
.sv-wt i{width:16px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%2353BDEB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 5.5 3 3L10 1.5M7.5 8.5 14.5 1.5'/%3E%3C/svg%3E") no-repeat center/contain}

/* ---------- Tablets and phones ----------
   Under 600px the two modules are fine detail that would only shrink the
   rest, so they go; the tower and its labels move to the middle, the stage
   grows, and the label type grows with it (about 10px on a 375px phone). */
@media (max-width:899px){
  .stage-services .stage-3d{scale:.76}
  .sv-world{top:292px}
}
@media (max-width:599px){
  .stage-services .stage-3d{scale:.7}
  .sv-world{left:114px;top:266px}
  .sv-mod,.sv-dock,.sv-mtag{display:none}
  .sv-tc{width:206px}
  .sv-tk{font-size:10.5px}
  .sv-st{font-size:14px}
  .sv-wc{width:214px;font-size:13.5px}
}
@media (max-width:359px){
  .stage-services .stage-3d{scale:.6}
}

@media (prefers-reduced-motion:reduce){
  .sv-rig,.sv-lyr,.sv-mod,.sv-ft,.sv-ff,.sv-fl,.sv-tc,.sv-ring,.sv-dock::after,.sv-mn em{animation:none}
  .sv-pk{display:none}
  .sv-mv,.sv-sw>*,.sv-wc{transition:none}
}