/*

WALKTAXI: 開屏動畫 (Splash Screen)

升級版：使用經典的士黃底色與實體車標
*/

.splash-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #FFCC33; /* 經典的士黃 */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.6s ease-in-out, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.splash-container.hidden {
opacity: 0;
transform: translateY(-50px) scale(1.05); /* 微微放大並向上滑出 */
pointer-events: none;
}

.splash-logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
transform: scale(0.9);
animation: pulseLogo 2s infinite alternate ease-in-out;
}

@keyframes pulseLogo {
0% { transform: scale(0.95); }
100% { transform: scale(1.05); }
}

.splash-logo img.car-icon {
width: 180px;
height: auto;
/* 讓黑色車子圖案更立體 */
filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));
}

.splash-logo img.text-icon {
width: 220px;
height: auto;
}

.splash-loader {
width: 200px;
height: 6px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 3px;
overflow: hidden;
position: relative;
margin-top: 10px;
}

.splash-loader::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40%;
background-color: #1A1A1A; /* 深灰黑色載入條 */
animation: loading 1.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes loading {
0% { left: -40%; }
100% { left: 100%; }
}