From f4fe999143651b3383e3aa57fc44f54fec30d06f Mon Sep 17 00:00:00 2001
From: AzuTear <vmbao62@hotmail.com>
Date: Wed, 24 Jun 2026 06:28:05 +0200
Subject: [PATCH] feat: refine cinematic hero title reveal

---
 src/components/HeroSection.vue | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
index 37802e6..8e83a88 100644
--- a/src/components/HeroSection.vue
+++ b/src/components/HeroSection.vue
@@ -208,6 +208,7 @@ h1 {
   font-weight: 900;
   letter-spacing: 0;
   text-transform: uppercase;
+  perspective: 900px;
 }
 
 .title-word {
@@ -223,15 +224,17 @@ h1 {
   -webkit-text-fill-color: transparent;
   background-clip: text;
   opacity: 0;
-  filter: blur(13px);
-  transform: translateY(0.22em) scale(0.985);
+  filter: blur(18px) brightness(1.18);
+  transform: scale(1.075) rotateX(18deg);
+  transform-origin: 50% 58%;
   text-shadow:
-    0 0 38px rgba(224, 202, 255, 0.32),
-    0 0 90px rgba(109, 83, 214, 0.25);
+    0 0 50px rgba(224, 202, 255, 0.42),
+    0 0 120px rgba(109, 83, 214, 0.34);
+  will-change: opacity, filter, transform;
 }
 
 .hero--active .title-letter {
-  animation: letter-reveal 1.85s cubic-bezier(0.16, 1, 0.3, 1) calc(0.45s + var(--delay)) forwards;
+  animation: gravitational-reveal 1.9s cubic-bezier(0.16, 1, 0.3, 1) calc(0.42s + var(--delay)) forwards;
 }
 
 .coming-soon {
@@ -263,22 +266,23 @@ h1 {
   }
 }
 
-@keyframes letter-reveal {
+@keyframes gravitational-reveal {
   0% {
     opacity: 0;
-    filter: blur(13px);
-    transform: translateY(0.22em) scale(0.985);
+    filter: blur(18px) brightness(1.18);
+    transform: scale(1.075) rotateX(18deg);
   }
 
-  62% {
+  52% {
     opacity: 1;
-    filter: blur(1.5px);
+    filter: blur(3px) brightness(1.08);
+    transform: scale(1.018) rotateX(4deg);
   }
 
   100% {
     opacity: 1;
-    filter: blur(0);
-    transform: translateY(0) scale(1);
+    filter: blur(0) brightness(1);
+    transform: scale(1) rotateX(0deg);
   }
 }