/*
|--------------------------------------------------------------------------
| GARAGE SCENE COORDINATES
|--------------------------------------------------------------------------
|
| Координаты сцены 1938x811.
|
*/

:root {

    /*
    |--------------------------------------------------------------------------
    | SCENE SIZE
    |--------------------------------------------------------------------------
    */

    --garage-scene-width: 1938;
    --garage-scene-height: 811;

    /*
    |--------------------------------------------------------------------------
    | MOBILE SCENE SIZE
    |--------------------------------------------------------------------------
    */

    --garage-mobile-camera-x: 970px;
    --garage-mobile-camera-y: 0px;

    --garage-mobile-car-scale: 1400px;

    /*
    |--------------------------------------------------------------------------
    | CAR POSITION
    |--------------------------------------------------------------------------
    |
    | Центр машины относительно сцены.
    |
    */

    --garage-car-x: 969px;

    /*
    |--------------------------------------------------------------------------
    | FLOOR LINE
    |--------------------------------------------------------------------------
    |
    | Линия пола.
    |
    */

    --garage-car-y: 690px;
}

/*
|--------------------------------------------------------------------------
| GARAGE BACKGROUND
|--------------------------------------------------------------------------
|
| Корневой контейнер игровой сцены.
|
*/

.garage-background {

    width: 100%;

    height: calc(100vh - 80px);

    min-height: 700px;

    position: relative;

    overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| GARAGE SCENE
|--------------------------------------------------------------------------
|
| Базовая сцена гаража.
| Соотношение равно размеру исходного изображения.
|
*/

.garage-scene {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 1938px;

    height: 811px;

    transform:
        translate(-50%, -50%);

    transform-origin:
        center center;

    overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| GARAGE SCENE BACKGROUND
|--------------------------------------------------------------------------
*/

.garage-scene-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: fill;

    pointer-events: none;

    user-select: none;
}

/*
|--------------------------------------------------------------------------
| GARAGE SCENE OVERLAY
|--------------------------------------------------------------------------
|
| Затемнение поверх изображения.
|
*/

.garage-scene-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(0,0,0,.20),
            rgba(0,0,0,.65)
        );

    z-index: 1;
}

/*
|--------------------------------------------------------------------------
| GARAGE CAR SCENE
|--------------------------------------------------------------------------
|
| Слой автомобиля поверх фона.
|
*/

.garage-car-section {

    position: absolute;

    inset: 0;

    z-index: 5;
}

.garage-car-wrapper {

    width: 100%;

    height: 100%;

    position: relative;

    display: flex;

    justify-content: center;
}

.garage-car-wrapper::after {

    content: '';

    position: absolute;

    bottom: 11%;

    left: 50%;

    transform:
        translateX(-50%);

    width: 500px;

    height: 70px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.75),
            rgba(0,0,0,0)
        );

    filter:
        blur(20px);

    z-index: 1;
}

/*
|--------------------------------------------------------------------------
| GARAGE CAR SCALE
|--------------------------------------------------------------------------
|
| Размер автомобиля задаётся в координатах сцены.
| НЕ зависит от разрешения монитора.
|
*/

.garage-car-wrapper .layered-car {

    position: relative;

    z-index: 5;

    width: 1200px;

    height: auto;
}

/*
|--------------------------------------------------------------------------
| GARAGE CAR STAGE
|--------------------------------------------------------------------------
|
| Координаты автомобиля внутри сцены 1938x811.
|
*/

.garage-car-stage {

    position: absolute;

    left: 969px;

    bottom: 20px;

    transform:
        translate(-50%, 0);

    z-index: 5;

    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| MOBILE SCENE
|--------------------------------------------------------------------------
|
| Настройки игровой сцены для телефонов.
|
*/

@media (max-width: 900px) {

    .garage-background {

        height: 340px;

        min-height: 340px;
    }

    .garage-scene {

        top: 0;

        left: 50%;

        transform:
            translateX(-50%);
    }

    .garage-car-wrapper .layered-car {

        width:
            var(--garage-mobile-car-scale);
    }

    .garage-car-stage {

        left:
            var(--garage-mobile-camera-x);

        bottom:
            var(--garage-mobile-camera-y);
    }
}