in the deployed live version the initial video doesnt go away. it just stops.

script.js

@@ -288,13 +288,23 @@ updateProgress() {
         }, 50);
     }
     startWelcomeSequence() {
-        // Hide rabbit animation after 3 seconds
-        setTimeout(() => {
+        // Hide rabbit animation after video completes
+        const video = document.getElementById('rabbit-video');
+        video.addEventListener('ended', () => {
             document.getElementById('rabbit-animation').style.display = 'none';
             this.card.style.display = 'flex';
             this.showWelcomeStep(0);
-        }, 3000);
-    }
+        });
+        
+        // Fallback in case video doesn't fire ended event
+        setTimeout(() => {
+            if (document.getElementById('rabbit-animation').style.display !== 'none') {
+                document.getElementById('rabbit-animation').style.display = 'none';
+                this.card.style.display = 'flex';
+                this.showWelcomeStep(0);
+            }
+        }, 5000);
+}
 
     showWelcomeStep(stepIndex) {
         this.currentStep = stepIndex;
@@ -339,13 +349,20 @@ showRabbitAnimation() {
         
         rabbitAnim.style.display = 'flex';
         video.play();
-        
-        // Remove the animation after it completes - extended duration
-        setTimeout(() => {
+        // Remove the animation after video completes
+        video.addEventListener('ended', () => {
             rabbitAnim.style.display = 'none';
             video.currentTime = 0;
-        }, 2500); // Extended from 1000ms to 2500ms
-    }
+        });
+        
+        // Fallback timeout in case video doesn't fire ended event
+        setTimeout(() => {
+            if (rabbitAnim.style.display !== 'none') {
+                rabbitAnim.style.display = 'none';
+                video.currentTime = 0;
+            }
+        }, 3000);
+}
     handleArrowRight() {
         if (!this.started) this.startExperience();
         else {