/* One shared timeline keeps each costume change inside its turn. */
.visual{--robot-cycle:18s}
.disc{perspective:850px}
.robot-rig{position:relative;width:62%;aspect-ratio:1.12;transform-style:preserve-3d;transform:rotateZ(10deg);animation:robot-routine var(--robot-cycle) linear infinite;will-change:transform}
.robot-rig .face,.robot-back{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;border-radius:42% 42% 46% 46%;border:2px solid var(--ink)}
.robot-rig .face{transform:translateZ(7px);padding:0;display:block;box-shadow:0 8px 0 #242424}
.robot-back{background:#e9edf1;transform:rotateY(180deg) translateZ(7px);box-shadow:0 8px 0 #242424}
.robot-back:after{content:'';position:absolute;width:22%;height:4%;border-radius:99px;background:#b8c1c8;top:58%;left:39%;box-shadow:0 9px #b8c1c8}
.robot-rig .eye{position:absolute;top:37%;left:27%;width:10%;height:25%;animation:blink 6s infinite}
.robot-rig .eye:nth-child(2){left:63%;animation-delay:.1s}
.headphones{position:absolute;inset:-12% -11% -2%;transform:translateZ(10px);opacity:0;animation:headphone-costume var(--robot-cycle) linear infinite}
.headband{position:absolute;inset:0 1% 24%;border:clamp(9px,1.3vw,16px) solid var(--ink);border-bottom:0;border-radius:50% 50% 0 0;box-shadow:inset 0 5px #f4ef6a}
.earcup{position:absolute;top:44%;left:0;width:19%;height:38%;border:3px solid var(--ink);border-radius:35%;background:#f4ef6a;box-shadow:inset 5px 0 #fff7ac,3px 4px 0 var(--ink)}
.earcup.right{left:auto;right:0;box-shadow:inset -5px 0 #fff7ac,-3px 4px 0 var(--ink)}
.glasses{position:absolute;left:8%;right:8%;top:31%;height:33%;opacity:0;transform:translateZ(17px);animation:glasses-costume var(--robot-cycle) linear infinite}
.glasses:before{content:'';position:absolute;top:10%;left:-4%;right:-4%;height:13%;background:var(--ink);border-radius:99px}
.lens{position:absolute;left:0;top:0;width:46%;height:100%;background:#222325;border:3px solid #222325;border-radius:18% 18% 45% 45%;overflow:hidden}
.lens.right{left:auto;right:0}.lens:after{content:'';position:absolute;top:-15%;left:27%;width:18%;height:140%;background:#8da6bb;transform:rotate(35deg);opacity:.8}
.music-notes{position:absolute;inset:0;pointer-events:none;opacity:0;animation:music-mood var(--robot-cycle) linear infinite;font:700 32px 'Outfit';color:var(--ink)}
.music-notes span{position:absolute;left:12%;top:16%;transform:rotate(-18deg)}.music-notes span:nth-child(2){left:auto;right:9%;top:29%;transform:rotate(15deg);font-size:26px}
.motion-toggle{position:absolute;bottom:8%;left:7%;border:1.5px solid var(--ink);background:var(--cream);color:var(--ink);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;padding:0;font-size:14px;line-height:1;z-index:3}
.visual.is-paused *,.visual.is-paused *:before,.visual.is-paused *:after{animation-play-state:paused!important}
@keyframes robot-routine{
  0%,17%{transform:rotateZ(10deg) rotateX(0) rotateY(0)}
  19%{transform:translateY(9px) rotateZ(10deg) rotateX(-15deg) scale(1.04,.94)}
  22%{transform:translateY(-30px) rotateZ(10deg) rotateX(80deg) scale(.96)}
  25%{transform:translateY(-42px) rotateZ(10deg) rotateX(190deg) scale(.92)}
  28%{transform:translateY(-15px) rotateZ(10deg) rotateX(310deg)}
  30%{transform:translateY(7px) rotateZ(10deg) rotateX(360deg) scale(1.06,.92)}
  32%,35%{transform:rotateZ(10deg) rotateX(360deg)}
  38%,46%{transform:translateY(-5px) rotateZ(4deg) rotateX(360deg)}
  42%,50%{transform:translateY(2px) rotateZ(16deg) rotateX(360deg)}
  52%{transform:rotateZ(10deg) rotateX(360deg) rotateY(-18deg)}
  55%{transform:translateY(-12px) rotateZ(10deg) rotateX(360deg) rotateY(90deg)}
  57%{transform:translateY(-17px) rotateZ(10deg) rotateX(360deg) rotateY(180deg)}
  60%{transform:translateY(-6px) rotateZ(10deg) rotateX(360deg) rotateY(300deg)}
  62%{transform:rotateZ(10deg) rotateX(360deg) rotateY(375deg)}
  64%,69%{transform:rotateZ(10deg) rotateX(360deg) rotateY(360deg)}
  73%,79%{transform:translateY(-5px) rotateZ(2deg) rotateX(360deg) rotateY(345deg)}
  84%{transform:rotateZ(10deg) rotateX(360deg) rotateY(360deg)}
  87%{transform:translateY(5px) rotateZ(15deg) rotateX(360deg) rotateY(340deg)}
  89%{transform:translateY(-12px) rotateZ(10deg) rotateX(360deg) rotateY(450deg)}
  91%{transform:translateY(-18px) rotateZ(10deg) rotateX(360deg) rotateY(540deg)}
  94%{transform:translateY(5px) rotateZ(10deg) rotateX(360deg) rotateY(735deg) scale(1.04,.96)}
  97%,100%{transform:rotateZ(10deg) rotateX(360deg) rotateY(720deg)}
}
@keyframes headphone-costume{0%,24.99%{opacity:0}25%,56.99%{opacity:1}57%,100%{opacity:0}}
@keyframes glasses-costume{0%,56.99%{opacity:0}57%,90.99%{opacity:1}91%,100%{opacity:0}}
@keyframes music-mood{0%,32%{opacity:0;transform:translateY(8px)}36%,48%{opacity:1;transform:translateY(-8px)}52%,100%{opacity:0;transform:translateY(-18px)}}
@media(max-width:600px){.motion-toggle{bottom:2%;left:8%}.earcup{border-width:2px}}
@media(prefers-reduced-motion:reduce){.robot-rig,.headphones,.glasses,.music-notes{animation:none!important}.motion-toggle{display:none}.disc,.eye{animation:none!important}}