feat: add terminal glitch and background breathing animations

Author: ALEVOLDON

site/src/layouts/BaseLayout.astro

@@ -845,6 +845,12 @@ const repoUrl = "https://github.com/ALEVOLDON/Modular-Genesis";
         word-wrap: break-word;
       }
 
+      @keyframes terminalGlitch {
+        0%, 96%, 100% { transform: translate(0); filter: none; }
+        97% { transform: translate(-1px, 1px); filter: drop-shadow(1px 0 0 rgba(255, 95, 86, 0.8)) drop-shadow(-1px 0 0 rgba(102, 247, 255, 0.8)); }
+        98.5% { transform: translate(1px, -1px); filter: drop-shadow(-1px 0 0 rgba(255, 95, 86, 0.8)) drop-shadow(1px 0 0 rgba(102, 247, 255, 0.8)); }
+      }
+
       .terminal-window {
         margin-top: 18px;
         border-radius: 12px;
@@ -858,6 +864,7 @@ const repoUrl = "https://github.com/ALEVOLDON/Modular-Genesis";
         backdrop-filter: blur(8px);
         max-width: 100%;
         box-sizing: border-box;
+        animation: terminalGlitch 7s infinite linear;
       }
 
       .terminal-header {
@@ -1493,6 +1500,16 @@ const repoUrl = "https://github.com/ALEVOLDON/Modular-Genesis";
         box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(102, 247, 255, 0.03);
       }
 
+      @keyframes breatheBg {
+        0% { transform: scale(1); }
+        100% { transform: scale(1.04); }
+      }
+
+      .bg-breathe {
+        animation: breatheBg 14s ease-in-out infinite alternate;
+        will-change: transform;
+      }
+
       @media (prefers-reduced-motion: reduce) {
         .js-enabled .feature-card,
         .js-enabled .mini-card,

site/src/pages/index.astro

@@ -72,7 +72,7 @@ const toolCards = [
     <section class="band band-hero">
       <div class="band-shell">
         <div style="position: relative; padding: clamp(16px, 4vw, 48px); border-radius: clamp(16px, 4vw, 32px); border: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; box-shadow: var(--shadow); box-sizing: border-box;">
-          <div style={`position: absolute; inset: 0; background-image: url(${withBase("/images/hero_modular_cables.png")}); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0;`}></div>
+          <div class="bg-breathe" style={`position: absolute; inset: 0; background-image: url(${withBase("/images/hero_modular_cables.png")}); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0;`}></div>
           <div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,13,20,0.5) 0%, rgba(4,10,16,0.95) 100%); z-index: 1;"></div>
           <div class="display-grid" style="position: relative; z-index: 2;">
           <div>
@@ -186,7 +186,7 @@ const toolCards = [
     <section class="band band-alt">
       <div class="band-shell">
         <div style="position: relative; padding: clamp(16px, 4vw, 48px); border-radius: clamp(16px, 4vw, 32px); border: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; box-shadow: var(--shadow); box-sizing: border-box;">
-          <div style={`position: absolute; inset: 0; background-image: url(${withBase("/images/generative_abstract_mesh.png")}); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0;`}></div>
+          <div class="bg-breathe" style={`position: absolute; inset: 0; background-image: url(${withBase("/images/generative_abstract_mesh.png")}); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0;`}></div>
           <div style="position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,10,16,0.95) 0%, rgba(6,13,20,0.4) 100%); z-index: 1;"></div>
           <div class="split-hero" style="position: relative; z-index: 2;">
             <div class="feature-card" style="background: rgba(3, 9, 15, 0.65); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.08);">