/* ============================================================
   Gobius - демо-бак «90%»: стабильность лэйаута + reduced-motion финал.
   Правки изолированы здесь (style.css / animations.css правит другой агент).
   Задачи:
     1) убрать «тряску» при скролле - число не меняет ширину, группа не
        сдвигает центрирование;
     2) фолбэк без анимации (reduced-motion / нет GSAP / нет JS) - показать
        финал: бак залит на 90%, число 90%.
   ============================================================ */

/* Стабильный родитель демо-блока: резервируем габариты, чтобы рост уровня
   и смена числа внутри НЕ толкали внешний лэйаут (без дрожи по вертикали). */
.gobius-landing .demo-stage {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 360px;
}

/* Индикатор уровня слева - ФИКСИРОВАННАЯ ширина, чтобы смена числа
   (0% -> 9% -> 90%) не меняла ширину группы и не сдвигала центрирование. */
.gobius-landing .level-indicator {
    width: 130px;
    flex: 0 0 auto;
}

/* Число уровня бака - моноширинные цифры + резерв ширины,
   чтобы ширина не «прыгала» при счёте и не трясла соседей. */
.gobius-landing .level-percent {
    min-width: 4ch;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Число в телефоне - те же моноширинные цифры (телефон фикс-ширины,
   резерв убирает микродрожь при счёте). */
.gobius-landing .app-level {
    min-width: 5ch;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* GPU-слой для жидкости и линии уровня - scaleY без layout/paint. */
.gobius-landing .liquid,
.gobius-landing .level-line {
    will-change: transform;
    backface-visibility: hidden;
}

/* --- Фолбэк без анимации: .anim-on НЕ выставлен ---
   (prefers-reduced-motion, GSAP недоступен или JS не отработал).
   Показываем финальное состояние: бак залит на 90%, без height-анимации. */
.gobius-landing:not(.anim-on) .liquid {
    height: 90%;
    transition: none;
}