feat: fade meteors at horizon using mask-image on #meteorLayer

Meteors now dissolve as they approach the horizon line (fade from
50% to 60% viewport height) via CSS mask-image on their container.
Also fixed spawnMeteor appending to #meteorLayer instead of .scene.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

plugin/contents/ui/dancer.html

@@ -121,6 +121,14 @@ html, body {
   transform-origin: top center;
   animation: meteorFall linear forwards;
 }
+#meteorLayer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 60%);
+  mask-image: linear-gradient(to bottom, black 50%, transparent 60%);
+}
+
 @keyframes meteorFall {
   0%   { opacity: 0; transform: rotate(var(--rot)) translateY(0); }
   5%   { opacity: 1; }
@@ -745,6 +753,9 @@ html, body {
   <!-- Horizon glow -->
   <div class="horizon"></div>
 
+  <!-- Meteor layer (masked at horizon) -->
+  <div id="meteorLayer"></div>
+
   <!-- ===================== ROBOT ===================== -->
   <div class="robot-wrap">
     <div class="beat-wrap">
@@ -919,7 +930,7 @@ function spawnMeteor() {
     animation-duration:${dur}s;
     animation-name:meteorFall;
   `;
-  document.querySelector('.scene').appendChild(el);
+  document.getElementById('meteorLayer').appendChild(el);
   setTimeout(() => el.remove(), dur * 1000);
 }