From d6411f4dd1a86b392070ce4ca870efb4b95389f1 Mon Sep 17 00:00:00 2001
From: Nicholai <nicholaivogelfilms@gmail.com>
Date: Sat, 6 Dec 2025 14:23:00 -0700
Subject: [PATCH] Refactor design elements and enhance animations for improved
 user experience. Updated color palette in `dev/design.json` to feature a more
 vibrant orange accent. Revamped footer, navigation, and section layouts for
 better aesthetics and responsiveness. Introduced new animation classes for
 scroll-triggered effects, enhancing visual engagement across the site.

---
 dev/design.json                               |  20 +-
 src/components/Footer.astro                   |  49 +++--
 src/components/Navigation.astro               |  47 ++--
 src/components/sections/Experience.astro      |  96 ++++-----
 src/components/sections/FeaturedProject.astro |  60 +++---
 src/components/sections/Hero.astro            |  52 +++--
 src/components/sections/Skills.astro          |  42 ++--
 src/layouts/BaseLayout.astro                  |  59 ++++--
 src/pages/blog/index.astro                    |  34 +--
 src/pages/contact.astro                       |  61 +++---
 src/pages/index.astro                         |  16 +-
 src/styles/global.css                         | 200 ++++++++++++++++--
 12 files changed, 481 insertions(+), 255 deletions(-)

diff --git a/dev/design.json b/dev/design.json
index bb69323..1aabd68 100644
--- a/dev/design.json
+++ b/dev/design.json
@@ -40,22 +40,22 @@
                     "usage": "Secondary backgrounds, panels, cards"
                 },
                 "brand_accent": {
-                    "hex": "#FFB84C",
-                    "rgb": "255, 184, 76",
-                    "name": "Orange/Yellow",
+                    "hex": "#ff4d00",
+                    "rgb": "255, 77, 0",
+                    "name": "Vibrant Orange",
                     "usage": "Primary accent, CTAs, highlights, interactive elements",
                     "opacity_variants": [
                         {
                             "name": "brand_accent_5",
-                            "value": "rgba(255, 184, 76, 0.05)"
+                            "value": "rgba(255, 77, 0, 0.05)"
                         },
                         {
                             "name": "brand_accent_20",
-                            "value": "rgba(255, 184, 76, 0.2)"
+                            "value": "rgba(255, 77, 0, 0.2)"
                         },
                         {
                             "name": "brand_accent_50",
-                            "value": "rgba(255, 184, 76, 0.5)"
+                            "value": "rgba(255, 77, 0, 0.5)"
                         }
                     ]
                 },
@@ -439,7 +439,7 @@
                 "accent_glow": "shadow-lg shadow-brand-accent/20",
                 "cyan_glow": "shadow-lg shadow-brand-cyan/20",
                 "red_glow": "shadow-lg shadow-brand-red/20",
-                "custom_glow": "shadow-[0_0_10px_rgba(255,184,76,0.5)]",
+                "custom_glow": "shadow-[0_0_10px_rgba(255,77,0,0.5)]",
                 "drop_shadow": "drop-shadow-2xl"
             },
             "blur": {
@@ -626,7 +626,7 @@
                 },
                 "status_indicator": {
                     "dot": "w-2 h-2 bg-brand-accent rounded-full animate-pulse",
-                    "glow": "shadow-[0_0_10px_rgba(255,184,76,0.5)]",
+                    "glow": "shadow-[0_0_10px_rgba(255,77,0,0.5)]",
                     "label": "text-xs font-bold text-slate-500 tracking-widest uppercase font-mono"
                 }
             },
@@ -798,7 +798,7 @@
         "design_tokens_summary": {
             "primary_background": "#0B0D11",
             "secondary_background": "#151921",
-            "primary_accent": "#FFB84C",
+            "primary_accent": "#ff4d00",
             "primary_text": "#FFFFFF",
             "secondary_text": "#94A3B8",
             "border_subtle": "rgba(255, 255, 255, 0.1)",
@@ -806,7 +806,7 @@
             "font_primary": "Inter, sans-serif",
             "font_mono": "monospace",
             "radius_minimal": "0 or 2px (rarely used)",
-            "shadow_glow": "0 0 10px rgba(255,184,76,0.5)",
+            "shadow_glow": "0 0 10px rgba(255,77,0,0.5)",
             "transition_fast": "300ms",
             "transition_medium": "500ms",
             "transition_slow": "700ms"
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index a32b2db..6f8adbf 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,44 +2,51 @@
 const today = new Date();
 ---
 
-<footer class="container mx-auto px-6 lg:px-12 py-32 relative overflow-hidden">
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
-        <div>
-            <h2
-                class="text-6xl md:text-8xl font-bold uppercase leading-none tracking-tighter mb-8 text-white group cursor-pointer">
+<footer class="container mx-auto px-6 lg:px-12 py-32 lg:py-40 relative overflow-hidden border-t border-white/5">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-16 lg:gap-24 items-end relative z-10">
+        <div class="animate-on-scroll slide-right">
+            <h2 class="text-5xl md:text-7xl lg:text-8xl font-bold uppercase leading-[0.95] tracking-tighter mb-10 text-white group cursor-pointer">
                 Let's<br>
-                <span
-                    class="text-stroke group-hover:text-brand-accent transition-colors duration-300">Build</span><br>
+                <span class="text-stroke group-hover:text-brand-accent transition-all duration-500 ease-out">Build</span><br>
                 Reality.
             </h2>
-            <div class="flex flex-wrap gap-6 mt-12">
+            <div class="flex flex-wrap gap-4 lg:gap-6 mt-12">
                 <a href="mailto:nicholai@nicholai.work" class="btn-primary">nicholai@nicholai.work</a>
                 <a href="tel:7196604281" class="btn-ghost">719 660 4281</a>
             </div>
         </div>
 
-        <div class="md:text-right">
-            <div class="mb-12">
-                <p class="text-xs font-bold uppercase text-slate-500 mb-4 tracking-widest">Social Uplink</p>
-                <ul class="space-y-2">
-                    <li><a href="https://nicholai.work"
-                            class="text-white hover:text-brand-accent text-lg font-mono">nicholai.work</a></li>
-                    <li><a href="#"
-                            class="text-white hover:text-brand-accent text-lg font-mono">@nicholai.exe</a></li>
-                    <li><a href="#" class="text-white hover:text-brand-accent text-lg font-mono">LinkedIn</a>
+        <div class="md:text-right animate-on-scroll slide-left stagger-2">
+            <div class="mb-14">
+                <p class="text-xs font-bold uppercase text-slate-500 mb-6 tracking-widest">Social Uplink</p>
+                <ul class="space-y-3">
+                    <li>
+                        <a href="https://nicholai.work" class="text-white hover:text-brand-accent text-lg font-mono transition-colors duration-300 inline-block">
+                            nicholai.work
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="text-white hover:text-brand-accent text-lg font-mono transition-colors duration-300 inline-block">
+                            @nicholai.exe
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="text-white hover:text-brand-accent text-lg font-mono transition-colors duration-300 inline-block">
+                            LinkedIn
+                        </a>
                     </li>
                 </ul>
             </div>
-            <div class="flex justify-end items-end gap-2 text-[10px] text-slate-600 font-mono uppercase">
+            <div class="flex md:justify-end items-end gap-3 text-[10px] text-slate-600 font-mono uppercase tracking-wide">
                 <span>&copy; {today.getFullYear()} Nicholai Vogel</span>
-                <span>/</span>
+                <span class="text-slate-700">/</span>
                 <span>V7 SYSTEM</span>
             </div>
         </div>
     </div>
 
     <!-- Decorative huge text bg -->
-    <div class="absolute -bottom-10 left-0 w-full text-center pointer-events-none opacity-5">
-        <span class="text-[15rem] font-bold text-white uppercase leading-none whitespace-nowrap">VOGEL</span>
+    <div class="absolute -bottom-8 lg:-bottom-12 left-1/2 -translate-x-1/2 w-full text-center pointer-events-none select-none">
+        <span class="text-[12rem] md:text-[18rem] lg:text-[22rem] font-extrabold text-white/[0.02] uppercase leading-none whitespace-nowrap tracking-tighter">VOGEL</span>
     </div>
 </footer>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 7516815..1294d1e 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,19 +1,36 @@
 ---
 ---
-<nav
-    class="fixed top-0 left-0 w-full z-50 px-6 lg:px-12 py-8 flex justify-end items-center gap-12 backdrop-blur-sm border-b border-white/5">
-    <div class="hidden md:flex gap-12">
-        <a href="/"
-            class="text-xs font-bold uppercase tracking-widest text-slate-500 hover:text-white transition-colors">01.
-            Home</a>
-        <a href="/blog"
-            class="text-xs font-bold uppercase tracking-widest text-slate-500 hover:text-white transition-colors">02.
-            Blog</a>
-      </div>
+<nav class="fixed top-0 left-0 w-full z-50 px-6 lg:px-12 py-6 lg:py-8 flex justify-between items-center backdrop-blur-md bg-brand-dark/80 border-b border-white/5">
+    <!-- Left side - can be empty or have subtle branding -->
+    <div class="hidden md:block">
+        <span class="text-[10px] font-mono text-slate-600 tracking-widest uppercase">NV / 2026</span>
+    </div>
 
-    <a href="/contact"
-        class="border border-slate-600 px-6 py-3 text-xs font-bold uppercase tracking-widest hover:border-brand-accent hover:bg-brand-accent/10 transition-all cursor-none-target">
-        Let's Talk
-    </a>
+    <!-- Right side navigation -->
+    <div class="flex items-center gap-8 lg:gap-12 ml-auto">
+        <div class="hidden md:flex items-center gap-10 lg:gap-12">
+            <a href="/"
+                class="relative text-xs font-semibold uppercase tracking-[0.15em] text-slate-500 hover:text-white transition-all duration-300 py-2 group">
+                <span class="relative z-10">Home</span>
+                <span class="absolute bottom-0 left-0 w-0 h-[1px] bg-brand-accent transition-all duration-300 ease-out group-hover:w-full"></span>
+            </a>
+            <a href="/blog"
+                class="relative text-xs font-semibold uppercase tracking-[0.15em] text-slate-500 hover:text-white transition-all duration-300 py-2 group">
+                <span class="relative z-10">Blog</span>
+                <span class="absolute bottom-0 left-0 w-0 h-[1px] bg-brand-accent transition-all duration-300 ease-out group-hover:w-full"></span>
+            </a>
+        </div>
+
+        <a href="/contact"
+            class="border border-slate-600 px-5 lg:px-6 py-2.5 lg:py-3 text-xs font-bold uppercase tracking-[0.15em] text-white hover:border-brand-accent hover:bg-brand-accent hover:text-brand-dark transition-all duration-300">
+            Let's Talk
+        </a>
+    </div>
+
+    <!-- Mobile menu button (optional, for future) -->
+    <button class="md:hidden p-2 text-slate-400 hover:text-white transition-colors" aria-label="Menu">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+        </svg>
+    </button>
 </nav>
-
diff --git a/src/components/sections/Experience.astro b/src/components/sections/Experience.astro
index 6fe7111..71f1e9b 100644
--- a/src/components/sections/Experience.astro
+++ b/src/components/sections/Experience.astro
@@ -1,50 +1,46 @@
 ---
 ---
-<section id="experience" class="container mx-auto px-6 lg:px-12 py-24">
-    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
-        <div class="lg:col-span-4">
-            <h2 class="text-4xl font-bold uppercase tracking-tight mb-2 text-stroke">Experience</h2>
-            <h2 class="text-4xl font-bold uppercase tracking-tight mb-8">History</h2>
-            <p class="text-slate-400 mb-8 max-w-sm">
+<section id="experience" class="container mx-auto px-6 lg:px-12 py-32">
+    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16">
+        <div class="lg:col-span-4 animate-on-scroll slide-right">
+            <h2 class="text-3xl md:text-4xl font-bold uppercase tracking-tight mb-2 text-stroke">Experience</h2>
+            <h2 class="text-3xl md:text-4xl font-bold uppercase tracking-tight mb-10">History</h2>
+            <p class="text-slate-400 text-base leading-relaxed mb-10 max-w-sm font-light">
                 From founding my own VFX house to supervising global campaigns. I bridge the gap between
                 creative vision and technical execution.
             </p>
             <a href="https://biohazardvfx.com" target="_blank"
-                class="inline-flex items-center gap-2 text-xs font-mono uppercase text-brand-accent hover:underline">
-                Visit Biohazard VFX <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
+                class="inline-flex items-center gap-3 text-xs font-mono uppercase text-brand-accent hover:text-white transition-colors duration-300 group">
+                Visit Biohazard VFX
+                <i data-lucide="arrow-up-right" class="w-4 h-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"></i>
             </a>
         </div>
 
         <div class="lg:col-span-8 relative">
             <!-- Vertical line -->
-            <div
-                class="absolute left-0 top-0 bottom-0 w-[1px] bg-gradient-to-b from-brand-accent via-slate-800 to-transparent">
-            </div>
+            <div class="absolute left-0 top-0 bottom-0 w-[1px] bg-gradient-to-b from-brand-accent via-slate-700/50 to-transparent"></div>
 
             <!-- Item 1 -->
-            <div class="pl-12 mb-20 relative reveal-text">
-                <div
-                    class="absolute left-[-5px] top-2 w-2.5 h-2.5 bg-brand-dark border border-brand-accent rounded-full">
+            <div class="pl-10 lg:pl-14 mb-20 relative animate-on-scroll slide-up stagger-1">
+                <div class="absolute left-[-5px] top-2 w-3 h-3 bg-brand-dark border-2 border-brand-accent rounded-full"></div>
+                <div class="flex flex-col md:flex-row md:items-baseline gap-3 md:gap-4 mb-5">
+                    <h3 class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">Biohazard VFX</h3>
+                    <span class="font-mono text-[10px] text-brand-accent bg-brand-accent/10 px-3 py-1.5 tracking-wide">FOUNDER / VFX SUPERVISOR</span>
+                    <span class="font-mono text-xs text-slate-500 md:ml-auto">MAR 2022 — OCT 2025</span>
                 </div>
-                <div class="flex flex-col md:flex-row md:items-baseline gap-4 mb-4">
-                    <h3 class="text-2xl font-bold text-white uppercase">Biohazard VFX</h3>
-                    <span class="font-mono text-xs text-brand-accent bg-brand-accent/10 px-2 py-1">FOUNDER / VFX
-                        SUPERVISOR</span>
-                    <span class="font-mono text-xs text-slate-500 ml-auto">MAR 2022 - OCT 2025</span>
-                </div>
-                <p class="text-slate-400 mb-6 leading-relaxed">
+                <p class="text-slate-400 mb-8 leading-relaxed font-light">
                     Founded and led a VFX studio specializing in high-end commercial and music video work for
                     Post Malone, ENHYPEN, and Nike. Architected a custom pipeline combining cloud and
                     self-hosted infrastructure.
                 </p>
-                <ul class="space-y-2 mb-6">
-                    <li class="flex items-start gap-3 text-sm text-slate-300">
-                        <span class="text-brand-accent mt-1">▹</span>
+                <ul class="space-y-3">
+                    <li class="flex items-start gap-4 text-sm text-slate-300 font-light">
+                        <span class="text-brand-accent mt-0.5 text-xs">▹</span>
                         Designed 7-plate reconciliation workflows for ENHYPEN (projection mapping live action
                         onto CAD).
                     </li>
-                    <li class="flex items-start gap-3 text-sm text-slate-300">
-                        <span class="text-brand-accent mt-1">▹</span>
+                    <li class="flex items-start gap-4 text-sm text-slate-300 font-light">
+                        <span class="text-brand-accent mt-0.5 text-xs">▹</span>
                         Developed QA systems for AI-generated assets, transforming mid-tier output into
                         production-ready deliverables.
                     </li>
@@ -52,43 +48,42 @@
             </div>
 
             <!-- Item 2 -->
-            <div class="pl-12 mb-20 relative reveal-text">
-                <div class="absolute left-[-5px] top-2 w-2.5 h-2.5 bg-slate-700 rounded-full"></div>
-                <div class="flex flex-col md:flex-row md:items-baseline gap-4 mb-4">
-                    <h3 class="text-2xl font-bold text-white uppercase">Stinkfilms</h3>
-                    <span class="font-mono text-xs text-slate-400 border border-slate-700 px-2 py-1">GLOBAL
-                        PRODUCTION STUDIO</span>
-                    <span class="font-mono text-xs text-slate-500 ml-auto">SUMMER 2024</span>
+            <div class="pl-10 lg:pl-14 mb-20 relative animate-on-scroll slide-up stagger-2">
+                <div class="absolute left-[-5px] top-2 w-3 h-3 bg-slate-700 rounded-full transition-colors duration-300"></div>
+                <div class="flex flex-col md:flex-row md:items-baseline gap-3 md:gap-4 mb-5">
+                    <h3 class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">Stinkfilms</h3>
+                    <span class="font-mono text-[10px] text-slate-400 border border-slate-700 px-3 py-1.5 tracking-wide">GLOBAL PRODUCTION STUDIO</span>
+                    <span class="font-mono text-xs text-slate-500 md:ml-auto">SUMMER 2024</span>
                 </div>
-                <p class="text-slate-400 mb-6 leading-relaxed">
+                <p class="text-slate-400 mb-8 leading-relaxed font-light">
                     Led Biohazard VFX team (60+ artists) alongside director Felix Brady to create a brand film
                     for G-Star Raw.
                 </p>
-                <div
-                    class="border border-white/5 bg-white/5 p-6 backdrop-blur-sm hover:border-brand-accent/50 transition-colors cursor-pointer group">
-                    <h4 class="text-sm font-bold uppercase text-white mb-2 flex justify-between">
+                <div class="border border-white/10 bg-white/[0.02] p-6 lg:p-8 backdrop-blur-sm hover:border-brand-accent/30 transition-all duration-500 cursor-pointer group">
+                    <h4 class="text-sm font-bold uppercase text-white mb-3 flex justify-between items-center tracking-wide">
                         Project: G-Star Raw Olympics Campaign
                         <i data-lucide="arrow-right"
-                            class="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity text-brand-accent"></i>
+                            class="w-4 h-4 opacity-0 group-hover:opacity-100 transition-all duration-300 text-brand-accent transform group-hover:translate-x-1"></i>
                     </h4>
-                    <p class="text-xs text-slate-400 mb-4">Managed full CG environments in Blender/Houdini and
-                        integrated AI/ML workflows (Stable Diffusion reference gen, Copycat cleanup).</p>
+                    <p class="text-sm text-slate-400 mb-5 leading-relaxed font-light">
+                        Managed full CG environments in Blender/Houdini and integrated AI/ML workflows (Stable Diffusion reference gen, Copycat cleanup).
+                    </p>
                     <a href="https://stinkfilms.com"
-                        class="text-[10px] font-bold text-brand-accent uppercase tracking-widest">View Case
-                        Study</a>
+                        class="text-[10px] font-bold text-brand-accent uppercase tracking-widest hover:text-white transition-colors duration-300">
+                        View Case Study
+                    </a>
                 </div>
             </div>
 
             <!-- Item 3 -->
-            <div class="pl-12 relative reveal-text">
-                <div class="absolute left-[-5px] top-2 w-2.5 h-2.5 bg-slate-700 rounded-full"></div>
-                <div class="flex flex-col md:flex-row md:items-baseline gap-4 mb-4">
-                    <h3 class="text-2xl font-bold text-white uppercase">Freelance</h3>
-                    <span class="font-mono text-xs text-slate-400 border border-slate-700 px-2 py-1">2D/3D
-                        ARTIST</span>
-                    <span class="font-mono text-xs text-slate-500 ml-auto">2015 - PRESENT</span>
+            <div class="pl-10 lg:pl-14 relative animate-on-scroll slide-up stagger-3">
+                <div class="absolute left-[-5px] top-2 w-3 h-3 bg-slate-700 rounded-full"></div>
+                <div class="flex flex-col md:flex-row md:items-baseline gap-3 md:gap-4 mb-5">
+                    <h3 class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">Freelance</h3>
+                    <span class="font-mono text-[10px] text-slate-400 border border-slate-700 px-3 py-1.5 tracking-wide">2D/3D ARTIST</span>
+                    <span class="font-mono text-xs text-slate-500 md:ml-auto">2015 — PRESENT</span>
                 </div>
-                <p class="text-slate-400 mb-4 leading-relaxed">
+                <p class="text-slate-400 leading-relaxed font-light">
                     Compositor for Abyss Digital and major labels (Atlantic, Interscope). Clients: David
                     Kushner, Opium, Lil Durk, Don Toliver.
                 </p>
@@ -96,4 +91,3 @@
         </div>
     </div>
 </section>
-
diff --git a/src/components/sections/FeaturedProject.astro b/src/components/sections/FeaturedProject.astro
index cc082a7..bee67f9 100644
--- a/src/components/sections/FeaturedProject.astro
+++ b/src/components/sections/FeaturedProject.astro
@@ -1,55 +1,47 @@
 ---
 ---
-<section id="work" class="py-24">
-    <div class="container mx-auto px-6 lg:px-12 mb-12">
-        <span class="text-xs font-mono text-brand-accent mb-2 block">/// HIGHLIGHT</span>
-        <h2 class="text-5xl md:text-7xl font-bold uppercase text-white mb-4">G-Star Raw <span
-                class="text-stroke">Olympics</span></h2>
+<section id="work" class="py-32">
+    <div class="container mx-auto px-6 lg:px-12 mb-14 animate-on-scroll slide-up">
+        <span class="text-xs font-mono text-brand-accent mb-4 block tracking-wide">/// HIGHLIGHT</span>
+        <h2 class="text-4xl md:text-6xl lg:text-7xl font-bold uppercase text-white tracking-tight">
+            G-Star Raw <span class="text-stroke">Olympics</span>
+        </h2>
     </div>
 
     <!-- Full Width Project Card -->
-    <div class="w-full h-[80vh] relative group overflow-hidden border-y border-white/10">
+    <div class="w-full h-[75vh] lg:h-[80vh] relative group overflow-hidden border-y border-white/10 animate-on-scroll scale-in">
         <!-- Abstract Background representing the project -->
-        <div
-            class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')] bg-cover bg-center transition-transform duration-1000 group-hover:scale-105">
-        </div>
-        <div class="absolute inset-0 bg-brand-dark/80 mix-blend-multiply"></div>
-        <div class="absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark/20 to-transparent"></div>
+        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')] bg-cover bg-center transition-transform duration-[1.5s] ease-out group-hover:scale-105"></div>
+        <div class="absolute inset-0 bg-brand-dark/75 mix-blend-multiply transition-colors duration-700 group-hover:bg-brand-dark/60"></div>
+        <div class="absolute inset-0 bg-gradient-to-t from-brand-dark via-brand-dark/30 to-transparent opacity-95"></div>
 
         <!-- Grid Overlay on image -->
-        <div
-            class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdHRlcm4gaWQ9ImIiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIvPjwvcGF0dGVybj48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9InVybCgjYikiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjYSkiLz48L3N2Zz4=')] opacity-30">
-        </div>
+        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdHRlcm4gaWQ9ImIiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIvPjwvcGF0dGVybj48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9InVybCgjYikiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjYSkiLz48L3N2Zz4=')] opacity-20"></div>
 
-        <div
-            class="absolute bottom-0 left-0 w-full p-6 lg:p-12 flex flex-col md:flex-row items-end justify-between">
-            <div
-                class="max-w-2xl transform translate-y-8 group-hover:translate-y-0 transition-transform duration-500">
-                <div class="flex gap-2 mb-4">
-                    <span class="bg-brand-accent text-brand-dark text-[10px] font-bold uppercase px-2 py-1">VFX
-                        Supervision</span>
-                    <span
-                        class="border border-white/30 text-white text-[10px] font-bold uppercase px-2 py-1">AI/ML</span>
-                    <span
-                        class="border border-white/30 text-white text-[10px] font-bold uppercase px-2 py-1">Houdini</span>
+        <div class="absolute bottom-0 left-0 w-full p-6 lg:p-14 flex flex-col md:flex-row items-end justify-between gap-8">
+            <div class="max-w-2xl transform translate-y-6 group-hover:translate-y-0 transition-transform duration-700 ease-out">
+                <div class="flex flex-wrap gap-2 mb-6">
+                    <span class="bg-brand-accent text-brand-dark text-[10px] font-bold uppercase px-3 py-1.5 tracking-wide">VFX Supervision</span>
+                    <span class="border border-white/30 text-white text-[10px] font-bold uppercase px-3 py-1.5 tracking-wide transition-colors duration-300 hover:border-white/50">AI/ML</span>
+                    <span class="border border-white/30 text-white text-[10px] font-bold uppercase px-3 py-1.5 tracking-wide transition-colors duration-300 hover:border-white/50">Houdini</span>
                 </div>
-                <p class="text-xl md:text-2xl text-white font-medium mb-6">
+                <p class="text-lg md:text-xl lg:text-2xl text-white font-normal mb-8 leading-relaxed">
                     Managed full CG environment builds, procedural city generation, and integrated AI-generated
                     normal maps for relighting in Nuke.
                 </p>
                 <a href="https://f.io/7ijf23Wm"
-                    class="inline-flex items-center gap-3 text-sm font-bold uppercase tracking-widest text-white hover:text-brand-accent transition-colors">
-                    Watch Making Of <i data-lucide="play-circle" class="w-5 h-5"></i>
+                    class="inline-flex items-center gap-4 text-xs font-bold uppercase tracking-widest text-white hover:text-brand-accent transition-all duration-300 group/link">
+                    Watch Making Of
+                    <i data-lucide="play-circle" class="w-5 h-5 transition-transform duration-300 group-hover/link:scale-110"></i>
                 </a>
             </div>
 
-            <div class="hidden md:block text-right">
-                <span class="block text-[10px] uppercase text-slate-500 tracking-widest mb-1">Year</span>
-                <span class="block text-2xl font-bold text-white mb-4">2024</span>
-                <span class="block text-[10px] uppercase text-slate-500 tracking-widest mb-1">Client</span>
-                <span class="block text-xl font-bold text-white">Stinkfilms</span>
+            <div class="hidden md:block text-right opacity-80 group-hover:opacity-100 transition-opacity duration-500">
+                <span class="block text-[10px] uppercase text-slate-500 tracking-widest mb-2">Year</span>
+                <span class="block text-2xl font-bold text-white mb-6 tracking-tight">2024</span>
+                <span class="block text-[10px] uppercase text-slate-500 tracking-widest mb-2">Client</span>
+                <span class="block text-xl font-bold text-white tracking-tight">Stinkfilms</span>
             </div>
         </div>
     </div>
 </section>
-
diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro
index dda5f2b..00c19ef 100644
--- a/src/components/sections/Hero.astro
+++ b/src/components/sections/Hero.astro
@@ -1,30 +1,26 @@
 ---
 ---
-<section id="about" class="container mx-auto px-6 lg:px-12 min-h-[70vh] flex flex-col justify-center relative">
-    <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
+<section id="about" class="container mx-auto px-6 lg:px-12 min-h-[80vh] flex flex-col justify-center relative pb-24">
+    <div class="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-12">
         <div class="col-span-12">
-            <p class="font-mono text-brand-accent mb-4 ml-1 reveal-text">/// TECHNICAL GENERALIST & VFX
-                SUPERVISOR</p>
-            <h1
-                class="text-6xl md:text-8xl lg:text-[10rem] font-bold text-massive uppercase leading-none tracking-tighter mb-8 text-white">
-                <span class="reveal-text block delay-100">Visual</span>
-                <span
-                    class="reveal-text block delay-200 text-transparent bg-clip-text bg-gradient-to-tr from-brand-accent to-white">Alchemist</span>
+            <p class="font-mono text-brand-accent text-sm mb-6 tracking-wide animate-on-scroll fade-in">
+                /// TECHNICAL GENERALIST & VFX SUPERVISOR
+            </p>
+            <h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-[9rem] font-extrabold text-massive uppercase leading-none tracking-tighter mb-10 text-white">
+                <span class="animate-on-scroll slide-up block stagger-1">Visual</span>
+                <span class="animate-on-scroll slide-up block stagger-2 text-transparent bg-clip-text bg-gradient-to-r from-brand-accent via-orange-400 to-white">Alchemist</span>
             </h1>
         </div>
-        <div
-            class="col-span-12 md:col-span-6 lg:col-span-5 lg:col-start-8 mt-12 border-l border-brand-accent/30 pl-8 reveal-text delay-300">
-            <p class="text-slate-400 text-lg leading-relaxed mb-8">
+        <div class="col-span-12 md:col-span-7 lg:col-span-5 lg:col-start-8 mt-8 lg:mt-4 border-l-2 border-brand-accent/40 pl-8 animate-on-scroll slide-left stagger-3">
+            <p class="text-slate-400 text-base lg:text-lg leading-relaxed mb-10 font-light">
                 I am a problem solver who loves visual effects. With 10 years of experience creating end-to-end
-                visual content for clients like <span class="text-white font-semibold">Post Malone</span>, <span
-                    class="text-white font-semibold">Stinkfilms</span>, and <span
-                    class="text-white font-semibold">Adidas</span>. Comfortable managing teams while staying
+                visual content for clients like <span class="text-white font-medium">Post Malone</span>, <span class="text-white font-medium">Stinkfilms</span>, and <span class="text-white font-medium">Adidas</span>. Comfortable managing teams while staying
                 knee-deep in hands-on shot work.
             </p>
-            <div class="flex gap-4">
+            <div class="flex gap-6">
                 <a href="#work"
-                    class="group flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-white hover:text-brand-accent transition-colors">
-                    <span class="w-8 h-[1px] bg-brand-accent group-hover:w-12 transition-all"></span>
+                    class="group flex items-center gap-4 text-xs font-bold uppercase tracking-widest text-white hover:text-brand-accent transition-all duration-300">
+                    <span class="w-10 h-[2px] bg-brand-accent group-hover:w-16 transition-all duration-500 ease-out"></span>
                     View Selected Works
                 </a>
             </div>
@@ -32,15 +28,18 @@
     </div>
 
     <!-- Hero Footer -->
-    <div
-        class="absolute bottom-0 w-full left-0 px-6 lg:px-12 pb-12 hidden md:flex justify-between items-end opacity-50">
-        <div class="font-mono text-xs text-slate-500">
-            LOC: COLORADO SPRINGS<br>
-            TIME: <span id="clock">00:00:00</span>
+    <div class="absolute bottom-8 w-full left-0 px-6 lg:px-12 hidden md:flex justify-between items-end opacity-60 animate-on-scroll fade-in stagger-5">
+        <div class="font-mono text-xs text-slate-500 tracking-wide">
+            <span class="block text-slate-600 mb-1">LOCATION</span>
+            COLORADO SPRINGS, CO<br>
+            <span id="clock" class="text-slate-400">00:00:00</span>
         </div>
-        <div class="font-mono text-xs text-slate-500 text-right">
-            SCROLL<br>
-            ↓
+        <div class="font-mono text-xs text-slate-500 text-right tracking-wide">
+            <span class="block text-slate-600 mb-1">EXPLORE</span>
+            <span class="inline-flex flex-col items-center">
+                SCROLL
+                <span class="block mt-2 w-[1px] h-6 bg-gradient-to-b from-slate-500 to-transparent"></span>
+            </span>
         </div>
     </div>
 </section>
@@ -57,4 +56,3 @@
     setInterval(updateClock, 1000);
     updateClock();
 </script>
-
diff --git a/src/components/sections/Skills.astro b/src/components/sections/Skills.astro
index 0c752d1..f6f2b94 100644
--- a/src/components/sections/Skills.astro
+++ b/src/components/sections/Skills.astro
@@ -1,16 +1,17 @@
 ---
 ---
-<section id="skills" class="container mx-auto px-6 lg:px-12 py-24 bg-brand-panel border-y border-white/5">
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
-        <div class="col-span-1 md:col-span-2 lg:col-span-4 mb-8">
-            <h2 class="text-4xl font-bold uppercase mb-2">Technical Arsenal</h2>
-            <p class="text-slate-400 font-mono text-sm">/// SOFTWARE & LANGUAGES</p>
+<section id="skills" class="container mx-auto px-6 lg:px-12 py-32 bg-brand-panel border-y border-white/5">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">
+        <div class="col-span-1 md:col-span-2 lg:col-span-4 mb-6 animate-on-scroll slide-up">
+            <h2 class="text-3xl md:text-4xl font-bold uppercase mb-3 tracking-tight">Technical Arsenal</h2>
+            <p class="text-slate-500 font-mono text-sm tracking-wide">/// SOFTWARE & LANGUAGES</p>
         </div>
 
         <!-- Compositing -->
-        <div>
-            <h3 class="text-lg font-bold text-white uppercase mb-6 flex items-center gap-2">
-                <i data-lucide="layers" class="w-4 h-4 text-brand-accent"></i> Compositing
+        <div class="animate-on-scroll slide-up stagger-1">
+            <h3 class="text-base font-bold text-white uppercase mb-6 flex items-center gap-3 tracking-wide">
+                <i data-lucide="layers" class="w-4 h-4 text-brand-accent"></i>
+                Compositing
             </h3>
             <div class="flex flex-wrap gap-2">
                 <span class="skill-tag">Nuke/NukeX</span>
@@ -23,9 +24,10 @@
         </div>
 
         <!-- 3D -->
-        <div>
-            <h3 class="text-lg font-bold text-white uppercase mb-6 flex items-center gap-2">
-                <i data-lucide="box" class="w-4 h-4 text-brand-accent"></i> 3D Generalist
+        <div class="animate-on-scroll slide-up stagger-2">
+            <h3 class="text-base font-bold text-white uppercase mb-6 flex items-center gap-3 tracking-wide">
+                <i data-lucide="box" class="w-4 h-4 text-brand-accent"></i>
+                3D Generalist
             </h3>
             <div class="flex flex-wrap gap-2">
                 <span class="skill-tag">Houdini</span>
@@ -40,13 +42,13 @@
         </div>
 
         <!-- AI/ML -->
-        <div>
-            <h3 class="text-lg font-bold text-white uppercase mb-6 flex items-center gap-2">
-                <i data-lucide="cpu" class="w-4 h-4 text-brand-accent"></i> AI/ML Integration
+        <div class="animate-on-scroll slide-up stagger-3">
+            <h3 class="text-base font-bold text-white uppercase mb-6 flex items-center gap-3 tracking-wide">
+                <i data-lucide="cpu" class="w-4 h-4 text-brand-accent"></i>
+                AI/ML Integration
             </h3>
             <div class="flex flex-wrap gap-2">
-                <span class="skill-tag bg-brand-accent/10 border-brand-accent/50 text-brand-accent">Stable
-                    Diffusion</span>
+                <span class="skill-tag bg-brand-accent/10 border-brand-accent/40 text-brand-accent hover:bg-brand-accent/20">Stable Diffusion</span>
                 <span class="skill-tag">LoRA Training</span>
                 <span class="skill-tag">Dataset Prep</span>
                 <span class="skill-tag">Synthetic Data</span>
@@ -55,9 +57,10 @@
         </div>
 
         <!-- Dev -->
-        <div>
-            <h3 class="text-lg font-bold text-white uppercase mb-6 flex items-center gap-2">
-                <i data-lucide="code" class="w-4 h-4 text-brand-accent"></i> Development
+        <div class="animate-on-scroll slide-up stagger-4">
+            <h3 class="text-base font-bold text-white uppercase mb-6 flex items-center gap-3 tracking-wide">
+                <i data-lucide="code" class="w-4 h-4 text-brand-accent"></i>
+                Development
             </h3>
             <div class="flex flex-wrap gap-2">
                 <span class="skill-tag">Python</span>
@@ -70,4 +73,3 @@
         </div>
     </div>
 </section>
-
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 5bee4c1..b267d8e 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -38,23 +38,54 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
         window.lucide.createIcons();
       }
 
-       // Intersection Observer for Reveal Animations
-       const observerOptions = {
-            threshold: 0.1,
-            rootMargin: "0px"
-        };
+      // ===== SCROLL ANIMATION SYSTEM =====
 
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.classList.add('active');
-                }
-            });
-        }, observerOptions);
+      // Observer for scroll-triggered animations
+      const scrollObserverOptions = {
+        threshold: 0.15,
+        rootMargin: "0px 0px -50px 0px"
+      };
 
-        document.querySelectorAll('.reveal-text').forEach(el => {
-            observer.observe(el);
+      const scrollObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('is-visible');
+            // Optionally unobserve after animation
+            // scrollObserver.unobserve(entry.target);
+          }
         });
+      }, scrollObserverOptions);
+
+      // Observe all animate-on-scroll elements
+      document.querySelectorAll('.animate-on-scroll').forEach(el => {
+        scrollObserver.observe(el);
+      });
+
+      // Observer for legacy reveal-text animations
+      const revealObserverOptions = {
+        threshold: 0.1,
+        rootMargin: "0px"
+      };
+
+      const revealObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('active');
+          }
+        });
+      }, revealObserverOptions);
+
+      document.querySelectorAll('.reveal-text').forEach(el => {
+        revealObserver.observe(el);
+      });
+
+      // Auto-stagger children in containers with .stagger-children class
+      document.querySelectorAll('.stagger-children').forEach(container => {
+        const children = container.querySelectorAll('.animate-on-scroll');
+        children.forEach((child, index) => {
+          child.classList.add(`stagger-${Math.min(index + 1, 8)}`);
+        });
+      });
     </script>
   </body>
 </html>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 146393b..75654bf 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -12,41 +12,43 @@ const posts = (await getCollection('blog')).sort(
 
 <BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
 	<section class="container mx-auto px-6 lg:px-12">
-		<div class="mb-16">
-			<h1 class="text-6xl md:text-8xl font-bold uppercase text-white mb-4 tracking-tighter">Blog</h1>
-			<p class="text-slate-400 font-mono">/// THOUGHTS & PROCESS</p>
+		<div class="mb-20 animate-on-scroll slide-up">
+			<h1 class="text-5xl md:text-7xl lg:text-8xl font-bold uppercase text-white mb-5 tracking-tighter">Blog</h1>
+			<p class="text-slate-500 font-mono text-sm tracking-wide">/// THOUGHTS & PROCESS</p>
 		</div>
-		<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
+		<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 lg:gap-x-10 gap-y-16 lg:gap-y-20 stagger-children">
 			{
-				posts.map((post) => (
-					<li class="group">
+				posts.map((post, index) => (
+					<li class={`group animate-on-scroll slide-up stagger-${Math.min(index + 1, 6)}`}>
 						<a href={`/blog/${post.id}/`} class="block">
-							<div class="relative aspect-[16/9] mb-6 overflow-hidden border border-white/10 group-hover:border-brand-accent/50 transition-colors">
+							<div class="relative aspect-[16/9] mb-6 overflow-hidden border border-white/10 group-hover:border-brand-accent/40 transition-all duration-500">
 								{post.data.heroImage && (
 									<Image
 										width={720}
 										height={360}
 										src={post.data.heroImage}
 										alt=""
-										class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
+										class="w-full h-full object-cover transition-transform duration-[1s] ease-out group-hover:scale-105"
 									/>
 								)}
-								<div class="absolute inset-0 bg-brand-dark/20 group-hover:bg-transparent transition-colors"></div>
+								<div class="absolute inset-0 bg-brand-dark/30 group-hover:bg-brand-dark/10 transition-colors duration-500"></div>
+								<div class="absolute inset-0 bg-gradient-to-t from-brand-dark/50 to-transparent opacity-60"></div>
 							</div>
 							<div class="flex flex-col">
-								<div class="flex items-center gap-2 mb-3">
-									<span class="text-xs font-mono text-brand-accent uppercase tracking-widest">
+								<div class="flex items-center gap-2 mb-4">
+									<span class="text-[10px] font-mono text-brand-accent uppercase tracking-widest">
 										<FormattedDate date={post.data.pubDate} />
 									</span>
 								</div>
-								<h4 class="text-2xl font-bold text-white uppercase mb-2 group-hover:text-brand-accent transition-colors leading-tight">
+								<h4 class="text-xl lg:text-2xl font-bold text-white uppercase mb-3 group-hover:text-brand-accent transition-colors duration-300 leading-tight tracking-tight">
 									{post.data.title}
 								</h4>
-								<p class="text-slate-400 line-clamp-2">
-									{/* We could add a description field to blog posts or just show title */}
+								<p class="text-slate-400 text-sm line-clamp-2 font-light leading-relaxed">
+									{post.data.description || ''}
 								</p>
-								<span class="mt-4 text-xs font-bold uppercase tracking-widest text-slate-500 group-hover:text-white transition-colors flex items-center gap-2">
-									Read Article <span class="block w-4 h-[1px] bg-slate-500 group-hover:bg-brand-accent transition-colors"></span>
+								<span class="mt-6 text-xs font-bold uppercase tracking-widest text-slate-500 group-hover:text-white transition-all duration-300 flex items-center gap-3">
+									Read Article
+									<span class="block w-6 h-[1px] bg-slate-600 group-hover:bg-brand-accent group-hover:w-10 transition-all duration-300"></span>
 								</span>
 							</div>
 						</a>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index dc114cc..cb183c4 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -5,48 +5,48 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 
 <BaseLayout title={`Contact | ${SITE_TITLE}`} description="Get in touch for collaboration or inquiries.">
 	<section class="container mx-auto px-6 lg:px-12">
-		<div class="mb-16">
-			<h1 class="text-6xl md:text-8xl font-bold uppercase text-white mb-4 tracking-tighter">
-				Let's <span class="text-transparent bg-clip-text bg-gradient-to-tr from-brand-accent to-white">Talk</span>
+		<div class="mb-20 animate-on-scroll slide-up">
+			<h1 class="text-5xl md:text-7xl lg:text-8xl font-bold uppercase text-white mb-5 tracking-tighter">
+				Let's <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-accent via-orange-400 to-white">Talk</span>
 			</h1>
-			<p class="text-slate-400 font-mono">/// GET IN TOUCH</p>
+			<p class="text-slate-500 font-mono text-sm tracking-wide">/// GET IN TOUCH</p>
 		</div>
 
-		<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-24">
+		<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20">
 			<!-- Contact Form -->
-			<div class="lg:col-span-8">
-				<form class="space-y-6" action="#" method="POST">
+			<div class="lg:col-span-7 animate-on-scroll slide-up stagger-1">
+				<form class="space-y-8" action="#" method="POST">
 					<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-						<div class="space-y-2">
-							<label for="name" class="text-xs font-bold uppercase tracking-widest text-slate-500">Name</label>
+						<div class="space-y-3">
+							<label for="name" class="text-xs font-bold uppercase tracking-widest text-slate-500 block">Name</label>
 							<input
 								type="text"
 								id="name"
 								name="name"
 								placeholder="Your Name"
-								class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors placeholder:text-slate-600"
+								class="w-full bg-white/[0.03] border border-slate-700 text-white px-5 py-4 focus:border-brand-accent focus:bg-white/[0.05] focus:outline-none transition-all duration-300 placeholder:text-slate-600"
 								required
 							/>
 						</div>
-						<div class="space-y-2">
-							<label for="email" class="text-xs font-bold uppercase tracking-widest text-slate-500">Email</label>
+						<div class="space-y-3">
+							<label for="email" class="text-xs font-bold uppercase tracking-widest text-slate-500 block">Email</label>
 							<input
 								type="email"
 								id="email"
 								name="email"
 								placeholder="name@example.com"
-								class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors placeholder:text-slate-600"
+								class="w-full bg-white/[0.03] border border-slate-700 text-white px-5 py-4 focus:border-brand-accent focus:bg-white/[0.05] focus:outline-none transition-all duration-300 placeholder:text-slate-600"
 								required
 							/>
 						</div>
 					</div>
 
-					<div class="space-y-2">
-						<label for="subject" class="text-xs font-bold uppercase tracking-widest text-slate-500">Subject</label>
+					<div class="space-y-3">
+						<label for="subject" class="text-xs font-bold uppercase tracking-widest text-slate-500 block">Subject</label>
 						<select
 							id="subject"
 							name="subject"
-							class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors appearance-none"
+							class="w-full bg-white/[0.03] border border-slate-700 text-white px-5 py-4 focus:border-brand-accent focus:bg-white/[0.05] focus:outline-none transition-all duration-300 appearance-none cursor-pointer"
 						>
 							<option value="general" class="bg-brand-dark">General Inquiry</option>
 							<option value="project" class="bg-brand-dark">Project Collaboration</option>
@@ -55,39 +55,39 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 						</select>
 					</div>
 
-					<div class="space-y-2">
-						<label for="message" class="text-xs font-bold uppercase tracking-widest text-slate-500">Message</label>
+					<div class="space-y-3">
+						<label for="message" class="text-xs font-bold uppercase tracking-widest text-slate-500 block">Message</label>
 						<textarea
 							id="message"
 							name="message"
 							rows="6"
 							placeholder="Tell me about your project..."
-							class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors placeholder:text-slate-600 resize-none"
+							class="w-full bg-white/[0.03] border border-slate-700 text-white px-5 py-4 focus:border-brand-accent focus:bg-white/[0.05] focus:outline-none transition-all duration-300 placeholder:text-slate-600 resize-none"
 							required
 						></textarea>
 					</div>
 
-					<div class="pt-4">
+					<div class="pt-6">
 						<button type="submit" class="btn-primary group relative overflow-hidden">
 							<span class="relative z-10">Send Message</span>
-							<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition-opacity"></div>
+							<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
 						</button>
 					</div>
 				</form>
 			</div>
 
 			<!-- Sidebar Info -->
-			<div class="lg:col-span-4 space-y-12">
+			<div class="lg:col-span-5 space-y-12 animate-on-scroll slide-left stagger-2">
 				<div>
 					<h3 class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-6">Contact Info</h3>
 					<ul class="space-y-4">
 						<li>
-							<a href="mailto:nicholai@nicholai.work" class="text-xl text-white hover:text-brand-accent transition-colors font-mono block">
+							<a href="mailto:nicholai@nicholai.work" class="text-lg lg:text-xl text-white hover:text-brand-accent transition-colors duration-300 font-mono block">
 								nicholai@nicholai.work
 							</a>
 						</li>
 						<li>
-							<a href="tel:7196604281" class="text-xl text-white hover:text-brand-accent transition-colors font-mono block">
+							<a href="tel:7196604281" class="text-lg lg:text-xl text-white hover:text-brand-accent transition-colors duration-300 font-mono block">
 								719 660 4281
 							</a>
 						</li>
@@ -96,22 +96,22 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 
 				<div>
 					<h3 class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-6">Location</h3>
-					<p class="text-lg text-slate-300">
+					<p class="text-base lg:text-lg text-slate-300 leading-relaxed font-light">
 						Colorado Springs, CO<br/>
 						Mountain Standard Time (MST)
 					</p>
 				</div>
 
-				<div class="pt-8 border-t border-white/10">
+				<div class="pt-10 border-t border-white/10">
 					<h3 class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-6">Availability</h3>
-					<div class="flex items-center gap-3">
-						<span class="relative flex h-3 w-3">
+					<div class="flex items-center gap-3 mb-4">
+						<span class="relative flex h-2.5 w-2.5">
 						  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-accent opacity-75"></span>
-						  <span class="relative inline-flex rounded-full h-3 w-3 bg-brand-accent"></span>
+						  <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-brand-accent"></span>
 						</span>
 						<span class="text-sm font-bold text-brand-accent uppercase tracking-wide">Open to opportunities</span>
 					</div>
-					<p class="mt-4 text-slate-400 text-sm leading-relaxed">
+					<p class="text-slate-400 text-sm leading-relaxed font-light">
 						Currently accepting new projects for Q3 2026. Reach out to schedule a discovery call.
 					</p>
 				</div>
@@ -119,4 +119,3 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 		</div>
 	</section>
 </BaseLayout>
-
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7c0b21f..fe0427c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,11 +8,19 @@ import Skills from '../components/sections/Skills.astro';
 
 <BaseLayout>
 	<Hero />
-	<div class="w-full h-[1px] bg-white/10 my-24"></div>
-	<Experience />
-	<div class="container mx-auto px-6 lg:px-12">
-		<div class="w-full h-[1px] bg-white/10"></div>
+
+	<!-- Gradient Divider -->
+	<div class="w-full my-16 lg:my-24">
+		<div class="h-[1px] divider-gradient"></div>
 	</div>
+
+	<Experience />
+
+	<!-- Container Divider with accent hint -->
+	<div class="container mx-auto px-6 lg:px-12 my-8">
+		<div class="h-[1px] divider-gradient"></div>
+	</div>
+
 	<FeaturedProject />
 	<Skills />
 </BaseLayout>
diff --git a/src/styles/global.css b/src/styles/global.css
index 268dd09..fe1ab13 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -10,18 +10,77 @@
   --font-sans: "Inter", sans-serif;
   --font-mono: "Space Mono", monospace;
 
+  /* Animation keyframes */
   --animate-reveal: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-fade-in: fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-slide-up: slide-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-slide-left: slide-left 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-slide-right: slide-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-scale-in: scale-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 
   @keyframes reveal {
     from {
       opacity: 0;
-      transform: translateY(20px);
+      transform: translateY(30px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(40px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-left {
+    from {
+      opacity: 0;
+      transform: translateX(40px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-right {
+    from {
+      opacity: 0;
+      transform: translateX(-40px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
 }
 
 @utility text-massive {
@@ -30,20 +89,20 @@
 }
 
 @utility text-stroke {
-  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
+  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
   color: transparent;
 }
 
 @utility skill-tag {
-  @apply text-[10px] font-mono font-bold uppercase tracking-wider px-2 py-2 border border-slate-700 text-slate-400 hover:border-brand-accent hover:text-white transition-colors cursor-default select-none;
+  @apply text-[10px] font-mono font-bold uppercase tracking-wider px-3 py-2 border border-slate-700 text-slate-400 hover:border-brand-accent hover:text-white transition-all duration-300 cursor-default select-none;
 }
 
 @utility btn-primary {
-  @apply bg-brand-accent text-brand-dark px-8 py-4 text-xs font-bold uppercase tracking-widest hover:bg-white transition-colors inline-block;
+  @apply bg-brand-accent text-brand-dark px-8 py-4 text-xs font-bold uppercase tracking-widest hover:bg-white transition-all duration-300 inline-block;
 }
 
 @utility btn-ghost {
-  @apply border border-slate-600 text-white px-8 py-4 text-xs font-bold uppercase tracking-widest hover:border-brand-accent hover:bg-brand-accent/5 transition-colors inline-block;
+  @apply border border-slate-600 text-white px-8 py-4 text-xs font-bold uppercase tracking-widest hover:border-brand-accent hover:bg-brand-accent/5 transition-all duration-300 inline-block;
 }
 
 @utility grid-overlay {
@@ -58,7 +117,11 @@ body {
   background-color: var(--color-brand-dark);
   color: #ffffff;
   overflow-x: hidden;
-  /* cursor: none; Handled by CustomCursor component logic, but we might want it here if we implement the custom cursor fully */
+}
+
+/* Smooth scroll behavior */
+html {
+  scroll-behavior: smooth;
 }
 
 /* Custom Scrollbar */
@@ -72,16 +135,67 @@ body {
 
 ::-webkit-scrollbar-thumb {
   background: #334155;
+  transition: background 0.3s ease;
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background: var(--color-brand-accent);
 }
 
-/* Reveal Animation Class (handled by JS intersection observer usually, but basic class here) */
+/* ===== SCROLL ANIMATION SYSTEM ===== */
+
+/* Base animation classes - elements start hidden */
+.animate-on-scroll {
+  opacity: 0;
+  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Slide up variant */
+.animate-on-scroll.slide-up {
+  transform: translateY(40px);
+}
+
+/* Slide left variant (comes from right) */
+.animate-on-scroll.slide-left {
+  transform: translateX(40px);
+}
+
+/* Slide right variant (comes from left) */
+.animate-on-scroll.slide-right {
+  transform: translateX(-40px);
+}
+
+/* Scale in variant */
+.animate-on-scroll.scale-in {
+  transform: scale(0.95);
+}
+
+/* Fade only */
+.animate-on-scroll.fade-in {
+  transform: none;
+}
+
+/* Active state - when element is in view */
+.animate-on-scroll.is-visible {
+  opacity: 1;
+  transform: translateY(0) translateX(0) scale(1);
+}
+
+/* Stagger delay classes for sequential animations */
+.stagger-1 { transition-delay: 0.1s; }
+.stagger-2 { transition-delay: 0.2s; }
+.stagger-3 { transition-delay: 0.3s; }
+.stagger-4 { transition-delay: 0.4s; }
+.stagger-5 { transition-delay: 0.5s; }
+.stagger-6 { transition-delay: 0.6s; }
+.stagger-7 { transition-delay: 0.7s; }
+.stagger-8 { transition-delay: 0.8s; }
+
+/* Legacy reveal-text support */
 .reveal-text {
   opacity: 0;
-  transform: translateY(20px);
+  transform: translateY(30px);
   transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -90,7 +204,14 @@ body {
   transform: translateY(0);
 }
 
-/* Cursor Styles */
+/* Delay variants for reveal-text */
+.reveal-text.delay-100 { transition-delay: 0.1s; }
+.reveal-text.delay-200 { transition-delay: 0.2s; }
+.reveal-text.delay-300 { transition-delay: 0.3s; }
+.reveal-text.delay-400 { transition-delay: 0.4s; }
+.reveal-text.delay-500 { transition-delay: 0.5s; }
+
+/* ===== CURSOR STYLES ===== */
 .cursor-dot,
 .cursor-outline {
   position: fixed;
@@ -111,8 +232,10 @@ body {
 .cursor-outline {
   width: 40px;
   height: 40px;
-  border: 1px solid rgba(255, 184, 76, 0.5);
-  transition: width 0.2s, height 0.2s, background-color 0.2s;
+  border: 1px solid rgba(255, 77, 0, 0.5);
+  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+              height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+              background-color 0.3s ease;
 }
 
 /* Interactive Elements Cursor Hover Effect */
@@ -121,6 +244,59 @@ a:hover ~ .cursor-outline,
 button:hover ~ .cursor-outline {
   width: 60px;
   height: 60px;
-  background-color: rgba(255, 184, 76, 0.05);
+  background-color: rgba(255, 77, 0, 0.05);
   border-color: var(--color-brand-accent);
 }
+
+/* ===== ENHANCED TRANSITIONS ===== */
+
+/* Smooth link transitions */
+a {
+  transition: color 0.3s ease, border-color 0.3s ease;
+}
+
+/* Image hover zoom - smoother */
+.hover-zoom {
+  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hover-zoom:hover,
+.group:hover .hover-zoom {
+  transform: scale(1.05);
+}
+
+/* Line expand animation */
+.line-expand {
+  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Border glow on hover - subtle */
+.hover-border-glow {
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.hover-border-glow:hover {
+  border-color: var(--color-brand-accent);
+  box-shadow: 0 0 20px rgba(255, 77, 0, 0.1);
+}
+
+/* Gradient divider */
+.divider-gradient {
+  background: linear-gradient(
+    to right,
+    transparent,
+    rgba(255, 255, 255, 0.1) 20%,
+    rgba(255, 255, 255, 0.1) 80%,
+    transparent
+  );
+}
+
+/* Divider with accent hint */
+.divider-accent {
+  background: linear-gradient(
+    to right,
+    transparent,
+    rgba(255, 77, 0, 0.2) 50%,
+    transparent
+  );
+}