feat(registry): iOS 26 liquid glass home screen on 3D GLTF iPhone

Replaces the phone screen content in vfx-iphone-device with an iOS 26
home screen: glass app icons (Weather, Stocks, ChatGPT, Slack, X, etc.),
status bar with battery/signal, search pill, dock with badges. All on a
real GLTF iPhone model with camera choreography.

registry/blocks/ios26-liquid-glass/ios26-liquid-glass.html

@@ -37,14 +37,6 @@
       data-duration="15"
       data-root="true"
     >
-      <!-- 3D Theater — must be BEFORE layoutsubtree canvases to avoid WebGL context conflicts -->
-      <canvas
-        id="theater"
-        width="1920"
-        height="1080"
-        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
-      ></canvas>
-
       <!-- LIVE HTML captured every frame via drawElementImage  -->
       <canvas
         id="cap-phone"
@@ -72,54 +64,37 @@
           "
         >
           <div id="phone-scroll" style="background:#0a0a0f;color:#fff;transform:translateY(0)">
-            <!-- Hidden elements to keep original JS happy -->
+            <div id="phone-title" style="display:none"></div><span id="phone-count" style="display:none"></span><div id="phone-cards" style="display:none"></div>
-            <div id="phone-title" style="display:none"></div>
+            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 22px 6px;font-size:14px;font-weight:700;"><span style="font-variant-numeric:tabular-nums;">15:16</span><div style="display:flex;gap:5px;align-items:center;font-size:11px;"><span>●●●●</span><span>📶</span><span style="color:#30d158;font-weight:600;">92%🔋</span></div></div>
-            <span id="phone-count" style="display:none"></span>
-            <div id="phone-cards" style="display:none"></div>
-            <!-- iOS 26 Status bar -->
-            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 22px 6px;font-size:14px;font-weight:700;">
-              <span style="font-variant-numeric:tabular-nums;">15:16</span>
-              <div style="display:flex;gap:5px;align-items:center;font-size:11px;">
-                <span>●●●●</span><span>📶</span><span style="color:#30d158;font-weight:600;">92%🔋</span>
-              </div>
-            </div>
-            <!-- App grid — iOS 26 liquid glass style -->
             <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px;padding:10px 18px;">
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">☁</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Weather</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">☁</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Weather</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">📈</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Stocks</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📈</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Stocks</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">📡</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Find My</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📡</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Find My</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">🏠</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Home</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">🏠</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Home</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">📖</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Books</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📖</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Books</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">⭐</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">iTunes</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">⭐</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">iTunes</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">⊙</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Fitness</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">⊙</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Fitness</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">⏱</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Watch</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">⏱</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Watch</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">👤</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Contacts</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">👤</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Contacts</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">📁</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Files</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📁</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Files</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;">文A</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Translate</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;">文A</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Translate</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">⚙</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Utilities</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">⚙</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Utilities</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">〰</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Freeform</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">✦</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">ChatGPT</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">📓</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Journal</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;">#</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Slack</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">💡</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Tips</div></div>
+              <div style="text-align:center;position:relative"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📷</div><div style="position:absolute;top:-2px;right:4px;background:#FF3B30;color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:7px;">1</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Instagram</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">🔗</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">NSYS</div></div>
+              <div style="text-align:center;position:relative"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;">𝕏</div><div style="position:absolute;top:-2px;right:4px;background:#FF3B30;color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:7px;">4</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">X</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">⌨</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">SwiftKey</div></div>
+              <div style="text-align:center;position:relative"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">✉</div><div style="position:absolute;top:-2px;right:0;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">797</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Proton</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">✦</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">ChatGPT</div></div>
+              <div style="text-align:center;position:relative"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;">M</div><div style="position:absolute;top:-2px;right:-2px;background:#FF3B30;color:#fff;font-size:6px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">31.889</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Gmail</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;">#</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Slack</div></div>
+              <div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;">R</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Revolut</div></div>
-              <div style="text-align:center;position:relative"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">📷</div><div style="position:absolute;top:-1px;right:4px;background:#FF3B30;color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:7px;">1</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Instagram</div></div>
-              <div style="text-align:center;position:relative"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;">𝕏</div><div style="position:absolute;top:-1px;right:4px;background:#FF3B30;color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:7px;">4</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">X</div></div>
-              <div style="text-align:center;position:relative"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:26px;">✉</div><div style="position:absolute;top:-1px;right:0;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">797</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Proton</div></div>
-              <div style="text-align:center;position:relative"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;">M</div><div style="position:absolute;top:-1px;right:-2px;background:#FF3B30;color:#fff;font-size:6px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">31.889</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Gmail</div></div>
-              <div style="text-align:center"><div style="width:66px;height:66px;margin:0 auto 3px;border-radius:16px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;">R</div><div style="font-size:9px;color:rgba(255,255,255,0.75);">Revolut</div></div>
-            </div>
-            <!-- Search pill -->
-            <div style="display:flex;justify-content:center;padding:6px 0 12px;"><div style="padding:7px 24px;border-radius:16px;background:rgba(120,120,130,0.25);font-size:12px;color:rgba(255,255,255,0.5);font-weight:500;">🔍 Search</div></div>
-            <!-- Dock -->
-            <div style="margin:0 12px;padding:8px 12px;border-radius:24px;background:rgba(80,80,90,0.4);display:flex;justify-content:space-around;">
-              <div style="text-align:center;position:relative"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">📞</div><div style="position:absolute;top:-3px;right:-3px;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;">9+</div></div>
-              <div style="text-align:center"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">🦁</div></div>
-              <div style="text-align:center;position:relative"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">💬</div><div style="position:absolute;top:-3px;right:-3px;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">282</div></div>
-              <div style="text-align:center"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">🎵</div></div>
             </div>
+            <div style="display:flex;justify-content:center;padding:6px 0 10px;"><div style="padding:7px 24px;border-radius:16px;background:rgba(120,120,130,0.25);font-size:12px;color:rgba(255,255,255,0.45);font-weight:500;">🔍 Search</div></div>
+            <div style="margin:0 12px;padding:8px 12px;border-radius:24px;background:rgba(80,80,90,0.35);display:flex;justify-content:space-around;">
+              <div style="position:relative"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">📞</div><div style="position:absolute;top:-3px;right:-3px;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;">9+</div></div>
+              <div><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">🦁</div></div>
+              <div style="position:relative"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">💬</div><div style="position:absolute;top:-3px;right:-3px;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">282</div></div>
+              <div><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">🎵</div></div>
             </div>
+          
         </div>
       </canvas>
 
@@ -240,6 +215,13 @@
           </div>
         </div>
       </canvas>
+
+      <canvas
+        id="theater"
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      ></canvas>
       <div
         id="driver"
         class="clip"