From 33baf8d10862b45c69310bcf0b2452470b6bd921 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Fri, 30 Jan 2026 15:12:26 +0000
Subject: [PATCH] Remove glitch effect, fix floating cards overlap

- Remove glitch effect CSS and HTML wrapper entirely
- Adjust floating card positions to prevent overlap:
  - Card 2 (Economic sci-fi): top 20%
  - Card 3 (Games): bottom 5%, left 10%
  - Card 4 (Parallel worlding): top 50%
  - Card 5 (Guerrilla futuring): bottom 5%, right 5%

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 index.html | 70 +++++++-----------------------------------------------
 1 file changed, 8 insertions(+), 62 deletions(-)

diff --git a/index.html b/index.html
index 367da34..1fb2cca 100644
--- a/index.html
+++ b/index.html
@@ -217,10 +217,6 @@
             pointer-events: none;
         }
 
-        .glitch-wrapper {
-            position: relative;
-        }
-
         .hero h1 {
             font-family: 'Space Mono', monospace;
             font-size: clamp(3rem, 12vw, 8rem);
@@ -241,54 +237,6 @@
             display: inline;
         }
 
-        /* Glitch effect */
-        .glitch {
-            position: relative;
-        }
-
-        .glitch::before,
-        .glitch::after {
-            content: attr(data-text);
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0;
-            pointer-events: none;
-        }
-
-        .glitch:hover::before {
-            animation: glitch-1 0.3s linear infinite;
-            color: var(--accent-cyan);
-            opacity: 0.8;
-            z-index: -1;
-        }
-
-        .glitch:hover::after {
-            animation: glitch-2 0.3s linear infinite;
-            color: var(--accent-magenta);
-            opacity: 0.8;
-            z-index: -2;
-        }
-
-        @keyframes glitch-1 {
-            0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, -2px); }
-            20% { clip-path: inset(92% 0 1% 0); transform: translate(2px, 2px); }
-            40% { clip-path: inset(43% 0 1% 0); transform: translate(-2px, 2px); }
-            60% { clip-path: inset(25% 0 58% 0); transform: translate(2px, -2px); }
-            80% { clip-path: inset(54% 0 7% 0); transform: translate(-2px, 2px); }
-            100% { clip-path: inset(58% 0 43% 0); transform: translate(2px, -2px); }
-        }
-
-        @keyframes glitch-2 {
-            0% { clip-path: inset(65% 0 25% 0); transform: translate(2px, 2px); }
-            20% { clip-path: inset(10% 0 85% 0); transform: translate(-2px, -2px); }
-            40% { clip-path: inset(75% 0 15% 0); transform: translate(2px, -2px); }
-            60% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, 2px); }
-            80% { clip-path: inset(20% 0 70% 0); transform: translate(2px, 2px); }
-            100% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, -2px); }
-        }
 
         .subtitle {
             font-family: 'Space Mono', monospace;
@@ -497,26 +445,26 @@
         }
 
         .floating-card:nth-child(2) {
-            top: 30%;
+            top: 20%;
             right: 0;
             animation: float 6s ease-in-out infinite 1s;
         }
 
         .floating-card:nth-child(3) {
-            bottom: 10%;
-            left: 15%;
+            bottom: 5%;
+            left: 10%;
             animation: float 6s ease-in-out infinite 2s;
         }
 
         .floating-card:nth-child(4) {
-            top: 55%;
-            right: 5%;
+            top: 50%;
+            right: 0;
             animation: float 6s ease-in-out infinite 3s;
         }
 
         .floating-card:nth-child(5) {
-            bottom: 35%;
-            right: 30%;
+            bottom: 5%;
+            right: 5%;
             animation: float 6s ease-in-out infinite 4s;
         }
 
@@ -1291,9 +1239,7 @@
     </nav>
 
     <header class="hero">
-        <div class="glitch-wrapper">
-            <h1 class="glitch" data-text="WORLDPLAY"><span class="highlight">WORLD</span>PLAY</h1>
-        </div>
+        <h1><span class="highlight">WORLD</span>PLAY</h1>
         <p class="subtitle">(TO BE DEFINED)</p>
 
         <div class="cta-group">