#car-intro-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: #000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#car-intro-overlay.fade-out {
animation: intro-dismiss 0.9s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes intro-dismiss {
0% { opacity: 1; }
100% { opacity: 0; pointer-events: none; }
}
/* Three.js speed canvas */
#speed-canvas {
position: absolute;
inset: 0;
z-index: 1;
}
/* Vignette overlay */
.intro-vignette {
position: absolute;
inset: 0;
z-index: 4;
background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.75) 100%);
pointer-events: none;
}
/* Horizon glow — faint red/amber at center horizon */
.intro-horizon-glow {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 200px;
background: radial-gradient(ellipse, rgba(232,0,26,0.12) 0%, rgba(245,158,11,0.04) 40%, transparent 70%);
filter: blur(40px);
z-index: 2;
pointer-events: none;
animation: horizon-breathe 3s ease-in-out infinite alternate;
}
@keyframes horizon-breathe {
from { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}
/* === 3D ROAD === */
.intro-road {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 52%;
perspective: 500px;
z-index: 2;
overflow: hidden;
pointer-events: none;
}
.intro-road-surface {
position: absolute;
inset: 0;
background: linear-gradient(180deg, #050508 0%, #0d0d12 30%, #111118 60%, #161620 100%);
transform: rotateX(60deg);
transform-origin: bottom center;
}
/* Lane markings */
.intro-road-surface::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 200%;
background: repeating-linear-gradient(
180deg,
rgba(255,255,255,0.35) 0px,
rgba(255,255,255,0.35) 40px,
transparent 40px,
transparent 100px
);
animation: road-scroll 0.35s linear infinite;
}
/* Side road edges */
.intro-road-surface::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(232,0,26,0.15) 0px, transparent 3px, transparent calc(100% - 3px), rgba(232,0,26,0.15) 100%);
pointer-events: none;
}
@keyframes road-scroll {
from { background-position: 0 0; }
to { background-position: 0 100px; }
}
/* === CAR WRAPPER — APPROACH ANIMATION === */
.intro-car-wrap {
position: relative;
z-index: 5;
width: 70vw;
max-width: 850px;
opacity: 0;
filter: blur(18px) brightness(0.3);
transform: perspective(1400px) translateZ(-2500px) scale(0.04);
animation: car-approach 4.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
@keyframes car-approach {
0% {
opacity: 0;
filter: blur(18px) brightness(0.3);
transform: perspective(1400px) translateZ(-2500px) scale(0.04);
}
12% {
opacity: 0.6;
filter: blur(12px) brightness(0.4);
}
35% {
opacity: 1;
filter: blur(6px) brightness(0.6);
transform: perspective(1400px) translateZ(-600px) scale(0.4);
}
60% {
filter: blur(2px) brightness(0.85);
transform: perspective(1400px) translateZ(-150px) scale(0.75);
}
82% {
filter: blur(0.5px) brightness(0.95);
transform: perspective(1400px) translateZ(-30px) scale(0.95);
}
100% {
opacity: 1;
filter: blur(0px) brightness(1);
transform: perspective(1400px) translateZ(0px) scale(1);
}
}
/* Screen shake at the end */
.intro-car-wrap.arrived {
animation: car-rumble 0.08s linear 4;
}
@keyframes car-rumble {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(-3px, 1px); }
50% { transform: translate(2px, -2px); }
75% { transform: translate(-1px, 2px); }
}
/* Car image */
.intro-car-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 8px;
mask-image: radial-gradient(ellipse 90% 95% at 50% 48%, black 55%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 90% 95% at 50% 48%, black 55%, transparent 100%);
}
/* Ground reflection under car */
.intro-car-reflection {
position: absolute;
bottom: -10px;
left: 10%;
right: 10%;
height: 50px;
background: radial-gradient(ellipse, rgba(232,0,26,0.12) 0%, rgba(245,100,0,0.05) 50%, transparent 80%);
filter: blur(12px);
z-index: -1;
opacity: 0;
animation: reflection-fade 4.2s 0.3s forwards;
}
@keyframes reflection-fade {
0% { opacity: 0; }
60% { opacity: 0.3; }
100% { opacity: 1; }
}
/* === TAILLIGHTS === */
.intro-taillight {
position: absolute;
width: 55px;
height: 16px;
border-radius: 50%;
z-index: 6;
opacity: 0;
animation: taillight-appear 4.2s 0.3s forwards;
}
.intro-taillight-inner {
width: 100%;
height: 100%;
background: radial-gradient(ellipse, rgba(232,0,26,0.95) 0%, rgba(232,0,26,0.5) 40%, transparent 70%);
border-radius: 50%;
filter: blur(5px);
animation: taillight-pulse 0.7s ease-in-out infinite alternate;
}
.intro-taillight-bloom {
position: absolute;
inset: -20px;
background: radial-gradient(ellipse, rgba(232,0,26,0.25) 0%, transparent 60%);
filter: blur(15px);
animation: taillight-pulse 0.7s ease-in-out infinite alternate;
}
.intro-taillight-left {
top: 36%;
left: 15%;
}
.intro-taillight-right {
top: 36%;
right: 15%;
}
@keyframes taillight-appear {
0% { opacity: 0; }
55% { opacity: 0; }
70% { opacity: 0.7; }
100% { opacity: 1; }
}
@keyframes taillight-pulse {
from { opacity: 0.7; transform: scale(1); }
to { opacity: 1; transform: scale(1.25); }
}
/* === EXHAUST GLOW === */
.intro-exhaust {
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
width: 180px;
height: 35px;
z-index: 4;
opacity: 0;
animation: exhaust-appear 4.2s 0.3s forwards;
}
.intro-exhaust-inner {
width: 100%;
height: 100%;
background: radial-gradient(ellipse, rgba(255,80,0,0.25) 0%, rgba(232,0,26,0.1) 50%, transparent 80%);
filter: blur(12px);
animation: exhaust-flicker 0.2s ease-in-out infinite alternate;
}
@keyframes exhaust-appear {
0% { opacity: 0; }
65% { opacity: 0; }
80% { opacity: 0.6; }
100% { opacity: 1; }
}
@keyframes exhaust-flicker {
from { opacity: 0.6; transform: translateX(-50%) scaleX(0.85); }
to { opacity: 1; transform: translateX(-50%) scaleX(1.15); }
}
/* === WHEEL SPIN OVERLAYS === */
.intro-wheel {
position: absolute;
width: 70px;
height: 70px;
border-radius: 50%;
z-index: 6;
opacity: 0;
animation: wheel-appear 4.2s 0.3s forwards;
}
.intro-wheel-rim {
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid rgba(180,180,180,0.25);
position: relative;
animation: wheel-spin 0.3s linear infinite;
}
.intro-wheel-rim::before {
content: '';
position: absolute;
inset: 6px;
border-radius: 50%;
border: 1.5px solid rgba(200,200,200,0.15);
background: radial-gradient(circle, rgba(40,40,40,0.5) 0%, transparent 70%);
}
.intro-wheel-rim::after {
content: '';
position: absolute;
inset: 12px;
border-radius: 50%;
background:
linear-gradient(0deg, rgba(200,200,200,0.2) 0.5px, transparent 0.5px),
linear-gradient(72deg, rgba(200,200,200,0.2) 0.5px, transparent 0.5px),
linear-gradient(144deg, rgba(200,200,200,0.2) 0.5px, transparent 0.5px),
linear-gradient(216deg, rgba(200,200,200,0.2) 0.5px, transparent 0.5px),
linear-gradient(288deg, rgba(200,200,200,0.2) 0.5px, transparent 0.5px);
}
.intro-wheel-left {
bottom: 8%;
left: 20%;
}
.intro-wheel-right {
bottom: 8%;
right: 20%;
}
@keyframes wheel-appear {
0% { opacity: 0; }
70% { opacity: 0; }
85% { opacity: 0.6; }
100% { opacity: 1; }
}
@keyframes wheel-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* === CSS SPEED LINES (fallback) === */
.intro-speed-lines {
position: absolute;
inset: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
}
.speed-line {
position: absolute;
height: 1.5px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
border-radius: 1px;
}
/* === HUD ELEMENTS === */
.intro-hud {
position: absolute;
z-index: 8;
font-family: 'Orbitron', sans-serif;
opacity: 0;
pointer-events: none;
}
/* Brand title */
.intro-hud-brand {
top: 7%;
left: 50%;
transform: translateX(-50%);
font-size: 1.4rem;
font-weight: 900;
letter-spacing: 10px;
color: rgba(255,255,255,0.75);
text-shadow: 0 0 30px rgba(255,255,255,0.15), 0 2px 20px rgba(0,0,0,0.8);
text-transform: uppercase;
animation: hud-brand-in 1s 0.5s forwards;
}
@keyframes hud-brand-in {
from { opacity: 0; letter-spacing: 25px; filter: blur(4px); }
to { opacity: 1; letter-spacing: 10px; filter: blur(0px); }
}
/* Speed counter */
.intro-hud-speed {
bottom: 7%;
right: 7%;
font-size: 3rem;
font-weight: 900;
color: rgba(232,0,26,0.85);
text-shadow: 0 0 40px rgba(232,0,26,0.4);
animation: hud-fade-in 0.6s 1.8s forwards;
}
.intro-hud-speed .speed-unit {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 3px;
color: rgba(255,255,255,0.35);
display: block;
text-shadow: none;
margin-top: 2px;
}
/* RPM gauge */
.intro-hud-rpm {
bottom: 7%;
left: 7%;
font-size: 0.6rem;
letter-spacing: 3px;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
animation: hud-fade-in 0.6s 2s forwards;
}
.intro-rpm-bar {
width: 130px;
height: 4px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
margin-top: 8px;
overflow: hidden;
}
.intro-rpm-fill {
height: 100%;
width: 20%;
background: linear-gradient(90deg, var(--green), var(--amber), var(--red));
border-radius: 2px;
box-shadow: 0 0 8px rgba(232,0,26,0.4);
animation: rpm-sweep 1.2s ease-in-out infinite;
}
@keyframes rpm-sweep {
0% { width: 20%; }
50% { width: 92%; }
100% { width: 55%; }
}
/* Gear indicator */
.intro-hud-gear {
bottom: 20%;
right: 7%;
font-size: 0.55rem;
letter-spacing: 2px;
color: rgba(255,255,255,0.3);
text-transform: uppercase;
animation: hud-fade-in 0.6s 2.2s forwards;
}
.intro-gear-num {
font-size: 1.6rem;
font-weight: 900;
color: rgba(255,255,255,0.6);
display: block;
margin-top: 4px;
text-shadow: 0 0 12px rgba(255,255,255,0.1);
}
@keyframes hud-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Corner scan lines */
.intro-scanlines {
position: absolute;
inset: 0;
z-index: 7;
pointer-events: none;
background: repeating-linear-gradient(
0deg,
transparent 0px,
transparent 3px,
rgba(0,0,0,0.06) 3px,
rgba(0,0,0,0.06) 4px
);
}
/* === FLASH TRANSITION === */
.intro-flash {
position: absolute;
inset: 0;
background: white;
z-index: 20;
opacity: 0;
pointer-events: none;
}
.intro-flash.fire {
animation: flash-bang 0.7s ease-out forwards;
}
@keyframes flash-bang {
0% { opacity: 0; }
12% { opacity: 0.95; }
100% { opacity: 0; }
}
/* === SKIP BUTTON === */
.intro-skip-btn {
position: absolute;
bottom: 2rem;
right: 2rem;
z-index: 25;
background: rgba(255,255,255,0.04);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.4);
font-family: 'Orbitron', sans-serif;
font-size: 0.6rem;
letter-spacing: 2px;
text-transform: uppercase;
padding: 0.55rem 1.3rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 6px;
}
.intro-skip-btn:hover {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.7);
border-color: rgba(255,255,255,0.25);
box-shadow: 0 0 20px rgba(255,255,255,0.05);
}
.intro-skip-btn i {
font-size: 0.55rem;
transition: transform 0.3s;
}
.intro-skip-btn:hover i {
transform: translateX(3px);
}
/* Loading progress */
.intro-progress {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: linear-gradient(90deg, var(--red), var(--amber));
z-index: 25;
box-shadow: 0 0 10px var(--red-glow);
animation: progress-fill 4.5s linear 0.3s forwards;
}
@keyframes progress-fill {
from { width: 0%; }
to { width: 100%; }
}
/* === RESPONSIVE === */
@media(max-width: 768px) {
.intro-car-wrap { width: 92vw; }
.intro-hud-brand { font-size: 0.85rem; letter-spacing: 6px; top: 5%; }
.intro-hud-speed { font-size: 2rem; bottom: 5%; right: 5%; }
.intro-hud-rpm { bottom: 5%; left: 5%; }
.intro-hud-gear { display: none; }
.intro-rpm-bar { width: 90px; }
.intro-wheel { width: 45px; height: 45px; }
.intro-taillight { width: 35px; height: 10px; }
.intro-skip-btn { bottom: 1rem; right: 1rem; padding: 0.45rem 1rem; }
.intro-horizon-glow { width: 350px; height: 120px; }
}
@media(max-width: 480px) {
.intro-hud-brand { font-size: 0.65rem; letter-spacing: 4px; }
.intro-hud-speed { font-size: 1.5rem; }
.intro-hud-speed .speed-unit { font-size: 0.55rem; }
.intro-car-wrap { width: 98vw; }
}
Vehicle Hospital
0
KM / H
Gear
3
