From 4a0a507ec0302a70b86871db07a58aabb27d2afa Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sat, 28 Feb 2026 13:31:49 -0500
Subject: [PATCH] style: apply fluid interface principles with organic
 animations and reactive feedback

---
 frontend/src/components/ETACard.vue |  8 ++--
 frontend/src/views/MapView.vue      | 74 +++++++++++++++++------------
 2 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/ETACard.vue b/frontend/src/components/ETACard.vue
index b447635..52645c6 100644
--- a/frontend/src/components/ETACard.vue
+++ b/frontend/src/components/ETACard.vue
@@ -216,10 +216,12 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-/* Transición de entrada/salida (Slide up de abajo hacia arriba) */
-.sheet-ui-enter-active,
+/* Transición de entrada/salida (Slide up de abajo hacia arriba per "Fluid Interfaces") */
+.sheet-ui-enter-active {
+  transition: all 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
 .sheet-ui-leave-active {
-  transition: all 0.4s cubic-bezier(0.32, 0.72, 0, 1);
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .sheet-ui-enter-from,
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index bfc646a..482fe40 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -63,15 +63,6 @@ const showSearchDropdown = ref(false);
 const showUberSearch = ref(false);
 const showRoutesToggle = ref(false);
 const showPromos = ref(false);
-const isInputFocused = ref(false);
-
-function onInputFocus() {
-  isInputFocused.value = true;
-}
-
-function onInputBlur() {
-  isInputFocused.value = false;
-}
 
 watch([stopSearchQuery, destinationQuery], ([stopQuery, destQuery]) => {
   const query = showUberSearch.value ? destQuery : stopQuery;
@@ -885,7 +876,7 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
 
           <!-- Uber-style Search Panel -->
       <Transition name="uber-slide">
-        <div v-if="showUberSearch" class="uber-search-panel" :class="{ 'is-focused': isInputFocused }">
+        <div v-if="showUberSearch" class="uber-search-panel">
           <div class="uber-search-header">
             <button class="back-btn" @click="closeUberSearch">
               <span class="material-icons">arrow_back</span>
@@ -1413,13 +1404,13 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
   background: var(--active-color);
 }
 
-/* Carousel Slide Animation */
+/* Carousel Slide Animation - Fluid */
 .carousel-slide-enter-active,
 .carousel-slide-leave-active {
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
 }
-.carousel-slide-enter-from { opacity: 0; transform: translateX(32px); }
-.carousel-slide-leave-to   { opacity: 0; transform: translateX(-32px); }
+.carousel-slide-enter-from { opacity: 0; transform: translateX(40px) scale(0.95); }
+.carousel-slide-leave-to   { opacity: 0; transform: translateX(-40px) scale(0.95); }
 
 /* Uber-like Search Interface Styles */
 .uber-search-container {
@@ -1476,7 +1467,12 @@ html.light-theme .uber-search-trigger-compact {
 
 .uber-search-trigger-compact:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
+  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
+}
+
+.uber-search-trigger-compact:active {
+  transform: scale(0.94);
+  filter: brightness(0.9);
 }
 
 .uber-search-trigger-compact .search-icon {
@@ -1528,11 +1524,19 @@ html.light-theme .uber-search-trigger-compact {
   box-shadow: 0 15px 30px rgba(254, 231, 21, 0.3);
 }
 
+.schedules-btn-floating:active {
+  transform: scale(0.92);
+}
+
 .uber-search-trigger:hover {
   transform: translateY(-4px);
   background: var(--hover-bg);
 }
 
+.uber-search-trigger:active {
+  transform: scale(0.96);
+}
+
 .search-icon {
   color: var(--active-color);
   margin-right: 12px;
@@ -1570,21 +1574,23 @@ html.light-theme .uber-search-trigger-compact {
   z-index: 1200;
 }
 
-/* Animaciones del Banner (Slide de abajo hacia arriba per request) */
-.banner-slide-enter-active,
+/* Animaciones del Banner (Slide de arriba hacia abajo, muy fluido) */
+.banner-slide-enter-active {
+  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
 .banner-slide-leave-active {
-  transition: all 0.45s cubic-bezier(0.32, 0.72, 0, 1);
+  transition: all 0.4s cubic-bezier(0.7, 0, 0.84, 0);
 }
 
 .banner-slide-enter-from,
 .banner-slide-leave-to {
-  transform: translateY(20px);
+  transform: translateY(-100%) scale(0.9);
   opacity: 0;
 }
 
 .banner-slide-enter-to,
 .banner-slide-leave-from {
-  transform: translateY(0);
+  transform: translateY(0) scale(1);
   opacity: 1;
 }
 
@@ -1655,11 +1661,8 @@ html.light-theme .uber-search-trigger-compact {
   padding: 16px;
   z-index: 2500;
   border: 1px solid var(--border-color);
-  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-  max-width: 500px;
-  margin: 0 auto;
-  max-height: calc(100vh - 140px); /* Nunca sobrepasa la pantalla */
   overflow-y: auto;
+  transform-origin: top center;
 }
 
 /* Fix para que no se oculte al salir el teclado */
@@ -1788,10 +1791,12 @@ html.light-theme .uber-search-trigger-compact {
   color: var(--text-secondary);
 }
 
-/* Uber Slide Animation */
-.uber-slide-enter-active,
+/* Uber Slide Animation - Fluid with scale */
+.uber-slide-enter-active {
+  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
 .uber-slide-leave-active {
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .uber-slide-enter-from,
@@ -1862,6 +1867,11 @@ html.light-theme .uber-search-trigger-compact {
     background: var(--hover-bg);
 }
 
+.location-loader-btn:active {
+  transform: scale(0.85);
+  background: var(--active-bg);
+}
+
 .location-loader-btn .material-icons {
   font-size: 26px;
 }
@@ -1920,14 +1930,16 @@ html.light-theme .uber-search-trigger-compact {
   100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(254, 231, 21, 0); }
 }
 
-/* Bottom sheet transition */
-.sheet-slide-enter-active,
+/* Bottom sheet transition - Fluid */
+.sheet-slide-enter-active {
+  transition: all 0.6s cubic-bezier(0.32, 0.72, 0, 1);
+}
 .sheet-slide-leave-active {
-  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .sheet-slide-enter-from,
 .sheet-slide-leave-to {
-  transform: translateY(100%);
+  transform: translateY(100%) scale(0.98);
   opacity: 0;
 }