Merge origin/main into feature branch

Resolve conflicts: keep direct <a> links from main, preserve
lowercase "Apply to join" text and Sponsor button removal from
our branch.

Made-with: Cursor

Author: sanatcodes

App.tsx

@@ -1,15 +1,14 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import Navigation from "./components/Navigation";
 import Hero from "./components/Hero";
 import CinematicTransition from "./components/CinematicTransition";
 import EventContent from "./components/EventContent";
+import CollisionSection from "./components/CollisionSection";
 import EventPage from "./pages/EventPage";
-import LumaModal from "./components/LumaModal";
 import gsap from "gsap";
 
 const App: React.FC = () => {
   const markerRefs = useRef<Array<HTMLDivElement | null>>([]);
-  const [lumaOpen, setLumaOpen] = useState(false);
   const isEventPage = window.location.pathname === "/event";
 
   useEffect(() => {
@@ -66,6 +65,8 @@ const App: React.FC = () => {
           backgroundSize: "200px",
           pointerEvents: "none",
           zIndex: 9999,
+          willChange: "transform",
+          contain: "strict",
         }}
       />
       {/* Global vignette */}
@@ -77,6 +78,8 @@ const App: React.FC = () => {
             "radial-gradient(ellipse 85% 85% at center, transparent 45%, rgba(5,5,5,0.55) 100%)",
           pointerEvents: "none",
           zIndex: 100,
+          willChange: "transform",
+          contain: "strict",
         }}
       />
       {/* Cinematic registration corner marks */}
@@ -119,17 +122,111 @@ const App: React.FC = () => {
             height: 32,
             pointerEvents: "none",
             zIndex: 9998,
+            willChange: "transform",
             ...style,
           }}
         />
       ))}
-      <Navigation onOpenWaitlist={() => setLumaOpen(true)} />
+      <Navigation />
       <main>
         <Hero onApply={() => setLumaOpen(true)} />
         <CinematicTransition />
-        <EventContent onOpenLuma={() => setLumaOpen(true)} />
+        <EventContent />
+        <CollisionSection />
       </main>
-      <LumaModal isOpen={lumaOpen} onClose={() => setLumaOpen(false)} />
+      <footer
+        style={{
+          position: "relative",
+          padding: "3.5rem 2rem 2.5rem",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center",
+          gap: "1rem",
+          background: "#050505",
+          borderTop: "1px solid rgba(198,153,58,0.12)",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: "'IBM Plex Mono', monospace",
+            fontSize: "0.65rem",
+            color: "rgba(198,153,58,0.4)",
+            letterSpacing: "0.25em",
+            textTransform: "uppercase",
+            marginBottom: "-0.25rem",
+          }}
+        >
+          Presented by
+        </div>
+        <div
+          style={{
+            fontFamily: "'IBM Plex Serif', serif",
+            fontSize: "1.35rem",
+            fontWeight: 600,
+            color: "rgba(224,213,192,0.85)",
+            letterSpacing: "0.02em",
+          }}
+        >
+          <a
+            href="https://giveago.co"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              color: "inherit",
+              textDecoration: "none",
+              transition: "color 0.2s ease",
+            }}
+            onMouseEnter={(e) => {
+              (e.currentTarget as HTMLElement).style.color = "rgba(198,153,58,1)";
+            }}
+            onMouseLeave={(e) => {
+              (e.currentTarget as HTMLElement).style.color = "rgba(224,213,192,0.85)";
+            }}
+          >
+            Give(a)Go
+          </a>
+          <span style={{ color: "rgba(198,153,58,0.35)", margin: "0 0.4em" }}>
+            ×
+          </span>
+          <a
+            href="https://napkin.io"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              color: "inherit",
+              textDecoration: "none",
+              transition: "color 0.2s ease",
+            }}
+            onMouseEnter={(e) => {
+              (e.currentTarget as HTMLElement).style.color = "rgba(198,153,58,1)";
+            }}
+            onMouseLeave={(e) => {
+              (e.currentTarget as HTMLElement).style.color = "rgba(224,213,192,0.85)";
+            }}
+          >
+            Napkin
+          </a>
+        </div>
+        <div
+          style={{
+            width: 40,
+            height: 1,
+            background: "linear-gradient(90deg, transparent, rgba(198,153,58,0.2), transparent)",
+            margin: "0.5rem 0",
+          }}
+        />
+        <div
+          style={{
+            fontFamily: "'IBM Plex Mono', monospace",
+            fontSize: "0.5rem",
+            color: "rgba(198,153,58,0.18)",
+            letterSpacing: "0.15em",
+          }}
+        >
+          &copy; {new Date().getFullYear()} Give(a)Go
+        </div>
+      </footer>
     </div>
   );
 };

components/CinematicTransition.tsx

@@ -149,25 +149,35 @@ const CinematicTransition: React.FC = () => {
       return { dx, dy, dist };
     };
 
+    let cachedVh = window.innerHeight;
+    let cachedVw = window.innerWidth;
+    const onResizeCt = () => { cachedVh = window.innerHeight; cachedVw = window.innerWidth; };
+    window.addEventListener("resize", onResizeCt);
+
     const tick = () => {
       raf = requestAnimationFrame(tick);
-      const vh = window.innerHeight;
-      const vw = window.innerWidth;
+      const vh = cachedVh;
+      const vw = cachedVw;
       const isMobile = vw <= 768;
       const sectionRect = sectionRef.current?.getBoundingClientRect();
+
+      // Skip all work if section is far from viewport
+      if (sectionRect && (sectionRect.bottom < -vh || sectionRect.top > vh * 3)) {
+        if (rootRef.current && rootRef.current.style.opacity !== "0") {
+          rootRef.current.style.opacity = "0";
+        }
+        return;
+      }
+
       const PRE_ENTRY_VH = 1.32;
       const entryStart = vh * PRE_ENTRY_VH;
-      // End timeline when next content is about to enter viewport
-      // (i.e. when this section has only 1 viewport height remaining).
       const activeScrollRange = sectionRect
         ? Math.max(1, sectionRect.height - vh)
         : 1;
       const totalRange = entryStart + activeScrollRange;
       const p = sectionRect
         ? clamp((entryStart - sectionRect.top) / totalRange, 0, 1)
         : 0;
-      // Pre-roll the cinematic timeline so clapboard is already entering
-      // as soon as users scroll into this section (avoids initial dead-black beat).
       const TIMELINE_DELAY = 0.02;
       const timelineP = clamp((p - TIMELINE_DELAY) / (1 - TIMELINE_DELAY), 0, 1);
       const endFade = 1 - phase(p, 0.88, 1.0);
@@ -405,6 +415,7 @@ const CinematicTransition: React.FC = () => {
     raf = requestAnimationFrame(tick);
     return () => {
       cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onResizeCt);
       void clapAudioCtxRef.current?.close();
       clapAudioCtxRef.current = null;
     };