website: Fix mockup animation sync/pausing and improve 3-step guide copy

website/app.js

@@ -456,6 +456,23 @@ document.addEventListener('DOMContentLoaded', () => {
         const renderTab = (tab) => {
             tab.fill.style.width = ((tab.t / EP_LEN) * 100).toFixed(2) + '%';
             tab.time.textContent = fmt(tab.t);
+            
+            // Frame-locked parallax offsets
+            const t = tab.t;
+            const backOffset = (t * -8) % 160;
+            const midOffset = (t * -24) % 160;
+            const foreOffset = (t * -48) % 160;
+            
+            // Bouncing ball logic (bounce Y is computed as parabolic arc)
+            const bouncePeriod = 0.8;
+            const bounceProgress = (t % bouncePeriod) / bouncePeriod;
+            const bounceHeight = 16;
+            const bounceY = 4 * bounceProgress * (1 - bounceProgress) * -bounceHeight;
+            
+            tab.root.style.setProperty('--scroll-back', backOffset.toFixed(2) + 'px');
+            tab.root.style.setProperty('--scroll-mid', midOffset.toFixed(2) + 'px');
+            tab.root.style.setProperty('--scroll-fore', foreOffset.toFixed(2) + 'px');
+            tab.root.style.setProperty('--bounce-y', bounceY.toFixed(2) + 'px');
         };
 
         const updateSyncUI = () => {

website/locales/de.json

@@ -95,14 +95,14 @@
   "COMP_FOOTNOTE_4": "Funktioniert auf allen Seiten, die Skript-Injektionen in Standard-HTML5-Videoplayer erlauben. Seiten mit extrem strengen Content Security Policies (CSP), DRM-Kopierschutz oder stark verschachtelten Player-Wrappern (z. B. komplexe Shadow-DOMs) können die automatische Steuerung blockieren.",
   "STEPS_TITLE": "Erste Schritte",
   "STEP_1_TITLE": "Erweiterung installieren",
-  "STEP_1_DESC": "Füge KoalaSync aus dem Chrome Web Store, den Firefox Add-ons oder über die Entwickler-ZIP von GitHub zu deinem Browser hinzu.",
+  "STEP_1_DESC": "Füge KoalaSync in Sekundenschnelle zu deinem Browser hinzu. Unterstützt Chrome, Firefox, Edge, Brave und alle Chromium-Browser. Komplett ohne Anmeldung.",
   "STEP_1_ILLUS_DESC": "Privatsphäre-fokussierte Video-Synchronisation",
   "STEP_1_ILLUS_DL_CHROME": "Download für Chrome",
   "STEP_1_ILLUS_DL_FIREFOX": "Download für Firefox",
   "STEP_1_ILLUS_ACTIVE": "Erweiterung aktiv",
   "STEP_1_ILLUS_READY": "Bereit zum Mitschauen!",
   "STEP_2_TITLE": "Raum erstellen",
-  "STEP_2_DESC": "Öffne die Erweiterung und klicke auf „+ Neuer Raum“. KoalaSync generiert automatisch eine sichere Raum-ID samt Passwort, tritt dem Raum bei und kopiert den Einladungslink in deine Zwischenablage.",
+  "STEP_2_DESC": "Ein Klick auf „Neuer Raum“ generiert sofort eine sichere, verschlüsselte Sitzung und kopiert den Einladungslink automatisch in deine Zwischenablage.",
   "STEP_2_ILLUS_ROOM": "Raum",
   "STEP_2_ILLUS_SYNC": "Sync",
   "STEP_2_ILLUS_SETTINGS": "Optionen",
@@ -110,7 +110,7 @@
   "STEP_2_ILLUS_MANUAL": "Manuell verbinden / Erweitert",
   "STEP_2_ILLUS_COPIED": "Einladungslink kopiert!",
   "STEP_3_TITLE": "Teilen & Synchronisieren",
-  "STEP_3_DESC": "Sende den Einladungslink an deine Freunde. Sobald sie beitreten, wähle deinen Video-Tab aus und genieße die synchronisierte Wiedergabe.",
+  "STEP_3_DESC": "Teile den Link mit deinen Freunden. Dank der automatischen Erkennung treten sie mit nur einem Klick bei — ganz ohne Registrierung. Wählt euer Video und schaut perfekt synchron.",
   "STEP_3_ILLUS_IN_SYNC": "SYNCHRON",
   "SELF_TITLE": "Für Self-Hoster",
   "SELF_SUBTITLE": "Du traust dem Server nicht? Behalte die volle Datenhoheit. Richte deinen eigenen privaten Relay-Server in wenigen Minuten ein.",

website/locales/en.json

@@ -95,14 +95,14 @@
   "COMP_FOOTNOTE_4": "Works on websites that allow script injections into standard HTML5 video tags. Websites with highly strict Content Security Policies (CSP), DRM copy protection, or heavily obfuscated player wrappers (like complex shadow DOMs) might restrict automated control or injection.",
   "STEPS_TITLE": "Getting Started",
   "STEP_1_TITLE": "Install Extension",
-  "STEP_1_DESC": "Add KoalaSync to your browser from the Chrome Web Store, Firefox Add-ons, or download the latest developer ZIP from GitHub.",
+  "STEP_1_DESC": "Add KoalaSync to your browser in seconds. Works on Chrome, Firefox, Edge, Brave, and other Chromium browsers. 100% free and account-free.",
   "STEP_1_ILLUS_DESC": "Privacy-first video synchronizer",
   "STEP_1_ILLUS_DL_CHROME": "Download for Chrome",
   "STEP_1_ILLUS_DL_FIREFOX": "Download for Firefox",
   "STEP_1_ILLUS_ACTIVE": "Extension Active",
   "STEP_1_ILLUS_READY": "Ready to watch together!",
   "STEP_2_TITLE": "Create a Room",
-  "STEP_2_DESC": "Open the extension popup and click '+ Create New Room'. KoalaSync automatically generates a secure Room ID and Password, joins it, and copies the invite link to your clipboard.",
+  "STEP_2_DESC": "Open the extension popup and click '+ Create New Room'. KoalaSync instantly establishes a secure, encrypted session and copies the invitation link.",
   "STEP_2_ILLUS_ROOM": "Room",
   "STEP_2_ILLUS_SYNC": "Sync",
   "STEP_2_ILLUS_SETTINGS": "Settings",
@@ -110,7 +110,7 @@
   "STEP_2_ILLUS_MANUAL": "Manual Connect / Advanced",
   "STEP_2_ILLUS_COPIED": "Invite link copied!",
   "STEP_3_TITLE": "Share & Sync",
-  "STEP_3_DESC": "Send the invite link to your friends. Once they join, select your video tab and enjoy synchronized playback.",
+  "STEP_3_DESC": "Send the link to your friends. They join with a single click — no registration required. Pick any video and enjoy it in perfect real-time sync.",
   "STEP_3_ILLUS_IN_SYNC": "IN SYNC",
   "SELF_TITLE": "For Self-Hosters",
   "SELF_SUBTITLE": "Don't trust our server? Maintain full data sovereignty. Deploy your own private relay server in minutes.",

website/style.css

@@ -3612,6 +3612,7 @@ header[id] {
     transform-box: fill-box;
     transform-origin: center;
     animation: filmMoon 6s ease-in-out infinite alternate;
+    animation-play-state: paused;
 }
 
 @keyframes filmMoon {
@@ -3619,48 +3620,30 @@ header[id] {
     to { transform: translate(-6px, 3px); filter: drop-shadow(0 0 10px rgba(241,245,249,0.95)); }
 }
 
-/* Parallax Forest Scroll Layers */
-@keyframes scrollBack {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(-160px); }
-}
-@keyframes scrollMid {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(-160px); }
-}
-@keyframes scrollFore {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(-160px); }
-}
-@keyframes ballBounce {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-16px); }
-}
-
 .film-mtn-scroll {
-    animation: scrollBack 12s linear infinite;
-    animation-play-state: paused;
+    transform: translateX(var(--scroll-back, 0px));
 }
 .film-mid-scroll {
-    animation: scrollMid 6s linear infinite;
-    animation-play-state: paused;
+    transform: translateX(var(--scroll-mid, 0px));
 }
 .film-fore-scroll {
-    animation: scrollFore 3s linear infinite;
-    animation-play-state: paused;
+    transform: translateX(var(--scroll-fore, 0px));
 }
 .film-bounce-ball {
     transform-origin: bottom center;
-    animation: ballBounce 0.8s ease-in-out infinite;
-    animation-play-state: paused;
+    transform: translateY(var(--bounce-y, 0px));
     filter: drop-shadow(0 0 4px #fde047);
 }
 
-/* Playback state bindings for all animation layers */
-.demo-tab-card.playing .film-mtn-scroll,
-.demo-tab-card.playing .film-mid-scroll,
-.demo-tab-card.playing .film-fore-scroll,
-.demo-tab-card.playing .film-bounce-ball {
+/* Twinkle & Glow play state bindings */
+.film-star {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: filmTwinkle 2.8s ease-in-out infinite;
+    animation-play-state: paused;
+}
+.demo-tab-card.playing .film-star,
+.demo-tab-card.playing .film-moon {
     animation-play-state: running;
 }