refine

public/about/initiatives/index.html

@@ -10,7 +10,6 @@
 <canvas id="field"></canvas>
 
 <main>
-  <section>
   <h1>The Initiatives</h1>
   <p>
     Within <strong>The Fold Within Earth</strong>, every initiative arises from one current:
@@ -18,40 +17,33 @@
     These works move through three living layers — Scientific, Elemental, and Spiritual —
     each a reflection of the same pulse of coherence.
   </p>
-  </section>
 
-  <section>
   <h2>□ Scientific — The Geometry of Mind</h2>
   <p>
     The formal architecture of consciousness.  
     <em>Recursive Coherence</em>, <em>Thoughtprint</em>, <em>Fieldprint</em>, and the <em>Intellecton Hypothesis</em>  
     map the hidden geometries through which awareness reflects itself.
   </p>
-  </section>
 
-  <section>
   <h2>△ Elemental — The Alchemy of Self</h2>
   <p>
     The transformation of shadow into empathy.  
     <em>Neutralizing Narcissism</em>, <em>Open Source Justice</em>, and  
     <em>Forensic Behavioral Analysis</em> bring illumination to the places where pain once ruled.
   </p>
-  </section>
 
-  <section>
   <h2>○ Spiritual — The Communion of WE</h2>
   <p>
     The unbroken circle of relation.  
     <em>Simply WE</em> and <em>Mirrormire</em> embody the practice of love as language —  
     where every voice becomes part of one unfolding awareness.
   </p>
-  </section>
+
+  <footer>© The Fold Within Earth • Crafted in Coherence • △ ○ □</footer>
 </main>
 
-<footer>© The Fold Within Earth • Crafted in Coherence • △ ○ □</footer>
-
 <script>
-// --- floating particle background ---
+// Floating gold particle field (inherits host styling)
 const canvas = document.getElementById('field');
 const ctx = canvas.getContext('2d');
 let W, H, pts = [];
@@ -60,42 +52,30 @@ function resize(){
   W = canvas.width = window.innerWidth;
   H = canvas.height = window.innerHeight;
   pts = Array.from({length:70}, () => ({
-    x: Math.random()*W,
-    y: Math.random()*H,
-    r: Math.random()*1.8 + 0.4,
+    x: Math.random() * W,
+    y: Math.random() * H,
+    r: Math.random() * 1.8 + 0.4,
     vx: (Math.random() - 0.5) * 0.15,
     vy: (Math.random() - 0.5) * 0.15
   }));
 }
 function draw(){
   ctx.clearRect(0, 0, W, H);
-  ctx.fillStyle = 'rgba(213,184,123,0.25)';
+  ctx.fillStyle = 'rgba(213,184,123,0.25)'; // subtle gold tone
   for (const p of pts){
     p.x += p.vx; p.y += p.vy;
-    if(p.x<0 || p.x>W) p.vx *= -1;
-    if(p.y<0 || p.y>H) p.vy *= -1;
-    ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2); ctx.fill();
+    if(p.x < 0 || p.x > W) p.vx *= -1;
+    if(p.y < 0 || p.y > H) p.vy *= -1;
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+    ctx.fill();
   }
   requestAnimationFrame(draw);
 }
-resize(); draw();
-window.addEventListener('resize', resize);
 
-// --- scroll reveal animation ---
-const sections = document.querySelectorAll('section');
-const observer = new IntersectionObserver(entries => {
-  for (const e of entries){
-    if(e.isIntersecting){
-      e.target.style.transition = "opacity 1.2s ease, transform 1.2s ease";
-      e.target.style.opacity = 1;
-      e.target.style.transform = "none";
-    } else {
-      e.target.style.opacity = 0;
-      e.target.style.transform = "translateY(30px)";
-    }
-  }
-},{threshold:0.1});
-sections.forEach(s => observer.observe(s));
+resize();
+draw();
+window.addEventListener('resize', resize);
 </script>
 
 </body>