/* =========================================================================
   mobile.css — телефони и таблети (тесен екран или сензорен екран без мишка).
   Зарежда се последен. Телефонът има СЪЩИТЕ анимации и облаци като компютъра;
   тук са само нещата, които ги правят леки за телефона, и разстоянията,
   които на малък екран трябва да са различни.
   ========================================================================= */

@media (max-width: 860px), (hover: none) and (pointer: coarse) {

    /* Облаците: assets/js/clouds.js рисува всеки вид облак веднъж като картинка.
       Докато картинката се рисува, облакът е скрит; после се появява меко. */
    .bl-clouds-baking .bl-cloud {
        opacity: 0;
        transition: opacity 1.2s var(--bl-ease);
    }
    .bl-clouds-baking .bl-cloud.is-baked { opacity: 1; }

    /* Разтварянето на облаците в небето горе: всеки облак е отделен слой,
       за да се мести при скрол, без да се прерисува. */
    .bl-clouds-baking .bl-clouds .bl-cloud { will-change: translate, opacity; }
}

/* Футър на телефон: въздух под голямата марка, както на компютъра,
   плюс мястото на лентата на iPhone (safe-area). */
@media (max-width: 560px) {
    .bl-footer__frame { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}