1 files changed, 84 insertions, 48 deletions

diff --git a/assets/css/components/hero.css b/assets/css/components/hero.css
index 3596274..b9ecb24 100644
--- a/assets/css/components/hero.css
+++ b/assets/css/components/hero.css
@@ -2,13 +2,25 @@
 
 .hero {
   position: relative;
-  min-height: 100vh;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+  padding: 6rem 2rem 2rem;
+  overflow: hidden;
+}
+
+.hero-container {
+  position: relative;
+  z-index: 2;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 2rem;
   gap: 3rem;
-  overflow: hidden;
+  max-width: 1080px;
+  width: 100%;
+  margin: 0 auto;
+  flex: 1;
 }
 
 #matrix-canvas {
@@ -25,8 +37,6 @@ html.theme-light #matrix-canvas {
 .hero-left {
   flex: 1;
   min-width: 0;
-  position: relative;
-  z-index: 2;
 }
 
 .hero-prompt {
@@ -190,11 +200,9 @@ html.theme-light #matrix-canvas {
   flex: 0 0 auto;
   width: 320px;
   display: none;
-  position: relative;
-  z-index: 2;
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 900px) {
   .hero-right {
     display: block;
   }
@@ -225,19 +233,60 @@ html.theme-light #matrix-canvas {
   display: inline-block;
 }
 
+.terminal-title {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: var(--text-dim);
+}
+
 .terminal-content {
   padding: 1rem;
   font-family: var(--font-mono);
-  color: var(--terminal-text, #c4d6e8);
+  color: var(--terminal-text);
+  font-size: 0.75rem;
+  line-height: 1.7;
 }
 
-.terminal-content div {
-  white-space: pre-wrap;
+.terminal-content .tl {
+  white-space: nowrap;
   word-wrap: break-word;
 }
 
+/* Terminal color classes */
+.tc-dim { color: var(--muted); }
+.tc-ok  { color: var(--accent2); }
+.tc-key { color: var(--accent); }
+
+/* Terminal stagger animation */
+@keyframes terminal-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.tl {
+  opacity: 0;
+  animation: terminal-fade-in 0.4s ease forwards;
+}
+
+.tl-d1 { animation-delay: 0ms;    }
+.tl-d2 { animation-delay: 150ms;  }
+.tl-d3 { animation-delay: 300ms;  }
+.tl-d4 { animation-delay: 450ms;  }
+.tl-d5 { animation-delay: 600ms;  }
+.tl-d6 { animation-delay: 750ms;  }
+.tl-d7 { animation-delay: 900ms;  }
+.tl-d8 { animation-delay: 1050ms; }
+.tl-d9 { animation-delay: 1200ms; }
+
 .terminal-prompt {
-  color: var(--terminal-prompt, #00ff88);
+  color: var(--terminal-prompt);
 }
 
 /* Scroll Indicator */
@@ -250,44 +299,38 @@ html.theme-light #matrix-canvas {
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
-  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
   color: var(--text-dim);
-  animation: bounce 2s infinite;
   z-index: 2;
 }
 
-.scroll-indicator svg {
-  color: var(--accent);
+.scroll-line {
+  width: 1px;
+  height: 40px;
+  background: var(--accent);
+  animation: scroll-line-pulse 2s ease-in-out infinite;
 }
 
-@keyframes bounce {
-  0%, 100% { transform: translateX(-50%) translateY(0); }
-  50% { transform: translateX(-50%) translateY(-8px); }
-}
-
-/* Ambient glow behind hero */
-.hero::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 600px;
-  height: 600px;
-  background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-  z-index: 1;
+@keyframes scroll-line-pulse {
+  0%, 100% { opacity: 0.3; transform: scaleY(1); }
+  50%       { opacity: 1;   transform: scaleY(1.15); }
 }
 
 /* Mobile */
 @media (max-width: 900px) {
   .hero {
-    flex-direction: column;
-    min-height: auto;
-    justify-content: flex-start;
+    height: auto;
+    min-height: 100vh;
     padding-top: 6rem;
   }
 
+  .hero-container {
+    flex-direction: column;
+  }
+
   .hero-tagline {
     max-width: 100%;
   }
@@ -299,15 +342,8 @@ html.theme-light #matrix-canvas {
 
 @media (prefers-reduced-motion: reduce) {
   .hero-name.is-glitching::before,
-  .hero-name.is-glitching::after {
-    animation: none;
-  }
-
-  .scroll-indicator {
-    animation: none;
-  }
-
-  .cursor {
-    animation: none;
-  }
+  .hero-name.is-glitching::after { animation: none; }
+  .cursor                         { animation: none; }
+  .scroll-line                    { animation: none; opacity: 0.6; }
+  .tl                             { animation: none; opacity: 1; }
 }