fix: add 60vh PCB spacers between sections for board visibility

- 6x pcb-spacer (60vh transparent) between each content section
- Allows the PCB 3D model to be visible during scroll transitions
- Camera zooms on components during spacer gaps

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

src/components/WebGLBackground.tsx

@@ -37,9 +37,9 @@ function RealPCB() {
   return (
     <primitive
       object={glb.scene.clone()}
-      scale={8}
+      scale={120}
       rotation={[-Math.PI / 2, 0, 0]}
-      position={[0, 0.1, 0]}
+      position={[0, 0, 0]}
     />
   );
 }
@@ -52,9 +52,9 @@ function SwitchBoard() {
   return (
     <primitive
       object={glb.scene.clone()}
-      scale={8}
+      scale={120}
       rotation={[-Math.PI / 2, 0, 0]}
-      position={[8, 0.1, 3]}
+      position={[12, 0, 5]}
     />
   );
 }

src/pages/preview.astro

@@ -42,6 +42,8 @@ const headerItems = [
       </div>
     </section>
 
+    <div class="pcb-spacer" aria-hidden="true"></div>
+
     <!-- ABOUT -->
     <section class="section-dark webgl-section" id="a-propos">
       <div class="section-content webgl-card" style="--card-accent: #5bd1d8">
@@ -49,6 +51,8 @@ const headerItems = [
       </div>
     </section>
 
+    <div class="pcb-spacer" aria-hidden="true"></div>
+
     <!-- CASE STUDIES -->
     <section class="section-dark webgl-section">
       <div class="section-content webgl-card" style="--card-accent: #f1c27a">
@@ -56,6 +60,8 @@ const headerItems = [
       </div>
     </section>
 
+    <div class="pcb-spacer" aria-hidden="true"></div>
+
     <!-- PHOTO CAROUSEL (atomic orbit) -->
     <section class="section-dark webgl-section atomic-carousel" aria-label="Photos de terrain">
       <div class="section-content">
@@ -116,6 +122,8 @@ const headerItems = [
       <div class="atomic-carousel-track" id="video-track"></div>
     </section>
 
+    <div class="pcb-spacer" aria-hidden="true"></div>
+
     <!-- SPRINTS -->
     <section class="section-dark webgl-section" id="graphic-sprints-title">
       <div class="section-content webgl-card" style="--card-accent: #b6d18f">
@@ -123,6 +131,8 @@ const headerItems = [
       </div>
     </section>
 
+    <div class="pcb-spacer" aria-hidden="true"></div>
+
     <!-- FAQ -->
     <section class="section-dark webgl-section" id="faq">
       <div class="section-content webgl-card" style="--card-accent: #5bd1d8">
@@ -327,6 +337,12 @@ const headerItems = [
     color: #5bd1d8 !important;
   }
 
+  /* ============ PCB SPACER ============ */
+  .pcb-spacer {
+    height: 60vh;
+    pointer-events: none;
+  }
+
   /* ============ CONTACT 3D POPUP ============ */
   .contact-3d-popup {
     position: fixed;