/* Общий корпус телефона путешественника; содержимое экрана принадлежит каждой сцене. */
@property --ghost-hue {
    syntax: '<angle>';
    inherits: true;
    initial-value: 168deg;
}

@property --rim-spin {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}

.box {
    /* высота в процентах от экрана, ширина из пропорции 393:812.
       толщина и радиус производные, чтобы корпус не терял вид на любом размере */
    --h: clamp(560px, 78vh, 1000px);
    --w: calc(var(--h) * 0.4840);
    --d: 0px;
    --r: calc(var(--h) * 0.0694);
    --rim-top: calc(var(--h) * .0035);
    --rim-right: calc(var(--h) * .010);
    --rim-bottom: calc(var(--h) * .008);
    --rim-left: calc(var(--h) * .004);
    --ghost-hue: 168deg;
    --rim-hue: 160deg;
    --rim-lightness: 52%;
    --rim-cyan: 72, 211, 226;
    --rim-green: 61, 255, 136;
    --rim-spin: 0deg;
    position: relative;
    width: var(--w);
    height: var(--h);
    transform-style: preserve-3d;
    animation: ghostHue 22s linear infinite,
    rimRun 12s linear -4.5s infinite;
}

@keyframes ghostHue {
    to {
        --ghost-hue: 528deg
    }
}

/* Непрерывный равномерный обход без возвратов и смены скорости. */
@keyframes rimRun {
    to {
        --rim-spin: 360deg
    }
}

.rim {
    --weather-rain-mix: 0%;
    --weather-snow-mix: 0%;
    --audio-guide-rim-mix: 0%;
    --rim-base-gradient: conic-gradient(from var(--rim-spin),
    rgba(var(--rim-cyan), .78) 0deg,
    rgba(var(--rim-cyan), .92) 70deg,
    rgba(var(--rim-green), .98) 154deg,
    rgba(var(--rim-cyan), .94) 232deg,
    rgba(var(--rim-green), .84) 310deg,
    rgba(var(--rim-cyan), .78) 360deg);
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: var(--r);
    box-shadow: none;
    /* Blur цветной ленты обрезается по внешнему силуэту и раскрывается
       только внутрь корпуса — внешняя форма остаётся собранной. */
    overflow: hidden;
    pointer-events: none;
}

/* Весь объём корпуса — одна непрерывная градиентная лента. */
.rim::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: var(--rim-top) var(--rim-right) var(--rim-bottom) var(--rim-left);
    border-radius: inherit;
    /* Широкое световое облако покрывает весь периметр: у него нет пустого
       участка, только мягко перемещающийся максимум яркости. Второй слой
       добавляет стеклу светлую фаску и едва заметную глубину. */
    background: var(--rim-base-gradient);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    filter: none;
    opacity: 1;
}

/* Первый и финальный экраны: насыщенный холодный ободок — тёмный violet,
     чистый cyan и плотный electric blue. */
.rim.is-hero-blue::before,
body.is-charge .rim::before,
.hotel-guest .rim::before {
    background: conic-gradient(from var(--rim-spin),
    rgba(34, 0, 82, .82) 0deg,
    rgba(0, 238, 255, .94) 68deg,
    rgba(0, 100, 255, .98) 142deg,
    rgba(0, 28, 255, 1) 226deg,
    rgba(0, 78, 190, .92) 302deg,
    rgba(34, 0, 82, .82) 360deg),
    linear-gradient(125deg,
            rgba(105, 250, 255, .38),
            rgba(0, 177, 255, .14) 34%,
            rgba(0, 4, 110, .32) 72%,
            rgba(0, 238, 255, .26));
    /* Blur после кольцевой маски раздувался внутрь экрана при 3D-наклоне
       и создавал овальные цветные пятна. Сам conic-gradient уже плавный,
       поэтому оставляем только компактное равномерное свечение. */
    filter: none;
    opacity: .94;
}

/* Непрозрачный корпус используется и в финальном телефоне путешественника. */
body.is-charge .box .rim::before,
.hotel-guest .rim::before {
    background-color: #220052;
    opacity: 1;
}

.face {
    position: absolute;
    inset: 0;
    border-radius: var(--r);
    backface-visibility: hidden
}

.front {
    background: transparent;
    transform: translateZ(calc(var(--d) / 2));
    overflow: hidden;
}

/* --- экран телефона и сменяющие друг друга медиа-слои --- */
.screen {
    position: absolute;
    inset: calc(var(--h) * 0.0129);
    border-radius: calc(var(--r) - var(--h) * 0.0129);
    overflow: hidden;
    background: #fff;
    opacity: 1;
    filter: none;
    mix-blend-mode: normal;
    isolation: isolate;
}

/* От исходной iPhone-геометрии остаются только пропорции и скругление. */
.box.device-iphone-14-pro {
    --w: calc(var(--h) * 0.49309); /* 428 / 868 */
    --r: calc(var(--h) * 0.07834); /* 68 / 868 */
}

.box.device-iphone-14-pro .device-frame {
    /* Корпус рисует только единый градиентный ободок: тёмной внутренней
       рамки между ним и экраном больше нет. */
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
}

.box.device-iphone-14-pro .device-screen {
    inset: calc(var(--h) * .0045);
    border-radius: calc(var(--r) - var(--h) * .0045);
}

/* Общее движение в покое не зависит от полёта телефона при прокрутке. */
.idle-y {
    transform-style: preserve-3d;
    animation: floatY 5.6s ease-in-out infinite
}

.idle-r {
    --idle-yaw: 5deg;
    transform-style: preserve-3d;
    animation: floatR 9.1s ease-in-out infinite;
    animation-delay: -2.3s
}

@keyframes floatY {
    0%, 100% {
        transform: translate3d(0, -11px, 0)
    }
    50% {
        transform: translate3d(0, 11px, 0)
    }
}

@keyframes floatR {
    0% {
        transform: rotateY(calc(0deg - var(--idle-yaw))) rotateX(2.4deg)
    }
    50% {
        transform: rotateY(var(--idle-yaw)) rotateX(-2.4deg)
    }
    100% {
        transform: rotateY(calc(0deg - var(--idle-yaw))) rotateX(2.4deg)
    }
}