/* =====================================================
   PAGE
===================================================== */

#page1
{
    position:relative;
    width:100vw;
    height:100vh;
    overflow: hidden;
    z-index: 1;
}

/* =====================================================
   WORLD
===================================================== */

#world
{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

/* =====================================================
   SCENE ROOT
===================================================== */

#sceneRoot
{
    position:absolute;
    width:1920px;
    /* width:1360px; */
    /* height:1080px; */
    height:1680px;
    /* height:1920px; */

    left:50%;
    top:50%;
    transform-origin:center center;
}

#sceneShake{
    width: 100%;
    height: 100%;
}

/* =====================================================
   BACKGROUNDS
===================================================== */

#depthWorld
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    /* transform-origin:50% 50%; */
    transform-origin: 50% 70%;
}

#bgMain,
#bgDepth
{
    position:absolute;
    left:0;
    top:0;
    width:1920px;
    /* width:1360px; */
    /* height:1080px; */
    height:1920px;
    object-fit:cover;
    pointer-events:none;    
}

#bgMain
{
    z-index: 1;
    /* transform-origin:50% 50%; */
}

#bgDepth
{
    z-index: 0;
    opacity: 0;
    /* transform-origin:50% 50%; */
}

/* =====================================================
   LOGO LAYER
===================================================== */

#logoLayer
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:90;   
}


#logoContainer
{
    position:absolute;
    left:50%;
    top:50%;
    width:1190px;
    height:210px;
    transform:
    translate(-50%,-50%);    
}

/* основной логотип */

#logoFliker{
    animation: glitch-flicker 8s linear infinite;
    will-change: opacity, transform, filter;
}

#logo
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:auto;
    pointer-events:auto;    
}

@keyframes glitch-flicker {
    /* 0%, 18%, 22%, 25%, 53%, 57%, 61%, 100% */
    0%, 8%, 12%, 15%, 23%, 27%, 31%, 100%
    {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter:
         /* drop-shadow(0 0 12px rgba(255, 255, 255, 0.4)) */
         brightness(1);
    }
    9%, 24%, 28% {
        opacity: 0.1;
        transform: translate(-4px, 2px) skewX(10deg);
        filter:
         /* drop-shadow(0 0 5px rgba(255, 255, 255, 0.1)) */
         blur(2px);
    }
    10%, 25%, 29% {
        opacity: 0.4;
        transform: translate(4px, -2px) scaleY(1.1);
        filter:
         /* drop-shadow(-5px 0 red) */
         drop-shadow(5px 0 blue)
         brightness(1.5);
    }
    11%, 26%, 30% {
        opacity: 0.2;
        transform: translate(0, 0) scaleX(1.2);
        filter: brightness(0.5) blur(1px);
    }
}

/* свет на логотипе */

#logoLight
{
    position:absolute;
    left:50%;
    top:50%;
    width:1000px;
    height:500px;
    opacity:0.4;
    transform:
    translate(-50%,-50%);
    z-index:100;
    pointer-events:none;
}

/* =====================================================
   UI LAYER
===================================================== */

#fadeOverlay {
    position: fixed;
    left: 0;
    top: 0;    
    width: 100%;
    height: 100%;    
    background: black;
    opacity: 0;    
    /* Игнорируем клики, пока оверлей прозрачный */
    pointer-events: none;     
    /* Задаем самый высокий слой, чтобы перекрыть абсолютно всё на экране */
    z-index: 9999; 
}

#uiLayer
{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5000;
}

/* =====================================================
   TOP PANEL
===================================================== */

/* #topPanel
{
    position: absolute;
    left: 0;
    right: 0;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content:center;
    
    gap: 56px;
    pointer-events: auto;
    z-index: 10;
} */

#topPanel
{
    position: absolute;
        
    top: 10px;
        
    left: 8%;
    right: 8%;               
    
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 56px; */
    gap: 10%;

    pointer-events: auto;
    z-index: 10;

    border-radius: 23px;
    
    overflow: hidden;        /* Чтобы эффект размытия (blur) не вылезал за скругленные углы */
}

/* =====================================================
   MIDDLE PANEL
===================================================== */

#middlePanel
{
    position: absolute;
    bottom: 46px;
    left: 0;
    right: 0;
    height: 1000px;
    z-index: 10;
    pointer-events: none;
    /* will-change: transform, opacity; */
}

.site-msg {
    
    position: fixed;

    bottom: 10px;    /* Отступ от самого низа */

    width: 100%;     /* Растягиваем по ширине */
    text-align: center;
    z-index: 10;    /* Выше всех слоев, чтобы был виден */
    pointer-events: none; /* Чтобы нельзя было случайно кликнуть вместо игры */

    
}
.site-msg p {
    font-size: 1.2vmax
}

/* =====================================================
   BOTTOM PANEL
===================================================== */

#bottomPanel
{
    bottom: 10px;
    position: absolute;
    left: 0;
    right: 0;
    height: 46px;
    pointer-events: auto;
    /* will-change: transform, opacity; */
}

#bottomPanel,
#middlePanel {
    transition: pointer-events 0s; /* Переключаем мгновенно */
}


/* Находим панели, у которых GSAP выставил opacity в 0 */
[style*="opacity: 0"], 
.hidden {
    pointer-events: none !important;
}

/* А когда они видимы (opacity: 1) — клики снова работают */
[style*="opacity: 1"] {
    pointer-events: auto;
}


/* =====================================================
   FUTER
===================================================== */

.site-footer {
    position: fixed; /* Прижимаем к экрану */
    bottom: 10px;    /* Отступ от самого низа */
    /* left: 0; */
    /* left: 80px; */
    width: 100%;     /* Растягиваем по ширине */
    text-align: center;
    z-index: 10200;    /* Выше всех слоев, чтобы был виден */
    pointer-events: none; /* Чтобы нельзя было случайно кликнуть вместо игры */
}

.site-footer p {
    /* font-family: 'serif'; */
   
    /* font-size: 12px; */
    /* font-size: 1.8vmin !important; */
    font-size: 0.8vmax !important;
    color: rgba(224, 224, 224, 0.4); /* Очень бледный серый цвет */
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase; /* Делаем капсом для солидности */
}

/* =====================================================
   PORTALS
===================================================== */

.portal
{
    position: absolute;
    z-index: 20;
    opacity: 0;
    pointer-events: auto;
}
.miror{
    transform:
        scaleX(-1);
}

/* =====================================================
   LEFT PORTAL
===================================================== */

#leftPortal
{
    position:absolute;
    left:382px;
    bottom:1016px;
    z-index: 20;
}

/* =====================================================
   RIGHT PORTAL
===================================================== */

#rightPortal
{
    position:absolute;
    left:1390px;
    bottom:1016px;
    z-index: 20;
}

/* =====================================================
   DOOR HITBOX
===================================================== */

.doorHitbox,
.doorHitboxR
{
    position: absolute;
    width: 150px;
    height: 560px;
    cursor: pointer;
    z-index: 25;
}

/* =====================================================
   DOOR LIGHT
===================================================== */

.doorLight,
.doorLight2
{    
    position: absolute;
    width: 150px;
    height: auto;   
    z-index: 21;
    /* transform: scale(1.2); */
}

.doorLight{
    transform: scale(1.2);
}
.doorLight2{
    transform: scale(-1.2, 1.2);
}


/* .doorLight img
{
    width: 120%;
    height: auto;
} */



/* =====================================================
   PORTAL SIGN
===================================================== */

.portalSign,
.portalSignR
{

    position: absolute;
    width: 380px;
    height: 150px;    

    z-index: 19;

    /* transform: scale(1.2); */
}
.portalSign{
    left: 92px;
    top: 40px;
}
.portalSignR{
    left: -320px;
    top: 40px;
}

.miror{
    transform:
        scaleX(-1);
}

/* =====================================================
   SIGN BG
===================================================== */

.signBg
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* =====================================================
   SIGN LIGHT
===================================================== */

.signLight
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* opacity: 0.8; */
    opacity: 0;
    /* mix-blend-mode: screen; */
    /* mix-blend-mode: overlay; */
    /* mix-blend-mode: add; */
    /* mix-blend-mode: hard-light;  */
    mix-blend-mode: plus-lighter;
    
}

.signText,
.signTextR
{
    
    transform:translateZ(0);
    will-change:transform;
}
.signText{
    left: -30px;
}
.signTextR{
    left: 30px;
}

/* =====================================================
   levelDisplay
===================================================== */

.level-stencil {
    position: absolute;
    
    /* Точное позиционирование на левой стене — подправь эти цифры (top/left) под свой коридор */
    bottom: 700px;
    left: 190px;
    
    /* Стили шрифта под трафарет: моноширинный, крупный, блеклый */
    /* font-family: "Courier New", Courier, monospace; */
    font-size: 52px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9); /* Полупрозрачный белый */
    
    /* Эффект впечатывания в текстуру стены */
    mix-blend-mode: overlay; 
    
    /* Отключаем любые взаимодействия мыши */
    pointer-events: none;
    z-index: 1;

    transform: rotate(-90deg);
    
    /* Защита от размытия при 3D трансформациях */
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
}

/* =====================================================
   ROY
===================================================== */

#Roy_001
{
    position: absolute;
    width: 500px;
    height: 800px;  
    
    left: 730px;
    bottom:316px;

    z-index: 20;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
#Roy_001.visible {
    opacity: 1;
    pointer-events: auto;
}

/* =====================================================
   ROY DIALOG
===================================================== */

#pageDialogRoy
{
    background:
        rgba(0,0,0,0.85);
    z-index: 1000;
}

/* Контейнер на весь экран */
.dialog-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Прижимает интерфейс к низу */
    overflow: hidden;
}

/* Спрайт Роя слева */
.roy-full-sprite {
    position: absolute;
    /* left: 6%; */
    left: 50%; 
    /* Сдвигаем фигурку назад влево ровно на 50% её СОБСТВЕННОЙ ширины */
    transform: translateX(-50%);

    bottom: 4%; 
    height: 85vh;
    z-index: 1;
    pointer-events: none;
}

.roy-full-sprite img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* Нижнее диалоговое облако */
.dialog-box {
    position: relative;
    width: min(1200px, 90vw);
    /* min-height: 200px; */
    margin: 0 auto 40px auto; /* Центрируем по горизонтали, отступаем снизу */
    background: rgba(15, 15, 15, 0.80);
    border: 2px solid #333;
    border-radius: 40px;
    padding: 40px;
    box-sizing: border-box;
    z-index: 2;

    max-height: 480px;            /* Займет строго 40% от высоты экрана */
    overflow-y: auto;        /* Всё, что не поместилось, будет скроллиться */
    
    box-sizing: border-box;
}

/* Имя персонажа */
.dialog-name {
    font-family: monospace;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    /* border-bottom: 1px solid #444; */
    padding-bottom: 5px;
    display: inline-block;
}

/* Текст реплики Роя */
.dialog-text {
    font-family: sans-serif;
    font-size: 20px;
    line-height: 1.6;
    color: #ccc;
    margin-bottom: 25px;
}

/* Контейнер вариантов ответов */
.options-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Кнопки-варианты ответов игрока */
.dialog-option-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #444;
    border-radius: 20px;
    padding: 12px 20px;
    color: #fff;
    font-size: 18px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dialog-option-btn:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    padding-left: 25px; /* Эффект легкого сдвига при наведении */
}

/* Контейнер кнопки с индикатором (делаем относительное позиционирование) */
.dialog-option-btn.has-indicator {
    position: relative;
    padding-left: 35px; /* Освобождаем место слева под точку */
}

/* Сама желтая светящаяся точка */
.dialog-option-btn.has-indicator::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #ffeb3b; /* Сочный желтый цвет */
    border-radius: 50%;
    box-shadow: 0 0 8px #ffeb3b; /* Эффект легкого свечения */
    animation: pulseIndicator 2s infinite;
}

/* Мягкая пульсация, чтобы точка привлекала внимание */
@keyframes pulseIndicator {
    0% { opacity: 0.6; box-shadow: 0 0 4px #ffeb3b; }
    50% { opacity: 1; box-shadow: 0 0 10px #ffeb3b; }
    100% { opacity: 0.6; box-shadow: 0 0 4px #ffeb3b; }
}

.close-dialog-btn {
    color: #0f8f8f !important; /* Насыщенный красный цвет текста */
    /* !important нужен на случай, если общий класс .dialog-option-btn перебивает цвет */
    
    border-color: #0f8f8f; /* Можно также покрасить рамку в цвет текста */
}

/* Эффект при наведении курсора */
.close-dialog-btn:hover {
    background-color: rgba(21, 129, 133, 0.1); /* Легкая красная подсветка фона */
    color: #0f8f8f !important;
}

/* =====================================================
   ABOUT PAGE
===================================================== */

#pageAbout
{
    /* position: fixed; */
    display: flex;
    flex-direction: column;
    align-items: center;    /* Центрируем по горизонтали */
    justify-content: flex-start; /* Прижимаем к началу, чтобы регулировать отступ сверху */

    /* Внутренние отступы самого экрана (1.5 высоты панели + отступ самой панели от верха) */
    padding-top: 80px;      
    padding-bottom: 80px;

    
    /* inset: 0; */
    background:
        rgba(0,0,0,0.85);
    z-index: 2000;
    overflow-y: auto;
}



/* =====================================================
   CONTACTS PAGE
===================================================== */

#pageContacts
{
    /* position: fixed; */
    display: flex;
    flex-direction: column;
    align-items: center;    /* Центрируем по горизонтали */
    justify-content: flex-start; /* Прижимаем к началу, чтобы регулировать отступ сверху */

    /* Внутренние отступы самого экрана (1.5 высоты панели + отступ самой панели от верха) */
    padding-top: 80px;      
    padding-bottom: 80px;

    
    /* inset: 0; */
    background:
        rgba(0,0,0,0.85);
    z-index: 2000;
    overflow-y: auto;
}

/* =====================================================
   SUPPORT PAGE
===================================================== */

#pageSupport
{
    /* position: fixed; */
    display: flex;
    flex-direction: column;
    align-items: center;    /* Центрируем по горизонтали */
    justify-content: flex-start; /* Прижимаем к началу, чтобы регулировать отступ сверху */

    /* Внутренние отступы самого экрана (1.5 высоты панели + отступ самой панели от верха) */
    padding-top: 80px;      
    padding-bottom: 80px;

    
    /* inset: 0; */
    background:
        rgba(0,0,0,0.85);
    z-index: 2000;
    overflow-y: auto;
}

/* =====================================================
   SMOKE
===================================================== */

#smokeRoot
{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:15;
}

.smokeEmitter
{
    position:absolute;
    width:0;
    height:0;
    pointer-events:none;
    z-index:15;
}

.smokeParticle
{
    position:absolute;
    pointer-events:none;
    mix-blend-mode:screen;
    filter:
    blur(1px);
}

/* =====================================================
   CURSOR HINT
===================================================== */

/* Общие стили подсказок */
.scroll-hint {
    position: fixed;
    pointer-events: none; /* Чтобы подсказка не мешала кликам по сайту */
    opacity: 0;
    display: none; /* Изначально скрыто */
    transition: opacity 0.5s ease;
    z-index: 9999;
}

/* --- ПОДСКАЗКА ДЛЯ ПК --- */
#desktop-scroll-hint {
    /* Фиксируем точку отсчета для GSAP в левом верхнем углу */
    left: 0;
    top: 0;
    transform: translate(110%, -50%);
}

/* Когда JS добавляет класс .active */
#desktop-scroll-hint.active {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    opacity: 1;
}

/* Иконка мышки */
.mouse-icon {
    width: 22px;
    height: 36px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    position: relative;
}

.mouse-icon .wheel {
    width: 4px;
    height: 8px;
    background: #fff;
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 1.6s infinite ease-in-out;
}

/* Стрелочки */
.arrows {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
}
.arrow {
    animation: arrowBlink 1.6s infinite ease-in-out;
}
.arrow.down {
    animation: arrowNudgeDown 1.2s infinite ease-in-out;
}

/* --- АНИМАЦИИ --- */
@keyframes arrowNudgeDown {
    0% {
        opacity: 0.3;
        transform: translateY(-4px);
    }
    50% {
        opacity: 1;
        transform: translateY(2px);
    }
    100% {
        opacity: 0.3;
        transform: translateY(-4px);
    }
}

@keyframes scrollWheel {
    0% { top: 6px; opacity: 1; }
    50% { top: 14px; opacity: 0.3; }
    100% { top: 6px; opacity: 1; }
}

@keyframes arrowBlink {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(2px); }
}

/* --- ПОДСКАЗКА ДЛЯ МОБИЛЬНЫХ --- */
#mobile-swipe-hint {
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);

    width: 44px;         /* Сузили */
    height: 80px;        /* Вытянули по вертикали */
    border-radius: 12px; /* Красивое скругление углов */    
    justify-content: center;
    align-items: center;
}

#mobile-swipe-hint.active {
    display: flex;
    opacity: 1;
}

.hand-icon {
    display: flex;
    justify-content: center;
    align-items: center;

    will-change: transform, opacity; /* Заранее говорит браузеру подготовить видеокарту */
    backface-visibility: hidden;     /* Убирает мерцание и дерганье субпикселей */
    perspective: 1000px;
    animation: mobileSwipe 2.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

/* --- АНИМАЦИИ --- */
@keyframes mobileSwipe
{
    0%
    {
        transform:translate3d(0,15px,0) scale(1);
        opacity:1;
        animation-timing-function:ease-out;
    }

    50%
    {
        transform:translate3d(0,-15px,0) scale(1);
        opacity:1;
        animation-timing-function:ease-in;
    }

    100%
    {
        transform:translate3d(0,15px,0) scale(1);
        opacity:1;
        animation-timing-function:ease-in;
    }
}