/* Directional stage changes inspired by the observed LEANPEX diagonal wipe.
   Original implementation, adapted to WB; no reference code or assets copied. */
.slide-curtain{position:fixed;inset:0;overflow:hidden;z-index:24;visibility:hidden;pointer-events:none;contain:strict}
.slide-curtain.is-running{visibility:visible;pointer-events:auto}
.curtain-sheet{position:absolute;inset:-10% -25%;transform:translateX(112%);background:linear-gradient(110deg,#fa47d8 0%,#c52fea 23%,#8d19f8 60%,#7303fa 100%);will-change:transform;overflow:hidden}
.curtain-sheet::before{content:"";position:absolute;inset:-60%;background:radial-gradient(ellipse at 45% 40%,#ffffff48,transparent 42%);transform:rotate(-20deg)}
.curtain-sheet>i{position:absolute;inset:0 auto 0 5%;width:5%;background:linear-gradient(90deg,#ffffff00,#ffffff23,#ffffff00)}
html.scene-changing{scroll-behavior:auto!important;overscroll-behavior:none}
.scene-leaving>.slide-inner{will-change:transform,opacity}
.scene-arriving>.slide-inner{animation:wbStageEnter .58s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}
@keyframes wbStageEnter{from{opacity:.3;transform:translateX(calc(var(--scene-direction,1)*34px)) scale(.985)}to{opacity:1;transform:translateX(0) scale(1)}}

/* A slow light sweep gives the model, computing and partnership blocks depth. */
#presentation :is(.platform-model,.platform-compute,.compute-visual,.doc-metrics,.doc-joint){position:relative;overflow:hidden;isolation:isolate}
#presentation .ambient-sheen{position:absolute;inset:0;display:block;width:auto;height:auto;min-width:0;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:inherit;pointer-events:none;z-index:3;overflow:hidden}
#presentation .ambient-sheen::after{content:"";position:absolute;inset:-50% -90%;background:linear-gradient(110deg,transparent 34%,#ffffff00 39%,#ffffff17 46%,#ffffff30 50%,#ffffff06 55%,transparent 60%);animation:wbLightPass 8.5s ease-in-out infinite;animation-delay:var(--ambient-phase,0s);animation-play-state:paused}
@keyframes wbLightPass{0%,16%{transform:translateX(-42%);opacity:0}24%{opacity:.75}70%{opacity:.75}88%,100%{transform:translateX(42%);opacity:0}}
.motion-glow::after,.motion-glow:hover::after{opacity:.7;background:radial-gradient(ellipse at 15% 70%,#c56aff25,transparent 65%),radial-gradient(ellipse at 90% 20%,#fa47d815,transparent 62%);background-size:160% 160%;animation:wbAmbientGlow 9s ease-in-out infinite alternate;animation-play-state:paused}
@keyframes wbAmbientGlow{from{background-position:0% 100%;opacity:.3}to{background-position:100% 0%;opacity:1}}
#presentation .product-image{overflow:hidden}
#presentation .category-product .product-image img{animation:wbProductBreathe 7s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 70%}
#presentation .category-product:nth-child(2) img{animation-delay:-1.7s}
#presentation .category-product:nth-child(3) img{animation-delay:-3.4s}
#presentation .category-product:nth-child(4) img{animation-delay:-5.1s}
@keyframes wbProductBreathe{0%,100%{transform:translateY(2px) scale(.97)}50%{transform:translateY(-5px) scale(1)}}
#presentation .module-art:not(.photo-art){animation:wbModuleFloat 7.5s ease-in-out infinite;animation-play-state:paused;transform-origin:60% 70%}
#presentation article:nth-child(even) .module-art{animation-delay:-3.6s}
@keyframes wbModuleFloat{0%,100%{translate:0 3px;rotate:-1deg}50%{translate:0 -6px;rotate:1deg}}
#presentation .arteki-frames img.frame-active{animation:wbFrameDrift 12s ease-out both;animation-play-state:paused}
@keyframes wbFrameDrift{from{transform:scale(1)}to{transform:scale(1.055)}}
/* Every lower process strip uses the same contour pass and timing. */
@property --wb-flow-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
#presentation .doc-deck .mini-flow>span,
#presentation .doc-deck .mini-flow>span.mini-active{background:transparent;color:var(--ink);border:1px solid var(--line);transition:border-color .4s,color .4s}
#presentation .dark .mini-flow>span,
#presentation .dark .mini-flow>span.mini-active{color:#e8e3ef;border-color:#ffffff25}
#presentation .doc-deck .mini-flow>span::after{content:none;animation:none}
#presentation .doc-deck .mini-flow>span::before{
 content:'';position:absolute;inset:0;padding:2px;border-radius:inherit;pointer-events:none;
 background:conic-gradient(from var(--wb-flow-angle),transparent 0deg,transparent 245deg,#7303fa30 275deg,#a76aff 305deg,#fa47d8 340deg,transparent 360deg);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
 opacity:0;transition:opacity .4s;
}
#presentation .doc-deck .mini-flow>span.mini-active::before{opacity:1;animation:wbFlowContour var(--step-duration,5.2s) linear infinite;animation-play-state:paused}
#presentation .is-visible .mini-flow>span.mini-active::before{animation-play-state:running}
html.motion-suspended #presentation .mini-flow>span.mini-active::before{animation-play-state:paused}
@keyframes wbFlowContour{from{--wb-flow-angle:0deg}to{--wb-flow-angle:360deg}}
#presentation .is-visible .ambient-sheen::after,#presentation .is-visible .motion-glow::after,#presentation .is-visible .category-product .product-image img,#presentation .is-visible .module-art:not(.photo-art),#presentation .is-visible .arteki-frames img.frame-active{animation-play-state:running}
html.motion-suspended #presentation :is(.ambient-sheen,.motion-glow)::after,html.motion-suspended #presentation :is(.product-image img,.module-art,.arteki-frames img){animation-play-state:paused}
@media(max-width:700px){
 .scene-arriving>.slide-inner{animation-duration:.46s}
 .curtain-sheet{inset:-5% -30%}
 #presentation .doc-deck .card-object{animation:wbObjectFloat 7s ease-in-out infinite;animation-play-state:paused}
 #presentation .is-visible .card-object{animation-play-state:running}
 #presentation .module-art:not(.photo-art){animation-duration:9s}
}
@media(prefers-reduced-motion:reduce){
 .slide-curtain{display:none!important}
 .scene-arriving>.slide-inner,#presentation .scene-arriving .motion-in{animation:none!important;transform:none;opacity:1;translate:none;filter:none}
 #presentation :is(.ambient-sheen,.motion-glow)::after,#presentation :is(.product-image img,.module-art,.arteki-frames img,.card-object){animation:none!important}
 #presentation .mini-flow>span.mini-active::before{animation:none!important;opacity:.6}
 .ambient-sheen{display:none!important}
}
/* The final value reserves space, so count-up never moves adjoining text. */
#presentation .number-counter,#presentation .number-counter>span{font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;margin:0;padding:0;border:0;background:none;border-radius:0;max-width:none;min-height:0}
#presentation .number-counter{display:inline-block;position:relative;vertical-align:baseline;white-space:nowrap;font-variant-numeric:tabular-nums}
#presentation .number-counter>.number-final{display:inline;opacity:0}
#presentation .number-counter>.number-value{display:block;position:absolute;inset:0;width:100%;text-align:inherit;pointer-events:none;user-select:none}
#presentation .number-counter.number-entering>.number-value{animation:wbNumberAppear .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes wbNumberAppear{from{opacity:0;transform:translateY(.18em);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){#presentation .number-counter.number-entering>.number-value{animation:none!important}}
@media print{.slide-curtain,.ambient-sheen,.mini-flow>span::before{display:none!important}#presentation .slide-inner,#presentation .motion-in{animation:none!important;transform:none!important;opacity:1!important}#presentation :is(.product-image img,.module-art,.arteki-frames img,.card-object),.motion-glow::after{animation:none!important}#presentation .number-counter>.number-final{opacity:1!important}#presentation .number-counter>.number-value{display:none!important}}