/* Основні стилі для макету двох телефонів */

/* Змінні кольорів та радіусів */
:root {
    --bg: #000;
    --card: #ffffff;
    /*--ink: #0f172a;*/
    --muted: #64748b33;
    --bezel: #0b0f1a;
    --bezel-shadow: rgba(0,0,0,.12);
    --glass: rgba(255,255,255,.55);
    /*--radius: 34px; !* зовнішній радіус корпусу *!*/
    --screen-radius: 28px; /* радіус екрана */
}

* {
    box-sizing: border-box;
}

/*html, body {*/
/*    height: 100%;*/
/*}*/

/*body {*/
/*    margin: 0;*/
/*    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
/*    color: var(--ink);*/
/*    background: radial-gradient(1200px 700px at 50% -10%, #0f0853, var(--bg));*/
/*    !* Приховуємо горизонтальний скрол, який може з'явитися через анімації *!*/
/*    overflow-x: hidden;*/
/*}*/

/* Контейнер, що охоплює всю висоту вікна */
.wrap {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: 1fr;
    gap: 0;
    padding: 0;
}

/* Сцена, у якій розташовуються телефони. Використовуємо flex для кращого контролю відступів. */
.stage {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; /* одна колонка або дві — вирівнювання змінюється через JS */
    height: 80dvh;
    /* Обмежуємо ширину сцени, щоб телефони були ближче один до одного. */
    width: 70vw;
    max-width: 900px;
    margin: 0 auto;
    gap: 0; /* відступ між телефонами задається через justify-content: space-evenly */
    transition: justify-content 0.5s ease;
    position: relative;
    --split: 0px;
}

/* коли видно обидва телефони — додаємо невеликий проміжок між ними */
.stage.two {
    gap: clamp(16px, 3vw, 48px);
    --split: clamp(40px, 1vw, 220px); /* наскільки «від’їжджають» телефони */
}

/* Стилі для корпусу телефону */
.phone {
    position: relative;
    margin: 0; /* прибрано авто-центрування, щоб телефон розтягувався */
    /*border-radius: var(--radius);*/
    /*background: linear-gradient(145deg, #c3c3c3, #424346);*/
    /*box-shadow: 0 16px 40px -10px var(--bezel-shadow), inset 0 0 0 2px #c0c0c0, inset 0 0 0 8px #e8e8e8, inset 0 0 0 9px #b3b3b3;*/
    padding: 12px; /* товщина рамки */
    transition: transform .2s ease;
    height: calc(80dvh - 48px); /* залишаємо місце під підпис */
    aspect-ratio: 9/19.5; /* портретне співвідношення ширини до висоти */
    width: auto; /* ширина рахується від висоти за аспектом */
    max-width: 100%; /* щоб не виходило за колонку на вузьких екранах */
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: linear-gradient(180deg, #081128, #0d1733);
    box-shadow: var(--shadow);
}

/* Стилі для екрана телефону */
.screen {
    position: absolute;
    inset: 12px; /* всередину від корпусу */
    border-radius: var(--screen-radius);
    overflow: hidden;
    background: #0a0a0a center/cover no-repeat;
    display: grid;
    place-items: center;
    outline: none;
    user-select: none;
    isolation: isolate;
    transform-origin: center; /* масштабування відбувається з центру */
}

/* Підписи під телефонами */
.caption {
    margin-top: 12px;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
}

/* Організація телефонів та підписів в блок */
.phone-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    justify-content: center;
    /* Для анімації появи/зникнення телефона встановлюємо центр масштабування */
    transform-origin: center;
    /* Плавні анімації позиціонування та прозорості для всіх блоків */
    transition: transform .5s ease, opacity .4s ease, visibility .4s ease;
}

/* Лівий телефон (customer) – поведінка в центрі та ліворуч */
.phone-block.customer.center { transform: translateX(0); }
/* Для лівого телефону (customer) у фазі з двома телефонами не зсуваємо його жорстко вліво,
   оскільки розташування контролюється justify-content. */
.phone-block.customer.left   { transform: translateX(calc(-1 * var(--split))); }

/* Правий телефон (hand) – базовий стан */
/* Для правого телефону (hand):
   прихований стан відсуваємо далеко праворуч (100%), щоб не було видно,
   видимий стан повертаємо на місце. */
/* Правий телефон (hand) – коли схований: лежить під кастомером */
.phone-block.hand.hidden {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 16px) scale(0.98); /* трохи нижче */
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    pointer-events: none;
}
/* Коли hand видимий: з’являється праворуч на ту ж відстань */
.phone-block.hand.visible {
    position: static;                /* повертаємо у потік */
    transform: translateX(var(--split));
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Встановлюємо курсор та pointer-events для правого телефону через JS */

/* Анімація переходу до додатка: збільшення та зникнення-з'явлення */
@keyframes zoomFade {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.4); opacity: 0; }
    51%  { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* Клас для застосування анімації */
.screen.zoom-animation {
    animation: zoomFade 0.6s ease forwards;
}

/* Стиль для затемненого та заблокованого телефону */
.phone--disabled {
    /* зменшуємо непрозорість, щоб показати, що елемент неактивний */
    opacity: 0.6;
}

@media (max-width: 980px){
    .wrap {
        transform: scale(0.5);
    }
    .stage {
        height: 12vh;
    }
}

@media (max-width: 980px){
    .wrap {
        transform: scale(0.5);
    }
    .stage {
        height: 12vh;
    }
    .nav.container {
        padding-right: 10px;
    }
}