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

/* Fullscreen fallback styles for the demo section */
.demo.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 0 !important;
    background: #000; /* ensure dark background in fullscreen */
}
.demo.is-fullscreen .container {
    width: 100vw;
    height: 100vh;
    margin: 0;
    display: grid;
    align-content: stretch;
    justify-items: stretch;
    padding: 0; /* actions will be absolute */
}
/* In fullscreen hide any titles if present */
.demo.is-fullscreen h2 { display: none; }
.demo.is-fullscreen .wrap { min-height: 100dvh; transform: none !important; }
.demo.is-fullscreen .stage {
    width: 100vw;
    height: 100dvh; /* occupy full viewport */
    overflow: hidden;
}
/* Place actions absolutely at the very left/top (respect safe areas) */
.demo.is-fullscreen .actions{
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    z-index: 10000;
    flex-direction: column;
    gap: 8px;
    margin: 0; /* clear section margins */
}
/* Hide captions to let phones use all space */
.demo.is-fullscreen .caption{ display:none; }
/* Make phones occupy full available height in fullscreen */
.demo.is-fullscreen .phone{
    height: calc(100dvh - 24px);
    max-width: none;
}

/* When two phones are visible, keep reasonable gap; allow full width */
.demo.is-fullscreen .stage.two{ gap: clamp(8px, 3vw, 48px); }

/* Mobile tweaks for fullscreen */
@media (max-width: 768px){
    .demo.is-fullscreen .actions{ gap:6px }
    .demo.is-fullscreen .phone{ height: calc(100dvh - 16px); }
}

/* Змінні кольорів та радіусів */
: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;
}

/* Контейнер, що охоплює всю висоту вікна */
.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;
    width: 100%;
}

/* Лівий телефон (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;
}

.how-it-works.active {
    position: absolute;
    transition: transform .5s ease, opacity .4s ease;
    opacity: 0;
}
.actions.active {
    position: relative;
    right: 20px;
    margin-top: -20px;
    top: -15px;
}

.stage.active {
    height: 90dvh;
    width: 100vw;
}
.phone.active {
    height: calc(94dvh - 48px);
}

@media (max-width: 960px){
    .wrap.active {
        transform: scale(0.8);
    }

    .wrap {
        transform: scale(0.5);
    }
}

@media (height: 1366px){
    .wrap.active {
        transform: scale(0.8);
    }

    .wrap {
        transform: scale(0.7);
    }
}

@media (height: 1024px){
    .wrap.active {
        transform: scale(0.7);
    }

    .wrap {
        transform: scale(0.8);
    }
}

@media (max-width: 720px){
    #demoFullscreenBtn {
        display: none;
    }
}

@media (max-width: 980px){
    .nav.container {
        padding-right: 10px;
    }
}