/* ==========================================================================
   Настройки слоев для интерактивного эффекта Spheres Background
   ========================================================================== */

/* Холст анимации Spheres фиксируется абсолютно внутри домашней секции */
#webgl-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* По центру: выше фонового текста, но ниже элементов управления */
    pointer-events: none; /* Пропускает события мыши сквозь себя, если скрипту инициализации Spheres передан другой контейнер (например window) */
}


/* Изменяем pointer-events обратно на auto в скрипте, если canvas сам слушает мышь */
/* Если ваш JS-эффект Spheres привязан к движениям мыши по всему экрану, pointer-events: none идеален */

/* Контейнер для текста, который уходит ПОД шарики */
.background-text-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    z-index: 1; /* Самый нижний слой над фоновой картинкой */
}

/* Контейнер для элементов, которые всегда НАВИДУ (Слоган и Кнопка) */
.foreground-content-container {
    position: relative;
    z-index: 3; /* Самый верхний слой, перекрывающий canvas */
    pointer-events: none; /* Пропускаем клики/движения мыши на слои ниже, чтобы шарики реагировали */
}

/* Возвращаем кликабельность кнопкам и ссылкам в верхнем слое */
.foreground-content-container a, 
.foreground-content-container button,
.foreground-content-container .local {
    pointer-events: auto;
}

/* Скрываем h1 в нижнем контейнере (так как там нужен только бренд) */
.background-text-container .hs-line-8 {
    visibility: hidden;
    opacity: 0;
}

/* Скрываем кнопку в нижнем контейнере */
.background-text-container .local {
    visibility: hidden;
    opacity: 0;
}

/* Распорка в верхнем контейнере, имитирующая высоту скрытого текста, 
   чтобы кнопка BACK TO STUDIO сохраняла изначальный отступ */
.hero-brand-spacer {
    height: 50px; /* Соответствует mb-50 */
    line-height: 1.2;
    font-size: 80px; /* Дублирует размер hs-line-12 */
    margin-bottom: 50px;
}
@media only screen and (max-width: 768px) {
    .hero-brand-spacer {
        font-size: 42px;
        margin-bottom: 30px;
        height: 30px;
    }
    .hs-line-8 {
        margin-bottom: 80px;
    }
    .btn {
        margin-top: 80px;
    }
}