/* WISMOlabs homepage animation, ported from the published site (2026-10-02).
   Original timing, blend layers, particle styling, and breakpoint positions.
   This stylesheet is loaded only by pages containing the workflow component. */
.wl-workflow-section{color:#fff;background:radial-gradient(ellipse at 50% 0%,#354763,#1a2433 70%)}
.wl-workflow-section .wl-eyebrow{color:#e9c660}
.wl-workflow-section .wl-section-intro{max-width:800px;margin-bottom:46px}
.wl-workflow-section .wl-section-intro h2{max-width:640px;white-space:pre-line}
.wl-workflow-section .wl-section-intro>p:not(.wl-eyebrow){color:#bfc5d3;margin-top:24px}
.wl-workflow-stage{position:relative;isolation:isolate;min-height:371px;border-top:1px solid #ffffff45;contain:paint layout;padding:10px 0}
/* Keep particles below the hub and each complete scene, including during fades. */
.wl-workflow-scene{position:relative;z-index:11;width:920px;max-width:100%;height:350px;margin:0 auto;overflow:hidden}
.wl-workflow-scene>h3{position:absolute;top:25px;left:0;width:100%;margin:0;text-align:center;color:#fff;font-size:20.96px;line-height:1;font-weight:600;letter-spacing:-.04em}
.wl-workflow-scene h4{color:#ffedcb;font-size:16px;line-height:1;font-weight:600;letter-spacing:-.025em;margin:0 0 3px}
.wl-workflow-stage .wl-workflow-box{position:absolute;background:rgba(22,34,52,.6);border:1px solid rgba(96,96,124,.6);border-radius:12px;transform:scale(.85);transform-origin:top left;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 0 15px rgba(0,0,0,.3);backface-visibility:hidden;padding:5px 0 5px 10px;z-index:11}
.wl-workflow-card{width:180px}
.wl-workflow-points{list-style:none;padding:0;margin:0;color:white;font-size:14px;font-weight:400;line-height:1.6}
.wl-workflow-points li{display:flex;align-items:center;margin:0;padding:0;gap:5px}
.wl-workflow-points .wl-workflow-icon{width:14px;height:14px;flex:0 0 14px;fill:#b6c8fc}
.wl-workflow-points li>span{min-width:0}
.wl-workflow-scene--1 .wl-workflow-card--1{left:20px;bottom:80px}
.wl-workflow-scene--1 .wl-workflow-card--2{left:200px;bottom:10px}
.wl-workflow-scene--1 .wl-workflow-card--3{left:550px;bottom:10px}
.wl-workflow-scene--1 .wl-workflow-card--4{left:730px;bottom:80px}
.wl-workflow-background{position:absolute;inset:10px 0 auto;height:350px;pointer-events:none}
.wl-workflow-hub{position:absolute;inset:0;display:grid;place-items:center;opacity:1;transition:opacity 1s ease;z-index:10}
.wl-workflow-hub-target{position:absolute;width:60px;height:60px}
.wl-workflow-ring{position:absolute;display:grid;place-items:center;animation:wl-workflow-rotate 35s linear infinite reverse}
.wl-workflow-ring img{display:block;max-width:none;width:200px;height:auto}
.wl-workflow-ring--1 img,.wl-workflow-ring--2 img,.wl-workflow-ring--4 img{opacity:.3}
.wl-workflow-ring--2{animation-direction:normal}
.wl-workflow-ring--3{animation-duration:55s}
.wl-workflow-ring--4{animation-duration:20s}
.wl-workflow-ring--5{animation-duration:8s}
.wl-workflow-ring--5 img{opacity:.5}
.wl-workflow-ring--6{animation-duration:75s}
.wl-workflow-ring--6 img{width:210px;filter:brightness(200%) blur(2.5px)}
.wl-workflow-ring--7{animation:none;z-index:1}
.wl-workflow-ring--7 img{width:250px}
.wl-workflow-ring--7:before{content:"";position:absolute;z-index:-1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;width:150px;height:150px;background:conic-gradient(from 0deg,#ff007f,#ffbf00,#00ffbf,#00d4ff,#ff007f);animation:wl-workflow-swirl 3s infinite linear;filter:blur(60px)}
.wl-workflow-ring--7:after{content:"";position:absolute;z-index:-2;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 80%);filter:blur(10px);pointer-events:none}
.wl-workflow-background--3{position:absolute;width:920px;max-width:100%;height:350px;left:50%;transform:translateX(-50%);overflow:hidden;--wl-workflow-edge-fade:50px;opacity:0;transition:opacity .8s;background-size:0 0}
.wl-workflow-background--3.wl-is-active{opacity:.3}
.wl-workflow-background--3:before{content:"";position:absolute;inset:0;background-image:inherit;background-repeat:repeat;background-position:0 0;background-size:600px 600px;animation:wl-workflow-canvas-scroll 24s linear infinite;will-change:background-position;mask-image:linear-gradient(to bottom,transparent 0,black var(--wl-workflow-edge-fade),black calc(100% - var(--wl-workflow-edge-fade)),transparent 100%),linear-gradient(to right,transparent 0,black var(--wl-workflow-edge-fade),black calc(100% - var(--wl-workflow-edge-fade)),transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--wl-workflow-edge-fade),black calc(100% - var(--wl-workflow-edge-fade)),transparent 100%),linear-gradient(to right,transparent 0,black var(--wl-workflow-edge-fade),black calc(100% - var(--wl-workflow-edge-fade)),transparent 100%);-webkit-mask-composite:source-in}
.wl-workflow-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:0;transition:opacity 1.5s}
.wl-workflow-canvas.wl-is-active{opacity:1}
.wl-workflow-loader{align-self:center;margin:auto;width:45px;height:45px}
.wl-workflow-event-icon{position:absolute;top:150px;color:#ffedcb;line-height:1}
.wl-workflow-event-icon .wl-workflow-icon{display:block;width:auto;height:20px;fill:currentColor}
.wl-workflow-event-icon--list{left:50px}
.wl-workflow-event-icon--shipping-fast{left:90px}
.wl-workflow-event-icon--cloud-rain,.wl-workflow-event-icon--dolly{left:130px}
.wl-workflow-event-icon--user-times{left:210px}
.wl-workflow-event-icon--check{left:170px}
.wl-workflow-scene .wl-workflow-event-title{position:absolute;top:185px;left:50px;color:white;text-shadow:0 0 8px #000}
.wl-workflow-event-points{position:absolute;top:210px;left:50px;font-size:14.4px;line-height:1.2;letter-spacing:-.02em;color:#c4c6d8;text-shadow:0 0 8px #000}
.wl-workflow-event-points .wl-workflow-icon{width:12px;height:12px;flex-basis:12px;fill:#ffedcb}
.wl-workflow-message{top:150px;left:580px;width:350px}
.wl-workflow-message:first-of-type{width:360px}
.wl-workflow-message p{padding:3px;margin:0;color:#fff;font-size:14px;line-height:1.15;font-weight:400;white-space:pre-line}
.wl-workflow-message p span{display:inline-block;position:relative;border:1px solid rgba(182,200,252,.22);background:rgba(182,200,252,.19);border-radius:8px;color:#fff;padding:0 3px;margin-bottom:1px}
.wl-workflow-message p span span{margin:1px 0;border:1px solid rgba(182,200,252,.4);background:rgba(182,200,252,.25);border-radius:6px}
.wl-workflow-scene--3 .wl-workflow-card{width:270px}
.wl-workflow-scene--3 .wl-workflow-card--1{left:20px;bottom:190px}
.wl-workflow-scene--3 .wl-workflow-card--2{left:90px;bottom:100px}
.wl-workflow-scene--3 .wl-workflow-card--3{left:345px;bottom:20px}
.wl-workflow-scene--3 .wl-workflow-card--4{left:605px;bottom:100px}
.wl-workflow-scene--3 .wl-workflow-card--5{left:640px;bottom:190px}
.wl-workflow-stage .wl-workflow-hidden{display:none!important;opacity:0}
.wl-workflow-stage .wl-workflow-visible{display:flex!important;opacity:1;transition:opacity .5s ease}
.wl-workflow-stage .wl-workflow-fading{opacity:0;transition:opacity .5s ease}
.wl-workflow-stage .wl-workflow-animated{--wl-workflow-duration:300ms;--wl-workflow-opacity:1;--wl-workflow-x:0px;--wl-workflow-y:0px;--wl-workflow-scale:1;--wl-workflow-ease-in:cubic-bezier(.25,1,.5,1);--wl-workflow-ease-out:cubic-bezier(.5,0,.75,0);--wl-workflow-ease-current:var(--wl-workflow-ease-in);opacity:var(--wl-workflow-opacity);transform:translate3d(var(--wl-workflow-x),var(--wl-workflow-y),0) scale(var(--wl-workflow-scale));transition:opacity var(--wl-workflow-duration) var(--wl-workflow-ease-current),transform var(--wl-workflow-duration) var(--wl-workflow-ease-current)}
.wl-workflow-stage .wl-workflow-box.wl-workflow-animated{transform:scale(.85) translate3d(var(--wl-workflow-x),var(--wl-workflow-y),0) scale(var(--wl-workflow-scale))}
.wl-workflow-visible .wl-workflow-box.wl-workflow-animated{will-change:transform,opacity}
.wl-workflow-control-bar{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;z-index:20}
.wl-workflow-controls{display:flex;gap:12px;align-items:center;position:relative;padding-top:10px;transition:opacity .5s ease}
.wl-workflow-control{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.5;transition:opacity .3s ease;touch-action:manipulation}
.wl-workflow-control.wl-is-active,.wl-workflow-control:hover{opacity:1}
.wl-workflow-control-dot{width:8px;height:8px;background:#fff;border-radius:50%;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:relative}
.wl-workflow-control.wl-is-active .wl-workflow-control-dot{width:12px;height:12px;box-shadow:0 0 10px rgba(255,255,255,.5)}
.wl-workflow-control:focus{outline:0}
.wl-workflow-control:focus-visible .wl-workflow-control-dot{box-shadow:0 0 0 4px rgba(182,200,252,.6)}
.wl-workflow-control-dot:after,.wl-workflow-control-dot:before{content:"";position:absolute;top:0;width:3px;height:100%;background:#ffedcb;border-radius:2px;opacity:0;transform:scaleY(.5);transition:all .2s ease}
.wl-workflow-control-dot:before{left:0}.wl-workflow-control-dot:after{right:0}
.wl-workflow-stage:not(.wl-is-paused) .wl-workflow-control.wl-is-active:hover .wl-workflow-control-dot{background:transparent;box-shadow:none;width:10px;height:10px}
.wl-workflow-stage:not(.wl-is-paused) .wl-workflow-control.wl-is-active:hover .wl-workflow-control-dot:after,.wl-workflow-stage:not(.wl-is-paused) .wl-workflow-control.wl-is-active:hover .wl-workflow-control-dot:before{opacity:1;transform:scaleY(1)}
.wl-workflow-stage.wl-is-paused .wl-workflow-control.wl-is-active .wl-workflow-control-dot{width:0;height:0;background:transparent;box-shadow:none;border:5px solid transparent;border-left:9px solid #ffedcb;border-right:0;border-radius:0;transform:translateX(1px)}
.wl-workflow-stage.wl-is-paused .wl-workflow-control.wl-is-active .wl-workflow-control-dot:after,.wl-workflow-stage.wl-is-paused .wl-workflow-control.wl-is-active .wl-workflow-control-dot:before{opacity:0}
.wl-workflow-control-ring{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none;opacity:0;transition:opacity .3s ease}
.wl-workflow-control.wl-is-active .wl-workflow-control-ring{opacity:1}
.wl-workflow-control-ring circle{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:63;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .3s ease}
.wl-workflow-stage:is(.wl-is-paused,.wl-is-offscreen) .wl-workflow-ring,.wl-workflow-stage:is(.wl-is-paused,.wl-is-offscreen) .wl-workflow-ring:before,.wl-workflow-stage:is(.wl-is-paused,.wl-is-offscreen) .wl-workflow-background--3:before{animation-play-state:paused}
.wl-workflow-steps{list-style:none;display:grid;grid-template-columns:1fr 1fr;padding:0;margin:10px 0 0;border-top:1px solid #ffffff45}
.wl-workflow-steps li{display:flex;gap:20px;padding:20px 24px 0 0}
.wl-workflow-steps li+li{padding-left:24px;border-left:1px solid #ffffff45}
.wl-workflow-steps li>span{font-size:52px;font-weight:750;line-height:1;color:#ffeab7}
.wl-workflow-steps h3{font-size:25px;margin-bottom:8px}
.wl-workflow-steps p{color:#bfc5d3;font-size:16px;line-height:1.5}
@keyframes wl-workflow-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes wl-workflow-swirl{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes wl-workflow-canvas-scroll{from{background-position:0 0}to{background-position:0 600px}}
@media(max-width:1024px){
 /* Keep the source's tablet coordinates centered at intermediate widths. */
 .wl-workflow-scene,.wl-workflow-background--3{width:728px}
 .wl-workflow-scene>h3{font-size:20px}
 .wl-workflow-scene h4{font-size:15px}
 .wl-workflow-event-points{font-size:15.75px}
 .wl-workflow-scene--1 .wl-workflow-card--1{bottom:120px}
 .wl-workflow-scene--1 .wl-workflow-card--2{left:80px}
 .wl-workflow-scene--1 .wl-workflow-card--3{left:555px;bottom:120px}
 .wl-workflow-scene--1 .wl-workflow-card--4{left:500px;bottom:10px}
 .wl-workflow-message{left:395px;top:250px}
 .wl-workflow-scene--3 .wl-workflow-card--1{left:10px}
 .wl-workflow-scene--3 .wl-workflow-card--2{left:30px;bottom:105px}
 .wl-workflow-scene--3 .wl-workflow-card--3{left:250px}
 .wl-workflow-scene--3 .wl-workflow-card--4{left:460px;bottom:105px}
 .wl-workflow-scene--3 .wl-workflow-card--5{left:480px}
}
@media(max-width:767px){
 .wl-workflow-section .wl-section-intro{margin-bottom:30px}
 .wl-workflow-stage{min-height:550px;padding:50px 0}
 .wl-workflow-scene{height:450px;width:100%}
 .wl-workflow-scene>h3{font-size:18px;line-height:1;text-align:left;padding:0 10px}
 .wl-workflow-scene h4{font-size:14px}
 .wl-workflow-points,.wl-workflow-message p{font-size:13px}
 .wl-workflow-background{top:0;height:550px}
 .wl-workflow-hub{left:115px;right:-115px}
 .wl-workflow-ring img{width:180px}
 .wl-workflow-ring--6 img{width:190px}.wl-workflow-ring--7 img{width:200px}
 .wl-workflow-background--3{height:450px;top:50px}
 .wl-workflow-scene--1 .wl-workflow-card--1{left:20px;bottom:275px}
 .wl-workflow-scene--1 .wl-workflow-card--2{left:10px;bottom:185px}
 .wl-workflow-scene--1 .wl-workflow-card--3{left:30px;bottom:95px}
 .wl-workflow-scene--1 .wl-workflow-card--4{left:60px;bottom:5px}
 .wl-workflow-event-icon{top:100px}
 .wl-workflow-event-icon--list{left:15px}.wl-workflow-event-icon--shipping-fast{left:55px}
 .wl-workflow-event-icon--cloud-rain,.wl-workflow-event-icon--dolly{left:95px}
 .wl-workflow-event-icon--user-times{left:175px}.wl-workflow-event-icon--check{left:135px}
 .wl-workflow-scene .wl-workflow-event-title{left:15px;top:135px}
 .wl-workflow-event-points{left:15px;top:160px;font-size:14.7px}
 .wl-workflow-message,.wl-workflow-message:first-of-type{left:10px;top:280px;width:290px}
 .wl-workflow-scene--3 .wl-workflow-card--1{width:245px;left:20px;bottom:295px}
 .wl-workflow-scene--3 .wl-workflow-card--2{width:250px;left:10px;bottom:225px}
 .wl-workflow-scene--3 .wl-workflow-card--3{width:255px;left:10px;bottom:155px}
 .wl-workflow-scene--3 .wl-workflow-card--4{width:245px;left:25px;bottom:85px}
 .wl-workflow-scene--3 .wl-workflow-card--5{width:235px;left:45px;bottom:15px}
 .wl-workflow-steps{grid-template-columns:1fr}
 .wl-workflow-steps li{padding:22px 0;gap:14px}
 .wl-workflow-steps li+li{padding-left:0;border-left:0;border-top:1px solid #ffffff45}
 .wl-workflow-steps li>span{font-size:44px}.wl-workflow-steps h3{font-size:23px}.wl-workflow-steps p{font-size:15px}
}
/* Progressive enhancement: all copy stays readable without JS or with reduced motion. */
.wl-workflow-stage:is(:not(.wl-is-ready),.wl-is-static){min-height:0;padding:20px 0;contain:none}
.wl-workflow-stage:is(:not(.wl-is-ready),.wl-is-static) :is(.wl-workflow-background,.wl-workflow-canvas,.wl-workflow-control-bar,.wl-workflow-scene--0,.wl-workflow-event-icon){display:none!important}
.wl-workflow-stage:is(:not(.wl-is-ready),.wl-is-static) .wl-workflow-scene:not(.wl-workflow-scene--0){display:block!important;opacity:1!important;width:100%;height:auto;overflow:visible;margin:0 0 30px}
.wl-workflow-stage:is(:not(.wl-is-ready),.wl-is-static) .wl-workflow-scene:is(.wl-workflow-scene--1,.wl-workflow-scene--3){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wl-workflow-stage:is(:not(.wl-is-ready),.wl-is-static) .wl-workflow-scene>h3{position:static;text-align:left;margin:0 0 20px;padding:0;grid-column:1/-1}
.wl-workflow-stage:is(:not(.wl-is-ready),.wl-is-static) :is(.wl-workflow-box,.wl-workflow-event-title,.wl-workflow-event-points){position:static;opacity:1!important;transform:none!important;transition:none;max-width:100%;width:auto;margin:10px 0}
.wl-workflow-stage:is(:not(.wl-is-ready),.wl-is-static) .wl-workflow-box{padding:12px}
.wl-workflow-stage:is(:not(.wl-is-ready),.wl-is-static) .wl-workflow-card{width:auto;margin:0}
@media(max-width:600px){.wl-workflow-stage:is(:not(.wl-is-ready),.wl-is-static) .wl-workflow-scene:is(.wl-workflow-scene--1,.wl-workflow-scene--3){grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.wl-workflow-stage *,.wl-workflow-stage *:before{animation:none!important;transition:none!important}}

@font-face{font-family:WismoWorkflowIcons;src:url("/assets/fonts/workflow-icons.ttf") format("truetype");font-weight:normal;font-style:normal;font-display:block}
.wl-workflow-speed-icon{font-family:WismoWorkflowIcons!important;font-size:14px;line-height:1;color:#b6c8fc;flex:0 0 14px;width:14px}