/* 01: the closed box gains a cast of stickers, then packs them away. */
.motion-brand .brand-hand-ok{width:92px;left:max(0px,calc(50% - 242px));top:42%;rotate:-17deg;animation:brand-left-emerge 4.96s ease-in-out infinite}
.motion-brand .brand-hand-peace{width:94px;right:max(0px,calc(50% - 242px));top:40%;rotate:15deg;animation:brand-right-emerge 4.96s ease-in-out infinite}
.motion-brand .brand-topflower{left:calc(50% - 155px);top:26%;width:82px;height:82px;rotate:-8deg;animation:brand-flower-rise 4.96s ease-in-out infinite}
.motion-brand .brand-heart{width:78px;left:calc(50% + 82px);top:25%;rotate:8deg;animation:brand-heart-rise 4.96s ease-in-out infinite}
.motion-brand .brand-tag{left:calc(50% - 69px);top:82%;width:138px;height:58px;border:4px solid var(--cream);border-radius:12px;background:var(--yellow);color:var(--blue);text-align:center;transform-origin:50% -42px;animation:brand-tag-lower 4.96s ease-in-out infinite}
.motion-brand .brand-tag::before{content:'';position:absolute;left:calc(50% - 1px);top:-46px;width:2px;height:42px;background:repeating-linear-gradient(#9b925d 0 3px,#fff8 3px 5px)}
.motion-brand .brand-tag b{display:block;font-size:30px;font-weight:900;letter-spacing:-2px;line-height:1.1}
.motion-brand .brand-tag small{display:block;font-size:6px;letter-spacing:.8px}
@keyframes brand-left-emerge{0%,100%{translate:110px 18px;rotate:5deg;opacity:0}18%,84%{translate:0 0;rotate:-17deg;opacity:1}}
@keyframes brand-right-emerge{0%,100%{translate:-110px 18px;rotate:-6deg;opacity:0}19%,84%{translate:0 0;rotate:15deg;opacity:1}}
@keyframes brand-flower-rise{0%,100%{translate:0 78px;rotate:15deg;opacity:0}17%,84%{translate:0 0;rotate:-8deg;opacity:1}}
@keyframes brand-heart-rise{0%,100%{translate:0 88px;rotate:-10deg;opacity:0}21%,84%{translate:0 0;rotate:8deg;opacity:1}}
@keyframes brand-tag-lower{0%,100%{translate:0 -105px;rotate:0deg;opacity:0}20%{translate:0 0;rotate:-7deg;opacity:1}33%{translate:6px 0;rotate:6deg;opacity:1}47%{translate:-6px 0;rotate:-5deg;opacity:1}61%{translate:5px 0;rotate:5deg;opacity:1}75%{translate:-4px 0;rotate:-4deg;opacity:1}85%{translate:0 0;rotate:3deg;opacity:1}}

/* 02: an already visible crowd waves around the envelope; its red badge descends. */
.motion-media .media-hand-ok{width:93px;left:max(0px,calc(50% - 204px));top:47%;rotate:-13deg;transform-origin:75% 90%;animation:media-ok-wave 1.8s ease-in-out infinite}
.motion-media .media-hand-peace{width:96px;right:max(0px,calc(50% - 206px));top:45%;rotate:16deg;transform-origin:35% 90%;animation:media-peace-wave 1.8s ease-in-out infinite}
.motion-media .media-flower-blue{left:calc(50% - 186px);top:24%;width:82px;height:82px;animation:media-blue-spin 3.6s linear infinite}
.motion-media .media-flower-purple{right:calc(50% - 186px);top:23%;color:#aa8ed9;animation:media-purple-spin 3.6s linear infinite}
.motion-media .media-star{width:75px;left:calc(50% - 177px);top:68%;rotate:-12deg;animation:media-star-bob 1.8s ease-in-out infinite}
.motion-media .media-flower-green{right:calc(50% - 174px);top:67%;color:#91bf53;font-size:74px;animation:media-green-spin 3.6s linear infinite}
.motion-media .media-tag{left:calc(50% - 66px);top:86%;width:132px;height:54px;border:4px solid var(--cream);border-radius:12px;background:#ef5d76;color:var(--cream);text-align:center;transform-origin:50% -35px;animation:media-badge-drop 3.6s ease-in-out infinite}
.motion-media .media-tag::before{content:'';position:absolute;left:calc(50% - 1px);top:-38px;width:2px;height:34px;background:repeating-linear-gradient(#9b925d 0 3px,#fff8 3px 5px)}
.motion-media .media-tag b{display:block;font-size:14px;font-weight:900;line-height:1.7}
.motion-media .media-tag small{display:block;font-size:7px;letter-spacing:1px}
@keyframes media-ok-wave{0%,100%{rotate:-18deg;translate:0 0}50%{rotate:-2deg;translate:0 -5px}}
@keyframes media-peace-wave{0%,100%{rotate:8deg;translate:0 -3px}50%{rotate:24deg;translate:0 2px}}
@keyframes media-blue-spin{to{rotate:360deg}}
@keyframes media-purple-spin{to{rotate:-360deg}}
@keyframes media-green-spin{to{rotate:360deg}}
@keyframes media-star-bob{0%,100%{translate:0 3px;rotate:-14deg}50%{translate:0 -8px;rotate:8deg}}
@keyframes media-badge-drop{0%,100%{translate:0 -103px;rotate:0deg;opacity:0}14%{translate:0 -50px;rotate:-5deg;opacity:1}44%{translate:-5px 0;rotate:-5deg;opacity:1}56%{translate:5px 0;rotate:5deg;opacity:1}77%{translate:0 -37px;rotate:-3deg;opacity:1}}

/* 03: two runners trade sides behind the fixed cassette and return. */
.motion-event .event-runner-left{--runner-width:78px;--travel:calc(88cqw - var(--runner-width));width:var(--runner-width);left:6%;top:37%;rotate:-8deg;animation:event-star-cross 3.6s ease-in-out infinite}
.motion-event .event-runner-right{--runner-width:84px;--travel:calc(88cqw - var(--runner-width));width:var(--runner-width);right:6%;top:37%;height:var(--runner-width);animation:event-asterisk-cross 3.6s ease-in-out infinite}
.motion-event .event-flower-purple{left:calc(50% - 185px);top:23%;color:#aa8ed9;font-size:74px;animation:event-purple-spin 3.6s linear infinite}
.motion-event .event-flower-green{right:calc(50% - 182px);top:24%;color:#8fc35f;font-size:74px;animation:event-green-spin 3.6s linear infinite}
.motion-event .event-hand-ok{width:92px;left:max(0px,calc(50% - 242px));top:59%;rotate:-14deg;transform-origin:70% 90%;animation:event-ok-wave 1.8s ease-in-out infinite}
.motion-event .event-hand-peace{width:94px;right:max(0px,calc(50% - 242px));top:57%;rotate:15deg;transform-origin:35% 90%;animation:event-peace-wave 1.8s ease-in-out infinite}
.motion-event .event-music{width:144px;left:calc(50% - 72px);top:79%;height:74px;color:#e2e7df;text-align:center;text-shadow:1px 2px var(--blue),-1px -1px #fff;transform-origin:50% -25px;animation:event-music-drop 3.6s ease-in-out infinite}
.motion-event .event-music::before{content:'';position:absolute;left:calc(50% - 1px);top:-31px;width:2px;height:29px;background:repeating-linear-gradient(#adb4a5 0 3px,#fff9 3px 5px)}
.motion-event .event-music>span{font-size:66px;line-height:1;display:inline-block;rotate:-20deg}
.motion-event .event-music>b{font-size:60px;line-height:1;display:inline-block;rotate:12deg;margin-left:7px}
.motion-event .event-music>small{font-size:7px;display:block;letter-spacing:1px;color:var(--blue);text-shadow:none}
@keyframes event-star-cross{0%,6%,100%{translate:0 0;rotate:-8deg}44%,55%{translate:var(--travel) 0;rotate:8deg}94%{translate:0 0;rotate:-8deg}}
@keyframes event-asterisk-cross{0%,6%,100%{translate:0 0;rotate:0deg}44%,55%{translate:calc(-1*var(--travel)) 0;rotate:180deg}94%{translate:0 0;rotate:360deg}}
@keyframes event-purple-spin{to{rotate:360deg}}
@keyframes event-green-spin{to{rotate:-360deg}}
@keyframes event-ok-wave{0%,100%{rotate:-21deg}50%{rotate:0deg}}
@keyframes event-peace-wave{0%,100%{rotate:3deg}50%{rotate:24deg}}
@keyframes event-music-drop{0%,100%{translate:0 -105px;scale:.75;rotate:0deg;opacity:0}21%{translate:0 -42px;scale:.9;rotate:6deg;opacity:1}44%,55%{translate:0 0;scale:1;rotate:-7deg;opacity:1}78%{translate:0 -34px;scale:.9;rotate:5deg;opacity:1}}

@media(max-width:760px){
 .motion-brand .brand-hand-ok,.motion-brand .brand-hand-peace{width:66px;top:45%}
 .motion-brand .brand-topflower{left:calc(50% - 112px);width:60px;height:60px;top:28%}
 .motion-brand .brand-heart{left:calc(50% + 54px);width:60px;top:28%}
 .motion-brand .brand-tag{top:82%;width:120px;left:calc(50% - 60px);height:52px}
 .motion-brand .brand-tag b{font-size:26px}
 .motion-brand .brand-tag small{font-size:5px}
 .motion-brand .brand-box,#dialog-art .motion-brand .brand-box{scale:.7}
 .motion-media .media-hand-ok,.motion-media .media-hand-peace{width:68px;top:49%}
 .motion-media .media-flower-blue{left:calc(50% - 132px);top:27%;width:56px;height:56px}
 .motion-media .media-flower-purple{right:calc(50% - 132px);top:27%;font-size:56px}
 .motion-media .media-star{left:calc(50% - 126px);width:60px;top:68%}
 .motion-media .media-flower-green{right:calc(50% - 126px);top:68%;font-size:56px}
 .motion-media .media-tag{top:85%;height:50px;width:120px;left:calc(50% - 60px)}
 .motion-media .campaign-poster,#dialog-art .motion-media .campaign-poster{scale:.8}
 .motion-event .event-runner-left{--runner-width:60px;top:40%}
 .motion-event .event-runner-right{--runner-width:64px;top:40%}
 .motion-event .event-flower-purple{left:calc(50% - 127px);top:28%;font-size:54px}
 .motion-event .event-flower-green{right:calc(50% - 126px);top:28%;font-size:54px}
 .motion-event .event-hand-ok,.motion-event .event-hand-peace{width:65px;top:60%}
 .motion-event .event-music{top:78%;scale:.85}
 .motion-event .cassette,#dialog-art .motion-event .cassette{scale:.67}
}