119 lines
2.1 KiB
CSS
119 lines
2.1 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* Car Mode Animated Background */
|
|
.car-mode-bg {
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.car-mode-bg::before,
|
|
.car-mode-bg::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
opacity: 0.4;
|
|
animation: float 20s ease-in-out infinite;
|
|
}
|
|
|
|
.car-mode-bg::before {
|
|
width: 600px;
|
|
height: 600px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
top: -200px;
|
|
left: -200px;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.car-mode-bg::after {
|
|
width: 500px;
|
|
height: 500px;
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
bottom: -150px;
|
|
right: -150px;
|
|
animation-delay: -10s;
|
|
}
|
|
|
|
.car-mode-blur-1,
|
|
.car-mode-blur-2,
|
|
.car-mode-blur-3 {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(100px);
|
|
opacity: 0.3;
|
|
animation: float 25s ease-in-out infinite;
|
|
}
|
|
|
|
.car-mode-blur-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
top: 50%;
|
|
left: 20%;
|
|
animation-delay: -5s;
|
|
}
|
|
|
|
.car-mode-blur-2 {
|
|
width: 350px;
|
|
height: 350px;
|
|
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
|
top: 30%;
|
|
right: 10%;
|
|
animation-delay: -15s;
|
|
}
|
|
|
|
.car-mode-blur-3 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
|
bottom: 20%;
|
|
left: 50%;
|
|
animation-delay: -8s;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
25% {
|
|
transform: translate(50px, -30px) scale(1.1);
|
|
}
|
|
50% {
|
|
transform: translate(-20px, 40px) scale(0.95);
|
|
}
|
|
75% {
|
|
transform: translate(-40px, -20px) scale(1.05);
|
|
}
|
|
}
|
|
|
|
/* Car Mode Card Transitions */
|
|
.car-mode-card {
|
|
animation: cardFadeIn 0.8s ease-out;
|
|
}
|
|
|
|
@keyframes cardFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
/* Progress bar animation */
|
|
.car-mode-progress {
|
|
animation: progressFill 5s linear;
|
|
}
|
|
|
|
@keyframes progressFill {
|
|
from {
|
|
width: 0%;
|
|
}
|
|
to {
|
|
width: 100%;
|
|
}
|
|
}
|