Add PDF images as section backgrounds and visual breaks

Extracted 25 images from pitch deck PDF. Hero, question, logline,
inspiration, themes, story world, tone, and closing sections now
have cinematic background images. Added field, family dinner, and
mood board as full-bleed image breaks. Comp cards now show movie
posters. Story world section includes Accra motorcycle and
architecture photos.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Dockerfile

@@ -1,4 +1,5 @@
 FROM nginx:alpine
 COPY index.html /usr/share/nginx/html/index.html
+COPY img/ /usr/share/nginx/html/img/
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80

index.html

@@ -129,10 +129,8 @@
             position: absolute;
             inset: 0;
             background:
-                radial-gradient(ellipse at 30% 20%, rgba(206, 17, 38, 0.15) 0%, transparent 60%),
-                radial-gradient(ellipse at 70% 80%, rgba(0, 107, 63, 0.1) 0%, transparent 50%),
-                radial-gradient(ellipse at 50% 50%, rgba(252, 209, 22, 0.05) 0%, transparent 70%),
-                var(--midnight);
+                linear-gradient(180deg, rgba(10,10,15,0.4) 0%, rgba(10,10,15,0.2) 40%, rgba(10,10,15,0.7) 100%),
+                url('img/hero.jpg') center center / cover no-repeat;
         }
 
         #hero-canvas {
@@ -242,6 +240,35 @@
             margin-bottom: 2rem;
         }
 
+        /* ═══════ CINEMATIC IMAGE BREAK ═══════ */
+        .img-break {
+            max-width: 100%;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .img-break img {
+            width: 100%;
+            height: auto;
+            display: block;
+            opacity: 0.85;
+        }
+
+        .img-break.parallax {
+            height: 60vh;
+            min-height: 400px;
+        }
+
+        .img-break.parallax img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
+            height: 120%;
+            object-fit: cover;
+        }
+
         /* ═══════ QUESTION ═══════ */
         .question-section {
             position: relative;
@@ -249,8 +276,8 @@
             text-align: center;
             max-width: 100%;
             background:
-                radial-gradient(ellipse at center, rgba(0, 107, 63, 0.08) 0%, transparent 70%),
-                var(--midnight);
+                linear-gradient(180deg, rgba(10,10,15,0.5) 0%, rgba(10,10,15,0.3) 50%, rgba(10,10,15,0.6) 100%),
+                url('img/ivy-wall.jpg') center center / cover no-repeat;
         }
 
         .question-section .question {
@@ -269,7 +296,9 @@
             position: relative;
             max-width: 100%;
             padding: 6rem 2rem;
-            background: linear-gradient(180deg, var(--deep-red) 0%, var(--midnight) 100%);
+            background:
+                linear-gradient(180deg, rgba(139,0,0,0.85) 0%, rgba(10,10,15,0.9) 100%),
+                url('img/chaos.jpg') center center / cover no-repeat;
         }
 
         .logline-inner {
@@ -324,8 +353,8 @@
         /* ═══════ INSPIRATION ═══════ */
         .inspiration-section {
             background:
-                linear-gradient(180deg, var(--midnight) 0%, rgba(13, 13, 20, 0.95) 30%, var(--midnight) 100%),
-                radial-gradient(ellipse at 50% 0%, rgba(206, 17, 38, 0.06) 0%, transparent 60%);
+                linear-gradient(180deg, rgba(10,10,15,0.92) 0%, rgba(13,13,20,0.88) 50%, rgba(10,10,15,0.95) 100%),
+                url('img/corridor.jpg') center center / cover no-repeat;
         }
 
         .inspiration-text {
@@ -343,8 +372,8 @@
         /* ═══════ THEMES ═══════ */
         .themes-section {
             background:
-                radial-gradient(ellipse at 20% 50%, rgba(252, 209, 22, 0.05) 0%, transparent 50%),
-                var(--midnight);
+                linear-gradient(180deg, rgba(10,10,15,0.88) 0%, rgba(10,10,15,0.82) 50%, rgba(10,10,15,0.92) 100%),
+                url('img/golden-silhouette.jpg') center center / cover no-repeat;
         }
 
         .themes-text {
@@ -373,9 +402,28 @@
         /* ═══════ STORY WORLD ═══════ */
         .world-section {
             background:
-                radial-gradient(ellipse at 70% 30%, rgba(0, 107, 63, 0.08) 0%, transparent 50%),
-                radial-gradient(ellipse at 30% 70%, rgba(160, 82, 45, 0.08) 0%, transparent 50%),
-                var(--midnight);
+                linear-gradient(180deg, rgba(10,10,15,0.85) 0%, rgba(10,10,15,0.8) 50%, rgba(10,10,15,0.9) 100%),
+                url('img/space.jpg') center center / cover no-repeat;
+        }
+
+        .world-images {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1.5rem;
+            margin-top: 3rem;
+        }
+
+        .world-images img {
+            width: 100%;
+            height: 280px;
+            object-fit: cover;
+            opacity: 0.9;
+        }
+
+        @media (max-width: 768px) {
+            .world-images {
+                grid-template-columns: 1fr;
+            }
         }
 
         .world-text {
@@ -407,7 +455,9 @@
 
         /* ═══════ TONE ═══════ */
         .tone-section {
-            background: var(--midnight);
+            background:
+                linear-gradient(180deg, rgba(10,10,15,0.9) 0%, rgba(10,10,15,0.85) 50%, rgba(10,10,15,0.92) 100%),
+                url('img/tunnel.jpg') center center / cover no-repeat;
         }
 
         .tone-text {
@@ -431,16 +481,27 @@
 
         .comp-card {
             text-align: center;
-            padding: 2rem 1.5rem;
             background: var(--card-bg);
             border: 1px solid rgba(255,255,255,0.06);
             transition: border-color 0.3s;
+            overflow: hidden;
         }
 
         .comp-card:hover {
             border-color: rgba(252, 209, 22, 0.2);
         }
 
+        .comp-card img {
+            width: 100%;
+            height: 320px;
+            object-fit: cover;
+            object-position: top;
+        }
+
+        .comp-card-text {
+            padding: 1.2rem 1.5rem;
+        }
+
         .comp-title {
             font-family: 'Bebas Neue', sans-serif;
             font-size: 1.5rem;
@@ -525,8 +586,8 @@
             padding: 10rem 2rem;
             text-align: center;
             background:
-                radial-gradient(ellipse at 50% 50%, rgba(206, 17, 38, 0.1) 0%, transparent 60%),
-                var(--midnight);
+                linear-gradient(180deg, rgba(10,10,15,0.6) 0%, rgba(10,10,15,0.4) 50%, rgba(10,10,15,0.7) 100%),
+                url('img/purple-mood.jpg') center center / cover no-repeat;
         }
 
         .closing-question {
@@ -678,6 +739,11 @@
     </div>
 </section>
 
+<!-- FIELD IMAGE -->
+<div class="img-break">
+    <img src="img/field.jpg" alt="Girl standing in a field of yellow flowers" loading="lazy">
+</div>
+
 <!-- QUESTION -->
 <div class="question-section" id="question">
     <p class="question reveal">What if the fate of humanity rested on a lottery?</p>
@@ -691,7 +757,10 @@
     </div>
 </div>
 
-<div class="divider"></div>
+<!-- FAMILY DINNER IMAGE -->
+<div class="img-break">
+    <img src="img/family-dinner.jpg" alt="Family gathered around dinner table" loading="lazy">
+</div>
 
 <!-- SYNOPSIS -->
 <section class="synopsis-section" id="synopsis">
@@ -722,7 +791,10 @@
     </div>
 </section>
 
-<div class="divider"></div>
+<!-- MOOD BOARD IMAGE -->
+<div class="img-break">
+    <img src="img/mood-board.jpg" alt="Visual mood board — architecture and community in Ghana" loading="lazy">
+</div>
 
 <!-- INSPIRATION -->
 <div class="full-bleed inspiration-section" id="inspiration">
@@ -797,6 +869,10 @@
             <span class="p-green"></span>
             <span class="p-gold"></span>
         </div>
+        <div class="world-images reveal">
+            <img src="img/accra-motorcycle.jpg" alt="Woman on motorcycle riding through Accra" loading="lazy">
+            <img src="img/architecture-warm.jpg" alt="Warm architectural interior in Ghana" loading="lazy">
+        </div>
     </div>
 </div>
 
@@ -817,20 +893,29 @@
         </div>
         <div class="comps-grid reveal">
             <div class="comp-card">
+                <img src="img/comp-district9.jpg" alt="District 9 poster" loading="lazy">
+                <div class="comp-card-text">
                     <h3 class="comp-title">District 9</h3>
                     <p class="comp-detail">Social commentary through sci-fi allegory set in Africa</p>
                 </div>
+            </div>
             <div class="comp-card">
+                <img src="img/comp-arrival.jpg" alt="Arrival poster" loading="lazy">
+                <div class="comp-card-text">
                     <h3 class="comp-title">Arrival</h3>
                     <p class="comp-detail">Cerebral sci-fi driven by emotional truth and communication</p>
                 </div>
+            </div>
             <div class="comp-card">
+                <img src="img/comp-children-of-men.jpg" alt="Children of Men poster" loading="lazy">
+                <div class="comp-card-text">
                     <h3 class="comp-title">Children of Men</h3>
                     <p class="comp-detail">Gritty immediacy in a collapsing world, hope against despair</p>
                 </div>
             </div>
         </div>
     </div>
+</div>
 
 <div class="divider"></div>