refactor: restore project from v6 to v10

Update project files and assets to match v6 state.

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>

app/globals.css

@@ -4,109 +4,65 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  /* Earthy warm cream background */
+  /* Deep space cosmic color palette */
-  --background: oklch(0.95 0.02 70);
+  --background: oklch(0.12 0.03 270);
-  --foreground: oklch(0.25 0.03 60);
+  --foreground: oklch(0.95 0.02 180);
 
-  /* Card colors - slightly lighter cream */
+  --card: oklch(0.18 0.04 260);
-  --card: oklch(0.98 0.015 70);
+  --card-foreground: oklch(0.95 0.02 180);
-  --card-foreground: oklch(0.25 0.03 60);
 
-  /* Popover */
+  --popover: oklch(0.18 0.04 260);
-  --popover: oklch(0.98 0.015 70);
+  --popover-foreground: oklch(0.95 0.02 180);
-  --popover-foreground: oklch(0.25 0.03 60);
 
-  /* Deep forest green as primary */
+  /* Vibrant cyan-blue for space-time portals */
-  --primary: oklch(0.35 0.08 155);
+  --primary: oklch(0.65 0.25 240);
-  --primary-foreground: oklch(0.98 0.015 70);
+  --primary-foreground: oklch(0.98 0.01 180);
 
-  /* Soft sage secondary */
+  /* Purple-pink for dimensional shifts */
-  --secondary: oklch(0.75 0.05 130);
+  --secondary: oklch(0.55 0.22 310);
-  --secondary-foreground: oklch(0.25 0.03 60);
+  --secondary-foreground: oklch(0.98 0.01 180);
 
-  /* Muted earth tones */
+  --muted: oklch(0.25 0.04 270);
-  --muted: oklch(0.88 0.02 70);
+  --muted-foreground: oklch(0.65 0.02 180);
-  --muted-foreground: oklch(0.5 0.02 60);
 
-  /* Warm terracotta accent */
+  /* Electric magenta accent for singularities */
-  --accent: oklch(0.65 0.15 35);
+  --accent: oklch(0.7 0.28 330);
-  --accent-foreground: oklch(0.98 0.015 70);
+  --accent-foreground: oklch(0.98 0.01 180);
 
-  --destructive: oklch(0.55 0.2 25);
+  --destructive: oklch(0.55 0.25 25);
-  --destructive-foreground: oklch(0.98 0.015 70);
+  --destructive-foreground: oklch(0.98 0.01 180);
 
-  --border: oklch(0.85 0.02 70);
+  --border: oklch(0.35 0.05 260);
-  --input: oklch(0.85 0.02 70);
+  --input: oklch(0.25 0.04 270);
-  --ring: oklch(0.35 0.08 155);
+  --ring: oklch(0.65 0.25 240);
 
-  /* Chart colors - earthy palette */
+  /* Chart colors - cosmic palette */
-  --chart-1: oklch(0.5 0.12 155);
+  --chart-1: oklch(0.65 0.25 240);
-  --chart-2: oklch(0.65 0.15 35);
+  --chart-2: oklch(0.7 0.28 330);
-  --chart-3: oklch(0.6 0.1 120);
+  --chart-3: oklch(0.6 0.22 280);
-  --chart-4: oklch(0.55 0.12 80);
+  --chart-4: oklch(0.7 0.2 200);
-  --chart-5: oklch(0.45 0.1 180);
+  --chart-5: oklch(0.65 0.24 350);
 
-  --radius: 0.5rem;
+  --radius: 1rem;
 
   /* Sidebar */
-  --sidebar: oklch(0.98 0.015 70);
+  --sidebar: oklch(0.18 0.04 260);
-  --sidebar-foreground: oklch(0.25 0.03 60);
+  --sidebar-foreground: oklch(0.95 0.02 180);
-  --sidebar-primary: oklch(0.35 0.08 155);
+  --sidebar-primary: oklch(0.65 0.25 240);
-  --sidebar-primary-foreground: oklch(0.98 0.015 70);
+  --sidebar-primary-foreground: oklch(0.98 0.01 180);
-  --sidebar-accent: oklch(0.88 0.02 70);
+  --sidebar-accent: oklch(0.25 0.04 270);
-  --sidebar-accent-foreground: oklch(0.25 0.03 60);
+  --sidebar-accent-foreground: oklch(0.95 0.02 180);
-  --sidebar-border: oklch(0.85 0.02 70);
+  --sidebar-border: oklch(0.35 0.05 260);
-  --sidebar-ring: oklch(0.35 0.08 155);
+  --sidebar-ring: oklch(0.65 0.25 240);
 }
 
 .dark {
-  /* Deep night background */
+  /* Already dark - enhanced with more vibrant accents */
-  --background: oklch(0.18 0.02 240);
+  --background: oklch(0.08 0.04 270);
-  --foreground: oklch(0.95 0.015 70);
+  --foreground: oklch(0.98 0.01 180);
 
-  --card: oklch(0.22 0.02 240);
+  --primary: oklch(0.7 0.28 240);
-  --card-foreground: oklch(0.95 0.015 70);
+  --accent: oklch(0.75 0.3 330);
-
-  --popover: oklch(0.22 0.02 240);
-  --popover-foreground: oklch(0.95 0.015 70);
-
-  /* Lighter forest green for dark mode */
-  --primary: oklch(0.6 0.12 155);
-  --primary-foreground: oklch(0.18 0.02 240);
-
-  --secondary: oklch(0.35 0.04 155);
-  --secondary-foreground: oklch(0.95 0.015 70);
-
-  --muted: oklch(0.28 0.02 240);
-  --muted-foreground: oklch(0.65 0.02 70);
-
-  /* Warm glow accent */
-  --accent: oklch(0.7 0.15 45);
-  --accent-foreground: oklch(0.18 0.02 240);
-
-  --destructive: oklch(0.6 0.22 25);
-  --destructive-foreground: oklch(0.95 0.015 70);
-
-  --border: oklch(0.32 0.02 240);
-  --input: oklch(0.32 0.02 240);
-  --ring: oklch(0.6 0.12 155);
-
-  /* Chart colors - dark mode */
-  --chart-1: oklch(0.6 0.15 155);
-  --chart-2: oklch(0.7 0.18 40);
-  --chart-3: oklch(0.65 0.12 130);
-  --chart-4: oklch(0.62 0.14 90);
-  --chart-5: oklch(0.55 0.12 190);
-
-  /* Sidebar dark */
-  --sidebar: oklch(0.22 0.02 240);
-  --sidebar-foreground: oklch(0.95 0.015 70);
-  --sidebar-primary: oklch(0.6 0.12 155);
-  --sidebar-primary-foreground: oklch(0.18 0.02 240);
-  --sidebar-accent: oklch(0.28 0.02 240);
-  --sidebar-accent-foreground: oklch(0.95 0.015 70);
-  --sidebar-border: oklch(0.32 0.02 240);
-  --sidebar-ring: oklch(0.6 0.12 155);
 }
 
 @theme inline {
@@ -156,6 +112,8 @@
   }
   body {
     @apply bg-background text-foreground;
+    /* Add cursor for space-time distortion tracking */
+    cursor: none;
   }
 
   h1,
@@ -171,3 +129,56 @@
     @apply text-pretty;
   }
 }
+
+/* Space-time warp animations */
+@keyframes warp-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.4;
+  }
+}
+
+@keyframes rotate-3d {
+  0% {
+    transform: rotateX(0deg) rotateY(0deg);
+  }
+  100% {
+    transform: rotateX(360deg) rotateY(360deg);
+  }
+}
+
+@keyframes float-drift {
+  0%,
+  100% {
+    transform: translateY(0px) translateX(0px);
+  }
+  25% {
+    transform: translateY(-20px) translateX(10px);
+  }
+  50% {
+    transform: translateY(0px) translateX(20px);
+  }
+  75% {
+    transform: translateY(20px) translateX(10px);
+  }
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+.warp-element {
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}

app/page.tsx

@@ -6,18 +6,25 @@ import { IndigenousWisdomSection } from "@/components/indigenous-wisdom-section"
 import { CalendarTranslator } from "@/components/calendar-translator"
 import { AlternativeTimekeeping } from "@/components/alternative-timekeeping"
 import { Footer } from "@/components/footer"
+import { SpaceTimeBackground } from "@/components/space-time-background"
+import { CursorWarp } from "@/components/cursor-warp"
 
 export default function Page() {
   return (
-    <main className="min-h-screen">
+    <main className="min-h-screen relative">
-      <Navigation />
+      <SpaceTimeBackground />
-      <Hero />
+      <CursorWarp />
-      <TimeSystemsSection />
+
-      <KairosChronosSection />
+      <div className="relative z-10">
-      <IndigenousWisdomSection />
+        <Navigation />
-      <CalendarTranslator />
+        <Hero />
-      <AlternativeTimekeeping />
+        <TimeSystemsSection />
-      <Footer />
+        <KairosChronosSection />
+        <IndigenousWisdomSection />
+        <CalendarTranslator />
+        <AlternativeTimekeeping />
+        <Footer />
+      </div>
     </main>
   )
 }

components/alternative-timekeeping.tsx

@@ -1,7 +1,33 @@
+"use client"
+
 import { Card } from "@/components/ui/card"
 import { Sunrise, Wind, Leaf, Waves } from "lucide-react"
+import { useRef, useEffect } from "react"
 
 export function AlternativeTimekeeping() {
+  const methodRefs = useRef<(HTMLDivElement | null)[]>([])
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry, index) => {
+          if (entry.isIntersecting) {
+            setTimeout(() => {
+              entry.target.classList.add("animate-fade-in")
+            }, index * 150)
+          }
+        })
+      },
+      { threshold: 0.1 },
+    )
+
+    methodRefs.current.forEach((ref) => {
+      if (ref) observer.observe(ref)
+    })
+
+    return () => observer.disconnect()
+  }, [])
+
   const methods = [
     {
       icon: Sunrise,
@@ -51,9 +77,24 @@ export function AlternativeTimekeeping() {
   ]
 
   return (
-    <section id="alternatives" className="py-20 lg:py-32">
+    <section id="alternatives" className="py-20 lg:py-32 relative overflow-hidden">
-      <div className="container px-4 lg:px-8">
+      <div className="absolute inset-0 pointer-events-none opacity-5">
-        <div className="max-w-3xl mx-auto text-center mb-16">
+        <svg className="w-full h-full" viewBox="0 0 1000 1000" preserveAspectRatio="none">
+          <path
+            d="M0,500 Q250,400 500,500 T1000,500 L1000,1000 L0,1000 Z"
+            fill="currentColor"
+            className="text-primary"
+          />
+          <path
+            d="M0,600 Q250,500 500,600 T1000,600 L1000,1000 L0,1000 Z"
+            fill="currentColor"
+            className="text-accent"
+          />
+        </svg>
+      </div>
+
+      <div className="container px-4 lg:px-8 relative z-10">
+        <div className="max-w-3xl mx-auto text-center mb-16 warp-element">
           <h2 className="font-serif text-4xl lg:text-5xl font-bold mb-6 text-foreground">
             Natural Time-Keeping Methods
           </h2>
@@ -66,9 +107,13 @@ export function AlternativeTimekeeping() {
           {methods.map((method, index) => {
             const Icon = method.icon
             return (
-              <Card key={index} className="p-8">
+              <Card
+                key={index}
+                ref={(el) => (methodRefs.current[index] = el)}
+                className="p-8 opacity-0 warp-element hover:shadow-xl hover:shadow-primary/20 transition-all duration-300 border-primary/10"
+              >
                 <div className="flex items-start gap-4 mb-6">
-                  <div className="p-3 rounded-lg bg-primary/10 shrink-0">
+                  <div className="p-3 rounded-lg bg-gradient-to-br from-primary/10 to-accent/10 shrink-0">
                     <Icon className="h-7 w-7 text-primary" />
                   </div>
                   <div>
@@ -89,7 +134,7 @@ export function AlternativeTimekeeping() {
           })}
         </div>
 
-        <Card className="p-8 lg:p-12 bg-gradient-to-br from-primary/10 to-accent/10 max-w-4xl mx-auto">
+        <Card className="p-8 lg:p-12 bg-gradient-to-br from-primary/10 via-card to-accent/10 max-w-4xl mx-auto warp-element hover:shadow-2xl hover:shadow-primary/30 transition-all duration-500 border-2 border-primary/20">
           <h3 className="font-serif text-3xl font-bold mb-6 text-center text-foreground">
             The Future: Less Clock, More Life
           </h3>
@@ -104,7 +149,7 @@ export function AlternativeTimekeeping() {
               of years. Modern neuroscience confirms what they always knew: our bodies thrive on natural rhythms, not
               rigid schedules.
             </p>
-            <p className="text-lg font-semibold text-primary">
+            <p className="text-lg font-semibold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
               The path forward isn't to reject all structure, but to choose structure that serves life rather than
               productivity. To use less Chronos and more Kairos. To decolonize time itself.
             </p>

components/calendar-translator.tsx

@@ -86,16 +86,20 @@ export function CalendarTranslator() {
   }
 
   return (
-    <section id="translator" className="py-20 lg:py-32 bg-muted/30">
+    <section id="translator" className="py-20 lg:py-32 bg-muted/30 relative overflow-hidden">
-      <div className="container px-4 lg:px-8">
+      <div className="absolute inset-0 pointer-events-none opacity-20">
-        <div className="max-w-3xl mx-auto text-center mb-12">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-radial from-primary/30 via-accent/20 to-transparent rounded-full blur-3xl animate-[warp-pulse_4s_ease-in-out_infinite]" />
+      </div>
+
+      <div className="container px-4 lg:px-8 relative z-10">
+        <div className="max-w-3xl mx-auto text-center mb-12 warp-element">
           <h2 className="font-serif text-4xl lg:text-5xl font-bold mb-6 text-foreground">Calendar Translator</h2>
           <p className="text-lg text-muted-foreground leading-relaxed">
             Convert any Gregorian calendar date to the 13-moon lunar calendar.
           </p>
         </div>
 
-        <Card className="max-w-2xl mx-auto p-8 lg:p-12">
+        <Card className="max-w-2xl mx-auto p-8 lg:p-12 warp-element hover:shadow-2xl hover:shadow-primary/30 transition-all duration-500 border-2 border-primary/20 bg-gradient-to-br from-card via-primary/5 to-card">
           <div className="space-y-6">
             <div className="space-y-2">
               <Label htmlFor="gregorian-date" className="text-base">
@@ -109,7 +113,7 @@ export function CalendarTranslator() {
                   onChange={(e) => setGregorianDate(e.target.value)}
                   className="flex-1"
                 />
-                <Button onClick={handleTodayClick} variant="outline">
+                <Button onClick={handleTodayClick} variant="outline" className="warp-element bg-transparent">
                   Today
                 </Button>
               </div>
@@ -117,7 +121,7 @@ export function CalendarTranslator() {
 
             <Button
               onClick={handleConvert}
-              className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
+              className="w-full bg-gradient-to-r from-primary to-accent hover:shadow-lg hover:shadow-primary/50 transition-all warp-element"
               size="lg"
               disabled={!gregorianDate}
             >
@@ -127,13 +131,15 @@ export function CalendarTranslator() {
             {lunarDate && (
               <div className="pt-6 border-t border-border">
                 <div className="flex items-center justify-center gap-3 mb-6">
-                  <Moon className="h-8 w-8 text-primary" />
+                  <Moon className="h-8 w-8 text-primary animate-pulse" />
                   <h3 className="font-serif text-2xl font-bold text-foreground">13-Moon Date</h3>
                 </div>
 
                 {lunarDate.moonName === "Day Out of Time" ? (
-                  <div className="text-center space-y-4 p-8 bg-accent/10 rounded-lg">
+                  <div className="text-center space-y-4 p-8 bg-gradient-to-br from-accent/20 to-primary/20 rounded-lg border-2 border-accent/30 warp-element">
-                    <p className="text-3xl font-bold text-accent">Day Out of Time</p>
+                    <p className="text-3xl font-bold bg-gradient-to-r from-accent to-primary bg-clip-text text-transparent">
+                      Day Out of Time
+                    </p>
                     <p className="text-foreground/80">
                       A day for forgiveness, celebration, and preparation for the new year. This day (July 25) exists
                       outside the normal calendar cycle.
@@ -141,13 +147,13 @@ export function CalendarTranslator() {
                   </div>
                 ) : (
                   <div className="grid sm:grid-cols-2 gap-6">
-                    <div className="space-y-2 p-6 bg-primary/5 rounded-lg">
+                    <div className="space-y-2 p-6 bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg warp-element hover:shadow-lg hover:shadow-primary/20 transition-all">
                       <p className="text-sm text-muted-foreground uppercase tracking-wide">Moon</p>
                       <p className="text-3xl font-bold text-primary">{lunarDate.moon}</p>
                       <p className="text-lg text-foreground font-serif">{lunarDate.moonName}</p>
                     </div>
 
-                    <div className="space-y-2 p-6 bg-secondary/20 rounded-lg">
+                    <div className="space-y-2 p-6 bg-gradient-to-br from-secondary/20 to-accent/10 rounded-lg warp-element hover:shadow-lg hover:shadow-accent/20 transition-all">
                       <p className="text-sm text-muted-foreground uppercase tracking-wide">Day</p>
                       <p className="text-3xl font-bold text-primary">{lunarDate.day}</p>
                       <p className="text-lg text-foreground font-serif">{lunarDate.dayOfWeek}</p>

components/cursor-warp.tsx

@@ -0,0 +1,142 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+
+export function CursorWarp() {
+  const cursorRef = useRef<HTMLDivElement>(null)
+  const trailRef = useRef<HTMLDivElement>(null)
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
+  const [isMoving, setIsMoving] = useState(false)
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout
+
+    const handleMouseMove = (e: MouseEvent) => {
+      setMousePos({ x: e.clientX, y: e.clientY })
+      setIsMoving(true)
+
+      const elements = document.querySelectorAll(".warp-element")
+      elements.forEach((el) => {
+        const rect = el.getBoundingClientRect()
+        const centerX = rect.left + rect.width / 2
+        const centerY = rect.top + rect.height / 2
+
+        const dx = e.clientX - centerX
+        const dy = e.clientY - centerY
+        const distance = Math.sqrt(dx * dx + dy * dy)
+
+        // Black hole effect with stronger pull and rotation
+        if (distance < 300) {
+          const strength = Math.pow((300 - distance) / 300, 2) // Quadratic falloff for stronger pull
+
+          // Pull toward cursor (negative direction)
+          const pullX = -(dx / distance) * strength * 40
+          const pullY = -(dy / distance) * strength * 40
+
+          // Calculate angle for rotation around cursor
+          const angle = Math.atan2(dy, dx)
+          const rotationStrength = strength * 15 // Degrees of twist
+
+          // Perpendicular vector for tangential twist
+          const twistX = -Math.sin(angle) * strength * 15
+          const twistY = Math.cos(angle) * strength * 15
+
+          // Combine pull + twist + rotation
+          const totalX = pullX + twistX
+          const totalY = pullY + twistY
+
+          // Scale down as it gets pulled in (singularity effect)
+          const scale = 1 - strength * 0.3
+          ;(el as HTMLElement).style.transform =
+            `translate(${totalX}px, ${totalY}px) scale(${scale}) rotate(${rotationStrength}deg)`
+          ;(el as HTMLElement).style.filter = `blur(${strength * 2}px) brightness(${1 - strength * 0.3})`
+        } else {
+          ;(el as HTMLElement).style.transform = ""
+          ;(el as HTMLElement).style.filter = ""
+        }
+      })
+
+      clearTimeout(timeout)
+      timeout = setTimeout(() => setIsMoving(false), 100)
+    }
+
+    window.addEventListener("mousemove", handleMouseMove)
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove)
+      clearTimeout(timeout)
+    }
+  }, [])
+
+  return (
+    <>
+      {/* Custom cursor - black hole singularity */}
+      <div
+        ref={cursorRef}
+        className="fixed pointer-events-none z-50 mix-blend-difference"
+        style={{
+          left: `${mousePos.x}px`,
+          top: `${mousePos.y}px`,
+          transform: "translate(-50%, -50%)",
+        }}
+      >
+        <div className="relative">
+          <div className="w-3 h-3 bg-black border-2 border-white rounded-full animate-pulse" />
+
+          {/* Accretion disk effect */}
+          <div className="absolute inset-0 -translate-x-1/2 -translate-y-1/2">
+            <div
+              className="w-16 h-16 border border-white/30 rounded-full animate-spin"
+              style={{ animationDuration: "1s" }}
+            />
+          </div>
+          <div className="absolute inset-0 -translate-x-1/2 -translate-y-1/2">
+            <div
+              className="w-24 h-24 border border-cyan-400/20 rounded-full animate-spin"
+              style={{ animationDuration: "1.5s", animationDirection: "reverse" }}
+            />
+          </div>
+
+          {/* Orbiting matter being pulled in */}
+          <div className="absolute inset-0 animate-spin" style={{ animationDuration: "0.8s" }}>
+            <div className="absolute top-1/2 left-1/2 w-1.5 h-1.5 bg-cyan-400 rounded-full -translate-x-1/2 -translate-y-10 blur-sm" />
+          </div>
+          <div
+            className="absolute inset-0 animate-spin"
+            style={{ animationDuration: "1.2s", animationDirection: "reverse" }}
+          >
+            <div className="absolute top-1/2 left-1/2 w-1 h-1 bg-magenta-400 rounded-full -translate-x-1/2 -translate-y-14 blur-sm" />
+          </div>
+
+          {/* Gravitational wave ripples on movement */}
+          {isMoving && (
+            <>
+              <div className="absolute inset-0 -translate-x-1/2 -translate-y-1/2">
+                <div className="w-32 h-32 border-2 border-primary/40 rounded-full animate-[ripple_0.8s_ease-out]" />
+              </div>
+              <div className="absolute inset-0 -translate-x-1/2 -translate-y-1/2">
+                <div
+                  className="w-40 h-40 border border-accent/30 rounded-full animate-[ripple_1s_ease-out]"
+                  style={{ animationDelay: "0.1s" }}
+                />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div
+        ref={trailRef}
+        className="fixed pointer-events-none z-40"
+        style={{
+          left: `${mousePos.x}px`,
+          top: `${mousePos.y}px`,
+          transform: "translate(-50%, -50%)",
+          transition: "all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+        }}
+      >
+        <div className="w-12 h-12 bg-gradient-radial from-primary/30 via-accent/20 to-transparent rounded-full blur-2xl animate-pulse" />
+      </div>
+    </>
+  )
+}

components/footer.tsx

@@ -17,7 +17,7 @@ export function Footer() {
           </div>
           <div className="pt-6 border-t border-border">
             <p className="text-xs text-muted-foreground">
-              {new Date().getFullYear()} • Time is not linear, it is cyclical and sacred
+              {new Date().getFullYear()} • Time is not linear, it is fractal and sacred
             </p>
           </div>
         </div>

components/hero.tsx

@@ -1,36 +1,84 @@
+"use client"
+
 import { ArrowDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
+import { useEffect, useRef } from "react"
 
 export function Hero() {
+  const titleRef = useRef<HTMLHeadingElement>(null)
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!titleRef.current) return
+
+      const rect = titleRef.current.getBoundingClientRect()
+      const x = (e.clientX - rect.left - rect.width / 2) / rect.width
+      const y = (e.clientY - rect.top - rect.height / 2) / rect.height
+
+      titleRef.current.style.transform = `
+        perspective(1000px)
+        rotateY(${x * 10}deg)
+        rotateX(${-y * 10}deg)
+      `
+    }
+
+    window.addEventListener("mousemove", handleMouseMove)
+    return () => window.removeEventListener("mousemove", handleMouseMove)
+  }, [])
+
   return (
     <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
-      {/* Background Image */}
       <div className="absolute inset-0 z-0">
-        <img src="/moon-phases-over-natural-landscape-with-stars.jpg" alt="Moon phases" className="w-full h-full object-cover opacity-20" />
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-background to-accent/20" />
-        <div className="absolute inset-0 bg-gradient-to-b from-background/50 via-background/80 to-background" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(120,119,198,0.1),transparent_50%)]" />
+
+        {/* Floating infinity symbols */}
+        <div className="absolute top-1/4 left-1/4 text-9xl text-primary/10 animate-[float-drift_8s_ease-in-out_infinite]">
+          ∞
+        </div>
+        <div className="absolute bottom-1/4 right-1/4 text-9xl text-accent/10 animate-[float-drift_10s_ease-in-out_infinite] animation-delay-2000">
+          ∞
+        </div>
       </div>
 
       <div className="container relative z-10 px-4 lg:px-8 text-center">
         <div className="max-w-4xl mx-auto space-y-8">
-          <h1 className="font-serif text-5xl md:text-6xl lg:text-7xl font-bold text-foreground leading-tight">
+          <h1
-            Decolonize Time
+            ref={titleRef}
+            className="font-serif text-5xl md:text-6xl lg:text-7xl font-bold text-foreground leading-tight transition-transform duration-200 ease-out"
+            style={{ transformStyle: "preserve-3d" }}
+          >
+            <span className="inline-block bg-gradient-to-r from-primary via-accent to-secondary bg-clip-text text-transparent">
+              Decolonize Time
+            </span>
           </h1>
-          <p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
+
-            Reclaiming natural rhythms beyond the imposed 12-60 frequency. Reconnect with the 13-20 lunar cycles that
+          <p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto leading-relaxed warp-element">
-            align body and mind with Earth's flow.
+            Breaking free from the imposed 12-60 frequency. Reconnecting with the 13-20 lunar cycles through the
+            spiraling dance of space-time.
           </p>
+
           <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
-            <Button asChild size="lg" className="bg-primary text-primary-foreground hover:bg-primary/90">
+            <Button
-              <a href="#systems">Explore Time Systems</a>
+              asChild
+              size="lg"
+              className="warp-element bg-gradient-to-r from-primary to-accent hover:shadow-lg hover:shadow-primary/50 transition-all"
+            >
+              <a href="#systems">Enter the Vortex</a>
             </Button>
-            <Button asChild variant="outline" size="lg">
+            <Button
-              <a href="#translator">Try Calendar Translator</a>
+              asChild
+              variant="outline"
+              size="lg"
+              className="warp-element border-primary/50 hover:border-accent hover:shadow-lg hover:shadow-accent/50 bg-transparent"
+            >
+              <a href="#translator">Translate Time</a>
             </Button>
           </div>
         </div>
 
-        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
+        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce warp-element">
-          <ArrowDown className="h-6 w-6 text-muted-foreground" />
+          <ArrowDown className="h-6 w-6 text-primary" />
         </div>
       </div>
     </section>

components/indigenous-wisdom-section.tsx

@@ -1,25 +1,56 @@
+"use client"
+
 import { Card } from "@/components/ui/card"
+import { useEffect, useRef } from "react"
 
 export function IndigenousWisdomSection() {
+  const cardsRef = useRef<(HTMLDivElement | null)[]>([])
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry, index) => {
+          if (entry.isIntersecting) {
+            setTimeout(() => {
+              entry.target.classList.add("animate-fade-in")
+            }, index * 100)
+          }
+        })
+      },
+      { threshold: 0.1 },
+    )
+
+    cardsRef.current.forEach((card) => {
+      if (card) observer.observe(card)
+    })
+
+    return () => observer.disconnect()
+  }, [])
+
   return (
-    <section id="indigenous" className="py-20 lg:py-32">
+    <section id="indigenous" className="py-20 lg:py-32 relative">
-      <div className="container px-4 lg:px-8">
+      <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-10">
-        <div className="max-w-3xl mx-auto text-center mb-16">
+        <div className="absolute top-40 right-20 w-64 h-64 rounded-full border-4 border-primary blur-sm animate-[float-drift_20s_ease-in-out_infinite]" />
+        <div className="absolute bottom-40 left-20 w-48 h-48 rounded-full border-4 border-accent blur-sm animate-[float-drift_18s_ease-in-out_infinite]" />
+      </div>
+
+      <div className="container px-4 lg:px-8 relative z-10">
+        <div className="max-w-3xl mx-auto text-center mb-16 warp-element">
           <h2 className="font-serif text-4xl lg:text-5xl font-bold mb-6 text-foreground">Indigenous Time Wisdom</h2>
           <p className="text-lg text-muted-foreground leading-relaxed">
             Ancient cultures across the globe developed sophisticated time-keeping systems aligned with natural cycles.
           </p>
         </div>
 
-        {/* Turtle Shell */}
         <div className="max-w-5xl mx-auto mb-16">
-          <Card className="p-8 lg:p-12 bg-gradient-to-br from-primary/5 to-accent/5">
+          <Card className="p-8 lg:p-12 bg-gradient-to-br from-primary/5 via-card to-accent/5 warp-element hover:shadow-2xl hover:shadow-primary/20 transition-all duration-500 border-2 border-primary/20">
             <div className="grid lg:grid-cols-2 gap-8 items-center">
-              <div>
+              <div className="relative group">
+                <div className="absolute -inset-1 bg-gradient-to-r from-primary to-accent rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-500" />
                 <img
                   src="/turtle-shell-pattern-showing-13-segments.jpg"
                   alt="Turtle shell with 13 segments"
-                  className="w-full h-auto rounded-lg"
+                  className="relative w-full h-auto rounded-lg"
                 />
               </div>
               <div className="space-y-4">
@@ -42,9 +73,11 @@ export function IndigenousWisdomSection() {
           </Card>
         </div>
 
-        {/* Indigenous Calendars */}
         <div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
-          <Card className="p-6">
+          <Card
+            ref={(el) => (cardsRef.current[0] = el)}
+            className="p-6 warp-element opacity-0 hover:shadow-lg hover:shadow-primary/20 transition-all duration-300"
+          >
             <h4 className="font-serif text-xl font-bold mb-3 text-foreground">Maya Tzolk'in</h4>
             <p className="text-sm text-muted-foreground mb-3">Sacred 260-day Calendar</p>
             <p className="text-foreground/80 text-sm leading-relaxed">
@@ -53,7 +86,10 @@ export function IndigenousWisdomSection() {
             </p>
           </Card>
 
-          <Card className="p-6">
+          <Card
+            ref={(el) => (cardsRef.current[1] = el)}
+            className="p-6 warp-element opacity-0 hover:shadow-lg hover:shadow-primary/20 transition-all duration-300"
+          >
             <h4 className="font-serif text-xl font-bold mb-3 text-foreground">Māori Maramataka</h4>
             <p className="text-sm text-muted-foreground mb-3">Lunar Planting Calendar</p>
             <p className="text-foreground/80 text-sm leading-relaxed">
@@ -62,7 +98,10 @@ export function IndigenousWisdomSection() {
             </p>
           </Card>
 
-          <Card className="p-6">
+          <Card
+            ref={(el) => (cardsRef.current[2] = el)}
+            className="p-6 warp-element opacity-0 hover:shadow-lg hover:shadow-primary/20 transition-all duration-300"
+          >
             <h4 className="font-serif text-xl font-bold mb-3 text-foreground">Lakota Winter Count</h4>
             <p className="text-sm text-muted-foreground mb-3">Pictorial Year Tracking</p>
             <p className="text-foreground/80 text-sm leading-relaxed">

components/kairos-chronos-section.tsx

@@ -1,11 +1,71 @@
+"use client"
+
 import { Card } from "@/components/ui/card"
 import { Timer, Heart } from "lucide-react"
+import { useRef, useEffect } from "react"
 
 export function KairosChronosSection() {
+  const chronosRef = useRef<HTMLDivElement>(null)
+  const kairosRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const addTiltEffect = (element: HTMLElement) => {
+      const handleMouseMove = (e: MouseEvent) => {
+        const rect = element.getBoundingClientRect()
+        const x = (e.clientX - rect.left) / rect.width - 0.5
+        const y = (e.clientY - rect.top) / rect.height - 0.5
+
+        element.style.transform = `
+          perspective(1000px)
+          rotateY(${x * 15}deg)
+          rotateX(${-y * 15}deg)
+          translateZ(20px)
+        `
+      }
+
+      const handleMouseLeave = () => {
+        element.style.transform = ""
+      }
+
+      element.addEventListener("mousemove", handleMouseMove)
+      element.addEventListener("mouseleave", handleMouseLeave)
+
+      return () => {
+        element.removeEventListener("mousemove", handleMouseMove)
+        element.removeEventListener("mouseleave", handleMouseLeave)
+      }
+    }
+
+    const cleanups: (() => void)[] = []
+    if (chronosRef.current) cleanups.push(addTiltEffect(chronosRef.current))
+    if (kairosRef.current) cleanups.push(addTiltEffect(kairosRef.current))
+
+    return () => cleanups.forEach((cleanup) => cleanup())
+  }, [])
+
   return (
-    <section id="kairos" className="py-20 lg:py-32 bg-muted/30">
+    <section id="kairos" className="py-20 lg:py-32 bg-muted/30 relative overflow-hidden">
-      <div className="container px-4 lg:px-8">
+      <div className="absolute inset-0 opacity-10 pointer-events-none">
-        <div className="max-w-3xl mx-auto text-center mb-16">
+        <svg className="w-full h-full" viewBox="0 0 1000 1000">
+          <path
+            d="M 500,500 m -200,0 a 200,200 0 1,0 400,0 a 200,200 0 1,0 -400,0"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            className="text-primary"
+          />
+          <path
+            d="M 500,500 m -300,0 a 300,300 0 1,0 600,0 a 300,300 0 1,0 -600,0"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            className="text-accent"
+          />
+        </svg>
+      </div>
+
+      <div className="container px-4 lg:px-8 relative z-10">
+        <div className="max-w-3xl mx-auto text-center mb-16 warp-element">
           <h2 className="font-serif text-4xl lg:text-5xl font-bold mb-6 text-foreground">Kairos vs Chronos</h2>
           <p className="text-lg text-muted-foreground leading-relaxed">
             Ancient Greeks understood two fundamentally different types of time. Modern society has forgotten one of
@@ -15,7 +75,11 @@ export function KairosChronosSection() {
 
         <div className="grid lg:grid-cols-2 gap-8 max-w-6xl mx-auto mb-16">
           {/* Chronos */}
-          <Card className="p-8 lg:p-10">
+          <Card
+            ref={chronosRef}
+            className="p-8 lg:p-10 transition-all duration-200 ease-out"
+            style={{ transformStyle: "preserve-3d" }}
+          >
             <div className="flex items-center gap-4 mb-6">
               <div className="p-3 rounded-full bg-muted">
                 <Timer className="h-8 w-8 text-muted-foreground" />
@@ -48,7 +112,11 @@ export function KairosChronosSection() {
           </Card>
 
           {/* Kairos */}
-          <Card className="p-8 lg:p-10 bg-primary/5 border-primary/20">
+          <Card
+            ref={kairosRef}
+            className="p-8 lg:p-10 bg-gradient-to-br from-primary/5 via-card to-accent/5 border-primary/20 transition-all duration-200 ease-out hover:shadow-2xl hover:shadow-primary/20"
+            style={{ transformStyle: "preserve-3d" }}
+          >
             <div className="flex items-center gap-4 mb-6">
               <div className="p-3 rounded-full bg-primary/10">
                 <Heart className="h-8 w-8 text-primary" />
@@ -81,7 +149,7 @@ export function KairosChronosSection() {
           </Card>
         </div>
 
-        <Card className="p-8 lg:p-12 bg-card max-w-4xl mx-auto">
+        <Card className="p-8 lg:p-12 bg-card max-w-4xl mx-auto warp-element hover:shadow-xl transition-all duration-300">
           <h3 className="font-serif text-2xl font-bold mb-6 text-foreground">Moving Toward Kairos</h3>
           <div className="space-y-4 text-foreground/80 leading-relaxed">
             <p>

components/space-time-background.tsx

@@ -0,0 +1,134 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+export function SpaceTimeBackground() {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    canvas.width = window.innerWidth
+    canvas.height = window.innerHeight
+
+    // Torus particles
+    const particles: Array<{
+      x: number
+      y: number
+      z: number
+      angle: number
+      speed: number
+      radius: number
+    }> = []
+
+    // Create torus particles
+    for (let i = 0; i < 150; i++) {
+      particles.push({
+        x: Math.random() * canvas.width,
+        y: Math.random() * canvas.height,
+        z: Math.random() * 1000,
+        angle: Math.random() * Math.PI * 2,
+        speed: Math.random() * 0.002 + 0.001,
+        radius: Math.random() * 200 + 100,
+      })
+    }
+
+    let time = 0
+
+    function animate() {
+      if (!canvas || !ctx) return
+
+      ctx.fillStyle = "rgba(18, 18, 30, 0.1)"
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      time += 0.01
+
+      // Draw infinity symbols and toruses
+      particles.forEach((p, i) => {
+        p.angle += p.speed
+
+        // Torus path (parametric equations)
+        const R = p.radius // Major radius
+        const r = R * 0.3 // Minor radius
+
+        const torusX = (R + r * Math.cos(p.angle)) * Math.cos(p.angle * 2)
+        const torusY = (R + r * Math.cos(p.angle)) * Math.sin(p.angle * 2)
+
+        p.x = canvas.width / 2 + torusX + Math.sin(time + i * 0.1) * 50
+        p.y = canvas.height / 2 + torusY + Math.cos(time + i * 0.1) * 50
+
+        // Depth effect
+        const scale = 1000 / (1000 + p.z)
+        const size = 2 * scale
+
+        // Color based on position and depth
+        const hue = ((p.angle * 180) / Math.PI + time * 50) % 360
+        const alpha = Math.max(0.3, scale)
+
+        ctx.beginPath()
+        ctx.arc(p.x, p.y, size, 0, Math.PI * 2)
+        ctx.fillStyle = `hsla(${hue}, 80%, 60%, ${alpha})`
+        ctx.fill()
+
+        // Connect nearby particles for web effect
+        particles.forEach((p2, j) => {
+          if (j <= i) return
+          const dx = p.x - p2.x
+          const dy = p.y - p2.y
+          const distance = Math.sqrt(dx * dx + dy * dy)
+
+          if (distance < 100) {
+            ctx.beginPath()
+            ctx.moveTo(p.x, p.y)
+            ctx.lineTo(p2.x, p2.y)
+            ctx.strokeStyle = `hsla(${hue}, 70%, 50%, ${0.1 * (1 - distance / 100)})`
+            ctx.lineWidth = 0.5
+            ctx.stroke()
+          }
+        })
+      })
+
+      // Draw infinity symbols
+      for (let i = 0; i < 3; i++) {
+        const centerX = canvas.width / 2 + Math.sin(time * 0.5 + i * 2) * 200
+        const centerY = canvas.height / 3 + Math.cos(time * 0.3 + i * 1.5) * 150
+        const scale = 30 + Math.sin(time + i) * 10
+
+        ctx.beginPath()
+        for (let t = 0; t < Math.PI * 2; t += 0.01) {
+          const x = centerX + (scale * Math.cos(t)) / (1 + Math.sin(t) * Math.sin(t))
+          const y = centerY + (scale * Math.cos(t) * Math.sin(t)) / (1 + Math.sin(t) * Math.sin(t))
+          if (t === 0) {
+            ctx.moveTo(x, y)
+          } else {
+            ctx.lineTo(x, y)
+          }
+        }
+        ctx.strokeStyle = `hsla(${(time * 50 + i * 60) % 360}, 80%, 60%, 0.3)`
+        ctx.lineWidth = 2
+        ctx.stroke()
+      }
+
+      requestAnimationFrame(animate)
+    }
+
+    animate()
+
+    const handleResize = () => {
+      canvas.width = window.innerWidth
+      canvas.height = window.innerHeight
+    }
+
+    window.addEventListener("resize", handleResize)
+
+    return () => {
+      window.removeEventListener("resize", handleResize)
+    }
+  }, [])
+
+  return <canvas ref={canvasRef} className="fixed inset-0 z-0 pointer-events-none" style={{ mixBlendMode: "screen" }} />
+}

components/time-systems-section.tsx

@@ -1,11 +1,40 @@
+"use client"
+
 import { Card } from "@/components/ui/card"
 import { Clock, Moon, Calendar } from "lucide-react"
+import { useEffect, useRef } from "react"
 
 export function TimeSystemsSection() {
+  const card1Ref = useRef<HTMLDivElement>(null)
+  const card2Ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("animate-fade-in")
+          }
+        })
+      },
+      { threshold: 0.2 },
+    )
+
+    if (card1Ref.current) observer.observe(card1Ref.current)
+    if (card2Ref.current) observer.observe(card2Ref.current)
+
+    return () => observer.disconnect()
+  }, [])
+
   return (
-    <section id="systems" className="py-20 lg:py-32">
+    <section id="systems" className="py-20 lg:py-32 relative">
-      <div className="container px-4 lg:px-8">
+      <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-20">
-        <div className="max-w-3xl mx-auto text-center mb-16">
+        <div className="absolute top-20 left-10 w-32 h-32 border-2 border-primary rounded-full animate-[float-drift_15s_ease-in-out_infinite]" />
+        <div className="absolute bottom-20 right-10 w-24 h-24 border-2 border-accent animate-[float-drift_12s_ease-in-out_infinite]" />
+      </div>
+
+      <div className="container px-4 lg:px-8 relative z-10">
+        <div className="max-w-3xl mx-auto text-center mb-16 warp-element">
           <h2 className="font-serif text-4xl lg:text-5xl font-bold mb-6 text-foreground">
             The System Construct of Time
           </h2>
@@ -16,8 +45,10 @@ export function TimeSystemsSection() {
         </div>
 
         <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto mb-16">
-          {/* 12-60 System */}
+          <Card
-          <Card className="p-8 bg-card border-2 border-destructive/20">
+            ref={card1Ref}
+            className="p-8 bg-card border-2 border-destructive/20 warp-element hover:shadow-2xl hover:shadow-destructive/20 transition-all duration-300"
+          >
             <div className="flex items-start gap-4 mb-6">
               <div className="p-3 rounded-lg bg-destructive/10">
                 <Clock className="h-8 w-8 text-destructive" />
@@ -51,8 +82,10 @@ export function TimeSystemsSection() {
             </ul>
           </Card>
 
-          {/* 13-20 System */}
+          <Card
-          <Card className="p-8 bg-card border-2 border-primary/30">
+            ref={card2Ref}
+            className="p-8 bg-gradient-to-br from-card via-primary/5 to-card border-2 border-primary/30 warp-element hover:shadow-2xl hover:shadow-primary/30 transition-all duration-300"
+          >
             <div className="flex items-start gap-4 mb-6">
               <div className="p-3 rounded-lg bg-primary/10">
                 <Moon className="h-8 w-8 text-primary" />
@@ -87,7 +120,7 @@ export function TimeSystemsSection() {
           </Card>
         </div>
 
-        <Card className="p-8 lg:p-12 bg-secondary/20 max-w-4xl mx-auto">
+        <Card className="p-8 lg:p-12 bg-secondary/20 max-w-4xl mx-auto warp-element hover:shadow-xl transition-all duration-300">
           <div className="flex items-start gap-6">
             <div className="p-4 rounded-lg bg-accent/20 shrink-0">
               <Calendar className="h-10 w-10 text-accent" />