UI: 3D depth layer — ambient float, pointer tilt, ring lie-back

app/assets/design_system.css

@@ -939,3 +939,65 @@ h1, h2, h3 { font-family: var(--ff-display) !important; letter-spacing: -0.025em
 
 #MainMenu { visibility: hidden; }
 footer { visibility: hidden; }
+
+/* ============================================================
+   DEPTH — Aurora in the round
+   ------------------------------------------------------------
+   These rules only lift a surface's contents onto their own
+   planes. They do nothing on their own: without a `perspective`
+   on an ancestor a translateZ collapses to flat, which is
+   exactly the safe default.
+
+   The perspective is NOT set here. app/ui/motion_runtime.py sets
+   it on a floated surface's parent at runtime, and only when that
+   parent passes canMove() — because `perspective` and
+   `transform-style: preserve-3d` each make an element the
+   containing block for its position:fixed descendants, the same
+   hazard as a transform. Putting either on .block-container would
+   break the file uploader's drop overlay app-wide.
+   ============================================================ */
+
+/* KPI tiles — badge floats above the number, label sits behind. */
+.ups-kpi .ic  { transform: translateZ(26px); }
+.ups-kpi .val { transform: translateZ(15px); }
+.ups-kpi .lab { transform: translateZ(7px); }
+
+/* The verdict reads as a stack: badge, headline, body. */
+.verdict-badge { transform: translateZ(28px); }
+.verdict h2    { transform: translateZ(15px); }
+.verdict p     { transform: translateZ(7px); }
+
+/* Evidence: the claim in front of its own sentence. */
+.ups-ev b     { transform: translateZ(14px); }
+.ups-ev .ups-cite { transform: translateZ(6px); }
+
+/* The fit ring's number rides above the disc as it lies back. */
+.ups-ring .val { transform: translateZ(30px); }
+
+/* Proposal toolbar floats off the page it belongs to. */
+.doc-toolbar { transform: translateZ(18px); }
+
+/* The compass turns. Its own lockup carries the vanishing point —
+   the sidebar brand has no uploader beneath it, so this one
+   perspective is safe to declare statically. */
+.ups-brand { perspective: 420px; }
+.ups-brand-mark {
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  will-change: transform;
+}
+
+/* Surfaces the driver floats. will-change only — the transform
+   itself is always written by Motion, never by CSS, so a failure
+   to animate leaves the surface flat and correct. */
+.ups-panel, .ups-kpi, .ups-tile, .card, .verdict, .proposal-doc {
+  will-change: transform;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ups-kpi .ic, .ups-kpi .val, .ups-kpi .lab,
+  .verdict-badge, .verdict h2, .verdict p,
+  .ups-ev b, .ups-ev .ups-cite,
+  .ups-ring .val, .doc-toolbar { transform: none; }
+  .ups-brand { perspective: none; }
+}

app/ui/motion_runtime.py

@@ -29,6 +29,12 @@ Two rules the animations here must never break:
   array, never in CSS and never written to the element up front, so a failure
   to animate leaves content visible and correct rather than stranded at
   ``opacity: 0``.
+* **Perspective and ``transform-style: preserve-3d`` follow the same rule as a
+  transform.** Both make an element the containing block for its
+  ``position: fixed`` descendants. So the depth layer never declares them in
+  CSS on a shared ancestor — the driver sets them at runtime on an individual
+  surface's parent, and only when that parent passes ``canMove``. Putting a
+  perspective on ``.block-container`` would break the uploader app-wide.
 
 The library is vendored (``app/assets/vendor/motion.umd.js``, MIT) rather than
 loaded from a CDN, because this app also ships as an offline desktop launcher.
@@ -95,6 +101,91 @@ _DRIVER = r"""
     return true;
   }
 
+  // ── Depth ────────────────────────────────────────────────────────────
+  // A translateZ only reads as depth when an ancestor carries a
+  // perspective, and a perspective — like a transform — makes that
+  // ancestor the containing block for fixed-position descendants. So it
+  // goes on the surface's own parent, one at a time, and only through
+  // canMove(). A surface whose parent is disqualified still animates; it
+  // simply stays flat, which is the correct fallback.
+  function depthParent(el) {
+    var p = el.parentElement;
+    if (!p || p.dataset.upsP || !canMove(p)) return false;
+    p.dataset.upsP = '1';
+    p.style.perspective = '1200px';
+    p.style.perspectiveOrigin = '50% 42%';
+    return true;
+  }
+
+  // Five samples of a sine, phase-shifted. First and last are equal, so the
+  // loop closes seamlessly; the phase is what stops a grid of cards from
+  // breathing in unison, which is what makes ambient motion look mechanical.
+  function wave(amp, phase, offset) {
+    var k = [], t;
+    for (t = 0; t <= 4; t++) {
+      k.push(+((offset || 0) + amp * Math.sin(2 * Math.PI * (t / 4 + phase))).toFixed(3));
+    }
+    return k;
+  }
+
+  // The ambient loop. Never settles — it owns the element's transform for as
+  // long as the node lives, so nothing else may clear it. Anything that wants
+  // the transform (hover, press, tilt) pauses this first and resumes after.
+  function float3d(el, i) {
+    if (!canMove(el)) return;
+    depthParent(el);
+    el.style.transformStyle = 'preserve-3d';
+    var ph = (i % 5) / 5;
+    el.__upsFloat = M.animate(el, {
+      rotateY: wave(5.5, ph),
+      rotateX: wave(3.2, ph + 0.25),
+      z: wave(11, ph + 0.5, 11)
+    }, {
+      duration: 9 + (i % 4) * 1.5,
+      repeat: Infinity,
+      ease: 'easeInOut'
+    });
+  }
+
+  function holdFloat(el) {
+    if (el.__upsFloat) { try { el.__upsFloat.pause(); } catch (e) {} }
+  }
+  function resumeFloat(el) {
+    if (el.__upsFloat) { try { el.__upsFloat.play(); } catch (e) {} return true; }
+    return false;
+  }
+
+  // Pointer tilt. Hands over from the float and hands back on leave, because
+  // two animations writing the same transform component fight each other.
+  function tilt3d(el, max) {
+    var frame = 0;
+    el.addEventListener('pointerenter', function () { holdFloat(el); });
+    el.addEventListener('pointermove', function (e) {
+      if (frame) return;
+      frame = requestAnimationFrame(function () {
+        frame = 0;
+        var r = el.getBoundingClientRect();
+        if (!r.width || !r.height) return;
+        var px = (e.clientX - r.left) / r.width;
+        var py = (e.clientY - r.top) / r.height;
+        M.animate(el, {
+          rotateY: (px - 0.5) * 2 * max,
+          rotateX: (0.5 - py) * 2 * max,
+          z: 30
+        }, { type: 'spring', stiffness: 260, damping: 26 });
+      });
+    });
+    el.addEventListener('pointerleave', function () {
+      var back = M.animate(el, { rotateX: 0, rotateY: 0, z: 0 },
+                           { type: 'spring', stiffness: 180, damping: 22 });
+      if (back && back.then) {
+        back.then(function () {
+          if (!resumeFloat(el)) el.style.transform = '';
+        }, function () {});
+      }
+    });
+  }
+
   // Panels, cards and tiles arrive as they scroll into view — not all at once
   // on load, which is what made the page read as a still photograph.
   var SURFACES = [
@@ -107,16 +198,23 @@ _DRIVER = r"""
   // Their contents cascade behind them.
   var ROWS = '.ups-row, .ups-ev, .checkitem, .ups-kvc, .ups-thead';
 
-  function enter(el) {
+  function enter(el, i) {
     var move = canMove(el);
     M.inView(el, function () {
       var anim = M.animate(
         el,
-        move ? { opacity: [0, 1], y: [16, 0], scale: [0.995, 1] }
+        move ? { opacity: [0, 1], y: [16, 0], z: [-140, 0], rotateX: [7, 0] }
              : { opacity: [0, 1] },
-        { duration: 0.52, ease: EASE }
+        { duration: 0.56, ease: EASE }
       );
-      if (move) settle(anim, el);
+      // The ambient float takes over the transform the moment the entrance
+      // lets go of it, so the surface never sits perfectly still.
+      if (move && anim && anim.then) {
+        anim.then(function () {
+          el.style.transform = '';
+          float3d(el, i || 0);
+        }, function () {});
+      }
     }, { amount: 0.12 });
   }
 
@@ -167,10 +265,26 @@ _DRIVER = r"""
     var target = parseFloat(bar.getAttribute('stroke-dashoffset'));
     if (!isFinite(target)) return;
     var deg = 360 * (1 - target / total);
+    var host = svgRoot.closest('.ups-ring') || svgRoot;
     M.inView(svgRoot, function () {
       M.animate(bar, { strokeDashoffset: [total, target] },
                 { duration: 1.1, ease: EASE });
       if (comet) M.animate(comet, { rotate: [0, deg] }, { duration: 1.1, ease: EASE });
+
+      // The disc lies back as it draws, then rocks like a gauge that has not
+      // quite settled. Kept shallow — the score has to stay readable.
+      if (!canMove(host)) return;
+      depthParent(host);
+      host.style.transformStyle = 'preserve-3d';
+      var lie = M.animate(host, { rotateX: [34, 12] }, { duration: 1.1, ease: EASE });
+      if (lie && lie.then) {
+        lie.then(function () {
+          host.__upsFloat = M.animate(host, {
+            rotateX: wave(3.5, 0, 12),
+            rotateY: wave(5, 0.25)
+          }, { duration: 8, repeat: Infinity, ease: 'easeInOut' });
+        }, function () {});
+      }
     }, { amount: 0.4 });
   }
 
@@ -187,12 +301,29 @@ _DRIVER = r"""
   // inline transform is cleared on the way out, never left behind.
   function springy(el, lift) {
     M.hover(el, function () {
+      holdFloat(el);
       M.animate(el, { y: lift }, SPRING);
-      return function () { settle(M.animate(el, { y: 0 }, SPRING), el); };
+      return function () {
+        var back = M.animate(el, { y: 0 }, SPRING);
+        if (back && back.then) {
+          back.then(function () {
+            // Only clear the transform if nothing owns it. Clearing it out
+            // from under a running float leaves the surface snapping.
+            if (!resumeFloat(el)) el.style.transform = '';
+          }, function () {});
+        }
+      };
     });
     M.press(el, function () {
-      M.animate(el, { scale: 0.985 }, { duration: 0.08, ease: 'easeOut' });
-      return function () { settle(M.animate(el, { scale: 1 }, SPRING), el); };
+      M.animate(el, { scale: 0.985, z: -18 }, { duration: 0.08, ease: 'easeOut' });
+      return function () {
+        var back = M.animate(el, { scale: 1, z: 0 }, SPRING);
+        if (back && back.then) {
+          back.then(function () {
+            if (!resumeFloat(el)) el.style.transform = '';
+          }, function () {});
+        }
+      };
     });
   }
 
@@ -200,12 +331,34 @@ _DRIVER = r"""
     var root = document.querySelector('[data-testid="stAppViewContainer"]') || document.body;
     if (!root) return;
 
-    root.querySelectorAll(SURFACES).forEach(function (el) {
+    root.querySelectorAll(SURFACES).forEach(function (el, i) {
       if (!once(el)) return;
-      enter(el);
+      enter(el, i);
       cascade(el);
     });
 
+    // Evidence entries ride a travelling depth wave, so a findings list reads
+    // as a stack of physical cards rather than a table.
+    root.querySelectorAll('.ups-ev').forEach(function (el, i) {
+      if (el.dataset.upsD) return;
+      el.dataset.upsD = '1';
+      if (!canMove(el)) return;
+      depthParent(el);
+      el.style.transformStyle = 'preserve-3d';
+      el.__upsFloat = M.animate(el, {
+        z: wave(17, (i % 4) / 4, 17),
+        rotateX: wave(2.4, (i % 4) / 4 + 0.25)
+      }, { duration: 6.5, repeat: Infinity, ease: 'easeInOut' });
+    });
+
+    // The mark is a compass. Turning is the one thing it should do.
+    root.querySelectorAll('.ups-brand-mark').forEach(function (el) {
+      if (el.dataset.upsD) return;
+      el.dataset.upsD = '1';
+      M.animate(el, { rotateY: [0, 360] },
+                { duration: 14, repeat: Infinity, ease: 'linear' });
+    });
+
     root.querySelectorAll('.ups-kpi .val, .ups-ring .val b').forEach(function (el) {
       if (once(el)) countUp(el);
     });
@@ -223,7 +376,15 @@ _DRIVER = r"""
     root.querySelectorAll('.ups-kpi').forEach(function (el) {
       if (el.dataset.upsH) return;
       el.dataset.upsH = '1';
-      if (canMove(el)) springy(el, -4);
+      if (canMove(el)) { springy(el, -4); tilt3d(el, 9); }
+    });
+
+    // The verdict and the analysis cards turn under the pointer. Panels are
+    // left alone: a whole panel tilting is seasick, not premium.
+    root.querySelectorAll('.verdict, .card').forEach(function (el) {
+      if (el.dataset.upsH) return;
+      el.dataset.upsH = '1';
+      if (canMove(el)) tilt3d(el, 7);
     });
     root.querySelectorAll('.stButton button, .stDownloadButton button').forEach(function (el) {
       if (el.dataset.upsH) return;