/* ============================================================================
   KAIZEEN — SERVICE SCENE ANIMATIONS
   Pure CSS. Every scene is paused until kz.js adds .live (scrolled into view).
   Reduced-motion visitors get the finished, static illustration.
   ============================================================================ */
.scene{display:block;width:100%;height:auto;border-radius:30px}
.scene *{animation-play-state:paused}
.scene.live *{animation-play-state:running}
.scene [class*="hk-"],.scene [class*="dc-"],.scene [class*="hm-"],.scene [class*="od-"],.scene .spk,.scene .mote,.scene .mist,.scene .bub,.scene .foam,.scene .sud,.scene .drip{animation-fill-mode:both}

/* shared bits ----------------------------------------------------------------*/
.scene .spk{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;animation:spk 11s linear infinite}
.scene-dc .spk{animation-duration:9s}
.scene-hm .spk{animation-duration:10s}
.scene-od .spk{animation-duration:8s}
@keyframes spk{0%{transform:scale(0) rotate(0);opacity:0}3%{transform:scale(1.15) rotate(25deg);opacity:1}8%{transform:scale(.85) rotate(60deg);opacity:1}12%,100%{transform:scale(0) rotate(90deg);opacity:0}}

/* ============================================================== HOUSEKEEPING */
.scene-hk .hk-mop{animation:hkMop 11s linear infinite}
@keyframes hkMop{
  0%{transform:translate(70px,350px) rotate(-5deg)}
  40%{transform:translate(560px,350px) rotate(-5deg)}
  44%{transform:translate(560px,350px) rotate(5deg)}
  47%{transform:translate(560px,416px) rotate(5deg)}
  87%{transform:translate(70px,416px) rotate(5deg)}
  91%{transform:translate(70px,416px) rotate(-5deg)}
  95%,100%{transform:translate(70px,350px) rotate(-5deg)}
}
.scene-hk .hk-lane{transform-box:fill-box}
.scene-hk .hk-lane1{transform-origin:0 50%;animation:hkL1 11s linear infinite}
.scene-hk .hk-lane2{transform-origin:100% 50%;animation:hkL2 11s linear infinite}
@keyframes hkL1{
  0%{transform:scaleX(.166);opacity:1}
  40%,88%{transform:scaleX(.993);opacity:1}
  94%{transform:scaleX(.993);opacity:0}
  99.9%{transform:scaleX(.166);opacity:0}
  100%{transform:scaleX(.166);opacity:1}
}
@keyframes hkL2{
  0%,46.9%{transform:scaleX(.182);opacity:0}
  47%{transform:scaleX(.182);opacity:1}
  87%,88%{transform:scaleX(1);opacity:1}
  94%,100%{transform:scaleX(1);opacity:0}
}
.scene-hk .mote{transform-box:fill-box;animation:mote 6.5s ease-in-out infinite;opacity:0}
@keyframes mote{0%{transform:translate(0,0);opacity:0}25%{opacity:.95}100%{transform:translate(var(--dx,10px),-72px);opacity:0}}
.scene-hk .bub{transform-box:fill-box;transform-origin:center;animation:bub 2.8s ease-in infinite;opacity:0}
.scene-hk .b2{animation-delay:-.9s}.scene-hk .b3{animation-delay:-1.8s}
@keyframes bub{0%{transform:translateY(8px) scale(.4);opacity:0}25%{opacity:1}70%{transform:translateY(-16px) scale(1);opacity:1}85%{transform:translateY(-20px) scale(1.5);opacity:0}100%{opacity:0}}
.scene-hk .mist,.scene-hm .hm-mist{transform-box:fill-box;transform-origin:center;opacity:0;animation:mist 4.4s ease-out infinite}
.scene-hk .m2,.scene-hm .mm2{animation-delay:.18s}.scene-hk .m3,.scene-hm .mm3{animation-delay:.36s}
@keyframes mist{0%,56%{transform:translate(0,0) scale(.3);opacity:0}60%{opacity:.95}88%{transform:translate(28px,-14px) scale(2.6);opacity:0}100%{opacity:0}}
.scene-hk .clk-h,.scene-hk .clk-m{animation:clk 60s linear infinite}
.scene-hk .clk-h{animation-duration:720s}
@keyframes clk{to{transform:rotate(360deg)}}
.scene-hk .hk-trolley{transform-box:fill-box}

/* ============================================================== DEEP CLEAN */
.scene-dc .dc-machine{animation:dcMach 9s linear infinite}
@keyframes dcMach{
  0%{transform:translate(106px,404px)}
  55%{transform:translate(326px,404px)}
  60%,72%{transform:translate(326px,404px);opacity:1}
  76%{transform:translate(326px,404px);opacity:0}
  77%,94%{transform:translate(106px,404px);opacity:0}
  100%{transform:translate(106px,404px);opacity:1}
}
.scene-dc .dc-strip{transform-box:fill-box;transform-origin:0 50%;animation:dcStrip 9s linear infinite}
@keyframes dcStrip{
  0%{transform:scaleX(.405);opacity:1}
  55%,72%{transform:scaleX(1);opacity:1}
  80%{transform:scaleX(1);opacity:0}
  99.9%{transform:scaleX(.405);opacity:0}
  100%{transform:scaleX(.405);opacity:1}
}
.scene-dc .dc-spin{animation:dcSpin .9s linear infinite}
@keyframes dcSpin{to{stroke-dashoffset:-28}}
.scene-dc .foam{transform-box:fill-box;transform-origin:center;opacity:0;animation:foam 2.6s ease-out infinite}
.scene-dc .f2{animation-delay:-.4s}.scene-dc .f3{animation-delay:-.9s}.scene-dc .f4{animation-delay:-1.3s}.scene-dc .f5{animation-delay:-1.8s}.scene-dc .f6{animation-delay:-2.2s}
@keyframes foam{0%{transform:translateY(6px) scale(.3);opacity:0}25%{opacity:1}80%{transform:translateY(-14px) scale(1.15);opacity:.9}100%{transform:translateY(-22px) scale(1.4);opacity:0}}
.scene-dc .dc-brush{animation:dcBrush 2.4s ease-in-out infinite}
@keyframes dcBrush{
  0%{transform:translate(-26px,0) rotate(-4deg)}
  25%{transform:translate(0,-14px) rotate(2deg)}
  50%{transform:translate(26px,0) rotate(4deg)}
  75%{transform:translate(0,12px) rotate(-2deg)}
  100%{transform:translate(-26px,0) rotate(-4deg)}
}
.scene-dc .dc-patch{transform-box:fill-box;transform-origin:center;animation:dcPatch 6s ease-in-out infinite}
@keyframes dcPatch{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.08);opacity:.85}}
.scene-dc .sud{transform-box:fill-box;transform-origin:center;opacity:0;animation:foam 2.2s ease-out infinite}
.scene-dc .s2{animation-delay:-.6s}.scene-dc .s3{animation-delay:-1.2s}.scene-dc .s4{animation-delay:-1.7s}
.scene-dc .dc-grime{transform-box:fill-box;transform-origin:50% 100%;animation:dcGrime 9s linear infinite}
@keyframes dcGrime{
  0%{transform:scaleY(1);opacity:1}
  50%,62%{transform:scaleY(0);opacity:1}
  62.1%{transform:scaleY(1);opacity:0}
  76%,100%{transform:scaleY(1);opacity:1}
}
.scene-dc .dc-sq{animation:dcSq 9s linear infinite}
@keyframes dcSq{
  0%{transform:translate(502px,66px);opacity:1}
  50%{transform:translate(502px,308px);opacity:1}
  54%{transform:translate(502px,310px);opacity:1}
  58%,100%{transform:translate(502px,66px);opacity:0}
}
.scene-dc .drip{transform-box:fill-box;animation:drip 1.1s ease-in infinite;opacity:0}
.scene-dc .d2{animation-delay:-.5s}
@keyframes drip{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(30px);opacity:0}}

/* ================================================================= HOME */
.scene-hm .hm-vac{animation:hmVac 10s linear infinite}
@keyframes hmVac{
  0%{transform:translate(230px,428px);opacity:1}
  60%{transform:translate(520px,428px);opacity:1}
  64%{transform:translate(520px,428px);opacity:1}
  68%{transform:translate(520px,428px);opacity:0}
  69%,96%{transform:translate(230px,428px);opacity:0}
  100%{transform:translate(230px,428px);opacity:1}
}
.scene-hm .hm-dot{transform-box:fill-box;transform-origin:center}
.scene-hm .hm-cloth{animation:hmCloth 3.2s ease-in-out infinite alternate}
@keyframes hmCloth{from{transform:translate(446px,318px)}to{transform:translate(532px,318px)}}
.scene-hm .hm-lamp{animation:hmLamp 6s ease-in-out infinite alternate;transform-origin:452px 0}
@keyframes hmLamp{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
.scene-hm .hm-plant{transform-box:fill-box;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-2deg)}to{transform:rotate(2.2deg)}}
.scene-hm .hm-cush1{transform-box:fill-box;transform-origin:center;animation:cush 5s ease-in-out infinite}
@keyframes cush{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.scene-hm .hm-puff{transform-box:fill-box;opacity:0;animation:puff 2.4s ease-out infinite}
.scene-hm .p2{animation-delay:-1.1s}
@keyframes puff{0%{transform:translate(0,0) scale(.4);opacity:0}25%{opacity:.9}100%{transform:translate(-8px,-26px) scale(1.6);opacity:0}}

/* ============================================================== OUTDOOR */
.scene-od .od-rays{transform-origin:512px 96px;animation:spin 36s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scene-od .od-halo{transform-box:fill-box;transform-origin:center;animation:halo 5s ease-in-out infinite alternate}
@keyframes halo{from{transform:scale(.92);opacity:.7}to{transform:scale(1.1);opacity:1}}
.scene-od .od-cloud.c1{animation:cloud 30s ease-in-out infinite alternate}
.scene-od .od-cloud.c2{animation:cloud 42s ease-in-out infinite alternate-reverse}
@keyframes cloud{from{transform:translateX(-26px)}to{transform:translateX(40px)}}
.scene-od .od-bird{animation:bird 17s linear infinite}
@keyframes bird{0%{transform:translate(-60px,168px)}50%{transform:translate(300px,140px)}100%{transform:translate(700px,176px)}}
.scene-od .od-wing{transform-box:fill-box;transform-origin:50% 100%;animation:wing .5s ease-in-out infinite alternate}
@keyframes wing{from{transform:scaleY(1)}to{transform:scaleY(-.55)}}
.scene-od .od-plant{transform-box:fill-box;transform-origin:50% 100%;animation:sway 5.5s ease-in-out infinite alternate}
.scene-od .od-plant.p2{animation-duration:4.4s}.scene-od .od-plant.p3{animation-duration:6.5s;animation-delay:-2s}
.scene-od .od-grow{transform-box:fill-box;transform-origin:50% 100%;animation:odGrow 8s ease-in-out infinite}
@keyframes odGrow{0%,26%{transform:scale(.9)}58%,92%{transform:scale(1.07)}100%{transform:scale(.9)}}
.scene-od .od-can{animation:odCan 8s ease-in-out infinite}
@keyframes odCan{0%,14%{transform:rotate(0)}26%,70%{transform:rotate(24deg)}82%,100%{transform:rotate(0)}}
.scene-od .od-stream{opacity:0;animation:odStream 8s linear infinite}
@keyframes odStream{0%,26%{opacity:0}30%,68%{opacity:1}72%,100%{opacity:0}}
.scene-od .od-drop{transform-box:fill-box;animation:odDrop .8s linear infinite}
@keyframes odDrop{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(72px);opacity:.8}}
.scene-od .od-ripple{transform-box:fill-box;transform-origin:center;animation:ripple .8s ease-out infinite}
@keyframes ripple{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.2);opacity:0}}
.scene-od .od-bloom{transform-box:fill-box;transform-origin:50% 50%;animation:odBloom 8s ease-in-out infinite}
@keyframes odBloom{0%,58%{transform:scale(0);opacity:0}70%{transform:scale(1.18);opacity:1}76%,92%{transform:scale(1);opacity:1}98%,100%{transform:scale(0);opacity:0}}
.scene-od .od-broom{transform-origin:594px 262px;animation:broom 4.2s ease-in-out infinite alternate}
@keyframes broom{from{transform:rotate(-1.4deg)}to{transform:rotate(1.8deg)}}
.scene-od .od-leaf{transform-box:fill-box;transform-origin:center;opacity:0;animation:leaf 11s ease-in-out infinite}
.scene-od .l1{--x:90px}.scene-od .l2{--x:380px;animation-delay:-4s}.scene-od .l3{--x:560px;animation-delay:-7.5s}
@keyframes leaf{
  0%{transform:translate(var(--x),-20px) rotate(0);opacity:0}
  8%{opacity:.95}
  35%{transform:translate(calc(var(--x) + 40px),120px) rotate(120deg)}
  65%{transform:translate(calc(var(--x) - 20px),250px) rotate(250deg)}
  92%{transform:translate(calc(var(--x) + 26px),372px) rotate(380deg);opacity:.95}
  100%{transform:translate(calc(var(--x) + 26px),378px) rotate(400deg);opacity:0}
}

/* reduced motion → calm, finished illustration */
@media (prefers-reduced-motion:reduce){
  .scene *{animation:none!important}
  .scene .spk{opacity:1;transform:scale(1)}
  .scene-hk .hk-mop{transform:translate(330px,350px) rotate(-5deg)}
  .scene-hk .hk-lane2{opacity:0}
  .scene-dc .dc-machine{transform:translate(250px,404px)}
  .scene-dc .dc-sq{transform:translate(502px,200px)}
  .scene-hm .hm-vac{transform:translate(400px,428px)}
  .scene-hm .hm-cloth{transform:translate(480px,318px)}
  .scene-od .od-bloom{transform:scale(1);opacity:1}
  .scene-od .od-can{transform:rotate(18deg)}
  .scene .mote,.scene .mist,.scene .hm-mist,.scene .foam,.scene .sud,.scene .drip,.scene .od-stream{opacity:0}
}