style.css

Author: zeroami

style.css

@@ -269,38 +269,49 @@ h1 {
     transform: translateX(3px);
 }
 
-/* Typing effect */
+/* ——— SMOOTH FADE-IN UP QUOTE ——— */
 .quote {
-    font-family: 'Roboto Mono', monospace;
-    background: rgba(30,41,59,0.9);
-    padding: 2.5rem;
-    border-radius: 15px;
-    border-left: 6px solid var(--primary);
-    box-shadow: 0 0 15px rgba(59,130,246,0.3);
-    overflow: hidden;
-    margin: 2.5rem 0;
+  position: relative;
+  font-family: 'Roboto Mono', monospace;
+  background: rgba(30,41,59,0.9);
+  padding: 2.5rem;
+  border-radius: 15px;
+  border-left: 6px solid var(--primary);
+  box-shadow: 0 0 15px rgba(59,130,246,0.3);
+  overflow: hidden;
+  margin: 2.5rem 0;
 }
-.quote span.typing {
-    display: inline-block;
-    overflow: hidden;
-    white-space: nowrap;
-    border-right: 2px solid var(--primary);
-    animation: typing 5s steps(60) forwards, blink-caret .75s step-end infinite;
-}
-@keyframes typing {
-    from { width: 0; }
-    to { width: 100%; }
+
+/* texto principal */
+.quote .typing {
+  opacity: 0;
+  transform: translateY(20px) scale(0.95) blur(4px);
+  animation: fadeInUp 1s ease-out forwards;
+  animation-delay: 0.5s;
 }
-@keyframes blink-caret {
-    0%,100% { border-color: transparent; }
-    50% { border-color: var(--primary); }
+
+/* autor, aparece tras el texto */
+.quote .author {
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+  margin-top: 0.8rem;
+  font-size: 1.3rem;
+  line-height: 1.6;
+  animation: fadeInUp 0.8s ease-out forwards;
+  animation-delay: 1.5s;
 }
 
-/* Roadmap */
-.roadmap-container {
-    overflow-x: auto;
-    padding-bottom: 1.5rem;
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.95) blur(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1) blur(0);
+  }
 }
+
 .roadmap {
     display: flex;
     min-width: 1000px;