/* ============================================
   GOBIUS - ФЛАГМАНСКИЕ SCROLL-АНИМАЦИИ (премиум-2D)
   Уровень жидкости живёт со скроллом + приборная шкала +
   построчный reveal заголовков (SplitText) + липкая pill-кнопка.
   Всё движение - transform/opacity, will-change точечно.
   Fallback: prefers-reduced-motion и отсутствие JS/GSAP.
   ============================================ */

/* ---------- LENIS smooth-scroll (масляный глайд) ---------- */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* ---------- HERO WebGL-шиммер воды (сдержанный фон) ---------- */
.gobius-landing .hero-liquid-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
    /* мягкое проявление после инициализации WebGL */
    opacity: 0;
    transition: opacity 0.9s ease;
}

.gobius-landing .hero-liquid-canvas.is-ready {
    opacity: 1;
}

/* Текст hero должен быть выше воды (в разметке уже z-index:2) */
.gobius-landing .hero .container {
    z-index: 2;
}

/* ---------- Приборная шкала-индикатор уровня (сквозная, desktop) ---------- */
/* Вертикальная шкала с делениями-насечками. Заполнение по прогрессу скролла
   (scaleY), бегущая метка «%» у поверхности (translateY). Читается как прибор:
   продукт МЕРЯЕТ уровень - страница показывает уровень. */
.gobius-landing .scroll-gauge {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 900;
    pointer-events: none;
}

.gobius-landing .scroll-gauge__cap {
    font-family: "Tektur", sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(28, 95, 161, 0.7);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.gobius-landing .scroll-gauge__track {
    position: relative;
    width: 14px;
    height: 44vh;
    max-height: 400px;
    border-radius: 8px;
    background: rgba(10, 22, 44, 0.10);
    border: 1px solid rgba(28, 95, 161, 0.35);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    backdrop-filter: blur(2px);
}

/* Деления-насечки прибора - через повторяющийся градиент (10 крупных делений) */
.gobius-landing .scroll-gauge__ticks {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to top,
        rgba(28, 95, 161, 0.0) 0,
        rgba(28, 95, 161, 0.0) calc(10% - 1.5px),
        rgba(28, 95, 161, 0.45) calc(10% - 1.5px),
        rgba(28, 95, 161, 0.45) 10%
    );
}

.gobius-landing .scroll-gauge__fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    transform: scaleY(0);
    transform-origin: bottom center;
    background: linear-gradient(180deg, #2470b8 0%, #1c5fa1 45%, #0d3d6b 100%);
    box-shadow: 0 0 10px rgba(28, 95, 161, 0.35);
    will-change: transform;
}

/* Блик на поверхности жидкости внутри шкалы */
.gobius-landing .scroll-gauge__fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0.65;
}

/* Бегущая метка «%» у поверхности жидкости - как метка прибора */
.gobius-landing .scroll-gauge__marker {
    position: absolute;
    right: calc(100% + 8px);
    bottom: 0;
    transform: translateY(0);
    will-change: transform;
    white-space: nowrap;
}

.gobius-landing .scroll-gauge__pct {
    display: inline-block;
    transform: translateY(50%);
    font-family: "Tektur", sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    color: #1c5fa1;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

/* Стрелка-указатель от метки к поверхности */
.gobius-landing .scroll-gauge__pct::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -7px;
    transform: translateY(-50%);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    opacity: 0.8;
}

/* ---------- SplitText: построчный reveal заголовков (маска снизу вверх) ---------- */
/* GSAP SplitText с mask:'lines' оборачивает каждую строку в overflow-окно,
   внутри строка поднимается из-под маски (transform) - дёшево и премиум.
   padding-bottom защищает нижние выносные (у, р, д) от подрезки маской. */
.gobius-landing .split-line {
    display: block;
    padding-bottom: 0.12em;
    will-change: transform;
}

/* ---------- Выплывание контента при скролле (сдержанно) ---------- */
/* Скрытое состояние ставится ТОЛЬКО когда JS+GSAP подтверждены (класс anim-on).
   Без JS/GSAP контент виден по умолчанию (progressive enhancement).
   Дистанции короткие - «дорого» это сдержанно. */
.gobius-landing.anim-on .reveal {
    opacity: 0;
    transform: translateY(22px);
    will-change: transform, opacity;
}

.gobius-landing.anim-on .reveal-left {
    opacity: 0;
    transform: translateX(-38px);
    will-change: transform, opacity;
}

.gobius-landing.anim-on .reveal-scale {
    opacity: 0;
    transform: scale(0.96);
    will-change: transform, opacity;
}

/* ---------- Demo-бак: уровень через transform scaleY (НЕ height) ---------- */
/* Жидкость на полную высоту бака, показывается через scaleY от дна.
   Линию поверхности контр-масштабируем в JS, чтобы оставалась тонкой. */
.gobius-landing.anim-on .demo-visualization .liquid {
    height: 100%;
    transform-origin: bottom center;
    transition: none;
    will-change: transform;
}

.gobius-landing.anim-on .demo-visualization .level-line {
    transform-origin: top center;
    will-change: transform;
}

/* ---------- Липкая pill-кнопка «Заказать» ---------- */
.gobius-landing .sticky-cta {
    position: fixed;
    /* Над штатной кнопкой «наверх» (.scroll-to-top: 50px, bottom:30/right:30) */
    right: 30px;
    bottom: 92px;
    z-index: 950;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    background: #1c5fa1;
    color: #fff;
    font-family: "Manrope", "Roboto", sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(15, 33, 55, 0.28);
    /* Скрыта до появления */
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.gobius-landing .sticky-cta.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.gobius-landing .sticky-cta:hover {
    box-shadow: 0 14px 38px rgba(13, 61, 107, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px) scale(1.02);
}

.gobius-landing .sticky-cta__icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

.gobius-landing .sticky-cta__icon svg {
    width: 100%;
    height: 100%;
}

/* ---------- prefers-reduced-motion: полный статичный fallback ---------- */
@media (prefers-reduced-motion: reduce) {
    .gobius-landing.anim-on .reveal,
    .gobius-landing.anim-on .reveal-left,
    .gobius-landing.anim-on .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        will-change: auto;
    }

    /* Заголовки видны сразу, без масок */
    .gobius-landing .split-line {
        transform: none !important;
        will-change: auto;
    }

    .gobius-landing .hero-liquid-canvas {
        transition: none;
    }

    .gobius-landing .scroll-gauge__fill,
    .gobius-landing .scroll-gauge__marker {
        will-change: auto;
    }

    /* Липкая кнопка: без движения, только мгновенное появление */
    .gobius-landing .sticky-cta {
        transform: none;
        transition: opacity 0.2s ease;
    }

    .gobius-landing .sticky-cta.is-visible {
        transform: none;
    }

    .gobius-landing .sticky-cta:hover {
        transform: none;
    }
}

/* ---------- Мобильная облегчённая ветка ---------- */
@media (max-width: 768px) {
    /* Приборную шкалу прячем на телефоне - экономим ширину и такты */
    .gobius-landing .scroll-gauge {
        display: none;
    }

    /* На мобиле меньше амплитуда сдвига reveal - меньше работы композитора */
    .gobius-landing.anim-on .reveal {
        transform: translateY(18px);
    }

    .gobius-landing.anim-on .reveal-left {
        transform: translateY(18px);
    }

    .gobius-landing.anim-on .reveal-scale {
        transform: scale(0.97);
    }

    /* Липкая кнопка компактнее и ближе к краю */
    .gobius-landing .sticky-cta {
        right: 14px;
        bottom: 84px;
        min-height: 48px;
        padding: 0 20px;
        font-size: 0.95rem;
    }
}