/* Небесный прибой — фоновое звёздное поле
   Файл: frontend/static/css/starfield.css
   Подключить в base.html после main.css:
   <link rel="stylesheet" href="/static/css/starfield.css?v={{ static_version() }}">

   Старые правила .star / .star-1…5 из main.css удалены — их заменил канвас.
   А вот @keyframes twinkle оставлен намеренно: его использует .success-icon
   на странице успешного заказа. Удалять его нельзя. */

#starfield {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
}

/* Контент должен лежать выше канваса */
main,
footer,
#cookie-banner {
    position: relative;
    z-index: 2;
}

/* Шапке position здесь НЕ задаём. У неё в main.css стоит sticky, а этот файл
   подключается следом — и `position: relative` его перебивал: шапка уезжала
   вверх вместе со страницей, хотя в стилях прилипание было прописано. Искали
   причину в другом месте (overflow-x у body мешал тоже), а лежала она здесь.

   z-index для этого не нужен: sticky — тоже позиционирование, и порядок
   наложения он задаёт сам. */
header { z-index: 40; }

/* Уважаем системную настройку: скрипт сам не запустится,
   но прячем канвас и на случай кэшированного кадра */
@media (prefers-reduced-motion: reduce) {
    #starfield { display: none; }
}

/* На телефонах фон не анимируем — экономим батарею */
@media (max-width: 639px) {
    #starfield { display: none; }
}