From 9e38ac6606e8e7adda2ba46af8e4783c40d600a3 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 18 Dec 2025 22:31:04 +0000
Subject: [PATCH] feat: Add 3D backdrop and update page layout

Adds a Three.js backdrop to the hero section and refactors page layout for better visual appeal. Includes dependency updates for 'three'.

Co-authored-by: jeremy <jeremy@intern.isara.io>
---
 bun.lock                                |   4 +
 package.json                            |   3 +-
 src/app.css                             |  11 +-
 src/lib/components/ThreeBackdrop.svelte | 266 ++++++++++++++
 src/routes/+layout.svelte               |   7 +-
 src/routes/+page.svelte                 | 449 ++++++++++++++++++++----
 6 files changed, 664 insertions(+), 76 deletions(-)
 create mode 100644 src/lib/components/ThreeBackdrop.svelte

diff --git a/bun.lock b/bun.lock
index dac8081..4ce4a2f 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,11 +1,13 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "camhack",
       "dependencies": {
         "@sveltejs/adapter-node": "^5.2.14",
         "@tailwindcss/vite": "^4.1.11",
+        "three": "^0.182.0",
       },
       "devDependencies": {
         "@sveltejs/kit": "^2.28.0",
@@ -325,6 +327,8 @@
 
     "tar": ["tar@7.4.3", "", { "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", "minipass": "^7.1.2", "minizlib": "^3.0.1", "mkdirp": "^3.0.1", "yallist": "^5.0.0" } }, "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw=="],
 
+    "three": ["three@0.182.0", "", {}, "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ=="],
+
     "tinyglobby": ["tinyglobby@0.2.14", "", { "dependencies": { "fdir": "^6.4.4", "picomatch": "^4.0.2" } }, "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ=="],
 
     "totalist": ["totalist@3.0.1", "", {}, "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ=="],
diff --git a/package.json b/package.json
index fb0373b..a0d3e1a 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,8 @@
   "type": "module",
   "dependencies": {
     "@sveltejs/adapter-node": "^5.2.14",
-    "@tailwindcss/vite": "^4.1.11"
+    "@tailwindcss/vite": "^4.1.11",
+    "three": "^0.182.0"
   },
   "prettier": {
     "plugins": [
diff --git a/src/app.css b/src/app.css
index 2addcba..985bcfa 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,7 +1,10 @@
 @import "tailwindcss";
 
 @theme {
-  --font-playpen: Ubuntu Mono, monospace;
+  --font-playpen: Ubuntu Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell,
+    "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
 }
 
 html {
@@ -27,26 +30,32 @@ section {
 
 h1 {
   @apply text-4xl font-bold;
+  font-family: var(--font-display);
 }
 
 h2 {
   @apply text-3xl font-bold;
+  font-family: var(--font-display);
 }
 
 h3 {
   @apply text-2xl font-bold;
+  font-family: var(--font-display);
 }
 
 h4 {
   @apply text-xl font-bold;
+  font-family: var(--font-display);
 }
 
 h5 {
   @apply text-lg font-bold;
+  font-family: var(--font-display);
 }
 
 h6 {
   @apply text-base font-bold;
+  font-family: var(--font-display);
 }
 
 h1,
diff --git a/src/lib/components/ThreeBackdrop.svelte b/src/lib/components/ThreeBackdrop.svelte
new file mode 100644
index 0000000..848926b
--- /dev/null
+++ b/src/lib/components/ThreeBackdrop.svelte
@@ -0,0 +1,266 @@
+<script>
+  import { onMount } from "svelte";
+  import * as THREE from "three";
+
+  let host;
+
+  onMount(() => {
+    if (!host) return;
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(48, 1, 0.01, 80);
+    camera.position.set(0, 0.2, 7.2);
+
+    const renderer = new THREE.WebGLRenderer({
+      antialias: true,
+      alpha: true,
+      powerPreference: "high-performance",
+    });
+    renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1));
+    renderer.setClearAlpha(0);
+    host.appendChild(renderer.domElement);
+
+    const root = new THREE.Group();
+    scene.add(root);
+
+    const palette = {
+      a: new THREE.Color("#22c55e"),
+      b: new THREE.Color("#86e293"),
+      c: new THREE.Color("#86e6c6"),
+      d: new THREE.Color("#7c3aed"),
+    };
+
+    const fog = new THREE.FogExp2("#071510", 0.12);
+    scene.fog = fog;
+
+    const ambient = new THREE.AmbientLight("#c7ffd7", 0.55);
+    scene.add(ambient);
+
+    const key = new THREE.DirectionalLight("#d9fff0", 1.1);
+    key.position.set(3.5, 4.5, 4);
+    scene.add(key);
+
+    const rim = new THREE.DirectionalLight("#86e6c6", 0.8);
+    rim.position.set(-5, 1.6, -2);
+    scene.add(rim);
+
+    const torusGeo = new THREE.TorusKnotGeometry(1.1, 0.34, 220, 28, 2, 3);
+    const torusMat = new THREE.MeshPhysicalMaterial({
+      color: palette.a,
+      roughness: 0.25,
+      metalness: 0.12,
+      transmission: 0.45,
+      thickness: 0.9,
+      ior: 1.35,
+      clearcoat: 0.9,
+      clearcoatRoughness: 0.15,
+      sheen: 0.35,
+      sheenColor: palette.c,
+      emissive: palette.d,
+      emissiveIntensity: 0.06,
+    });
+    const knot = new THREE.Mesh(torusGeo, torusMat);
+    knot.position.set(-0.35, 0.1, 0);
+    root.add(knot);
+
+    const haloGeo = new THREE.RingGeometry(1.65, 2.45, 128);
+    const haloMat = new THREE.MeshBasicMaterial({
+      color: palette.c,
+      transparent: true,
+      opacity: 0.22,
+      side: THREE.DoubleSide,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false,
+    });
+    const halo = new THREE.Mesh(haloGeo, haloMat);
+    halo.rotation.x = Math.PI / 2;
+    halo.position.set(0.8, 0.06, -0.35);
+    root.add(halo);
+
+    const count = 9000;
+    const positions = new Float32Array(count * 3);
+    const seeds = new Float32Array(count);
+    const colors = new Float32Array(count * 3);
+
+    for (let i = 0; i < count; i++) {
+      const r = Math.pow(Math.random(), 0.6) * 14.5;
+      const t = Math.random() * Math.PI * 2;
+      const p = (Math.random() - 0.5) * Math.PI;
+      const x = Math.cos(t) * Math.cos(p) * r;
+      const y = Math.sin(p) * r * 0.55;
+      const z = Math.sin(t) * Math.cos(p) * r;
+      positions[i * 3 + 0] = x;
+      positions[i * 3 + 1] = y;
+      positions[i * 3 + 2] = z;
+      seeds[i] = Math.random();
+      const mix = Math.random();
+      const col =
+        mix < 0.55
+          ? palette.b.clone().lerp(palette.c, mix * 1.4)
+          : palette.a.clone().lerp(palette.d, (mix - 0.55) * 1.6);
+      colors[i * 3 + 0] = col.r;
+      colors[i * 3 + 1] = col.g;
+      colors[i * 3 + 2] = col.b;
+    }
+
+    const starGeo = new THREE.BufferGeometry();
+    starGeo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+    starGeo.setAttribute("aSeed", new THREE.BufferAttribute(seeds, 1));
+    starGeo.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+
+    const uniforms = {
+      uTime: { value: 0 },
+      uPointer: { value: new THREE.Vector2(0, 0) },
+      uScroll: { value: 0 },
+    };
+
+    const starMat = new THREE.ShaderMaterial({
+      transparent: true,
+      depthWrite: false,
+      blending: THREE.AdditiveBlending,
+      vertexColors: true,
+      uniforms,
+      vertexShader: `
+        uniform float uTime;
+        uniform vec2 uPointer;
+        uniform float uScroll;
+        attribute float aSeed;
+        varying vec3 vColor;
+        varying float vAlpha;
+        float hash(float n){ return fract(sin(n)*43758.5453123); }
+        void main() {
+          vec3 p = position;
+          float t = uTime * 0.22;
+          float w = sin(t + aSeed * 6.2831) * 0.55 + cos(t * 0.7 + aSeed * 12.0) * 0.25;
+          float swirl = (p.x * 0.03 + p.z * 0.03) + uScroll * 0.002;
+          float ang = swirl + w * 0.12;
+          float cs = cos(ang);
+          float sn = sin(ang);
+          p.xz = mat2(cs, -sn, sn, cs) * p.xz;
+          vec2 pointer = uPointer * vec2(2.0, 1.4);
+          float pull = exp(-length(p.xz * 0.08 - pointer) * 2.2);
+          p.y += (pull - 0.2) * 0.9;
+          p.x += pointer.x * pull * 1.4;
+          p.z += pointer.y * pull * 1.4;
+          vec4 mv = modelViewMatrix * vec4(p, 1.0);
+          float size = mix(0.8, 4.6, hash(aSeed * 19.13)) * (1.0 + pull * 1.5);
+          gl_PointSize = size * (350.0 / -mv.z);
+          gl_Position = projectionMatrix * mv;
+          vColor = color;
+          vAlpha = clamp(0.25 + pull * 0.9, 0.0, 1.0);
+        }
+      `,
+      fragmentShader: `
+        varying vec3 vColor;
+        varying float vAlpha;
+        void main() {
+          vec2 uv = gl_PointCoord - 0.5;
+          float r = length(uv);
+          float glow = exp(-r * 7.0);
+          float core = smoothstep(0.16, 0.0, r);
+          float a = (glow + core) * vAlpha;
+          vec3 col = vColor * (0.55 + glow * 1.25);
+          gl_FragColor = vec4(col, a);
+        }
+      `,
+    });
+
+    const stars = new THREE.Points(starGeo, starMat);
+    stars.position.set(0.2, -0.2, -2.5);
+    root.add(stars);
+
+    let raf = 0;
+    let w = 1;
+    let h = 1;
+    const pointer = new THREE.Vector2(0, 0);
+    const pointerTarget = new THREE.Vector2(0, 0);
+
+    const resize = () => {
+      const rect = host.getBoundingClientRect();
+      w = Math.max(1, Math.floor(rect.width));
+      h = Math.max(1, Math.floor(rect.height));
+      camera.aspect = w / h;
+      camera.updateProjectionMatrix();
+      renderer.setSize(w, h, false);
+    };
+
+    const ro = new ResizeObserver(resize);
+    ro.observe(host);
+    resize();
+
+    const onPointer = (e) => {
+      const rect = host.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width;
+      const y = (e.clientY - rect.top) / rect.height;
+      pointerTarget.set((x - 0.5) * 0.8, (0.5 - y) * 0.8);
+    };
+
+    const onLeave = () => {
+      pointerTarget.set(0, 0);
+    };
+
+    host.addEventListener("pointermove", onPointer, { passive: true });
+    host.addEventListener("pointerleave", onLeave, { passive: true });
+
+    const clock = new THREE.Clock();
+
+    const tick = () => {
+      raf = requestAnimationFrame(tick);
+      const t = clock.getElapsedTime();
+      pointer.lerp(pointerTarget, 0.08);
+      uniforms.uTime.value = t;
+      uniforms.uPointer.value.copy(pointer);
+      uniforms.uScroll.value = window.scrollY || 0;
+
+      knot.rotation.y = t * 0.35;
+      knot.rotation.x = Math.sin(t * 0.35) * 0.18;
+      knot.position.y = 0.12 + Math.sin(t * 0.65) * 0.12;
+
+      halo.rotation.z = t * 0.18;
+      halo.material.opacity = 0.15 + 0.1 * (0.5 + 0.5 * Math.sin(t * 0.9));
+
+      root.rotation.y = pointer.x * 0.55;
+      root.rotation.x = pointer.y * 0.35;
+
+      camera.position.x = pointer.x * 0.45;
+      camera.position.y = 0.2 + pointer.y * 0.35;
+      camera.lookAt(0, 0, 0);
+
+      renderer.render(scene, camera);
+    };
+
+    tick();
+
+    return () => {
+      cancelAnimationFrame(raf);
+      host.removeEventListener("pointermove", onPointer);
+      host.removeEventListener("pointerleave", onLeave);
+      ro.disconnect();
+      renderer.dispose();
+      torusGeo.dispose();
+      haloGeo.dispose();
+      torusMat.dispose();
+      haloMat.dispose();
+      starGeo.dispose();
+      starMat.dispose();
+      if (renderer.domElement.parentNode) renderer.domElement.parentNode.removeChild(renderer.domElement);
+    };
+  });
+</script>
+
+<div bind:this={host} class="three-host" aria-hidden="true"></div>
+
+<style>
+  .three-host {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: auto;
+  }
+
+  .three-host :global(canvas) {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 50baf6e..07b11e1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,20 +1,15 @@
 <script>
   import "../app.css";
 
-  import Footer from "$lib/components/Footer.svelte";
   import Header from "$lib/components/header/Header.svelte";
 
   let { children } = $props();
 </script>
 
-<header class="relative bg-white shadow-md">
+<header class="relative z-50 border-b border-white/10 bg-white/80 shadow-sm backdrop-blur-xl">
   <Header />
 </header>
 
 <main class="flex-1">
   {@render children()}
 </main>
-
-<footer class="theme-bg-gradient p-8">
-  <Footer />
-</footer>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 59d0c28..bbe1df9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { onMount } from "svelte";
   import Hero from "$lib/components/Hero.svelte";
   import Sponsors from "$lib/components/Sponsors.svelte";
   import About from "$lib/components/About.svelte";
@@ -6,89 +7,401 @@
   import Rules from "$lib/components/Rules.svelte";
   import FAQ from "$lib/components/FAQ.svelte";
   import Organisers from "$lib/components/Organisers.svelte";
+  import ThreeBackdrop from "$lib/components/ThreeBackdrop.svelte";
+
+  let daysSince = $state(0);
+
+  const computeDaysSince = () => {
+    const end = Date.UTC(2025, 10, 2, 18, 30, 0);
+    const now = Date.now();
+    const d = Math.floor((now - end) / 86400000);
+    return Math.max(0, d);
+  };
+
+  onMount(() => {
+    daysSince = computeDaysSince();
+    const id = setInterval(() => {
+      daysSince = computeDaysSince();
+    }, 15 * 60 * 1000);
+    return () => clearInterval(id);
+  });
+
+  const reveal = (node) => {
+    node.dataset.reveal = "0";
+    const io = new IntersectionObserver(
+      ([e]) => {
+        if (e.isIntersecting) node.dataset.reveal = "1";
+      },
+      { threshold: 0.12, rootMargin: "0px 0px -10% 0px" },
+    );
+    io.observe(node);
+    return {
+      destroy() {
+        io.disconnect();
+      },
+    };
+  };
 </script>
 
 <svelte:head>
   <title>Cam Hack 2025</title>
 </svelte:head>
 
-<section class="sm:p-8">
-  <Hero />
-</section>
-
-<section class="unintended-section m-0">
-  <div class="mx-auto max-w-7xl px-4 sm:px-8">
-    <h1 class="py-8 text-center">Unintended Behaviour</h1>
-    <a target="_blank" href="https://cam-hack-2025.devpost.com" class="block">
-      <img
-        src="/unintended.png"
-        alt="Unintended"
-        class="m-0 block w-full rounded-3xl"
-      />
-    </a>
-  </div>
-</section>
-
-<section class="sponsors-section">
-  <Sponsors />
-</section>
-
-<!-- <section class="mb-8 px-0 md:p-4">
-  <div class="mx-auto max-w-7xl">
-    <a
-      target="_blank"
-      href="https://cam-hack-2025.devpost.com/project-gallery"
-      class="text-center text-violet-700 hover:text-violet-800"
-    >
-      <img
-        class="w-full md:rounded-3xl md:shadow-2xl md:transition-all md:hover:scale-[1.01]"
-        src="/cam-hack-theme.png"
-        alt="Turning Sci-fi into reality"
-      />
-    </a>
-  </div>
-</section> -->
-
-<section id="about">
-  <About />
-</section>
-
-<section id="schedule">
-  <Schedule />
-</section>
-
-<section id="rules">
-  <Rules />
-</section>
-
-<section id="faq">
-  <FAQ />
-</section>
-
-<section>
-  <Organisers />
-</section>
+<div class="splash">
+  <section class="hero-shell">
+    <div class="hero-stage">
+      <ThreeBackdrop />
+      <div class="hero-scrim"></div>
+      <div class="hero-content">
+        <div class="hero-card" use:reveal>
+          <Hero />
+          <div class="since-wrap">
+            <div class="since-card">
+              <div class="since-number">{daysSince}</div>
+              <div class="since-line">2nd&nbsp;November</div>
+              <div class="since-line">Cam&nbsp;Hack&nbsp;2025</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="hero-glow"></div>
+    </div>
+  </section>
+
+  <section class="section-shell" use:reveal>
+    <div class="mx-auto max-w-7xl px-4 sm:px-8">
+      <h1 class="py-8 text-center">Unintended Behaviour</h1>
+      <div class="grid gap-6 lg:grid-cols-12">
+        <a
+          target="_blank"
+          href="https://cam-hack-2025.devpost.com"
+          class="card-surface lg:col-span-8"
+        >
+          <img
+            src="/unintended.png"
+            alt="Unintended Behaviour"
+            class="m-0 block w-full rounded-[28px]"
+          />
+        </a>
+        <div class="grid gap-6 lg:col-span-4">
+          <a
+            target="_blank"
+            href="https://cam-hack-2025.devpost.com/project-gallery"
+            class="card-surface p-6"
+          >
+            <img
+              src="/cam-hack-theme.png"
+              alt="Cam Hack 2025"
+              class="m-0 block w-full rounded-2xl"
+            />
+          </a>
+          <div class="card-surface deco-panel" aria-hidden="true"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section-shell section-white" use:reveal>
+    <div class="card-frame">
+      <Sponsors />
+    </div>
+  </section>
+
+  <section id="about" class="section-shell" use:reveal>
+    <div class="card-frame">
+      <About />
+    </div>
+  </section>
+
+  <section id="schedule" class="section-shell section-white" use:reveal>
+    <div class="card-frame">
+      <Schedule />
+    </div>
+  </section>
+
+  <section id="rules" class="section-shell" use:reveal>
+    <div class="card-frame">
+      <Rules />
+    </div>
+  </section>
+
+  <section id="faq" class="section-shell section-white" use:reveal>
+    <div class="card-frame">
+      <FAQ />
+    </div>
+  </section>
+
+  <section class="section-shell" use:reveal>
+    <div class="card-frame">
+      <Organisers />
+    </div>
+  </section>
+</div>
 
 <style>
-  section:nth-child(odd) {
-    background-color: #fafafa;
+  .splash {
+    background:
+      radial-gradient(1200px 700px at 20% 10%, rgba(34, 197, 94, 0.25), transparent 55%),
+      radial-gradient(900px 560px at 85% 20%, rgba(124, 58, 237, 0.22), transparent 58%),
+      radial-gradient(900px 700px at 55% 85%, rgba(134, 230, 198, 0.18), transparent 56%),
+      linear-gradient(180deg, #06110d 0%, #081713 35%, #060e0b 100%);
+  }
+
+  .hero-shell {
+    position: relative;
+    padding: 0;
+    background: transparent;
+  }
+
+  .hero-stage {
+    position: relative;
+    min-height: calc(100svh - 60px);
+    overflow: hidden;
+  }
+
+  .hero-scrim {
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(800px 480px at 30% 25%, rgba(0, 0, 0, 0.12), transparent 60%),
+      radial-gradient(980px 680px at 70% 30%, rgba(0, 0, 0, 0.22), transparent 62%),
+      linear-gradient(180deg, rgba(6, 15, 11, 0.42), rgba(6, 15, 11, 0.92));
+    pointer-events: none;
+  }
+
+  .hero-content {
+    position: relative;
+    z-index: 2;
+    padding: 28px 16px 44px;
+    display: grid;
+    place-items: center;
+  }
+
+  .hero-card {
+    width: min(1100px, calc(100vw - 32px));
+    border-radius: 30px;
+    border: 1px solid rgba(255, 255, 255, 0.13);
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.12),
+      rgba(255, 255, 255, 0.06)
+    );
+    box-shadow:
+      0 32px 80px rgba(0, 0, 0, 0.45),
+      inset 0 1px 0 rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+    transform-style: preserve-3d;
+    padding: 18px;
+    color: rgba(255, 255, 255, 0.92);
+  }
+
+  .since-wrap {
+    display: flex;
+    justify-content: center;
+    padding: 10px 0 2px;
+  }
+
+  .since-card {
+    display: grid;
+    justify-items: center;
+    gap: 6px;
+    padding: 12px 14px;
+    border-radius: 22px;
+    border: 1px solid rgba(134, 230, 198, 0.22);
+    background: linear-gradient(
+      180deg,
+      rgba(6, 15, 11, 0.6),
+      rgba(6, 15, 11, 0.25)
+    );
+    box-shadow:
+      0 18px 50px rgba(0, 0, 0, 0.35),
+      inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+
+  .since-number {
+    font-size: clamp(44px, 8vw, 88px);
+    line-height: 1;
+    font-weight: 800;
+    letter-spacing: -0.04em;
+    background: linear-gradient(180deg, #d7ffe5, #22c55e 55%, #86e6c6);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: 0 0 22px rgba(34, 197, 94, 0.22);
+  }
+
+  .since-line {
+    color: rgba(255, 255, 255, 0.85);
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+
+  .hero-glow {
+    position: absolute;
+    inset: -20%;
+    background:
+      conic-gradient(
+        from 210deg,
+        rgba(34, 197, 94, 0.0),
+        rgba(34, 197, 94, 0.18),
+        rgba(134, 230, 198, 0.14),
+        rgba(124, 58, 237, 0.14),
+        rgba(34, 197, 94, 0.0)
+      );
+    filter: blur(60px);
+    opacity: 0.7;
+    animation: glowSpin 14s linear infinite;
+    pointer-events: none;
+  }
+
+  .section-shell {
+    padding: 44px 0;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.92);
+  }
+
+  .section-white {
+    background: rgba(255, 255, 255, 0.04);
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .card-frame {
+    width: min(1100px, calc(100vw - 32px));
+    margin: 0 auto;
+    border-radius: 30px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
+    padding: 18px;
+  }
+
+  :global(.card-frame h1),
+  :global(.card-frame h2),
+  :global(.card-frame h3),
+  :global(.card-frame p),
+  :global(.card-frame ul),
+  :global(.card-frame li) {
+    color: rgb(15 23 42);
+  }
+
+  .card-surface {
+    border-radius: 30px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.12),
+      rgba(255, 255, 255, 0.06)
+    );
+    box-shadow:
+      0 22px 70px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.12);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    transform-style: preserve-3d;
+    transition:
+      transform 600ms cubic-bezier(0.2, 0.9, 0.2, 1),
+      box-shadow 600ms cubic-bezier(0.2, 0.9, 0.2, 1);
+  }
+
+  .card-surface:hover {
+    transform: translateY(-6px) rotateX(1.2deg) rotateY(-1.2deg);
+    box-shadow:
+      0 34px 90px rgba(0, 0, 0, 0.48),
+      0 0 0 1px rgba(34, 197, 94, 0.18) inset,
+      0 0 60px rgba(34, 197, 94, 0.16);
+  }
+
+  .deco-panel {
+    min-height: 220px;
+    position: relative;
+    overflow: hidden;
+    padding: 0;
+  }
+
+  .deco-panel::before {
+    content: "";
+    position: absolute;
+    inset: -40%;
+    background:
+      radial-gradient(closest-side at 30% 35%, rgba(34, 197, 94, 0.35), transparent 60%),
+      radial-gradient(closest-side at 70% 30%, rgba(124, 58, 237, 0.3), transparent 62%),
+      radial-gradient(closest-side at 55% 75%, rgba(134, 230, 198, 0.26), transparent 60%),
+      conic-gradient(
+        from 0deg,
+        rgba(34, 197, 94, 0.0),
+        rgba(34, 197, 94, 0.28),
+        rgba(134, 230, 198, 0.22),
+        rgba(124, 58, 237, 0.2),
+        rgba(34, 197, 94, 0.0)
+      );
+    filter: blur(22px);
+    opacity: 0.85;
+    animation: decoSpin 10s linear infinite;
+  }
+
+  .deco-panel::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(800px 220px at 50% 20%, rgba(255, 255, 255, 0.13), transparent 60%),
+      linear-gradient(180deg, rgba(6, 15, 11, 0.1), rgba(6, 15, 11, 0.35));
+    border-radius: 30px;
+  }
+
+  :global([data-reveal="0"]) {
+    opacity: 0;
+    transform: translateY(26px) scale(0.985);
+    filter: blur(8px);
   }
 
-  section:nth-child(even) {
-    background-color: #ffffff;
+  :global([data-reveal="1"]) {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+    transition:
+      opacity 900ms cubic-bezier(0.2, 0.9, 0.2, 1),
+      transform 900ms cubic-bezier(0.2, 0.9, 0.2, 1),
+      filter 900ms cubic-bezier(0.2, 0.9, 0.2, 1);
   }
 
-  section.unintended-section {
-    background-color: transparent !important;
-    margin: 0 !important;
+  @keyframes glowSpin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 
-  section.unintended-section img {
-    margin: 0 !important;
-    display: block;
+  @keyframes decoSpin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 
-  section.sponsors-section {
-    background-color: #ffffff !important;
+  @media (prefers-reduced-motion: reduce) {
+    .hero-glow {
+      animation: none;
+    }
+    .card-surface,
+    .deco-panel::before {
+      transition: none;
+    }
+    .deco-panel::before {
+      animation: none;
+    }
+    :global([data-reveal="0"]),
+    :global([data-reveal="1"]) {
+      transition: none;
+      transform: none;
+      filter: none;
+      opacity: 1;
+    }
   }
 </style>