Update

Assets/Scripts/UI/MainMenuController.cs

@@ -13,7 +13,13 @@ namespace UI
         private VisualElement _logoPlaceholder;
         private bool _isActive = false;
 
+        [Header("Animation Settings")]
         public float transitionDuration = 0.5f;
+        public float idleTimeout = 5f;
+        public float pulseSpeed = 2f;
+        public float pulseAmount = 0.05f;
+        
+        private float _lastInteractionTime;
 
         private void OnEnable()
         {
@@ -26,45 +32,105 @@ namespace UI
 
             _logoContainer.RegisterCallback<ClickEvent>(OnLogoClicked);
 
+            // Register interactions to reset idle timer
+            root.RegisterCallback<MouseMoveEvent>(evt => ResetIdleTimer());
+            var buttons = root.Query<Button>().ToList();
+            foreach (var btn in buttons)
+            {
+                btn.RegisterCallback<ClickEvent>(evt => ResetIdleTimer());
+            }
+
             // Routing
-            root.Q<Button>("btn-create")?.RegisterCallback<ClickEvent>(ev => UIManager.Instance.ShowScreen("Lobby"));
-            root.Q<Button>("btn-join")?.RegisterCallback<ClickEvent>(ev => UIManager.Instance.ShowScreen("Lobby"));
+            root.Q<Button>("btn-create")?.RegisterCallback<ClickEvent>(ev => NavigateToLobby(true));
+            root.Q<Button>("btn-join")?.RegisterCallback<ClickEvent>(ev => NavigateToLobby(false));
             root.Q<Button>("btn-settings")?.RegisterCallback<ClickEvent>(ev => UIManager.Instance.ToggleSettings());
             root.Q<Button>("btn-profile")?.RegisterCallback<ClickEvent>(ev => UIManager.Instance.ShowScreen("Profile"));
             root.Q<Button>("btn-exit")?.RegisterCallback<ClickEvent>(ev => Application.Quit());
+
+            ResetToIdleState();
+        }
+
+        private void Update()
+        {
+            // 1. Logic Pulsing (Luôn chạy)
+            float baseScale = _isActive ? 0.38f : 1.0f;
+            float pulse = Mathf.Sin(Time.time * pulseSpeed) * pulseAmount;
+            _logo.style.scale = new Scale(new Vector3(baseScale + pulse, baseScale + pulse, 1f));
+
+            // 2. Logic Idle Timeout
+            if (_isActive)
+            {
+                if (Time.time - _lastInteractionTime > idleTimeout)
+                {
+                    StartCoroutine(TransitionToIdle());
+                }
+            }
+        }
+
+        private void NavigateToLobby(bool isCreate)
+        {
+            var lobby = Object.FindFirstObjectByType<LobbyController>();
+            lobby?.SetMode(isCreate);
+            UIManager.Instance.ShowScreen("Lobby");
         }
 
         private void OnLogoClicked(ClickEvent evt)
         {
+            ResetIdleTimer();
             if (!_isActive) {
+                // Chỉ chuyển từ Idle sang Active
                 StartCoroutine(TransitionToActive());
             } else {
-                UIManager.Instance.ShowScreen("Lobby");
+                // Khi đã trong dải Ribbon, nhấn để vào Create Room
+                NavigateToLobby(true);
             }
         }
 
+        private void ResetIdleTimer()
+        {
+            _lastInteractionTime = Time.time;
+        }
+
+        private void ResetToIdleState()
+        {
+            _isActive = false;
+            _ribbon.style.display = DisplayStyle.None;
+            _logoContainer.style.translate = new Translate(0, 0);
+            _logoContainer.pickingMode = PickingMode.Position;
+        }
+
         private IEnumerator TransitionToActive()
         {
             _isActive = true;
-            
-            // 1. Show Ribbon (initially invisible)
+            ResetIdleTimer();
+
             _ribbon.style.display = DisplayStyle.Flex;
             _ribbon.style.opacity = 0;
 
-            // 2. Animate Logo to Ribbon
-            _logoContainer.style.transitionProperty = new List<StylePropertyName> { "scale", "translate", "opacity" };
+            _logoContainer.style.transitionProperty = new List<StylePropertyName> { "translate", "opacity" };
             _logoContainer.style.transitionDuration = new List<TimeValue> { new TimeValue(transitionDuration, TimeUnit.Second) };
             
-            yield return null; // Wait for layout update
-
-            // Tính toán khoảng cách di chuyển (Nếu cần thiết, ở đây dùng scale đơn giản)
-            _logoContainer.style.scale = new Scale(new Vector3(0.4f, 0.4f, 1f));
-            
             _ribbon.style.transitionProperty = new List<StylePropertyName> { "opacity" };
             _ribbon.style.transitionDuration = new List<TimeValue> { new TimeValue(transitionDuration, TimeUnit.Second) };
+
+            yield return null; 
+
+            // Di chuyển logo sang vị trí thứ 2 (-20%)
+            _logoContainer.style.translate = new Translate(Length.Percent(-20f), 0);
             _ribbon.style.opacity = 1;
 
             yield return new WaitForSeconds(transitionDuration);
         }
+
+        private IEnumerator TransitionToIdle()
+        {
+            _isActive = false;
+
+            _logoContainer.style.translate = new Translate(0, 0);
+            _ribbon.style.opacity = 0;
+
+            yield return new WaitForSeconds(transitionDuration);
+            _ribbon.style.display = DisplayStyle.None;
+        }
     }
 }