.hotel-guest {
    --guest-phone-height: min(110.88svh, 1276.8px);
    --guest-phone-left: calc(56% - 50px);
    --guest-phone-top: calc(50svh - var(--guest-phone-height) / 2);
    position: relative;
    z-index: 2;
}

.hotel-guest__stage {
    position: relative;
    min-height: 100svh;
    overflow: clip;
    perspective: 1600px;
    /* Центр перспективы остаётся на телефоне. */
    perspective-origin: calc(var(--guest-phone-left) + var(--guest-phone-height) * .49309 / 2) calc(var(--guest-phone-top) + var(--guest-phone-height) / 2);
}

.hotel-guest__copy {
    position: relative;
    padding-top: 24vh;
    margin-left: calc(clamp(72px, 8vw, 150px) + 100px);
    width: min(30vw, 510px);
    color: rgba(255, 255, 255, .5);
    text-align: left;
}

.hotel-guest__title {
    display: flex;
    flex-wrap: wrap;
    column-gap: .25em;
    margin: 0;
    font-size: var(--hotel-section-title-size);
    line-height: .8;
    letter-spacing: 0;
}

.hotel-guest__title > span {
    display: block;
    white-space: nowrap
}

.hotel-guest__word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding: .30em .12em .26em .05em;
    margin: -.30em -.12em -.26em -.05em;
}

.hotel-guest__char {
    display: inline-block;
    white-space: pre
}

.hotel-guest__description {
    margin: 30px 0 0;
    max-width: 25em;
    font-size: var(--hero-copy-size);
    line-height: 1.35;
    letter-spacing: -.01em;
}

.hotel-guest__phone {
    position: absolute;
    top: var(--guest-phone-top);
    left: var(--guest-phone-left);
    transform-style: preserve-3d
}

.hotel-guest .box {
    --h: var(--guest-phone-height)
}

.hotel-guest .box,
.hotel-guest .idle-y,
.hotel-guest .idle-r {
    animation-play-state: paused
}

.hotel-guest.is-phone-active .box,
.hotel-guest.is-phone-active .idle-y,
.hotel-guest.is-phone-active .idle-r {
    animation-play-state: running
}

.hotel-guest .device-screen {
    background: #01020a
}

.hotel-guest__screenshot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Перекрывающий слой презентации не блокирует наведение на предыдущие карточки. */
.hotel-guest.is-animated {
    height: var(--guest-scroll-height);
    pointer-events: none
}

.hotel-data + .hotel-guest.is-animated {
    margin-top: calc(-1 * var(--guest-entry-overlap))
}

.hotel-guest.is-animated .hotel-guest__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    height: 100dvh
}

@media (max-width: 900px) {
    .hotel-guest {
        --guest-phone-height: min(93.20895svh, 932.0895px)
    }

    .hotel-guest__stage {
        perspective-origin: 50% 50%
    }

    .hotel-guest__copy {
        margin: 0 24px;
        padding-top: 15vh;
        width: auto
    }

    .hotel-guest__title {
        max-width: 10em;
        font-size: var(--hotel-mobile-section-title-size);
        line-height: .94
    }
    .hotel-guest__description {
        margin-top: 12px;
        max-width: 25em
    }
    .hotel-guest__phone {
        position: relative;
        top: -6.93svh;
        left: auto;
        width: max-content;
        margin: 16px auto 0
    }
}

@media (prefers-reduced-motion: reduce) {
    .hotel-guest .box, .hotel-guest .idle-y, .hotel-guest .idle-r {
        animation: none
    }
}

html[data-performance-mode='lite'] .hotel-guest {
    --guest-phone-height: min(84svh, 980px, 85vw);
}

@media (min-width: 901px) {
    html[data-performance-mode='lite'] .hotel-guest__title {
        font-size: min(var(--hotel-section-title-size), 5.1vw, 88px);
    }
}

@media (max-width: 900px) {
    html[data-performance-mode='lite'] .hotel-guest {
        --guest-phone-height: min(78svh, 780px, calc((100vw - 48px) / .49309));
    }

    html[data-performance-mode='lite'] .hotel-guest__stage {
        padding-bottom: clamp(24px, 4svh, 48px);
    }

    html[data-performance-mode='lite'] .hotel-guest__phone {
        top: 0;
        margin-top: 32px;
    }
}