/* ==========================================
   FEATURE: LSPD CAR - FULLSCREEN PREMIUM
========================================== */

.lspd-car-animation {
    position: fixed;
    right: -420px;
    left: auto;
    bottom: 12vh;
    width: 340px;
    height: 130px;
    pointer-events: none;
    z-index: 6;
    animation: lspdDrivePremium 4.4s cubic-bezier(.16,.84,.24,1) forwards;
}

.lspd-body {
    position: absolute;
    left: 0;
    bottom: 26px;
    width: 340px;
    height: 82px;
    filter: drop-shadow(0 24px 24px rgba(0,0,0,.65));
}

.lspd-body::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 30px;
    width: 280px;
    height: 44px;
    border-radius: 30px 48px 18px 18px;
    background:
        linear-gradient(90deg, #101010 0 28%, #f2f2f2 28% 70%, #111 70% 100%);
    border: 2px solid rgba(255,255,255,.2);
}

.lspd-hood {
    position: absolute;
    left: 8px;
    top: 42px;
    width: 92px;
    height: 28px;
    border-radius: 50px 12px 8px 18px;
    background: linear-gradient(180deg, #1a1a1a, #050505);
    transform: skewX(-18deg);
}

.lspd-trunk {
    position: absolute;
    right: 18px;
    top: 43px;
    width: 70px;
    height: 26px;
    border-radius: 8px 28px 14px 8px;
    background: linear-gradient(180deg, #151515, #050505);
    transform: skewX(16deg);
}

.lspd-cabin {
    position: absolute;
    left: 122px;
    top: 7px;
    width: 130px;
    height: 48px;
    border-radius: 45px 45px 8px 8px;
    background: linear-gradient(180deg, #f6f6f6, #d6d6d6);
    clip-path: polygon(18% 100%, 30% 0, 76% 0, 94% 100%);
}

.lspd-window {
    position: absolute;
    top: 15px;
    height: 30px;
    background: linear-gradient(135deg, #18202a, #05070a);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: inset 0 0 14px rgba(0,120,255,.25);
}

.lspd-window.front {
    left: 165px;
    width: 58px;
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}

.lspd-window.back {
    left: 112px;
    width: 54px;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

.lspd-side-line {
    position: absolute;
    left: 52px;
    top: 58px;
    width: 244px;
    height: 3px;
    background: rgba(255,255,255,.75);
}

.lspd-door {
    position: absolute;
    left: 178px;
    top: 42px;
    width: 2px;
    height: 34px;
    background: rgba(0,0,0,.35);
}

.lspd-logo {
    position: absolute;
    left: 126px;
    top: 48px;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #050505;
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.lspd-headlight {
    position: absolute;
    left: 6px;
    top: 54px;
    width: 20px;
    height: 8px;
    border-radius: 999px;
    background: #dff6ff;
    box-shadow:
        0 0 16px #9be8ff,
        -46px 2px 60px 18px rgba(120,210,255,.45);
    animation: lspdHeadlightPulse .25s infinite;
}

.lspd-taillight {
    position: absolute;
    right: 12px;
    top: 55px;
    width: 15px;
    height: 9px;
    border-radius: 999px;
    background: #ff2525;
    box-shadow: 0 0 18px rgba(255,0,0,.9);
}

.lspd-lightbar {
    position: absolute;
    left: 158px;
    top: -2px;
    width: 66px;
    height: 12px;
    border-radius: 999px;
    background: #111;
    display: flex;
    overflow: visible;
}

.lspd-lightbar span {
    width: 50%;
    height: 100%;
    display: block;
}

.lspd-lightbar .blue {
    background: #0088ff;
    border-radius: 999px 0 0 999px;
    animation: lspdBlueFlash .28s infinite;
}

.lspd-lightbar .red {
    background: #ff1f32;
    border-radius: 0 999px 999px 0;
    animation: lspdRedFlash .28s infinite;
}

.lspd-wheel {
    position: absolute;
    bottom: -6px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle, #151515 0 38%, #050505 39% 100%);
    border: 6px solid #262626;
    box-shadow:
        inset 0 0 0 5px #080808,
        0 8px 14px rgba(0,0,0,.7);
    animation: lspdWheelSpin .34s linear infinite;
}

.lspd-wheel span {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 3px dashed rgba(255,255,255,.25);
}

.lspd-wheel.back {
    left: 64px;
}

.lspd-wheel.front {
    right: 56px;
}

.lspd-ground-glow {
    position: absolute;
    left: 40px;
    bottom: 0;
    width: 260px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(0,90,255,.45), rgba(255,0,35,.45));
    filter: blur(18px);
    opacity: .8;
    animation: lspdGlowPulse .28s infinite;
}

.lspd-motion-lines {
    position: absolute;
    right: -90px;
    top: 34px;
    width: 260px;
    height: 70px;
    background:
        linear-gradient(90deg, transparent, rgba(0,120,255,.75), transparent),
        linear-gradient(90deg, transparent, rgba(255,35,35,.65), transparent);
    background-size: 100% 4px, 100% 4px;
    background-position: 0 18px, 0 48px;
    background-repeat: no-repeat;
    filter: blur(2px);
    opacity: .9;
}

@keyframes lspdDrivePremium {
    0% {
        transform: translateX(0) translateY(18px) scale(.86);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    72% {
        transform: translateX(calc(-100vw - 180px)) translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(calc(-100vw - 520px)) translateY(-6px) scale(1);
        opacity: 0;
    }
}

@keyframes lspdWheelSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes lspdBlueFlash {
    0%, 100% {
        opacity: 1;
        box-shadow:
            0 0 18px #0088ff,
            -18px 0 44px rgba(0,120,255,.8);
    }

    50% {
        opacity: .25;
        box-shadow: none;
    }
}

@keyframes lspdRedFlash {
    0%, 100% {
        opacity: .25;
        box-shadow: none;
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 18px #ff1f32,
            18px 0 44px rgba(255,0,35,.85);
    }
}

@keyframes lspdGlowPulse {
    0%, 100% {
        opacity: .45;
    }

    50% {
        opacity: .95;
    }
}

@keyframes lspdHeadlightPulse {
    0%, 100% {
        opacity: .8;
    }

    50% {
        opacity: 1;
    }
}