feat: add perspective floor reflection of skeleton

plugin/contents/ui/dancer.html

@@ -255,6 +255,22 @@ html, body {
    ROBOT WRAPPER
    120 BPM = 0.5s per beat. All animations key off this tempo.
    ============================================================ */
+.robot-reflection {
+  position: absolute;
+  left: 50%;
+  bottom: 32%;
+  transform: translateX(-50%) scaleY(-0.22);
+  transform-origin: bottom center;
+  opacity: 0;
+  transition: opacity 0.8s;
+  pointer-events: none;
+  /* mask in original (pre-flip) space: opaque at bottom (feet), transparent at top (head)
+     after scaleY(-1) this becomes: opaque at top of visible area (feet), transparent lower */
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 100%);
+  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 100%);
+  filter: blur(1.5px) brightness(0.5);
+}
+
 .robot-wrap {
   position: absolute;
   left: 50%;
@@ -749,6 +765,11 @@ html, body {
   <!-- Meteor layer (masked at horizon) -->
   <div id="meteorLayer"></div>
 
+  <!-- ===================== REFLEXO ===================== -->
+  <div class="robot-reflection" id="robotReflection">
+    <img src="skeleton3.apng" class="skeleton-gif" alt="">
+  </div>
+
   <!-- ===================== ROBOT ===================== -->
   <div class="robot-wrap">
     <div class="beat-wrap">
@@ -1086,6 +1107,7 @@ function updateMusic(artist, title) {
   const playing = !!(artist || title);
   isPlaying = playing;
   document.querySelector('.robot-wrap').style.opacity        = playing ? '1' : '0';
+  document.getElementById('robotReflection').style.opacity   = playing ? '1' : '0';
   document.querySelector('.music-ticker').style.opacity = playing ? '1' : '0';
   albumArtEl.style.opacity = playing ? '1' : '0';
   if (!playing) vuBars.forEach(b => { b.style.height = '3px'; b.style.opacity = '0.15'; });