/* ====== БЛОК 360 / ГЕНПЛАН ====== */

.screen360 {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@media (max-width: 640px) {
    .screen360 {
        height: 75vh;
    }
}

/* Фоновое изображение */
.screen360 .bg {
    position: absolute;
    top: -134%;
    bottom: -100%;
    left: -100%;
    right: -100%;
    min-width: 100%;
    margin: auto;
    width: auto;
    z-index: 1;
}

@media (min-width: 1350px) {
    .screen360 .bg {
        max-width: 100%;
    }
}

/* Круглая иконка */
.screen360 .icon {
    position: relative;
    width: 242px;
    height: 242px;
    border: 2px solid #fff;
    border-radius: 100%;
    padding: 8px;
    z-index: 2;
    cursor: pointer;
}

/* Hover: смена иконки */
.screen360 .icon:hover .cam .n1 {
    opacity: 0;
}
.screen360 .icon:hover .cam .n2 {
    opacity: 1;
}

/* Вращающийся текст */
.screen360 .icon .text {
    position: absolute;
    left: 8px;
    top: 8px;
    width: inherit;
    height: inherit;
    transition: transform 0.1s;
}

@media (max-width: 640px) {
    .screen360 .icon .text {
        transform: none !important;
    }
}

/* Иконка руки/камеры */
.screen360 .icon .cam {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 140px;
    margin-top: -70px;
    margin-left: -40px;
    transform: scale(0.7);
}

.screen360 .icon .cam .n1,
.screen360 .icon .cam .n2 {
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90px;
    transition: opacity 0.3s;
}

.screen360 .icon .cam .n2 {
    width: 76px;
    margin-top: -1px;
    opacity: 0;
}

.screen360 .icon .cam svg * {
    transition: stroke 0.3s;
    fill: #fff;
}