Ship gallery assets as LFS tar (fix broken images)

static/index.html

@@ -277,46 +277,39 @@
   }
   .look-card.film .ov .can-btn2:hover { transform: scale(1.15); }
 
-  /* full-viewport leaf shutter: blades close, flash fires, blades open */
-  #processBtn.snap { animation: pressScale .6s cubic-bezier(.2,.7,.2,1); }
-  @keyframes pressScale { 0% { transform: scale(1); } 30% { transform: scale(.95); } 100% { transform: scale(1); } }
-  #shutterFx { position: fixed; inset: 0; pointer-events: none; z-index: 2000; }
-  #shutterFx .sc {
-    position: absolute; left: 0; right: 0; height: 51%;
-    background: #030304; transform: scaleY(0);
-  }
-  #shutterFx .sc.t { top: 0; transform-origin: top;
-    box-shadow: 0 3px 30px rgba(0,0,0,.9); }
-  #shutterFx .sc.b { bottom: 0; transform-origin: bottom;
-    box-shadow: 0 -3px 30px rgba(0,0,0,.9); }
-  #shutterFx .sflash { position: absolute; inset: 0; background: #fff; opacity: 0; }
-  #shutterFx .sring {
-    position: absolute; top: 50%; left: 50%;
-    width: 70px; height: 70px; margin: -35px 0 0 -35px;
-    border: 2.5px solid var(--accent); border-radius: 50%;
-    opacity: 0; transform: scale(.4);
-  }
-  #shutterFx.go .sc.t { animation: scClose .62s cubic-bezier(.75,0,.25,1); }
-  #shutterFx.go .sc.b { animation: scClose .62s cubic-bezier(.75,0,.25,1); }
-  #shutterFx.go .sflash { animation: sflash .62s ease-out; }
-  #shutterFx.go .sring { animation: sring .62s cubic-bezier(.2,.8,.3,1); }
-  @keyframes scClose {
-    0% { transform: scaleY(0); }
-    30% { transform: scaleY(1); }
-    58% { transform: scaleY(1); }
-    100% { transform: scaleY(0); }
-  }
-  @keyframes sflash {
-    0%, 26% { opacity: 0; }
-    40% { opacity: .85; }
-    62% { opacity: .12; }
-    100% { opacity: 0; }
-  }
-  @keyframes sring {
-    0%, 30% { opacity: 0; transform: scale(.4); }
-    45% { opacity: 1; }
-    100% { opacity: 0; transform: scale(1.6); }
+  /* process button: hover = shine sweep + aperture turn; click = shutter snap */
+  #processBtn {
+    display: inline-flex; align-items: center; gap: 10px;
+    position: relative; overflow: hidden;
+  }
+  #processBtn .ap {
+    flex: 0 0 auto;
+    transition: transform .55s cubic-bezier(.3,1.5,.4,1);
+  }
+  #processBtn:hover:not(:disabled) .ap { transform: rotate(120deg); }
+  #processBtn::before {
+    content: ""; position: absolute; top: -4px; bottom: -4px;
+    width: 42%; left: -60%;
+    background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
+    transform: skewX(-18deg);
+    pointer-events: none;
+  }
+  #processBtn:hover:not(:disabled)::before { animation: shine .75s ease; }
+  @keyframes shine { to { left: 135%; } }
+  #processBtn.snap { animation: pressScale .45s cubic-bezier(.2,.7,.2,1); }
+  @keyframes pressScale { 0% { transform: scale(1); } 30% { transform: scale(.93); } 100% { transform: scale(1); } }
+  #processBtn.snap .ap { animation: apSpin .5s cubic-bezier(.55,0,.3,1); }
+  @keyframes apSpin {
+    0% { transform: rotate(0) scale(1); }
+    45% { transform: rotate(180deg) scale(.45); }
+    100% { transform: rotate(360deg) scale(1); }
   }
+  #processBtn.snap::after {
+    content: ""; position: absolute; inset: 0;
+    background: #fff; opacity: 0; pointer-events: none;
+    animation: btnflash .45s ease-out;
+  }
+  @keyframes btnflash { 0% { opacity: 0; } 28% { opacity: .8; } 100% { opacity: 0; } }
 
   /* extracted parameters panel (anatomy, under the 3D LUT) */
   .param-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
@@ -819,7 +812,7 @@
   </div>
 
   <div class="action">
-    <button id="processBtn" disabled>Extract the look</button>
+    <button id="processBtn" disabled><svg class="ap" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m14.31 8 5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16 3.95 6.06M14.31 16H2.83m13.79-4-5.74 9.94"/></svg><span id="processLabel">Extract the look</span></button>
     <div class="status" id="status"><div class="filmloader" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span></div><span id="statusText"></span></div>
   </div>
 
@@ -1075,7 +1068,7 @@
   function update() {
     $('processBtn').disabled = !refFile;
     $('controls').classList.toggle('visible', !!tgtFile);
-    $('processBtn').textContent = tgtFile ? 'Render my photo' : 'Extract the look';
+    $('processLabel').textContent = tgtFile ? 'Render my photo' : 'Extract the look';
   }
 
   // ------------------------------------------------ sliders
@@ -1088,25 +1081,12 @@
   });
 
   // ------------------------------------------------ process
-  const shutterFx = document.createElement('div');
-  shutterFx.id = 'shutterFx';
-  shutterFx.setAttribute('aria-hidden', 'true');
-  shutterFx.innerHTML =
-    '<div class="sc t"></div><div class="sc b"></div>' +
-    '<div class="sflash"></div><div class="sring"></div>';
-  document.body.appendChild(shutterFx);
-
   function shutterSnap() {
     const btn = $('processBtn');
     btn.classList.remove('snap');
-    shutterFx.classList.remove('go');
-    void shutterFx.offsetWidth;
+    void btn.offsetWidth;
     btn.classList.add('snap');
-    shutterFx.classList.add('go');
-    setTimeout(() => {
-      btn.classList.remove('snap');
-      shutterFx.classList.remove('go');
-    }, 700);
+    setTimeout(() => btn.classList.remove('snap'), 520);
   }
 
   $('processBtn').addEventListener('click', () => {