/*
|--------------------------------------------------------------------------
| PROJECT REDLINE - LAYERED CAR
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| LAYERED CAR SCENE
|--------------------------------------------------------------------------
|
| Размер определяется родительской сценой.
|
*/

.layered-car {

    position: relative;

    aspect-ratio: 16 / 6;

    height: 100%;

    width: auto;

    overflow: visible;
}

/*
|--------------------------------------------------------------------------
| CAR LAYERS
|--------------------------------------------------------------------------
*/

.layered-car-layer {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: contain;

    pointer-events: none;

    user-select: none;

    -webkit-user-drag: none;
}

/*
|--------------------------------------------------------------------------
| BODY LAYER
|--------------------------------------------------------------------------
*/

.layered-car-body {
    z-index: 5;

    mix-blend-mode: screen;
}

.layered-car-body-mask {

    position: absolute;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    z-index: 4;

    background:
        var(--body-color);

    -webkit-mask:
        var(--body-mask)
        center
        center /
        contain
        no-repeat;

    mask:
        var(--body-mask)
        center
        center /
        contain
        no-repeat;

    pointer-events: none;
}

.layered-car-body-base {

    z-index: 5;

    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| BRAKES
|--------------------------------------------------------------------------
*/

.layered-car-layer:nth-child(2) {
    z-index: 1;
}

/*
|--------------------------------------------------------------------------
| WHEELS
|--------------------------------------------------------------------------
*/

.layered-car-layer:nth-child(3) {
    z-index: 2;
}

/*
|--------------------------------------------------------------------------
| BUMPER
|--------------------------------------------------------------------------
*/

.layered-car-layer:nth-child(4) {
    z-index: 4;
}

/*
|--------------------------------------------------------------------------
| LIGHTS
|--------------------------------------------------------------------------
*/

.layered-car-layer:nth-child(6) {
    z-index: 6;
}

/*
|--------------------------------------------------------------------------
| GLOW EFFECT
|--------------------------------------------------------------------------
*/

.layered-car::after {
    content: '';

    position: absolute;

    bottom: 10px;
    left: 50%;

    width: 70%;
    height: 26px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(255, 42, 42, 0.18),
            transparent 70%
        );

    filter: blur(12px);

    z-index: 0;
}

/*
|--------------------------------------------------------------------------
| IMAGE RENDER
|--------------------------------------------------------------------------
*/

.layered-car img {
    image-rendering: auto;
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .layered-car {
        transform: scale(0.95);
    }
}

.layered-car-suspension {

    transition:
        transform 0.35s ease;
}