/* ===== mobile only: old planet visual, smooth scrolling ===== */
/*
  Возвращаем визуально старый /bg.png, но без fixed-background/body fixed layer.
  Desktop не трогаем.
*/

@media (max-width: 940px) {
  html {
    background: #020817 !important;
  }

  body {
    position: relative !important;
    background: #020817 !important;
    overflow-x: hidden !important;
  }

  /*
    Убираем наши экспериментальные fixed/pseudo background layers.
    Именно они давали не тот crop или могли конфликтовать.
  */
  body::before,
  body::after {
    content: none !important;
    display: none !important;
  }

  /*
    Главная идея:
    фон теперь принадлежит .page, а не viewport/body fixed layer.
    Поэтому он скроллится вместе со страницей плавно.
  */
  .page {
    position: relative !important;
    z-index: 1 !important;

    background-color: #020817 !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(2, 8, 23, .06) 0%,
        rgba(2, 8, 23, .04) 42%,
        rgba(2, 8, 23, .24) 100%
      ),
      url("/bg4.webp") !important;

    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: scroll !important;
  }

  .page-shell {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
  }

  .social-left {
    position: fixed !important;
    z-index: 120 !important;
  }
}

/* Landscape тоже использует старый /bg.png, без fixed */
@media (max-width: 940px) and (orientation: landscape) and (max-height: 520px) {
  .page {
    background-image:
      linear-gradient(
        180deg,
        rgba(2, 8, 23, .04) 0%,
        rgba(2, 8, 23, .04) 42%,
        rgba(2, 8, 23, .22) 100%
      ),
      url("/bg4.webp") !important;

    background-size: cover !important;
    background-position: center top !important;
    background-attachment: scroll !important;
  }
}