/* Слои героя.
   Раньше бутылки и брызги были запечены в фоновую картинку, поэтому двигаться
   не могли. Теперь фон — только вода, а продукт лежит тремя слоями поверх.
   Анимируем исключительно transform: он не вызывает пересчёт лейаута и живёт
   на композиторе, поэтому цикл ничего не стоит по CPU. */

/* Герой ростом ровно в один экран.
   В экспорте высота задана как 66vw — то есть зависела от ШИРИНЫ окна:
   на широком мониторе секция уезжала далеко за первый экран, и низ
   композиции срезался. На планшете и телефоне вместо неё стояли фиксированные
   1462px и 881px — с тем же результатом.
   svh — «маленькая» высота вьюпорта: она не скачет, когда на мобильном
   показывается и прячется адресная строка. vh оставлен запасным вариантом
   для браузеров без поддержки новых единиц. */
.section--u-ijhrzcsbi {
    height: 100vh;
    height: 100svh;
    min-height: 520px;
    overflow: hidden;
}

/* Отступы в экспорте прибиты в пикселях (200px сверху, 212px снизу) и на
   невысоком окне выталкивали текст за границы. Центрируем по остатку. */
.container--u-idwv07r8e {
    margin-top: auto;
    margin-bottom: auto;
}

.hero-bottles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* контент секции должен остаться над слоями */
.section--u-ijhrzcsbi > .container {
    position: relative;
    z-index: 1;
}

.hero-bottles__layer {
    position: absolute;
    display: block;
    width: auto;
    will-change: transform;
}

/* Композиция: крупная бутылка — смысловой центр, вторая уходит вглубь,
   брызги ложатся сверху и связывают их в одну сцену. */
.hero-bottles__front {
    height: 76%;
    right: 18%;
    bottom: 4%;
}

.hero-bottles__back {
    height: 58%;
    right: 1.5%;
    bottom: 7%;
    /* только расфокус — он и создаёт глубину; гасить бутылку прозрачностью
       не нужно, от этого она выглядела выцветшей на ярком фоне */
    filter: blur(1px);
}

.hero-bottles__splash {
    height: 70%;
    right: 10%;
    bottom: 10%;
}

/* Появление при загрузке: сцена собирается снизу вверх, с небольшим
   разбегом между слоями. Один раз за визит — здесь это уместно. */
@keyframes hero-bottles-in {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Парение. Амплитуды разные и периоды некратные — слои не попадают в такт
   друг с другом, поэтому движение не читается как одна общая пульсация. */
@keyframes hero-float-front {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -10px, 0); }
}

@keyframes hero-float-back {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -7px, 0); }
}

@keyframes hero-float-splash {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -5px, 0); }
}

.hero-bottles__front {
    animation:
        hero-bottles-in 700ms cubic-bezier(0.23, 1, 0.32, 1) both,
        hero-float-front 6.5s ease-in-out 700ms infinite;
}

.hero-bottles__back {
    animation:
        hero-bottles-in 700ms cubic-bezier(0.23, 1, 0.32, 1) 120ms both,
        hero-float-back 8.2s ease-in-out 820ms infinite;
}

.hero-bottles__splash {
    animation:
        hero-bottles-in 700ms cubic-bezier(0.23, 1, 0.32, 1) 60ms both,
        hero-float-splash 10s ease-in-out 760ms infinite;
}

/* Медленные зацикленные колебания — ровно то, что укачивает при
   вестибулярных нарушениях. Оставляем сцену на месте, без движения. */
@media (prefers-reduced-motion: reduce) {
    .hero-bottles__layer {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero-bottles__back { opacity: 0.92; }
    .hero-bottles__splash { opacity: 0.95; }
}

/* На планшете и телефоне композиция другая и бутылки по-прежнему в фоне,
   поэтому слои показываем только на широких экранах. */
@media (max-width: 991px) {
    .hero-bottles { display: none; }
}