/* WyzLab motion: gentle, alive illustrations (Oct 2026) */
@media (prefers-reduced-motion: no-preference){
svg.wh-ill{animation:wzFloat 7s ease-in-out infinite;will-change:translate}
svg.wh-ill>circle{transform-box:fill-box;transform-origin:center;animation:wzBreathe 9s ease-in-out infinite}
svg.wh-ill>circle:nth-of-type(2){animation-delay:-3s;animation-duration:10s}
svg.wh-ill>circle:nth-of-type(3){animation-delay:-6s;animation-duration:8s}
svg.wh-ill>circle:nth-of-type(n+4){animation:wzTwinkle 4s ease-in-out infinite}
svg.wh-ill>circle:nth-of-type(2n+5){animation-delay:-1.3s}
svg.wh-ill>circle:nth-of-type(3n+6){animation-delay:-2.6s}
svg.wh-ill [fill="#04A859"]{animation:wzGlow 3.6s ease-in-out infinite}
.wc-hero__art svg.wh-ill,.x-comm__art svg.wh-ill{animation-duration:6s}
.pg-grid svg.wh-ill,.wc-card svg.wh-ill{animation-delay:-2s}
}
@keyframes wzFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes wzBreathe{0%,100%{scale:1}50%{scale:1.06}}
@keyframes wzTwinkle{0%,100%{opacity:1;translate:0 0}50%{opacity:.55;translate:0 -2px}}
@keyframes wzGlow{0%,100%{opacity:1}50%{opacity:.72}}

/* Waving arms */
@media (prefers-reduced-motion: no-preference){
.wz-wave{transform-box:view-box;transform-origin:15px -84px;animation:wzWave 3.4s ease-in-out infinite}
svg.wh-ill:nth-of-type(even) .wz-wave{animation-delay:-1.4s}
}
@keyframes wzWave{0%,55%,100%{rotate:0deg}8%{rotate:16deg}16%{rotate:-8deg}24%{rotate:16deg}32%{rotate:-6deg}40%{rotate:10deg}48%{rotate:0deg}}

/* Processes that come alive on scroll (wyz-motion.js adds .wz-js and .wz-in) */
@media (prefers-reduced-motion: no-preference){
/* Timelines */
.wz-js .x-tl__rail button{z-index:1}
.wz-js .x-tl__rail::after{content:"";z-index:0;position:absolute;left:10%;right:10%;top:22px;height:3px;background:#1C8BF5;border-radius:2px;transform:scaleX(0);transform-origin:left center;transition:transform 1.6s cubic-bezier(.6,0,.2,1) .2s}
.wz-js .x-tl__rail[style*="repeat(4"]::after{left:12.5%;right:12.5%}
.wz-js .x-tl__rail[style*="repeat(6"]::after{left:8.33%;right:8.33%}
.wz-js .x-tl.wz-in .x-tl__rail::after{transform:scaleX(1)}
.wz-js .x-tl .x-tl__dot{opacity:.35;scale:.7;transition:scale .5s cubic-bezier(.3,1.7,.5,1),opacity .4s,background .2s,border-color .2s}
.wz-js .x-tl.wz-in .x-tl__dot{opacity:1;scale:1}
.wz-js .x-tl__rail button:nth-child(2) .x-tl__dot{transition-delay:.35s}
.wz-js .x-tl__rail button:nth-child(3) .x-tl__dot{transition-delay:.65s}
.wz-js .x-tl__rail button:nth-child(4) .x-tl__dot{transition-delay:.95s}
.wz-js .x-tl__rail button:nth-child(5) .x-tl__dot{transition-delay:1.25s}
.wz-js .x-tl__rail button:nth-child(6) .x-tl__dot{transition-delay:1.55s}
@media (max-width:640px){
.wz-js .x-tl__rail::after,.wz-js .x-tl__rail[style*="repeat(4"]::after,.wz-js .x-tl__rail[style*="repeat(6"]::after{left:22px;right:auto;top:10px;bottom:10px;width:3px;height:auto;transform:scaleY(0);transform-origin:center top}
.wz-js .x-tl.wz-in .x-tl__rail::after{transform:scaleY(1)}
}
/* Step ladders */
.wz-js .wc-ladder .wc-step{z-index:1}
.wz-js .wc-ladder::after{content:"";z-index:0;position:absolute;left:17px;top:20px;bottom:20px;width:2px;background:#1C8BF5;transform:scaleY(0);transform-origin:center top;transition:transform 1.8s cubic-bezier(.6,0,.2,1) .2s}
.wz-js .wc-ladder.wz-in::after{transform:scaleY(1)}
.wz-js .wc-ladder .wc-step{opacity:0;translate:0 22px;transition:opacity .6s ease,translate .6s ease}
.wz-js .wc-ladder.wz-in .wc-step{opacity:1;translate:0 0}
.wz-js .wc-ladder .wc-step__num{scale:.5;transition:scale .5s cubic-bezier(.3,1.7,.5,1)}
.wz-js .wc-ladder.wz-in .wc-step__num{scale:1}
.wz-js .wc-ladder .wc-step:nth-child(2),.wz-js .wc-ladder .wc-step:nth-child(2) .wc-step__num{transition-delay:.35s}
.wz-js .wc-ladder .wc-step:nth-child(3),.wz-js .wc-ladder .wc-step:nth-child(3) .wc-step__num{transition-delay:.7s}
.wz-js .wc-ladder .wc-step:nth-child(4),.wz-js .wc-ladder .wc-step:nth-child(4) .wc-step__num{transition-delay:1.05s}
.wz-js .wc-ladder .wc-step:nth-child(5),.wz-js .wc-ladder .wc-step:nth-child(5) .wc-step__num{transition-delay:1.4s}
@media (max-width:600px){.wz-js .wc-ladder::after{left:13px}}
/* Numbered mini steps */
.wz-js .wc-steps li{opacity:0;translate:-10px 0;transition:opacity .5s,translate .5s}
.wz-js .wc-steps.wz-in li{opacity:1;translate:0 0}
.wz-js .wc-steps li:nth-child(2){transition-delay:.25s}.wz-js .wc-steps li:nth-child(3){transition-delay:.5s}.wz-js .wc-steps li:nth-child(4){transition-delay:.75s}.wz-js .wc-steps li:nth-child(5){transition-delay:1s}.wz-js .wc-steps li:nth-child(6){transition-delay:1.25s}
/* Flow arrows: dashes travel, head nudges forward */
.x-flow__arrow path[stroke-dasharray]{animation:wzMarch 1.1s linear infinite}
.x-flow__arrow path:last-child{animation:wzNudge 1.6s ease-in-out infinite}
.wz-js .x-flow__arrow{opacity:0;transition:opacity .8s ease .3s}
.wz-js .x-flow.wz-in .x-flow__arrow{opacity:1}
}
@keyframes wzMarch{to{stroke-dashoffset:-28}}
@keyframes wzNudge{0%,100%{translate:0 0}50%{translate:4px 0}}

/* WyzGuild as a third lane (Oct 2026) */
.wc-folder--three .wc-folder__tabs{grid-template-columns:repeat(3,1fr);max-width:1040px}
.wc-ftab--guild[aria-selected=true]{background:#EAF8F0;color:#047A47}
.wc-stage--guild{background:#EAF8F0}
.wc-product--guild{background:#04A859;color:#fff}
.wc-folder--three .wc-ftab{font-size:.95rem}
@media (max-width:700px){.wc-folder--three .wc-ftab{font-size:.74rem}}

.wc-feat__tag--guild{background:#E6F7EE;color:#047A47}
section[aria-labelledby="wc-faq3-title"] .wc-qa>div:nth-child(4){background:#DCEBFF;transform:rotate(1.2deg)}
section[aria-labelledby="wc-faq3-title"] .wc-qa>div:nth-child(5){background:#D9F4E4;transform:rotate(-.8deg)}
section[aria-labelledby="wc-faq3-title"] .wc-qa>div:nth-child(6){background:#FFF2B3;transform:rotate(-1.6deg) translateY(.6rem)}
.btn--cyan{background:#00B8E6;border-color:#00B8E6;color:#00264D}
.btn--cyan:hover{background:#00A3CC;border-color:#00A3CC;color:#00264D}
.wc-inside__links{flex-wrap:wrap}