fix: header of earth story page

Author: lunasrc

docs/country_overview.html

@@ -386,7 +386,10 @@ <h1 style="color: var(--text-mid);">No country selected</h1>
         }
       }
 
-      function animate(ts) {
+      const FRAME_MS = 1000 / 30;
+      let lastFrame = 0;
+
+      function drawFrame(ts) {
         ctx.fillStyle = bgGrad;
         ctx.fillRect(0, 0, w, h);
 
@@ -405,7 +408,13 @@ <h1 style="color: var(--text-mid);">No country selected</h1>
 
         ctx.fillStyle = vigGrad;
         ctx.fillRect(0, 0, w, h);
+      }
 
+      function animate(ts) {
+        if (ts - lastFrame >= FRAME_MS) {
+          lastFrame = ts;
+          drawFrame(ts);
+        }
         animId = requestAnimationFrame(animate);
       }
 

docs/css/style.css

@@ -450,6 +450,15 @@ button {
   white-space: nowrap;
 }
 
+.breadcrumb a {
+  color: rgba(255, 255, 255, 0.6);
+  text-decoration: none;
+}
+
+.breadcrumb a:hover {
+  color: rgba(255, 255, 255, 0.9);
+}
+
 .breadcrumb .sep {
   margin: 0 10px;
   opacity: 0.5;

docs/earth_story.html

@@ -17,11 +17,16 @@
       <a href="curators.html"><span class="brand-earth">Earth</span> Natural Disaster Museum<span class="brand-dim"> · est. 2026</span></a>
     </div>
     <nav class="breadcrumb" id="top-breadcrumb">
-      <a class="crumb crumb-link back-to-globe" href="globe.html">The Globe: Earth</a>
+      <a class="back-to-globe" href="globe.html">The Globe: Earth</a>
       <span class="sep">/</span>
-      <span class="crumb">Earth Story</span>
+      <span>Earth Story</span>
     </nav>
-    <div class="top-bar-action" id="top-bar-action"></div>
+    <a class="pill-btn back-to-globe" href="globe.html">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10 8H2M2 8L6 4M2 8L6 12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      Return to Globe
+    </a>
   </header>
 
   <!-- Sticky 3D globe: stays put while the chapters scroll over it -->

docs/globe.html

@@ -182,7 +182,10 @@ <h2 id="earthStoryCardTitle">Earth Story</h2>
         }
       }
 
-      function animate(ts) {
+      const FRAME_MS = 1000 / 30; /* 30 fps cap */
+      let lastFrame = 0;
+
+      function drawFrame(ts) {
         ctx.fillStyle = '#0C1116';
         ctx.fillRect(0, 0, w, h);
 
@@ -201,7 +204,13 @@ <h2 id="earthStoryCardTitle">Earth Story</h2>
 
         ctx.fillStyle = vigGrad;
         ctx.fillRect(0, 0, w, h);
+      }
 
+      function animate(ts) {
+        if (ts - lastFrame >= FRAME_MS) {
+          lastFrame = ts;
+          drawFrame(ts);
+        }
         animId = requestAnimationFrame(animate);
       }