.st-stage{position:relative;max-width:560px;margin:14px auto 18px;background:#fff;border-radius:20px;box-shadow:0 6px 24px rgba(11,31,58,.12);padding:10px 10px 14px;text-align:center}
.st-svg{width:100%;height:auto;display:block}
.st-svg .sc{opacity:0;transition:opacity .35s}
.st-stage[data-s="1"] .sc1,.st-stage[data-s="2"] .sc2,.st-stage[data-s="3"] .sc3,.st-stage[data-s="4"] .sc4,.st-stage[data-s="5"] .sc5,.st-stage[data-s="6"] .sc6{opacity:1}
.st-cap{font-weight:700;color:#0B1F3A;margin:8px 0 6px;min-height:1.4em;font-size:1.05rem}
.st-dots{display:flex;gap:6px;justify-content:center;margin-bottom:8px}.st-dots i{width:8px;height:8px;border-radius:50%;background:#cfe0e0}.st-dots i.on{background:#00A8A8}
.st-ctl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.st-svg *{transform-box:fill-box}
/* scene 1 */
.play .fill1{animation:stw .5s .2s forwards}.play .fill2{animation:stw .5s .6s forwards}
@keyframes stw{to{width:64px}}
.sc1 .doc,.sc1 .sub{opacity:0}.play .d1{animation:stpop .3s 1s forwards}.play .d2{animation:stpop .3s 1.3s forwards}.play .sub{animation:stpop .3s 1.6s forwards}
@keyframes stpop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.sc1 .tap{opacity:0;transform-origin:center}.play .tap{animation:sttap .5s 1.9s 2}
@keyframes sttap{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
/* scene 2 */
.sc2 .rocket{transform:translate(50px,190px)}.play .rocket{animation:stfly 2.2s .2s ease-in forwards}
@keyframes stfly{0%{transform:translate(50px,190px)}20%{transform:translate(60px,170px)}100%{transform:translate(300px,120px) scale(.5)}}
.play .flame{animation:stfl .15s infinite alternate;transform-origin:top}@keyframes stfl{to{transform:scaleY(1.5)}}
.play .house{animation:stglow .5s 2.2s 2 alternate}@keyframes stglow{to{transform:scale(1.06)}}
/* scene 3 */
.play .zz{animation:stzz 1s 2 forwards}@keyframes stzz{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-14px)}}
.sc3 .bell{opacity:0}.play .bell{animation:stpop .2s .9s forwards,stshake .1s 1s 8 alternate}@keyframes stshake{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
.sc3 .jumper{opacity:0}.play .sleeper{animation:stout .2s 1.4s forwards}.play .jumper{animation:stjump .6s 1.4s forwards}
@keyframes stout{to{opacity:0}}@keyframes stjump{0%{opacity:1;transform:translate(-160px,0)}50%{transform:translate(-80px,-40px)}100%{opacity:1;transform:none}}
.play .glow{animation:stgl .6s infinite alternate}@keyframes stgl{to{opacity:.5}}
/* scene 4 */
.sc4 .orbit{transform-origin:180px 130px;transform-box:view-box}.play .orbit{animation:storb 2.8s linear}
@keyframes storb{to{transform:rotate(360deg)}}
.play .sky{animation:stsky 2.8s linear}@keyframes stsky{0%,20%{fill:#BFE8F0}45%,70%{fill:#14294a}95%{fill:#BFE8F0}}
.play .lamp{animation:stlamp 2.8s}@keyframes stlamp{0%,25%{opacity:.15}45%,70%{opacity:.75}100%{opacity:.15}}
.play .typing rect{animation:stty .4s infinite alternate}.play .typing rect:nth-child(2){animation-delay:.15s}@keyframes stty{to{opacity:.2}}
.sc4 .tag{opacity:0}.play .t1{animation:stpop .3s .8s forwards}.play .t2{animation:stpop .3s 1.6s forwards}
/* scene 5 */
.sc5 .b1,.sc5 .b2{y:70px}.play .b1{animation:stb1 .6s .2s forwards}.play .b2{animation:stb2 .6s .5s forwards}.sc5 .b3,.sc5 .b4{height:40px;y:30px}.play .b3{animation:stb3 .6s .3s forwards}.play .b4{animation:stb4 .6s .6s forwards}
@keyframes stb1{to{height:28px;y:42px}}@keyframes stb2{to{height:44px;y:26px}}@keyframes stb3{to{height:24px;y:46px}}@keyframes stb4{to{height:12px;y:58px}}
.sc5 .badge,.sc5 .holiday{opacity:0}.play .badge{animation:stpop .35s 1.2s forwards}.play .holiday{animation:stpop .35s 1.9s forwards}
.play .plane{animation:stplane 2.6s .3s linear forwards}@keyframes stplane{from{transform:translateX(-20px)}to{transform:translateX(380px)}}
.play .vib{animation:stgl .5s infinite alternate}
.play.sc6 circle{animation:stgl .6s infinite alternate}
/* reduced motion: static final frames, no animation */
.st-static *{animation:none!important;transition:none!important}
.st-static .doc,.st-static .sub,.st-static .bell,.st-static .tag,.st-static .badge,.st-static .holiday,.st-static .jumper{opacity:1!important}
.st-static .sleeper,.st-static .zz,.st-static .tap{opacity:0}
.st-static .fill1,.st-static .fill2{width:64px}
.st-static .rocket{transform:translate(200px,120px) scale(.7)}
.st-static .b1{height:28px;y:42px}.st-static .b2{height:44px;y:26px}.st-static .b3{height:24px;y:46px}.st-static .b4{height:12px;y:58px}
.st-static .sky{fill:#14294a}.st-static .orbit{transform:rotate(180deg)}.st-static .lamp{opacity:.75}.st-static .plane{transform:translateX(150px)}

/* speech bubbles + thumb scroll */
.st-svg .bub{opacity:0;transform-origin:center bottom}
.play .bub{animation:stbub .6s .15s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stbub{0%{opacity:0;transform:scale(.2) translateY(10px)}100%{opacity:1;transform:none}}
.sc5 .feed{transform:translateY(40px)}.play .feed{animation:stfeed 1.2s .6s ease-out forwards}
@keyframes stfeed{to{transform:translateY(0)}}
.play .thumb{animation:stswipe .6s .3s 4 ease-in-out}
@keyframes stswipe{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.play .arm{animation:sttapa .4s 1.8s 2 alternate}@keyframes sttapa{to{transform:translateY(4px)}}
.st-static .bub{opacity:1!important}.st-static .feed{transform:none}