From 8175f82f0be60b4769b3bd51aee691b5d0c94f0b Mon Sep 17 00:00:00 2001
From: KoalaDev <6156589+Shik3i@users.noreply.github.com>
Date: Sat, 11 Jul 2026 10:10:37 +0200
Subject: [PATCH] Polish demo film, bamboo forest, popup a11y, and step-1 toast

- Demo mockup video: drifting clouds, shooting star, moon craters, bird
  flock, valley mist band, floating lantern instead of bouncing ball,
  stronger cinematic vignette
- Player controls: play/pause glyph, duration, buffered range, volume,
  HD badge, fullscreen icon
- Bamboo background: two faint centre trunks, segment rings on far
  stalks, wider near stalks with extra leaf, smaller blurred layers
  (240% -> 200%) and reduced blur radii for cheaper compositing
- Step-1 illustration: invite toast floats fully below the popup card
- Extension popup: label/for associations for all settings controls
- Demo video select: drop invalid inline SVG inside <option>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 extension/popup.html               |  26 ++--
 website/app.js                     |  12 +-
 website/assets/NewLogoIcon_64.webp | Bin 1282 -> 1282 bytes
 website/style.css                  | 221 ++++++++++++++++++++++++-----
 website/template.html              |  97 ++++++++++++-
 5 files changed, 298 insertions(+), 58 deletions(-)

diff --git a/extension/popup.html b/extension/popup.html
index 9690cb1..bbd7f4f 100644
--- a/extension/popup.html
+++ b/extension/popup.html
@@ -583,11 +583,11 @@
             </div>
             <!-- Room credentials — distinct group below the server picker. -->
             <div class="form-group">
-                <label title="The unique identifier for your sync room" data-i18n="LABEL_ROOM_ID" data-i18n-title="LABEL_ROOM_ID_TOOLTIP">Room ID</label>
+                <label for="roomId" title="The unique identifier for your sync room" data-i18n="LABEL_ROOM_ID" data-i18n-title="LABEL_ROOM_ID_TOOLTIP">Room ID</label>
                 <input type="text" id="roomId" data-i18n-placeholder="PLACEHOLDER_ROOM_ID" data-i18n-title="PLACEHOLDER_ROOM_ID_TOOLTIP" placeholder="Enter Room ID" title="The unique ID of the room you want to join">
             </div>
             <div class="form-group">
-                <label title="Optional password to restrict room access" data-i18n="LABEL_PASSWORD" data-i18n-title="LABEL_PASSWORD_TOOLTIP">Password (Optional)</label>
+                <label for="password" title="Optional password to restrict room access" data-i18n="LABEL_PASSWORD" data-i18n-title="LABEL_PASSWORD_TOOLTIP">Password (Optional)</label>
                 <input type="password" id="password" data-i18n-placeholder="PLACEHOLDER_PASSWORD" data-i18n-title="PLACEHOLDER_PASSWORD_TOOLTIP" placeholder="Room Password (optional)" title="Password for the room (leave empty if none)">
             </div>
             <div id="roomError" style="display:none; color:var(--error); font-size:11px; margin-bottom:8px; text-align:center;"></div>
@@ -628,7 +628,7 @@
                     <span id="hostRoleBadge" style="font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:8px; background:var(--accent); color:var(--text-on-green);"></span>
                 </div>
                 <div id="hostControlToggleRow" style="display:none; align-items:center; justify-content:space-between; gap:12px; margin-top:12px;">
-                    <span style="font-size:12px; color:var(--text); line-height:1.3;" data-i18n="LABEL_HOST_ONLY_TOGGLE">Only I can control playback</span>
+                    <label for="hostControlToggle" style="font-size:12px; color:var(--text); line-height:1.3; margin:0; text-transform:none; font-weight:400;" data-i18n="LABEL_HOST_ONLY_TOGGLE">Only I can control playback</label>
                     <label class="toggle-switch" style="flex:none;">
                         <input type="checkbox" id="hostControlToggle">
                         <span class="slider"></span>
@@ -654,7 +654,7 @@
         <!-- SYNC ACTIVE: Visible when in a room -->
         <div id="sync-active">
         <div class="form-group" style="position: relative;">
-            <label title="Choose the browser tab containing the video to sync" data-i18n="LABEL_SELECT_VIDEO" data-i18n-title="LABEL_SELECT_VIDEO_TOOLTIP">Select Video</label>
+            <label for="targetTab" title="Choose the browser tab containing the video to sync" data-i18n="LABEL_SELECT_VIDEO" data-i18n-title="LABEL_SELECT_VIDEO_TOOLTIP">Select Video</label>
             <select id="targetTab">
                 <option value="" data-i18n="OPTION_SELECT_TAB">-- Select a Tab --</option>
             </select>
@@ -714,7 +714,7 @@
     <!-- Settings Tab -->
     <div id="tab-settings" class="tab-content">
         <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
-            <label id="themeLabel" style="margin-bottom: 0;" title="Follow the system theme or choose a fixed appearance">Appearance</label>
+            <label id="themeLabel" for="themeSelector" style="margin-bottom: 0;" title="Follow the system theme or choose a fixed appearance">Appearance</label>
             <select id="themeSelector" aria-label="Appearance" style="width: 165px; background: var(--bg); border: 1px solid var(--border-strong); color: var(--text); padding: 6px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; outline: none; font-family: inherit;">
                 <option id="themeOptionSystem" value="system">💻 System</option>
                 <option id="themeOptionDark" value="dark">🌙 Dark</option>
@@ -723,21 +723,21 @@
         </div>
 
         <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
-            <label style="margin-bottom: 0;" title="Username helps others identify you." data-i18n="LABEL_USERNAME" data-i18n-title="LABEL_USERNAME_TOOLTIP">Your Username</label>
+            <label for="username" style="margin-bottom: 0;" title="Username helps others identify you." data-i18n="LABEL_USERNAME" data-i18n-title="LABEL_USERNAME_TOOLTIP">Your Username</label>
             <input type="text" id="username" data-i18n-placeholder="PLACEHOLDER_USERNAME" placeholder="Anonymous Koala" maxlength="20" style="width: 150px;">
         </div>
 
         <details class="form-group" style="background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
             <summary style="cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text);" title="Choose which titles are sent to the room." data-i18n="LABEL_PRIVACY_SETTINGS" data-i18n-title="LABEL_PRIVACY_SETTINGS_TOOLTIP">Privacy Settings</summary>
             <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px;">
-                <label style="margin-bottom: 0; cursor: help;" title="Send the selected browser tab title to the room." data-i18n="LABEL_SEND_TAB_TITLE" data-i18n-title="LABEL_SEND_TAB_TITLE_TOOLTIP">Send tab title</label>
+                <label for="sendTabTitle" style="margin-bottom: 0; cursor: help;" title="Send the selected browser tab title to the room." data-i18n="LABEL_SEND_TAB_TITLE" data-i18n-title="LABEL_SEND_TAB_TITLE_TOOLTIP">Send tab title</label>
                 <label class="toggle-switch">
                     <input type="checkbox" id="sendTabTitle" checked>
                     <span class="slider"></span>
                 </label>
             </div>
             <div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px;">
-                <label style="margin-bottom: 0; cursor: help;" title="Choose how media titles are sent to the room." data-i18n="LABEL_MEDIA_TITLE_PRIVACY" data-i18n-title="LABEL_MEDIA_TITLE_PRIVACY_TOOLTIP">Media title</label>
+                <label for="mediaTitlePrivacyMode" style="margin-bottom: 0; cursor: help;" title="Choose how media titles are sent to the room." data-i18n="LABEL_MEDIA_TITLE_PRIVACY" data-i18n-title="LABEL_MEDIA_TITLE_PRIVACY_TOOLTIP">Media title</label>
                 <select id="mediaTitlePrivacyMode" style="width: 165px; background: var(--bg); border: 1px solid var(--border-strong); color: white; padding: 6px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; outline: none; font-family: inherit;">
                     <option value="full" data-i18n="OPTION_TITLE_PRIVACY_FULL">Send full title</option>
                     <option value="episode" data-i18n="OPTION_TITLE_PRIVACY_EPISODE">Send episode ID</option>
@@ -747,7 +747,7 @@
         </details>
 
         <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
-            <label style="margin-bottom: 0; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean" data-i18n="LABEL_HIDE_CLUTTER" data-i18n-title="LABEL_HIDE_CLUTTER_TOOLTIP">Hide Clutter Tabs</label>
+            <label for="filterNoise" style="margin-bottom: 0; cursor: help;" title="Filters out non-video tabs and unrelated domains to keep the list clean" data-i18n="LABEL_HIDE_CLUTTER" data-i18n-title="LABEL_HIDE_CLUTTER_TOOLTIP">Hide Clutter Tabs</label>
             <label class="toggle-switch">
                 <input type="checkbox" id="filterNoise" checked>
                 <span class="slider"></span>
@@ -755,7 +755,7 @@
         </div>
 
         <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
-            <label style="margin-bottom: 0; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together." data-i18n="LABEL_AUTO_SYNC_NEXT" data-i18n-title="LABEL_AUTO_SYNC_NEXT_TOOLTIP">Auto-Sync Next Episode</label>
+            <label for="autoSyncNextEpisode" style="margin-bottom: 0; cursor: help;" title="Pauses automatically and waits for all peers when an episode changes, then sync-starts together." data-i18n="LABEL_AUTO_SYNC_NEXT" data-i18n-title="LABEL_AUTO_SYNC_NEXT_TOOLTIP">Auto-Sync Next Episode</label>
             <label class="toggle-switch">
                 <input type="checkbox" id="autoSyncNextEpisode">
                 <span class="slider"></span>
@@ -763,7 +763,7 @@
         </div>
 
         <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
-            <label style="margin-bottom: 0; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room." data-i18n="LABEL_AUTO_COPY_INVITE" data-i18n-title="LABEL_AUTO_COPY_INVITE_TOOLTIP">Auto-Copy Invite Link</label>
+            <label for="autoCopyInvite" style="margin-bottom: 0; cursor: help;" title="Automatically copies the invite link to your clipboard when creating a new room." data-i18n="LABEL_AUTO_COPY_INVITE" data-i18n-title="LABEL_AUTO_COPY_INVITE_TOOLTIP">Auto-Copy Invite Link</label>
             <label class="toggle-switch">
                 <input type="checkbox" id="autoCopyInvite" checked>
                 <span class="slider"></span>
@@ -771,7 +771,7 @@
         </div>
 
         <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
-            <label style="margin-bottom: 0; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses." data-i18n="LABEL_NOTIFICATIONS" data-i18n-title="LABEL_NOTIFICATIONS_TOOLTIP">Browser Notifications</label>
+            <label for="browserNotifications" style="margin-bottom: 0; cursor: help;" title="Shows native system notifications when someone joins/leaves or plays/pauses." data-i18n="LABEL_NOTIFICATIONS" data-i18n-title="LABEL_NOTIFICATIONS_TOOLTIP">Browser Notifications</label>
             <label class="toggle-switch">
                 <input type="checkbox" id="browserNotifications">
                 <span class="slider"></span>
@@ -786,7 +786,7 @@
         </div>
 
         <div class="form-group" style="display: flex; align-items: center; justify-content: space-between; background: var(--card); padding: 10px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border-strong);">
-            <label style="margin-bottom: 0;" data-i18n="LABEL_LANGUAGE" data-i18n-title="LABEL_LANGUAGE_TOOLTIP" title="Choose your preferred extension language">App Language</label>
+            <label for="langSelector" style="margin-bottom: 0;" data-i18n="LABEL_LANGUAGE" data-i18n-title="LABEL_LANGUAGE_TOOLTIP" title="Choose your preferred extension language">App Language</label>
             <select id="langSelector" style="width: 165px; background: var(--bg); border: 1px solid var(--border-strong); color: white; padding: 6px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; outline: none; font-family: inherit;">
                 <option value="en">🇬🇧 English</option>
                 <option value="de">🇩🇪 Deutsch</option>
diff --git a/website/app.js b/website/app.js
index 7e9dc88..55bc1d2 100644
--- a/website/app.js
+++ b/website/app.js
@@ -820,16 +820,16 @@ document.addEventListener('DOMContentLoaded', () => {
             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;
-            
+            // Floating lantern: slow vertical bob + softer horizontal sway on
+            // detuned periods, so the drift never repeats exactly in sync
+            const bounceY = Math.sin((t % 5.2) / 5.2 * Math.PI * 2) * 3.5;
+            const lanternX = Math.cos((t % 8.6) / 8.6 * Math.PI * 2) * 4;
+
             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');
+            tab.root.style.setProperty('--lantern-x', lanternX.toFixed(2) + 'px');
         };
 
         const updateSyncUI = () => {
diff --git a/website/assets/NewLogoIcon_64.webp b/website/assets/NewLogoIcon_64.webp
index b1f4e43ede2c8f7304360593b419303eb296c0d2..660ffe28987821948744dafb8543121d3c9924ee 100644
GIT binary patch
delta 175
zcmV;g08sye3W5r-j{*uRbh!h)p{C}lShJY|(*b{`0tbHB-=W1lvs8JmTg?5P$6NU|
zO#PNrF}c9Ck3x?#EFIFIEEWqqr&MVE&)R*f)BkMkZ`0M?cCguv<XEB~{|7sly8d~@
zRi#fP2}6F4`n*WOyWyO`=q~VL0Ooo5E9abon$}J<ILvCrjPmN9T=EIoYf$hn#5QI8
dPuCa041mkIUP&THprz?#XmVYp*&&Yr001i7TQdLv

delta 175
zcmV;g08sye3W5r-j{*uP3wTE6hMStHV6&M5(*b{}TcN{oo+V6*L_a%Yrc!p2D?t#c
zOKs7r7~J4m$Dv1=mJaDq77GQQQ>rw7XYD@K>HoHNx9RHcyI5?-@+?sg|AU>&-G4md
zD$=Kt1fjo2eO@GCUGUCe6T6+N5TM#$rGCu%%0C_&{K4-ZrketIuEE5-AGFN%Jt!V_
dA-)%z8o>$A#3xK?o>SG_`v#;TD2(v9006+KRrvq_

diff --git a/website/style.css b/website/style.css
index 8adff84..94ddb4e 100644
--- a/website/style.css
+++ b/website/style.css
@@ -163,12 +163,18 @@ body {
 
 #bamboo-far .bamboo-stalk {
     position: absolute;
+    /* 200% covers the parallax drift (max 0.55vh down) with margin while
+       keeping the blurred layer 17% smaller than the old 240% overscan. */
     top: -70%;
-    height: 240%;
+    height: 200%;
     border-radius: 999px;
-    filter: blur(5.5px);
+    filter: blur(4.5px);
     transition: filter 1.2s ease;
-    background: linear-gradient(180deg, oklch(0.32 0.05 145 / 0.35), oklch(0.24 0.04 140 / 0.15));
+    background:
+        repeating-linear-gradient(180deg,
+            transparent 0, transparent 108px,
+            oklch(0.40 0.06 145 / 0.22) 108px, oklch(0.40 0.06 145 / 0.22) 112px),
+        linear-gradient(180deg, oklch(0.34 0.05 145 / 0.4), oklch(0.24 0.04 140 / 0.16));
 }
 
 #bamboo-far .far-1 { left: 2%; width: 26px; }
@@ -176,6 +182,10 @@ body {
 #bamboo-far .far-3 { right: 4%; width: 30px; }
 #bamboo-far .far-4 { left: 13%; width: 20px; }
 #bamboo-far .far-5 { right: 10.5%; width: 16px; }
+/* Two whisper-quiet trunks soften the empty centre without touching the
+   content: wide apart, thin, and at the lowest opacity in the scene. */
+#bamboo-far .far-6 { left: 39%; width: 12px; opacity: 0.55; }
+#bamboo-far .far-7 { right: 42%; width: 14px; opacity: 0.6; }
 
 /* Two barely-there trunks break up the empty middle without competing with
    the content. They share the far layer's single parallax transform. */
@@ -184,10 +194,10 @@ body {
     content: '';
     position: absolute;
     top: -70%;
-    height: 240%;
+    height: 200%;
     border-radius: 999px;
-    filter: blur(8px);
-    opacity: 0.28;
+    filter: blur(6.5px);
+    opacity: 0.3;
     background: linear-gradient(180deg, oklch(0.34 0.05 145 / 0.3), oklch(0.23 0.04 140 / 0.1));
 }
 
@@ -196,8 +206,8 @@ body {
 
 /* Depth of field: the far layer blurs further as you descend (stepped by
    JS on threshold crossings, never per frame) */
-.bg-nature.depth-mid #bamboo-far .bamboo-stalk { filter: blur(6.5px); }
-.bg-nature.depth-deep #bamboo-far .bamboo-stalk { filter: blur(8px); }
+.bg-nature.depth-mid #bamboo-far .bamboo-stalk { filter: blur(5.5px); }
+.bg-nature.depth-deep #bamboo-far .bamboo-stalk { filter: blur(6.5px); }
 
 /* (a2) Mid bamboo layer: sits between far and near with its own parallax
    rate (app.js) and half the near layer's sway, so the three layers drift
@@ -212,9 +222,9 @@ body {
 #bamboo-mid .bamboo-stalk {
     position: absolute;
     top: -70%;
-    height: 240%;
+    height: 200%;
     border-radius: 999px;
-    filter: blur(2.5px);
+    filter: blur(2px);
     transition: filter 1.2s ease;
     /* Segment rings + a soft left-of-centre sheen give the stalks culm
        structure without any extra elements; the blur keeps both faint. */
@@ -256,8 +266,8 @@ body {
     display: none;
 }
 
-.bg-nature.depth-mid #bamboo-mid .bamboo-stalk { filter: blur(3.5px); }
-.bg-nature.depth-deep #bamboo-mid .bamboo-stalk { filter: blur(4.5px); }
+.bg-nature.depth-mid #bamboo-mid .bamboo-stalk { filter: blur(3px); }
+.bg-nature.depth-deep #bamboo-mid .bamboo-stalk { filter: blur(4px); }
 
 @keyframes bambooSwayHalf {
     0%, 100% { transform: rotate(0); }
@@ -274,20 +284,20 @@ body {
 #bamboo-near .bamboo-stalk {
     position: absolute;
     top: -70%;
-    height: 240%;
+    height: 200%;
     border-radius: 999px;
     /* Vertical sheen over the culm gradient: reads as light from the
        canopy catching the rounded stalk instead of a flat strip. */
     background:
-        linear-gradient(90deg, transparent 12%, oklch(0.62 0.08 145 / 0.18) 36%, transparent 64%),
-        linear-gradient(180deg, oklch(0.4 0.07 145 / 0.55), oklch(0.26 0.05 140 / 0.25));
+        linear-gradient(90deg, transparent 12%, oklch(0.64 0.08 145 / 0.22) 36%, transparent 64%),
+        linear-gradient(180deg, oklch(0.42 0.075 145 / 0.6), oklch(0.27 0.05 140 / 0.3));
     transform-origin: bottom center;
     animation: bambooSway 10s ease-in-out infinite;
 }
 
-#bamboo-near .near-1 { left: 4.5%; width: 13px; animation-duration: 9.2s; }
-#bamboo-near .near-2 { right: 7%; width: 11px; animation-duration: 11s; animation-delay: -3.5s; }
-#bamboo-near .near-3 { left: 10%; width: 9px; animation-duration: 12.5s; animation-delay: -6s; opacity: 0.75; }
+#bamboo-near .near-1 { left: 4.5%; width: 15px; animation-duration: 9.2s; }
+#bamboo-near .near-2 { right: 7%; width: 13px; animation-duration: 11s; animation-delay: -3.5s; }
+#bamboo-near .near-3 { left: 10%; width: 10px; animation-duration: 12.5s; animation-delay: -6s; opacity: 0.75; }
 
 #bamboo-near .bamboo-node {
     position: absolute;
@@ -295,7 +305,7 @@ body {
     right: -1px;
     height: 3px;
     border-radius: 2px;
-    background: oklch(0.5 0.08 145 / 0.5);
+    background: oklch(0.52 0.085 145 / 0.6);
 }
 
 #bamboo-near .node-1 { top: 28%; }
@@ -310,10 +320,11 @@ body {
     background: oklch(0.55 0.11 145 / 0.4);
 }
 
-#bamboo-near .near-1 .leaf-1 { top: 27.5%; left: 10px; transform: rotate(18deg); }
+#bamboo-near .near-1 .leaf-1 { top: 27.5%; left: 12px; transform: rotate(18deg); }
 #bamboo-near .near-1 .leaf-2 { top: 47.5%; left: -28px; transform: rotate(-160deg); width: 22px; height: 10px; }
 #bamboo-near .near-2 .leaf-1 { top: 44%; left: -26px; transform: rotate(-155deg); }
-#bamboo-near .near-3 .leaf-1 { top: 33%; left: 7px; transform: rotate(24deg); width: 18px; height: 9px; }
+#bamboo-near .near-2 .leaf-2 { top: 61%; left: 11px; transform: rotate(21deg); width: 20px; height: 9px; }
+#bamboo-near .near-3 .leaf-1 { top: 33%; left: 8px; transform: rotate(24deg); width: 18px; height: 9px; }
 
 @keyframes bambooSway {
     0%, 100% { transform: rotate(0); }
@@ -724,6 +735,8 @@ html.theme-light .bg-nature::after {
     #bamboo-mid,
     #bamboo-far .far-4,
     #bamboo-far .far-5,
+    #bamboo-far .far-6,
+    #bamboo-far .far-7,
     #bamboo-near .near-3 {
         display: none;
     }
@@ -1016,6 +1029,12 @@ html.theme-light .bg-grass {
     opacity: 0.45;
 }
 
+/* The centre trunks stay whisper-quiet by daylight too */
+html.theme-light #bamboo-far .far-6,
+html.theme-light #bamboo-far .far-7 {
+    opacity: 0.26;
+}
+
 html.theme-light .bg-mist {
     display: none;
 }
@@ -2804,17 +2823,18 @@ input:checked + .mock-slider:before {
 /* Floating Success Badge */
 .illus-floating-success {
     position: absolute;
-    bottom: -0.9rem;
+    /* Fully below the card so the toast never straddles its border */
+    bottom: -2.4rem;
     left: 50%;
     transform: translateX(-50%);
-    background: oklch(0.12 0.015 135 / 0.9);
-    border: 1px solid oklch(0.68 0.13 150 / 0.3);
+    background: oklch(0.12 0.015 135 / 0.92);
+    border: 1px solid oklch(0.68 0.13 150 / 0.35);
     border-radius: 20px;
-    padding: 2px 9px;
+    padding: 3px 10px;
     display: flex;
     align-items: center;
     gap: 4px;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
+    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), 0 0 12px oklch(0.68 0.13 150 / 0.18);
     animation: floating-success-fade 5s infinite;
     white-space: nowrap;
     z-index: 10;
@@ -4932,9 +4952,11 @@ header[id] {
     inset: 0;
     z-index: 1;
     pointer-events: none;
+    /* Cinematic vignette: soft edge falloff + heavier floor for the controls */
     box-shadow:
         inset 0 0 0 1px rgba(255, 255, 255, 0.05),
-        inset 0 -24px 36px oklch(0.04 0.015 145 / 0.2);
+        inset 0 0 34px oklch(0.04 0.015 145 / 0.32),
+        inset 0 -26px 40px oklch(0.04 0.015 145 / 0.26);
 }
 
 html.theme-light .hero-demo-scene .demo-video::after {
@@ -5067,7 +5089,8 @@ html.theme-light .hero-demo-scene .demo-video::after {
     z-index: 1;
 }
 
-.demo-time {
+.demo-time,
+.demo-duration {
     flex-shrink: 0;
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
     font-weight: 700;
@@ -5075,6 +5098,35 @@ html.theme-light .hero-demo-scene .demo-video::after {
     font-variant-numeric: tabular-nums;
 }
 
+.demo-duration {
+    font-weight: 600;
+    opacity: 0.7;
+}
+
+/* Decorative player chrome: play state glyph, volume, HD, fullscreen */
+.demo-ctrl-icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    opacity: 0.85;
+}
+
+.demo-ctrl-play .icon-pause { display: none; }
+.demo-tab-card.playing .demo-ctrl-play .icon-play { display: none; }
+.demo-tab-card.playing .demo-ctrl-play .icon-pause { display: block; }
+
+.demo-ctrl-badge {
+    flex-shrink: 0;
+    font-size: 7px;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    line-height: 1;
+    padding: 2px 3px;
+    border: 1px solid currentColor;
+    border-radius: 3px;
+    opacity: 0.65;
+}
+
 .demo-progress {
     position: relative;
     flex: 1;
@@ -5091,6 +5143,18 @@ html.theme-light .hero-demo-scene .demo-video::after {
     inset: -8px 0;
 }
 
+/* Buffered range behind the playhead, like a real player */
+.demo-progress-buffer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 56%;
+    border-radius: 99px;
+    background: oklch(0.92 0.02 95 / 0.14);
+    pointer-events: none;
+}
+
 .demo-progress-fill {
     position: relative;
     height: 100%;
@@ -5269,6 +5333,9 @@ html.theme-light .hero-demo-scene .demo-video::after {
 }
 
 .hero-demo-scene .film-stars { fill: var(--demo-stars) !important; }
+.hero-demo-scene .film-clouds { fill: var(--demo-stars) !important; }
+.hero-demo-scene .film-mist-scroll { fill: var(--demo-stars) !important; }
+.hero-demo-scene .film-shooting-star { stroke: var(--demo-stars) !important; }
 .hero-demo-scene .film-moon {
     fill: var(--demo-moon) !important;
     filter: drop-shadow(0 0 6px var(--demo-moon));
@@ -5277,6 +5344,9 @@ html.theme-light .hero-demo-scene .demo-video::after {
 .hero-demo-scene .film-mid-scroll > * { fill: var(--demo-midground) !important; }
 .hero-demo-scene .film-fore-scroll > * { fill: var(--demo-foreground) !important; }
 
+/* By day the flock reads as silhouettes, not chalk marks */
+html.theme-light .hero-demo-scene .film-birds { stroke: oklch(0.32 0.06 145 / 0.65); }
+
 /* Stars: staggered twinkle so the sky feels alive */
 .film-star {
     transform-box: fill-box;
@@ -5295,7 +5365,30 @@ html.theme-light .hero-demo-scene .demo-video::after {
     50% { opacity: 1; transform: scale(1.15); }
 }
 
-/* Moon: gentle glow pulse + slow arc drift */
+/* Moon: gentle glow pulse + slow arc drift. The drift lives on the wrapper
+   group so the craters travel with the disc; the glow stays on the circle.
+   (Step-3 uses a bare .film-moon without wrapper — filmMoon still covers it.) */
+.film-moon-g {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: filmMoonDrift 6s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+.film-moon-g .film-moon {
+    animation-name: filmMoonGlow;
+}
+
+@keyframes filmMoonDrift {
+    from { transform: translate(0, 0); }
+    to { transform: translate(-6px, 3px); }
+}
+
+@keyframes filmMoonGlow {
+    from { filter: drop-shadow(0 0 4px oklch(0.95 0.01 100 / 0.5)); }
+    to { filter: drop-shadow(0 0 10px oklch(0.95 0.01 100 / 0.95)); }
+}
+
 .film-moon {
     transform-box: fill-box;
     transform-origin: center;
@@ -5317,12 +5410,29 @@ html.theme-light .hero-demo-scene .demo-video::after {
 .film-fore-scroll {
     transform: translateX(var(--scroll-fore, 0px));
 }
+/* Floating lantern: the group rides the JS-driven drift vars so halo and
+   light travel together; the glow stays cheap via a single drop-shadow. */
+.film-lantern-g {
+    transform: translate(var(--lantern-x, 0px), var(--bounce-y, 0px));
+}
+
 .film-bounce-ball {
     transform-origin: bottom center;
-    transform: translateY(var(--bounce-y, 0px));
     filter: drop-shadow(0 0 4px oklch(0.72 0.13 50));
 }
 
+.film-lantern-halo {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: filmHaloPulse 2.6s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+@keyframes filmHaloPulse {
+    from { transform: scale(0.85); opacity: 0.12; }
+    to { transform: scale(1.18); opacity: 0.22; }
+}
+
 /* Twinkle & Glow play state bindings */
 .film-star {
     transform-box: fill-box;
@@ -5330,11 +5440,58 @@ html.theme-light .hero-demo-scene .demo-video::after {
     animation: filmTwinkle 2.8s ease-in-out infinite;
     animation-play-state: paused;
 }
-.demo-tab-card.playing .film-star,
-.demo-tab-card.playing .film-moon {
+.demo-tab-card.playing :is(.film-star, .film-moon, .film-moon-g, .film-cloud, .film-shooting-star, .film-birds, .film-lantern-halo) {
     animation-play-state: running;
 }
 
+/* Drifting clouds: gentle back-and-forth so there is no wrap pop */
+.film-cloud {
+    transform-box: fill-box;
+    animation: filmCloudDrift 26s ease-in-out infinite alternate;
+    animation-play-state: paused;
+}
+
+.film-cloud-2 {
+    animation-duration: 34s;
+    animation-delay: -12s;
+}
+
+@keyframes filmCloudDrift {
+    from { transform: translateX(-6px); }
+    to { transform: translateX(10px); }
+}
+
+/* A shooting star streaks across the sky every few loops */
+.film-shooting-star {
+    opacity: 0;
+    animation: filmShoot 11s linear infinite;
+    animation-play-state: paused;
+}
+
+@keyframes filmShoot {
+    0%, 87% { opacity: 0; transform: translate(0, 0); }
+    89% { opacity: 0.9; }
+    95%, 100% { opacity: 0; transform: translate(-46px, 20px); }
+}
+
+/* A distant flock crosses the valley, fading out mid-flight */
+.film-birds {
+    animation: filmBirds 16s linear infinite;
+    animation-play-state: paused;
+}
+
+@keyframes filmBirds {
+    0% { transform: translate(0, 0); opacity: 0; }
+    4% { opacity: 0.75; }
+    42% { opacity: 0.75; }
+    48%, 100% { transform: translate(185px, -12px); opacity: 0; }
+}
+
+/* Valley mist rides the slow background parallax between tree layers */
+.film-mist-scroll {
+    transform: translateX(var(--scroll-back, 0px));
+}
+
 /* Play button pulsing indicator at the end of the walkthrough */
 .hero-demo-scene.demo-complete #demo-tab-a:not(.playing) .demo-icon-wrap {
     animation: playButtonPulse 1.6s ease-in-out infinite;
diff --git a/website/template.html b/website/template.html
index 86b622a..84fda59 100644
--- a/website/template.html
+++ b/website/template.html
@@ -234,6 +234,8 @@
             <span class="bamboo-stalk far-3"></span>
             <span class="bamboo-stalk far-4"></span>
             <span class="bamboo-stalk far-5"></span>
+            <span class="bamboo-stalk far-6"></span>
+            <span class="bamboo-stalk far-7"></span>
         </div>
         <div id="bamboo-mid">
             <span class="bamboo-stalk mid-1"></span>
@@ -254,6 +256,7 @@
                 <i class="bamboo-node node-2"></i>
                 <i class="bamboo-node node-3"></i>
                 <i class="bamboo-leaf leaf-1"></i>
+                <i class="bamboo-leaf leaf-2"></i>
             </div>
             <div class="bamboo-stalk near-3">
                 <i class="bamboo-node node-1"></i>
@@ -420,6 +423,16 @@
                             <div class="demo-video-art" aria-hidden="true"></div>
                             <div class="demo-seek-sweep" aria-hidden="true"></div>
                             <svg class="demo-film" viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+                                <g class="film-clouds" fill="#f0efe7">
+                                    <g class="film-cloud film-cloud-1" opacity="0.09">
+                                        <ellipse cx="34" cy="15" rx="17" ry="3"/>
+                                        <ellipse cx="42" cy="12" rx="9" ry="2.1"/>
+                                    </g>
+                                    <g class="film-cloud film-cloud-2" opacity="0.07">
+                                        <ellipse cx="100" cy="21" rx="13" ry="2.4"/>
+                                        <ellipse cx="107" cy="19" rx="7" ry="1.7"/>
+                                    </g>
+                                </g>
                                 <g class="film-stars" fill="#dbd7cd">
                                     <circle class="film-star" cx="18" cy="14" r="0.8"/>
                                     <circle class="film-star" cx="42" cy="24" r="0.6"/>
@@ -429,8 +442,27 @@
                                     <circle class="film-star" cx="134" cy="22" r="0.8"/>
                                     <circle class="film-star" cx="150" cy="12" r="0.5"/>
                                 </g>
-                                <circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
+                                <line class="film-shooting-star" x1="151" y1="6" x2="143" y2="9.5" stroke="#f0efe7" stroke-width="0.6" stroke-linecap="round"/>
+                                <g class="film-moon-g">
+                                    <circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
+                                    <g class="film-moon-detail" fill="#10190e" opacity="0.1">
+                                        <circle cx="119.6" cy="24.2" r="1.7"/>
+                                        <circle cx="124.6" cy="28.4" r="1.15"/>
+                                        <circle cx="123" cy="22.4" r="0.8"/>
+                                    </g>
+                                </g>
+                                <g class="film-birds" stroke="#dbd7cd" stroke-width="0.55" fill="none" stroke-linecap="round">
+                                    <path d="M-4,32 q1.5,-1.5 3,0 q1.5,-1.5 3,0"/>
+                                    <path d="M-11,28 q1.2,-1.2 2.4,0 q1.2,-1.2 2.4,0"/>
+                                    <path d="M-8,36 q1,-1 2,0 q1,-1 2,0"/>
+                                </g>
                                 <path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(14, 31, 15, 0.7)"/>
+                                <g class="film-mist-scroll" fill="#dbd7cd">
+                                    <ellipse cx="40" cy="63" rx="46" ry="4" opacity="0.055"/>
+                                    <ellipse cx="120" cy="65" rx="52" ry="4.5" opacity="0.045"/>
+                                    <ellipse cx="200" cy="63" rx="46" ry="4" opacity="0.055"/>
+                                    <ellipse cx="280" cy="65" rx="52" ry="4.5" opacity="0.045"/>
+                                </g>
                                 <g class="film-mid-scroll">
                                     <polygon points="20,76 26,60 32,76" fill="rgba(26, 47, 23, 0.55)"/>
                                     <polygon points="55,78 63,52 71,78" fill="rgba(26, 47, 23, 0.55)"/>
@@ -449,7 +481,10 @@
                                     <polygon points="275,84 288,42 301,84" fill="#040903"/>
                                     <path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
                                 </g>
-                                <circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#de7949"/>
+                                <g class="film-lantern-g">
+                                    <circle class="film-lantern-halo" cx="80" cy="38" r="6.5" fill="#de7949" opacity="0.16"/>
+                                    <circle class="film-bounce-ball" cx="80" cy="38" r="2.4" fill="#de7949"/>
+                                </g>
                             </svg>
                             <div class="demo-play-overlay" aria-hidden="true">
                                 <span class="demo-icon-wrap">
@@ -458,8 +493,16 @@
                                 </span>
                             </div>
                             <div class="demo-video-controls">
+                                <span class="demo-ctrl-icon demo-ctrl-play" aria-hidden="true">
+                                    <svg class="icon-play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="11" height="11"><path d="M8 5v14l11-7z"/></svg>
+                                    <svg class="icon-pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="11" height="11"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>
+                                </span>
                                 <span class="demo-time">12:34</span>
-                                <div class="demo-progress" title="Seek: KoalaSync jumps the other tab to the same spot"><div class="demo-progress-fill"></div></div>
+                                <div class="demo-progress" title="Seek: KoalaSync jumps the other tab to the same spot"><div class="demo-progress-buffer"></div><div class="demo-progress-fill"></div></div>
+                                <span class="demo-duration" aria-hidden="true">42:17</span>
+                                <span class="demo-ctrl-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11"><path d="M11 5 6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg></span>
+                                <span class="demo-ctrl-badge" aria-hidden="true">HD</span>
+                                <span class="demo-ctrl-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11"><path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3"/></svg></span>
                             </div>
                         </div>
                     </div>
@@ -477,6 +520,16 @@
                             <div class="demo-video-art" aria-hidden="true"></div>
                             <div class="demo-seek-sweep" aria-hidden="true"></div>
                             <svg class="demo-film" viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+                                <g class="film-clouds" fill="#f0efe7">
+                                    <g class="film-cloud film-cloud-1" opacity="0.09">
+                                        <ellipse cx="34" cy="15" rx="17" ry="3"/>
+                                        <ellipse cx="42" cy="12" rx="9" ry="2.1"/>
+                                    </g>
+                                    <g class="film-cloud film-cloud-2" opacity="0.07">
+                                        <ellipse cx="100" cy="21" rx="13" ry="2.4"/>
+                                        <ellipse cx="107" cy="19" rx="7" ry="1.7"/>
+                                    </g>
+                                </g>
                                 <g class="film-stars" fill="#dbd7cd">
                                     <circle class="film-star" cx="18" cy="14" r="0.8"/>
                                     <circle class="film-star" cx="42" cy="24" r="0.6"/>
@@ -486,8 +539,27 @@
                                     <circle class="film-star" cx="134" cy="22" r="0.8"/>
                                     <circle class="film-star" cx="150" cy="12" r="0.5"/>
                                 </g>
-                                <circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
+                                <line class="film-shooting-star" x1="151" y1="6" x2="143" y2="9.5" stroke="#f0efe7" stroke-width="0.6" stroke-linecap="round"/>
+                                <g class="film-moon-g">
+                                    <circle class="film-moon" cx="122" cy="26" r="7.5" fill="#f0efe7" opacity="0.92"/>
+                                    <g class="film-moon-detail" fill="#10190e" opacity="0.1">
+                                        <circle cx="119.6" cy="24.2" r="1.7"/>
+                                        <circle cx="124.6" cy="28.4" r="1.15"/>
+                                        <circle cx="123" cy="22.4" r="0.8"/>
+                                    </g>
+                                </g>
+                                <g class="film-birds" stroke="#dbd7cd" stroke-width="0.55" fill="none" stroke-linecap="round">
+                                    <path d="M-4,32 q1.5,-1.5 3,0 q1.5,-1.5 3,0"/>
+                                    <path d="M-11,28 q1.2,-1.2 2.4,0 q1.2,-1.2 2.4,0"/>
+                                    <path d="M-8,36 q1,-1 2,0 q1,-1 2,0"/>
+                                </g>
                                 <path class="film-mtn-scroll" d="M0,60 L30,45 L70,55 L110,40 L160,60 L190,45 L230,55 L270,40 L320,60 L320,92 L0,92 Z" fill="rgba(14, 31, 15, 0.7)"/>
+                                <g class="film-mist-scroll" fill="#dbd7cd">
+                                    <ellipse cx="40" cy="63" rx="46" ry="4" opacity="0.055"/>
+                                    <ellipse cx="120" cy="65" rx="52" ry="4.5" opacity="0.045"/>
+                                    <ellipse cx="200" cy="63" rx="46" ry="4" opacity="0.055"/>
+                                    <ellipse cx="280" cy="65" rx="52" ry="4.5" opacity="0.045"/>
+                                </g>
                                 <g class="film-mid-scroll">
                                     <polygon points="20,76 26,60 32,76" fill="rgba(26, 47, 23, 0.55)"/>
                                     <polygon points="55,78 63,52 71,78" fill="rgba(26, 47, 23, 0.55)"/>
@@ -506,7 +578,10 @@
                                     <polygon points="275,84 288,42 301,84" fill="#040903"/>
                                     <path d="M0,84 Q80,82 160,84 T320,84 L320,92 L0,92 Z" fill="#040903"/>
                                 </g>
-                                <circle class="film-bounce-ball" cx="80" cy="46" r="3.5" fill="#de7949"/>
+                                <g class="film-lantern-g">
+                                    <circle class="film-lantern-halo" cx="80" cy="38" r="6.5" fill="#de7949" opacity="0.16"/>
+                                    <circle class="film-bounce-ball" cx="80" cy="38" r="2.4" fill="#de7949"/>
+                                </g>
                             </svg>
                             <div class="demo-play-overlay" aria-hidden="true">
                                 <span class="demo-icon-wrap">
@@ -515,8 +590,16 @@
                                 </span>
                             </div>
                             <div class="demo-video-controls">
+                                <span class="demo-ctrl-icon demo-ctrl-play" aria-hidden="true">
+                                    <svg class="icon-play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="11" height="11"><path d="M8 5v14l11-7z"/></svg>
+                                    <svg class="icon-pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="11" height="11"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>
+                                </span>
                                 <span class="demo-time">12:34</span>
-                                <div class="demo-progress" title="Seek: KoalaSync jumps the other tab to the same spot"><div class="demo-progress-fill"></div></div>
+                                <div class="demo-progress" title="Seek: KoalaSync jumps the other tab to the same spot"><div class="demo-progress-buffer"></div><div class="demo-progress-fill"></div></div>
+                                <span class="demo-duration" aria-hidden="true">42:17</span>
+                                <span class="demo-ctrl-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11"><path d="M11 5 6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg></span>
+                                <span class="demo-ctrl-badge" aria-hidden="true">HD</span>
+                                <span class="demo-ctrl-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="11" height="11"><path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3"/></svg></span>
                             </div>
                         </div>
                         <div class="demo-tab-toast" id="demo-toast-b" data-joined="{{DEMO_JOINED}}" data-selected="{{DEMO_TAB_SELECTED}}" aria-hidden="true"></div>
@@ -598,7 +681,7 @@
                                 </label>
                                 <select class="mock-input" id="demo-video-select" style="width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid #2f3625; color: white; padding: 8px; border-radius: 8px; font-family: inherit; font-size: 0.75rem; outline: none; cursor: default;">
                                     <option value="" class="demo-select-placeholder" selected hidden>{{DEMO_SELECT_PLACEHOLDER}}</option>
-                                    <option><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> <span class="demo-title-text-ep1">Stranger Things - S4E1</span></option>
+                                    <option class="demo-title-text-ep1">Stranger Things - S4E1</option>
                                 </select>
                             </div>