/* v3/v1 — планшет (700..1699px). Десктоп (от 1700px) и мобильные (до 700px) — как были, с big-bg.jpg.

   На планшете фон — big-bg-2.jpg (тот же 2600x1205, но без персонажей), персонажи — отдельные картинки
   в .heroes (внутри блока бонуса): images/decor-1.png (рыцарь) и images/decor-2.png (компания с сундуком).
   В big-bg.jpg они стоят в точках x 410 / y 39 и x 1562 / y 152, центр фона — x 1300.

   Страница свёрстана в десктопных px и целиком масштабируется zoom'ом на body: zoom = ширина экрана / W.
     альбомная ориентация — копия десктопа: персонажи там же, где на фоне, W = 1700px (оба видны целиком);
     портретная — W = 1000px (шаги крупнее), персонажи по бокам от текста бонуса, текст бонуса
                  уменьшается под место между ними (js/fit.js); свободная высота делится поровну:
                  под логотипом, над шагами и под ними.
   Футер прижат к низу экрана, если страница ниже экрана.
   Правила styles для max-width 880/768/767 (шаги столбиком, мелкие иконки футера) рассчитаны
   на ширину экрана, а сцена внутри всегда шире — в этом диапазоне они возвращаются к десктопным. */

.heroes { display: none; }

@media only screen and (min-width: 700px) and (max-width: 1699.98px) {
    html { background: #fff; }   /* иначе фон body уходит на холст и не масштабируется */
    body { background-image: url(../images/big-bg-2.jpg); background-color: #fcfcfc; }
    body > .container { z-index: 1; }
    .heroes { display: block; position: absolute; z-index: -1; left: 50%; width: 0; height: 0; }   /* под текстами */
    .heroes img { display: block; position: absolute; max-width: none; }
}

/* ---------- альбомная ориентация: W = 1700px, .heroes — от верха страницы (.container) ---------- */
@media only screen and (min-width: 700px) and (max-width: 1699.98px) and (orientation: landscape) {
    body { zoom: .8; }
    .heroes { top: 0; }
    .heroes__knight { left: -895px; top: 39px; }   /* 410 - 1300, на 5px наружу: длинные строки в fr/pl */
    .heroes__band { left: 282px; top: 152px; }     /* 1562 - 1300, на 20px наружу */
}
@media only screen and (min-width: 700px) and (max-width: 1359.98px) and (orientation: landscape) { body { zoom: .7; } }
@media only screen and (min-width: 700px) and (max-width: 1189.98px) and (orientation: landscape) { body { zoom: .6; } }
@media only screen and (min-width: 700px) and (max-width: 1019.98px) and (orientation: landscape) { body { zoom: .5; } }

/* ---------- портретная ориентация: W = 1000px, .heroes — от блока бонуса ---------- */
@media only screen and (min-width: 700px) and (max-width: 1699.98px) and (orientation: portrait) {
    body { zoom: .75; }
    .logo { margin: 20px; }
    /* персонажи — по бокам от текста бонуса, от краёв экрана; текст бонуса — по центру их высоты.
       Строки в локалях разной длины: js/fit.js уменьшает .bonus (zoom), чтобы строки помещались между персонажами */
    .cell > .text__center:nth-child(2) { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
    .bonus { margin: 0; }
    .heroes { top: 0; }
    .heroes .heroes__knight { left: -485px; top: 6px; width: 300px; height: auto; }   /* 300 x 408 */
    .heroes .heroes__band { left: 185px; top: 100px; width: 300px; height: auto; }    /* 300 x 285 */
}
@media only screen and (min-width: 700px) and (max-width: 899.98px) and (orientation: portrait) { body { zoom: .7; } }

/* плавно, где браузер умеет делить длины: zoom = ширина экрана / W,
   высота экрана в px сцены = W * высота / ширина — по ней футер прижимается к низу */
@supports (width: calc(1px * tan(atan2(1px, 1px)))) {
    @media only screen and (min-width: 700px) and (max-width: 1699.98px) {
        body { display: flex; flex-direction: column; height: auto; }
        body > .container { flex: none; }
        body > footer { flex: none; margin-top: auto; }
    }
    @media only screen and (min-width: 700px) and (max-width: 1699.98px) and (orientation: landscape) {
        body { zoom: calc(tan(atan2(100vw, 1700px))); min-height: calc(1700px * tan(atan2(100vh, 100vw))); }
        body > .container { margin-bottom: 100px; }
    }
    @media only screen and (min-width: 700px) and (max-width: 1699.98px) and (orientation: portrait) {
        body { zoom: calc(tan(atan2(100vw, 1000px))); min-height: calc(1000px * tan(atan2(100vh, 100vw))); }
        /* свободная высота — поровну под логотипом и под шагами */
        body > .container { flex: 1 0 auto; display: flex; flex-direction: column; }
        body > .container > .cell { flex: 1 0 auto; display: flex; flex-direction: column; }
        .cell > .logo + .text__center { margin-top: auto; }
        .cell > .steps-wrap { width: 100%; margin-bottom: auto; }
        body > footer { margin-top: 20px; }
    }
}

/* десктопные шаги и футер вместо правил для узкого экрана */
@media only screen and (min-width: 700px) and (max-width: 880px) {
    .steps-wrap { height: 207px; margin-bottom: 0; text-align: left; background-image: url(../images/steps.jpg); }
    .step1, .step2, .step3 { position: absolute; min-width: 0; height: auto; margin: 0; padding: 0; background-image: none; }
    .nomber { float: none; font-size: 80px; }
    .step-txt-wrap { float: right; }
}
@media only screen and (min-width: 700px) and (max-width: 768px) and (orientation: landscape) {
    .bonus { margin: 50px; }
}
@media only screen and (min-width: 700px) and (max-width: 768px) {
    .bottom-plus { margin-bottom: 0; }
    .plus-50 strong { font-size: 42px; }
    footer { padding-top: 100px; }
}
@media only screen and (min-width: 700px) and (max-width: 767px) {
    footer .hidden-xs { display: inline-block !important; }
    footer .visible-xs { display: none !important; }
}