@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

/* 定義排行榜專用的滑動與淡入淡出動畫 */
.rank-slide-enter-right { animation: slideInRight 0.3s ease-out forwards; }
.rank-slide-enter-left { animation: slideInLeft 0.3s ease-out forwards; }
.rank-item-move { transition: transform 0.4s ease-in-out; }
.rank-item-fade-in { animation: fadeIn 0.4s ease-out forwards; }
.rank-item-fade-out { animation: fadeOut 0.3s ease-out forwards; }
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9); }
}

/* --- 動畫 --- */
@keyframes fade {
    0%   { opacity: 0; transform: translate(-50%, 20px); }
    10%  { opacity: 1; transform: translate(-50%, 0); }
    80%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -20px); }
}

/* --- 隱藏橫向捲軸 --- */
.shop-tabs::-webkit-scrollbar {
    display: none;
}
.shop-tabs {
    scrollbar-width: none;
}

/* --- 背景漸層 (保留以利 JS 隨機切換) --- */
.bg-gradient-0 { background: linear-gradient(to bottom, #fffce0, #ffe0b2); }
.bg-gradient-1 { background: linear-gradient(to bottom, #e0f7fa, #80deea); }
.bg-gradient-2 { background: linear-gradient(to bottom, #fce4ec, #ffd7e5); }
.bg-gradient-3 { background: linear-gradient(to bottom, #e8f5e9, #a5d6a7); }
.bg-gradient-4 { background: linear-gradient(to bottom, #ffffe0, #fff59d); }
.bg-gradient-5 { background: linear-gradient(to bottom, #f3e5f5, #ecccf1); }