/* =========================================================
   custom.css — всё, чего нет в экспорте Webflow.
   Подключается после index.css на главной и на страницах кейсов.
   index.css, webflow.css, normalize.css не менялись.
   ========================================================= */

/* ---------- главная: трек двигает только скрипт ---------- */
.phones-track {
    overflow: hidden;
    scroll-snap-type: none;
}
.phone-slot {
    scroll-snap-align: none;
}

/* ---------- курсор-плашка над телефонами ---------- */
#fx-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    pointer-events: none;
    padding: 1px 5px;
    background: #000;
    color: #fff;
    font-family: Abcarizonaflare, "Times New Roman", serif;
    font-size: 12px;
    line-height: 18px;
    border-radius: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(-300px, -300px, 0);
    transition: opacity 0.16s ease-out;
}
#fx-cursor.is-on {
    opacity: 1;
}
/* клик по кейсу, кадры ещё грузятся — системный курсор-крутилка (плашка пишет Loading) */
html.is-loading,
html.is-loading * {
    cursor: progress !important;
}
@media (hover: none) {
    #fx-cursor {
        display: none;
    }
}

/* =========================================================
   СТРАНИЦА КЕЙСА — горизонтальная лента
   ========================================================= */
.case-page {
    position: fixed;
    inset: 0;
    overflow: hidden;
}
.case-page .container {
    z-index: 2;
}
.case-page a {
    pointer-events: auto;
}

/* сверху по центру, как на About: название | Close, просвет 20px по центральной оси */
.case-head {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}
.case-head-l {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.case-head .fx-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* подпись кадра — снизу по центру */
.shots-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    width: 360px;
    max-width: 100%;
    margin: 0 auto; /* по центру без transform — его двигает переход */
    opacity: 0.3;
}

.shots {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.shots-track {
    /* ----- бокс кадра = обёртка телефона на главной -----
       там телефон — 55% ширины 6 колонок и 75% высоты экрана (index.css, .phone-link) */
    --box-w: calc((100vw - 100px) / 2 * 0.55);
    --box-h: 75vh;
    /* ---------------------------------------------------- */
    position: relative;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.shots-track.is-grab {
    cursor: grabbing;
}
/* бокс: все одного размера, просвет между боксами — GAP в site.js; сдвигает скрипт */
.shot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--box-w);
    height: var(--box-h);
    margin: calc(var(--box-h) / -2) 0 0 calc(var(--box-w) / -2);
    will-change: transform;
    backface-visibility: hidden;
}
/* картинка внутри бокса — её масштабирует скрипт (FALLOFF) */
.shot-media {
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    pointer-events: none;
}
.shot-media img,
.shot-media video,
.shot-media canvas {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    -webkit-user-drag: none;
}
.shot-desc {
    display: none; /* текст показывается в .shots-caption */
}

@media screen and (max-width: 479px) {
    .body.case-body {
        margin: 0;
    }
    .case-page .container {
        margin-left: 20px;
        margin-right: 20px;
    }
    .shots-track {
        --box-w: 70vw;
        --box-h: 60vh;
    }
}

/* =========================================================
   МОБИЛЬНАЯ ГЛАВНАЯ — кадры кейса листаются вбок
   каждый кадр шириной как была картинка, между кадрами 0
   ========================================================= */
@media screen and (max-width: 479px) {
    .hero-section .case a {
        width: 100%; /* раньше ширину задавала сама картинка */
    }
    /* Rocket, Avito, Flip — на телефоне не ссылки (кейсов нет); раскладка как у .case a в index.css */
    .hero-section .case .case-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        width: 100%;
    }
    .m-shots {
        display: flex;
        align-self: stretch;
        /* лента во всю ширину экрана — кадры уезжают за край, а не режутся по полям;
           в покое кадр стоит по полям (20px — поля body на мобилке) */
        margin: 0 -20px;
        padding: 0 20px;
        scroll-padding: 0 20px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory; /* доводка до кадра */
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .m-shots::-webkit-scrollbar {
        display: none;
    }
    .m-shots img,
    .m-shots video {
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
        height: auto;
        display: block;
        scroll-snap-align: start;
        -webkit-user-drag: none;
    }
    .m-shots video {
        aspect-ratio: 1140 / 1740; /* как у картинок — высота не прыгает, пока видео грузится */
        object-fit: contain;
    }
}