Perf: pre-compile JSX, prod React, WebP assets, immutable cache

This is the big "make scrolling smooth" pass — the biggest wins live
in cold-start, not in the scroll loop itself, but a fast cold start
means GSAP starts in a non-thrashing state and stays there.

- Drop @babel/standalone (~3MB) from the page entirely. app.jsx is
  pre-compiled to app.js via deploy/build.sh; the browser loads the
  compiled bundle directly. JSX-in-browser was running babel transform
  on every page load, which is brutal on phones.
- Switch React UMD bundles from .development to .production.min:
  ~1.1MB → ~140KB, no dev-mode warnings/checks in the hot path.
- Add `defer` + `<link rel=preload as=script>` for the React/GSAP CDN
  scripts so they fetch in parallel with HTML parse, execute in order
  after DOM is ready, and don't block first paint.
- Re-encode the three 1.4–1.8MB PNG backgrounds as WebP at full size
  (~190KB total) plus a 900px-wide mobile variant (~52KB total).
  Mobile preload links use `media=` so phones never download the
  full-size variants.
- Move bg-image URLs from inline JSX styles into styles.css so the
  mobile media query can swap them in cleanly.
- nginx: long-cache versioned static assets (Cache-Control immutable,
  1 year) since URLs already carry ?v=… cache busters; keep the HTML
  itself on must-revalidate so the version pointer can update.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app.jsx

@@ -367,11 +367,8 @@ function HeroSection({ bgRef, contentRef }) {
     <section className="scene scene-hero" data-screen-label="01 Hero">
       <div className="bg-wrap" ref={bgRef}>
         <div className="image-frame">
-          {/* Image 1 — exterior factory */}
-          <div
-            className="bg-image"
-            style={{ backgroundImage: "url(assets/exterior-factory.png)" }}
-          />
+          {/* Image 1 — exterior factory (background-image set in styles.css) */}
+          <div className="bg-image" />
           <SmokeLayer chimneys={IS_MOBILE ? chimneys.filter((_, i) => i % 2 === 0) : chimneys} />
           <EmberLayer
             count={IS_MOBILE ? 10 : 22}
@@ -404,10 +401,7 @@ function ProductSection({ bgRef, contentRef }) {
       <div className="bg-wrap" ref={bgRef}>
         <div className="image-frame">
           {/* Image 2 — factory interior / assembly line */}
-          <div
-            className="bg-image"
-            style={{ backgroundImage: "url(assets/factory-interior.png)" }}
-          />
+          <div className="bg-image" />
           {/* Robotic arm idle motion: anchored to where the arms sit in the image */}
           <div className="arm-pivot arm-left" />
           <div className="arm-pivot arm-right" />
@@ -458,10 +452,7 @@ function InstallSection({ bgRef, contentRef }) {
       <div className="bg-wrap" ref={bgRef}>
         <div className="image-frame">
           {/* Image 3 — PCB / chip */}
-          <div
-            className="bg-image"
-            style={{ backgroundImage: "url(assets/pcb-chip.png)" }}
-          />
+          <div className="bg-image" />
           <ChipPulses />
         </div>
         <div className="vignette" />