fix : main banner modify

src/views/Main.vue

@@ -347,16 +347,17 @@ onMounted(() => {
   margin: 0 auto;
   width: max-content;
 
-  /* 🟢 [핵심 오버라이드] 도트 단위 흔들림과 화려한 RGB 스플릿 애니메이션 */
-  color: #00ff00 !important; /* 베이스 색상 강제 */
+  /* [베이스 설정] 애니메이션 시작 전 기본 상태 */
+  color: #00ff00 !important;
   font-size: 14px;
   line-height: 1.2;
   border: none;
   background: transparent;
   transform-origin: center;
+  opacity: 1;
 
-  /* 🌟 압도적인 존재감의 애니메이션 적용 (2초 주기로 폭발적인 반짝임) */
-  animation: extreme-cyber-glitch-wobble 2s linear infinite !important;
+  /* 🌟 [핵심 변경] 딱 한 번만 실행(1)하고, 마지막 상태 고정(forwards) */
+  animation: once-cyber-glitch-wobble 2.5s linear 1 forwards !important;
 }
 
 /* 📺 유튜브 그리드 레이아웃 */
@@ -413,7 +414,7 @@ iframe { width: 100%; height: 180px; border-radius: 4px; }
 .about-text { font-family: monospace; line-height: 2; color: #00cc00;}
 .contact-form { font-family: monospace; line-height: 2; color: #00cc00;}
 
-/* 애니메이션 */
+/* 애니메이션 트랜지션 */
 .fade-enter-active, .fade-leave-active { transition: opacity 0.25s ease; }
 .fade-enter-from, .fade-leave-to { opacity: 0; }
 
@@ -450,81 +451,58 @@ iframe { width: 100%; height: 180px; border-radius: 4px; }
 }
 @keyframes blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
 
-/* 🟢 [NEW] 압도적으로 티가 나는 "익스트림 사이버 글리치 Wobble" 애니메이션 정의 */
-@keyframes extreme-cyber-glitch-wobble {
-  /* [정상 구간 - 20%] 차분하게 시작 */
-  0%, 10%, 100% {
+/* 🟢 [NEW] 딱 한 번 실행 후 최종 상태로 고정되는 "일회성 사이버 글리치" 애니메이션 정의 */
+@keyframes once-cyber-glitch-wobble {
+  /* [시작 - 25%] 차분한 오리지널 녹색 상태 유지 */
+  0%, 25% {
     transform: translate(0) scale(1) skewX(0deg);
     color: #00ff00 !important;
     text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important;
     opacity: 1;
   }
 
-  /* [스파이크 구간 1] 순식간에 티가 팍팍 나는 RGB 팝 */
-  11% {
-    transform: translate(-3px, 1.5px) scale(1.02) skewX(2deg);
-    color: #ffffff !important; /* 완전 하얀색으로 한순간 팝! */
-    text-shadow: 2px 0 #ff0000, -2px 0 #0000ff !important; /* 리얼 RGB 스플릿 */
-    opacity: 0.95;
-  }
-
-  /* [복구 1] 빠르게 오리지널 형광 그린 복귀 */
-  13% {
-    transform: translate(3px, -1.5px) scale(0.98) skewX(-2deg);
-    color: #00ff00 !important;
-    text-shadow: 0 0 15px rgba(0, 255, 0, 1) !important;
-  }
-
-  /* [정상 유지] 조금 긴 호흡 */
-  15%, 25% {
-    transform: translate(0);
-    text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important;
-  }
-
-  /* [빅 글리치 타이밍 1 - 색상 반전] */
+  /* [글리치 시퀀스 시작 - 26%] RGB 스플릿 플래시 */
   26% {
-    transform: translate(0);
-    color: #00ffff !important; /* 사이버 청록색으로 색상 확 튀게 변환 */
-    text-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, 0.8) !important;
-    opacity: 1;
+    transform: translate(-3px, 1.5px) scale(1.02);
+    color: #ffffff !important; /* 하얀색 팝 */
+    text-shadow: 2px 0 #ff0000, -2px 0 #0000ff !important; /* 리얼 RGB 스플릿 */
   }
 
-  /* [초고속 지지직] 0.02초 단위 도트 단위 흔들림 */
-  27% { transform: translate(-5px, 0) skewX(10deg); color: #ff00ff !important; text-shadow: -3px 0 magenta, 3px 0 cyan;}
-  28% { transform: translate(5px, 0) skewX(-10deg); color: #00ffff !important; text-shadow: 3px 0 magenta, -3px 0 cyan;}
+  /* [초고속 지지직 구간 - 27~32%] 도트 단위 미세 진동 */
+  27% { transform: translate(3px, -1.5px) skewX(-2deg); color: #00ff00 !important; }
+  28% { transform: translate(-5px, 0) skewX(10deg); color: #ff00ff !important; text-shadow: -3px 0 magenta, 3px 0 cyan;}
+  29% { transform: translate(5px, 0) skewX(-10deg); color: #00ffff !important; text-shadow: 3px 0 magenta, -3px 0 cyan;}
+  30% { transform: translate(0); color: #00ff00 !important; text-shadow: 0 0 15px rgba(0, 255, 0, 1) !important;}
 
-  /* [복구 2] 다시 베이스 녹색으로 터미널 숨쉬기 */
-  29% {
-    transform: translate(0);
-    color: #00ff00 !important;
-    text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important;
-  }
+  /* [안정화 - 31~50%] 잠깐 정상 상태 */
+  31%, 50% { transform: translate(0); color: #00ff00 !important; text-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important;}
 
-  /* [안정화] */
-  30%, 40% { transform: translate(0); }
-
-  /* [펄스 암전 타이밍 - 하드웨어 지지직] */
-  41% {
+  /* [빅 글리치 타이밍 - 51%] 시스템 암전 오류 */
+  51% {
     transform: scale(1.05) skewY(1deg);
     color: #ffffff !important;
-    opacity: 0.1; /* 완전 꺼지기 직전 시스템 오류 */
+    opacity: 0.05; /* 완전 꺼지기 직전 */
   }
 
-  /* [암전 복구] */
-  42% {
+  /* [복구 및 최종 색상 변환 시작 - 53%] 사이버 청록색으로 부활 */
+  53% {
     opacity: 1;
-    color: #00ff00 !important;
+    transform: translate(0);
+    color: #00ffff !important; /* 사이버 청록색 */
+    text-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, 0.8) !important;
   }
 
-  /* [색상 대반전 2 - 형광 연두] */
-  55% {
-    color: #bfff00 !important; /* 강렬한 산성 황록색 */
-    text-shadow: 0 0 15px #bfff00, 0 0 30px rgba(191, 255, 0, 0.7) !important;
-  }
+  /* [마지막 지지직 - 90~95%] 최종 정착 전 불안정한 떨림 */
+  90% { transform: translate(-2px, 1px); text-shadow: 2px 0 red, -2px 0 blue;}
+  92% { transform: translate(2px, -1px); text-shadow: -2px 0 red, 2px 0 blue;}
+  95% { transform: translate(0); color: #00ffff !important; text-shadow: 0 0 20px #00ffff !important;}
 
-  /* [최종 글리치 루프 시작] */
-  90% { transform: translate(0); }
-  91% { transform: translate(-2px, 0); color: #ff00ff !important; text-shadow: 2px 0 red, -2px 0 blue;}
-  92% { transform: translate(2px, 0); color: #00ffff !important; text-shadow: -2px 0 red, 2px 0 blue;}
+  /* 🌟 [최종 상태 고정 - 100%] 영롱한 사이버 청록색(Cyan) 및 강력한 Glow 상태로 영원히 고정 */
+  100% {
+    transform: translate(0) scale(1) skewX(0deg);
+    color: #00ffff !important; /* 👈 최종 고정 색상 */
+    text-shadow: 0 0 15px #00ffff, 0 0 30px rgba(0, 255, 255, 0.7) !important; /* 👈 최종 고정 효과 */
+    opacity: 1;
+  }
 }
 </style>