Ship gallery assets as LFS tar (fix broken images)

static/index.html

@@ -459,6 +459,101 @@
   .lab-caption { font-size: 12px; color: var(--text-dim); margin: 0 0 10px; }
   .lab-caption b { color: var(--accent); font-weight: 600; }
 
+  /* ---------- motion & ambience ---------- */
+  body::after {
+    content: ""; position: fixed; inset: -20%;
+    pointer-events: none; z-index: 0;
+    background:
+      radial-gradient(640px 420px at 18% 24%, rgba(232,163,61,.055), transparent 62%),
+      radial-gradient(760px 520px at 82% 74%, rgba(90,125,165,.05), transparent 62%);
+    animation: drift 42s ease-in-out infinite alternate;
+  }
+  @keyframes drift { to { transform: translate(4%, -3%) scale(1.07); } }
+  .wrap { position: relative; z-index: 1; }
+
+  #cursorGlow {
+    position: fixed; width: 360px; height: 360px; border-radius: 50%;
+    pointer-events: none; z-index: 2;
+    background: radial-gradient(circle, rgba(232,163,61,.065), transparent 65%);
+    transform: translate(-50%, -50%);
+    mix-blend-mode: screen;
+  }
+
+  @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
+  .hero-title {
+    font-size: clamp(30px, 4.6vw, 46px); font-weight: 700;
+    letter-spacing: -0.015em; line-height: 1.1;
+    margin: 30px 0 12px;
+    animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) both;
+  }
+  .hero-title em {
+    font-style: italic; color: var(--accent);
+    text-shadow: 0 0 26px rgba(232,163,61,.4);
+  }
+  .tagline { animation: fadeUp .8s .12s cubic-bezier(.2,.7,.2,1) both; }
+  .zones { animation: fadeUp .8s .22s cubic-bezier(.2,.7,.2,1) both; }
+  .brand { animation: flicker 1.5s steps(1) both; }
+  @keyframes flicker {
+    0% { opacity: 0; } 7% { opacity: 1; } 11% { opacity: .3; } 15% { opacity: 1; }
+    22% { opacity: .45; } 28% { opacity: 1; } 100% { opacity: 1; }
+  }
+
+  .reveal { opacity: 0; transform: translateY(24px);
+    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
+  .reveal.visible { opacity: 1; transform: none; }
+
+  .demo > h2 { display: flex; align-items: center; gap: 10px; }
+  .demo > h2::before { content: ""; width: 20px; height: 2px; background: var(--accent); flex: 0 0 auto; }
+
+  .filmstrip {
+    height: 26px; margin-top: 68px; border-radius: 5px;
+    background: #0f0f13; position: relative; opacity: .85;
+  }
+  .filmstrip::before, .filmstrip::after {
+    content: ""; position: absolute; left: 10px; right: 10px; height: 6px;
+    background: repeating-linear-gradient(90deg, #24242b 0 13px, transparent 13px 28px);
+    border-radius: 2px;
+  }
+  .filmstrip::before { top: 4px; }
+  .filmstrip::after { bottom: 4px; }
+
+  #processBtn:hover:not(:disabled) { box-shadow: 0 4px 26px rgba(232,163,61,.38); }
+  .try-btn:hover { box-shadow: 0 4px 20px rgba(232,163,61,.3); }
+  .dl-btn:hover { box-shadow: 0 3px 16px rgba(232,163,61,.14); transform: translateY(-1px); }
+  .dl-btn { transition: border-color .2s, transform .12s, box-shadow .2s; }
+
+  .zone.drag { transform: scale(1.015);
+    box-shadow: 0 0 0 4px var(--accent-soft), 0 10px 34px rgba(232,163,61,.16); }
+  .zone.pop { animation: pop .4s cubic-bezier(.2,.9,.3,1.35); }
+  @keyframes pop { 0% { transform: scale(.982); } 55% { transform: scale(1.012); } 100% { transform: scale(1); } }
+
+  .compare .divider { box-shadow: 0 0 16px rgba(232,163,61,.55); }
+  .compare .base-img { transition: opacity .35s; }
+  #results .result-card { animation: fadeUp .55s cubic-bezier(.2,.7,.2,1) both; }
+  .gate-card { animation: gateIn .8s cubic-bezier(.2,.7,.2,1) both; }
+  @keyframes gateIn { from { opacity: 0; transform: translateY(16px) scale(.975); } }
+
+  .filmloader { display: none; gap: 3px; }
+  .status.busy .filmloader { display: flex; }
+  .filmloader span {
+    width: 12px; height: 17px; border-radius: 2.5px;
+    background: var(--bg-3); border: 1px solid var(--line);
+    animation: frameblink 1.05s infinite;
+  }
+  .filmloader span:nth-child(2) { animation-delay: .15s; }
+  .filmloader span:nth-child(3) { animation-delay: .3s; }
+  .filmloader span:nth-child(4) { animation-delay: .45s; }
+  .filmloader span:nth-child(5) { animation-delay: .6s; }
+  @keyframes frameblink {
+    0%, 55%, 100% { background: var(--bg-3); border-color: var(--line); }
+    25% { background: var(--accent); border-color: var(--accent); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation: none !important; transition: none !important; }
+    .reveal { opacity: 1; transform: none; }
+  }
+
   /* ---------- privacy modal ---------- */
   #privacyModal {
     position: fixed; inset: 0; z-index: 950;
@@ -502,6 +597,7 @@
     <div class="brand">DEEP <span>ANALOG</span></div>
     <a class="privacy-link" id="privacyOpen">Privacy</a>
   </header>
+  <h1 class="hero-title">Steal the color of <em>any film</em>.</h1>
   <p class="tagline">
     Upload a film scan you love — the model predicts a 3D&nbsp;LUT that captures its color character,
     ready for Photoshop, Lightroom, DaVinci&nbsp;Resolve, or any editor.
@@ -549,7 +645,7 @@
 
   <div class="action">
     <button id="processBtn" disabled>Extract the look</button>
-    <div class="status" id="status"><div class="spinner"></div><span id="statusText"></span></div>
+    <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>
 
   <div id="results">
@@ -557,6 +653,8 @@
     <div class="result-card" id="resultBody"></div>
   </div>
 
+  <div class="filmstrip" aria-hidden="true"></div>
+
   <section class="demo" id="demoSection">
     <h2>See it in action</h2>
     <div class="demo-card">
@@ -586,6 +684,8 @@
     </div>
   </section>
 
+  <div class="filmstrip" aria-hidden="true"></div>
+
   <section class="demo" id="playSection">
     <h2>Try it yourself — pick a pair</h2>
     <p class="section-sub">Choose a reference look and an input photo, then run the pair through the model.
@@ -755,6 +855,9 @@
   function fillZone(zoneId, file, clearFn) {
     const zone = $(zoneId);
     zone.classList.add('filled');
+    zone.classList.remove('pop');
+    void zone.offsetWidth;            // restart the pop animation
+    zone.classList.add('pop');
     zone.querySelectorAll('img.preview, .file-chip').forEach(n => n.remove());
     if (PREVIEWABLE.includes(file.type)) {
       const img = document.createElement('img');
@@ -918,6 +1021,20 @@
     cmp.addEventListener('pointerdown', e => { dragging = true; setPos(e.clientX); cmp.setPointerCapture(e.pointerId); });
     cmp.addEventListener('pointermove', e => { if (dragging) setPos(e.clientX); });
     cmp.addEventListener('pointerup', () => { dragging = false; });
+
+    // cinematic sweep-in: divider glides from the right edge to center once
+    let userTouched = false;
+    cmp.addEventListener('pointerdown', () => { userTouched = true; }, { once: true });
+    const t0 = performance.now();
+    (function sweep(t) {
+      if (userTouched) return;
+      const p = Math.min((t - t0) / 950, 1);
+      const e = 1 - Math.pow(1 - p, 3);
+      const pos = 0.92 - 0.42 * e;
+      divider.style.left = (pos * 100) + '%';
+      top.style.clipPath = 'inset(0 0 0 ' + (pos * 100) + '%)';
+      if (p < 1) requestAnimationFrame(sweep);
+    })(t0);
   }
 
   // ------------------------------------------------ look recipe (color mapping)
@@ -1489,8 +1606,9 @@
       $('instantWrap').style.display = 'block';
       $('liveHint').style.display = 'none';
       const cmp = $('labCompare');
-      cmp.querySelector('.base-img').src =
-        'static/lab/' + input.id + '_' + refId() + '.jpg';
+      const base = cmp.querySelector('.base-img');
+      base.style.opacity = '.25';     // crossfade while the new render loads
+      base.src = 'static/lab/' + input.id + '_' + refId() + '.jpg';
       cmp.querySelector('.top-img').src = input.src;
     }
 
@@ -1542,10 +1660,12 @@
     });
 
     // if a pre-render is ever missing, degrade gracefully to the live hint
-    $('labCompare').querySelector('.base-img').addEventListener('error', () => {
+    const baseImg = $('labCompare').querySelector('.base-img');
+    baseImg.addEventListener('error', () => {
       $('instantWrap').style.display = 'none';
       $('liveHint').style.display = 'block';
     });
+    baseImg.addEventListener('load', () => { baseImg.style.opacity = '1'; });
 
     initCompare($('labCompare'));
     refresh();
@@ -1569,6 +1689,36 @@
     });
   })();
 
+  // ------------------------------------------------ ambience
+  // Scroll-reveal for below-the-fold sections
+  document.querySelectorAll('section.demo, .filmstrip, footer').forEach(el =>
+    el.classList.add('reveal'));
+  const ro = new IntersectionObserver(entries => entries.forEach(e => {
+    if (e.isIntersecting) { e.target.classList.add('visible'); ro.unobserve(e.target); }
+  }), { threshold: 0.07 });
+  document.querySelectorAll('.reveal').forEach(el => ro.observe(el));
+
+  // Cursor halation glow (desktop pointers only)
+  if (window.matchMedia('(pointer:fine)').matches) {
+    const glow = document.createElement('div');
+    glow.id = 'cursorGlow';
+    glow.style.opacity = '0';
+    document.body.appendChild(glow);
+    let gx = 0, gy = 0, pending = false;
+    window.addEventListener('pointermove', e => {
+      gx = e.clientX; gy = e.clientY;
+      glow.style.opacity = '1';
+      if (!pending) {
+        pending = true;
+        requestAnimationFrame(() => {
+          glow.style.left = gx + 'px';
+          glow.style.top = gy + 'px';
+          pending = false;
+        });
+      }
+    }, { passive: true });
+  }
+
   // ------------------------------------------------ privacy modal
   ['privacyOpen', 'privacyOpen2'].forEach(id => {
     const el = $(id);