Fix SVG stage geometry and motion anchors

static/app.css

@@ -926,7 +926,7 @@ audio {
 .stage-canvas {
   position: relative;
   overflow: hidden;
-  aspect-ratio: 1.55 / 1;
+  aspect-ratio: 13 / 7;
   color: var(--red);
   background:
     radial-gradient(circle at 32% 38%, rgba(217, 71, 62, .18), transparent 45%),
@@ -961,6 +961,7 @@ audio {
 }
 
 .stage-visual.is-active {
+  z-index: 1;
   visibility: visible;
   opacity: 1;
   transform: scale(1);
@@ -1101,8 +1102,8 @@ audio {
 
 /* Audio */
 .audio-line {
-  stroke-dasharray: 720;
-  stroke-dashoffset: 720;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
 }
 .is-active .audio-line { animation: draw-line 2.4s var(--ease) infinite; }
 .audio-playhead { transform: translateX(24px); }
@@ -1112,15 +1113,15 @@ audio {
 .metronome { transform-origin: 0 100%; }
 .is-active .metronome { animation: metronome 1s ease-in-out infinite alternate; }
 .is-active .beat-pulses circle { animation: beat-pulse 2s ease-out infinite; }
-.is-active .beat-pulses circle:nth-child(2) { animation-delay: .4s; }
-.is-active .beat-pulses circle:nth-child(3) { animation-delay: .8s; }
-.is-active .beat-pulses circle:nth-child(4) { animation-delay: 1.2s; }
-.is-active .beat-pulses circle:nth-child(5) { animation-delay: 1.6s; }
+.is-active .beat-pulses circle:nth-child(2) { animation-delay: -.4s; }
+.is-active .beat-pulses circle:nth-child(3) { animation-delay: -.8s; }
+.is-active .beat-pulses circle:nth-child(4) { animation-delay: -1.2s; }
+.is-active .beat-pulses circle:nth-child(5) { animation-delay: -1.6s; }
 
 /* Plan */
 .plan-bars rect { fill: currentColor; opacity: .13; }
 .plan-bars .plan-climax { fill: var(--red); opacity: .42; }
-.is-active .plan-bars rect { animation: plan-rise 1.9s var(--ease) infinite alternate; transform-box: fill-box; transform-origin: center bottom; }
+.is-active .plan-bars rect { animation: plan-rise 1.9s var(--ease) infinite alternate both; transform-box: fill-box; transform-origin: center bottom; }
 .is-active .plan-bars rect:nth-child(2) { animation-delay: .12s; }
 .is-active .plan-bars rect:nth-child(3) { animation-delay: .24s; }
 .is-active .plan-bars rect:nth-child(4) { animation-delay: .36s; }
@@ -1137,10 +1138,10 @@ audio {
 .note .ka,
 .export-dots .ka { fill: var(--blue); }
 .is-active .note { animation: note-travel 3.2s linear infinite; }
-.is-active .note-2 { animation-delay: -.65s; }
-.is-active .note-3 { animation-delay: -1.3s; }
-.is-active .note-4 { animation-delay: -1.95s; }
-.is-active .note-5 { animation-delay: -2.6s; }
+.is-active .note-2 { animation-delay: -.64s; }
+.is-active .note-3 { animation-delay: -1.28s; }
+.is-active .note-4 { animation-delay: -1.92s; }
+.is-active .note-5 { animation-delay: -2.56s; }
 .is-active .generate-gate { animation: gate-pulse 1.05s ease-out infinite; transform-box: fill-box; transform-origin: center; }
 
 /* Export */
@@ -1461,15 +1462,15 @@ footer a:hover {
 @keyframes dot-breathe { 50% { opacity: .3; transform: scale(.6); } }
 
 @keyframes draw-line {
-  0% { stroke-dashoffset: 720; }
+  0% { stroke-dashoffset: 1; }
   55%, 100% { stroke-dashoffset: 0; }
 }
 
 @keyframes audio-scan {
   0% { transform: translateX(24px); opacity: 0; }
   10% { opacity: 1; }
-  80% { transform: translateX(472px); opacity: 1; }
-  100% { transform: translateX(472px); opacity: 0; }
+  80% { transform: translateX(496px); opacity: 1; }
+  100% { transform: translateX(496px); opacity: 0; }
 }
 
 @keyframes metronome {
@@ -1507,7 +1508,7 @@ footer a:hover {
 
 @keyframes note-travel {
   from { transform: translate(560px, 140px); }
-  to { transform: translate(25px, 140px); }
+  to { transform: translate(-36px, 140px); }
 }
 
 @keyframes gate-pulse {
@@ -1676,10 +1677,6 @@ footer a:hover {
     padding: 11px 9px;
   }
 
-  .stage-canvas {
-    aspect-ratio: 4 / 3;
-  }
-
   .metrics-grid {
     gap: 6px;
   }

static/index.html

@@ -216,7 +216,7 @@
             <div class="stage-visual" data-stage="audio" aria-hidden="true">
               <svg viewBox="0 0 520 280">
                 <path class="audio-line-back" d="M24 140C54 140 61 112 84 112s28 68 51 68 31-115 55-115 30 150 53 150 33-104 57-104 30 59 55 59 29-76 52-76 29 46 49 46h40" fill="none" stroke="currentColor" stroke-width="2" opacity=".14"/>
-                <path class="audio-line" d="M24 140C54 140 61 112 84 112s28 68 51 68 31-115 55-115 30 150 53 150 33-104 57-104 30 59 55 59 29-76 52-76 29 46 49 46h40" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
+                <path class="audio-line" pathLength="1" d="M24 140C54 140 61 112 84 112s28 68 51 68 31-115 55-115 30 150 53 150 33-104 57-104 30 59 55 59 29-76 52-76 29 46 49 46h40" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
                 <g class="audio-playhead"><path d="M0 48v184" stroke="currentColor" stroke-width="1.5" opacity=".45"/><circle cy="140" r="7" fill="currentColor"/></g>
                 <g fill="currentColor" opacity=".22"><circle cx="84" cy="112" r="4"/><circle cx="190" cy="65" r="4"/><circle cx="300" cy="111" r="4"/><circle cx="407" cy="94" r="4"/></g>
               </svg>
@@ -227,9 +227,11 @@
                 <path d="M72 205h376" stroke="currentColor" stroke-width="2" opacity=".14"/>
                 <g class="beat-ticks" stroke="currentColor" opacity=".26"><path d="M100 192v26M180 192v26M260 185v40M340 192v26M420 192v26"/></g>
                 <path class="beat-arc" d="M182 199a78 78 0 0 1 156 0" fill="none" stroke="currentColor" stroke-width="3" opacity=".18"/>
-                <g class="metronome" transform="translate(260 199)">
-                  <path d="M0 0 54-118" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
-                  <circle cx="54" cy="-118" r="10" fill="currentColor"/>
+                <g class="stage-anchor" transform="translate(260 199)">
+                  <g class="metronome">
+                    <path d="M0 0 54-118" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
+                    <circle cx="54" cy="-118" r="10" fill="currentColor"/>
+                  </g>
                 </g>
                 <g class="beat-pulses" fill="currentColor"><circle cx="100" cy="205" r="7"/><circle cx="180" cy="205" r="7"/><circle cx="260" cy="205" r="10"/><circle cx="340" cy="205" r="7"/><circle cx="420" cy="205" r="7"/></g>
               </svg>
@@ -263,17 +265,21 @@
                   <g class="note note-4"><circle r="20" class="ka"/><circle r="11" fill="#fff8ed" opacity=".2"/></g>
                   <g class="note note-5"><circle r="20"/><circle r="11" fill="#fff8ed" opacity=".2"/></g>
                 </g>
-                <g class="generate-gate" transform="translate(93 140)"><circle r="42" fill="none" stroke="currentColor" stroke-width="2" opacity=".22"/><circle r="31" fill="none" stroke="currentColor" stroke-width="2" opacity=".38"/><path d="M0-49v98" stroke="currentColor" stroke-width="3"/></g>
+                <g class="stage-anchor" transform="translate(93 140)">
+                  <g class="generate-gate"><circle r="42" fill="none" stroke="currentColor" stroke-width="2" opacity=".22"/><circle r="31" fill="none" stroke="currentColor" stroke-width="2" opacity=".38"/><path d="M0-49v98" stroke="currentColor" stroke-width="3"/></g>
+                </g>
               </svg>
             </div>
 
             <div class="stage-visual" data-stage="export" aria-hidden="true">
               <svg viewBox="0 0 520 280">
-                <g class="export-sheet" transform="translate(175 34)">
-                  <path d="M8 0h126l42 42v189H8z" fill="currentColor" opacity=".08"/>
-                  <path d="M134 0v42h42" fill="none" stroke="currentColor" stroke-width="2" opacity=".35"/>
-                  <g class="export-lines" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M38 77h108M38 104h78M38 131h108M38 158h91"/></g>
-                  <g class="export-dots" fill="currentColor"><circle cx="48" cy="194" r="8"/><circle cx="76" cy="194" r="8" class="ka"/><circle cx="104" cy="194" r="8"/><circle cx="132" cy="194" r="8" class="ka"/></g>
+                <g class="stage-anchor" transform="translate(175 34)">
+                  <g class="export-sheet">
+                    <path d="M8 0h126l42 42v189H8z" fill="currentColor" opacity=".08"/>
+                    <path d="M134 0v42h42" fill="none" stroke="currentColor" stroke-width="2" opacity=".35"/>
+                    <g class="export-lines" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M38 77h108M38 104h78M38 131h108M38 158h91"/></g>
+                    <g class="export-dots" fill="currentColor"><circle cx="48" cy="194" r="8"/><circle cx="76" cy="194" r="8" class="ka"/><circle cx="104" cy="194" r="8"/><circle cx="132" cy="194" r="8" class="ka"/></g>
+                  </g>
                 </g>
                 <path class="export-arrow" d="M366 91v105m0 0-20-20m20 20 20-20" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
               </svg>
@@ -283,14 +289,18 @@
               <svg viewBox="0 0 520 280">
                 <g class="mix-wave wave-top" fill="none" stroke="currentColor" stroke-width="3"><path d="M35 93c26 0 26-32 52-32s26 64 52 64 26-64 52-64 26 64 52 64 26-64 52-64 26 64 52 64 26-64 52-64 26 32 52 32h46"/></g>
                 <g class="mix-wave wave-bottom" fill="none" stroke="currentColor" stroke-width="3"><path d="M35 187c34 0 34-22 68-22s34 44 68 44 34-44 68-44 34 44 68 44 34-44 68-44 34 22 68 22h72"/></g>
-                <g class="mix-drum" transform="translate(260 140)"><circle r="48" fill="#fff8ed" stroke="currentColor" stroke-width="4"/><circle r="35" fill="currentColor" opacity=".12"/><circle r="13" fill="currentColor"/></g>
+                <g class="stage-anchor" transform="translate(260 140)">
+                  <g class="mix-drum"><circle r="48" fill="#fff8ed" stroke="currentColor" stroke-width="4"/><circle r="35" fill="currentColor" opacity=".12"/><circle r="13" fill="currentColor"/></g>
+                </g>
                 <g class="mix-spark" fill="currentColor"><circle cx="201" cy="119" r="5"/><circle cx="319" cy="161" r="5"/><circle cx="312" cy="100" r="3"/><circle cx="211" cy="177" r="3"/></g>
               </svg>
             </div>
 
             <div class="stage-visual" data-stage="complete" aria-hidden="true">
               <svg viewBox="0 0 520 280">
-                <g class="complete-rings" transform="translate(260 140)"><circle r="81" fill="none" stroke="currentColor" stroke-width="2" opacity=".12"/><circle r="64" fill="currentColor" opacity=".1"/><circle r="47" fill="currentColor"/></g>
+                <g class="stage-anchor" transform="translate(260 140)">
+                  <g class="complete-rings"><circle r="81" fill="none" stroke="currentColor" stroke-width="2" opacity=".12"/><circle r="64" fill="currentColor" opacity=".1"/><circle r="47" fill="currentColor"/></g>
+                </g>
                 <path class="complete-check" d="m235 140 17 17 35-38" fill="none" stroke="#fff8ed" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
                 <g class="confetti" fill="currentColor"><rect x="165" y="65" width="7" height="18" rx="3" transform="rotate(-35 168 74)"/><rect x="350" y="70" width="7" height="18" rx="3" transform="rotate(28 353 79)"/><circle cx="177" cy="201" r="6"/><circle cx="350" cy="207" r="5"/><path d="m387 139 12-7-1 14z"/><path d="m126 132 13-5-3 14z"/></g>
               </svg>