/* ========= БАЗА СТРАНИЦЫ ========= */

body {
  margin: 0;
  min-height: 100vh;
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;

  /* Звёзды + градиент неба */
  background-image:
    url("images/star.png"),
    radial-gradient(circle at 50% 100%, #003224 0%, #010705 70%);
  background-repeat: repeat, no-repeat;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
  background-blend-mode: screen;

  overflow-x: hidden;
}

/* ========= СЕВЕРНОЕ СИЯНИЕ ========= */

/* Контейнер по всей ширине и высоте экрана */
.bg {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Внутренний контейнер сияния — центрируем его */
.aur_cont {
  position: absolute;
  top: 40%;                 /* можно менять 35–50% для выше/ниже */
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 80px;                /* расстояние между столбами сияния */
}

/* Один «луч» северного сияния */
.aur {
  display: block;
  width: 0;
  min-height: 130px;
  border-radius: 5% 52% 30px 20px;
  opacity: 1;
  /* базовый наклон */
  transform: skew(-0.06turn, 18deg);
}

/* Разные цвета / высота / длительность анимации */
.aur_1 {
  box-shadow: #4bff8b 0 0 100px 40px;
  margin-top: 0;
  animation: topup-aur-1 17s infinite linear;
}
.aur_2 {
  box-shadow: #4b718c 0 0 100px 40px;
  margin-top: 25px;
  animation: topup-aur-2 20s infinite linear;
}
.aur_3 {
  box-shadow: #4bb044 0 0 100px 40px;
  margin-top: 30px;
  animation: topup-aur-3 15s infinite linear;
}
.aur_4 {
  box-shadow: #4bd4ff 0 0 100px 40px;
  margin-top: -20px;
  animation: topup-aur-4 21s infinite linear;
}
.aur_5 {
  box-shadow: #4bffa6 0 0 100px 40px;
  margin-top: 10px;
  animation: topup-aur-5 16s infinite linear;
}
.aur_6 {
  box-shadow: #4b724a 0 0 100px 40px;
  margin-top: 40px;
  animation: topup-aur-6 18s infinite linear;
}
.aur_7 {
  box-shadow: #4bb044 0 0 100px 40px;
  margin-top: 5px;
  animation: topup-aur-7 21s infinite linear;
}
.aur_8 {
  box-shadow: #4be56f 0 0 100px 40px;
  margin-top: 15px;
  animation: topup-aur-8 20s infinite linear;
}
.aur_9 {
  box-shadow: #4bb7ff 0 0 100px 40px;
  margin-top: 10px;
  animation: topup-aur-9 22s infinite linear;
}
.aur_10 {
  box-shadow: #4bffff 0 0 100px 40px;
  margin-top: -25px;
  animation: topup-aur-10 23s infinite linear;
}

/* Анимации — включаем и наклон, и движение вверх-вниз */
@keyframes topup-aur-1 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translateY(0);
    opacity: 0;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translateY(150px);
    opacity: 0.1;
  }
  25%, 75% {
    opacity: 1;
  }
}
@keyframes topup-aur-2 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translateY(0);
    opacity: 0;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translateY(130px);
    opacity: 0.1;
  }
  25%, 75% {
    opacity: 1;
  }
}
@keyframes topup-aur-3 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translateY(0);
    opacity: 0;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translateY(160px);
    opacity: 0.1;
  }
  25%, 75% {
    opacity: 1;
  }
}
@keyframes topup-aur-4 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translateY(0);
    opacity: 0;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translateY(140px);
    opacity: 0.1;
  }
  25%, 75% {
    opacity: 1;
  }
}
@keyframes topup-aur-5 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translateY(0);
    opacity: 0;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translateY(155px);
    opacity: 0.1;
  }
  25%, 75% {
    opacity: 1;
  }
}
@keyframes topup-aur-6 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translateY(0);
    opacity: 0;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translateY(150px);
    opacity: 0.1;
  }
  25%, 75% {
    opacity: 1;
  }
}
@keyframes topup-aur-7 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translateY(0);
    opacity: 0;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translateY(145px);
    opacity: 0.1;
  }
  25%, 75% {
    opacity: 1;
  }
}
@keyframes topup-aur-8 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translateY(0);
    opacity: 0;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translateY(150px);
    opacity: 0.1;
  }
  25%, 75% {
    opacity: 1;
  }
}
@keyframes topup-aur-9 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translateY(0);
    opacity: 0;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translateY(160px);
    opacity: 0.1;
  }
  25%, 75% {
    opacity: 1;
  }
}
@keyframes topup-aur-10 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translateY(0);
    opacity: 0;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translateY(145px);
    opacity: 0.1;
  }
  25%, 75% {
    opacity: 1;
  }
}

/* ========= ГОРЫ, ЛОГОТИП, ТЕКСТ ========= */

/* Горы на переднем плане */
.mountain {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 140vw;
  max-height: 55vh;
  object-fit: cover;
  z-index: 3;
  pointer-events: none;
}

/* Логотип по центру выше текста */
.logo {
  position: fixed;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  width: 200px;
  height: auto;
  z-index: 5;
  pointer-events: none;

  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Телефон по центру (под логотипом, над горами) */
.title {
  position: fixed;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  text-align: center;
  font-weight: 500;
  font-size: 24px;
}

/* ========= АДАПТИВ ========= */

/* Планшеты */
@media (max-width: 1024px) {
  .aur_cont {
    top: 38%;
    gap: 60px;
  }

  .mountain {
    width: 170vw;
    max-height: 50vh;
  }

  .logo {
    top: 22%;
    width: 400px;
  }

  .title {
    top: 68%;
    font-size: 48px;
  }
}

/* Телефоны / небольшие экраны */
@media (max-width: 768px) {
  .aur_cont {
    top: 35%;
    gap: 40px;
  }

  .mountain {
    width: 190vw;
    max-height: 45vh;
  }

  .logo {
    top: 22%;
    width: 300px;
  }

  .title {
    top: 67%;
    font-size: 28px;
    letter-spacing: 0.15em;
  }
}

/* Очень маленькие телефоны */
@media (max-width: 480px) {
  .aur_cont {
    top: 33%;
    gap: 30px;
  }

  .logo {
    top: 20%;
    width: 300px;
  }

  .title {
    top: 66%;
    font-size: 26px;
    letter-spacing: 0.12em;
  }
}
/* ===== ДОПОЛНИТЕЛЬНЫЕ ЛЕВЫЕ ПОЛОСКИ - ПОМЯГЧЕ, ХОЛОДНЫЕ ===== */
.aur_11 {
  box-shadow: 0 0 120px 50px rgba(75, 229, 255, 0.55); /* голубой, полупрозрачный */
  margin-top: 10px;
  animation: side-left-1 20s infinite linear;
}
.aur_12 {
  box-shadow: 0 0 130px 55px rgba(75, 255, 155, 0.5);  /* мягкий зелёно-бирюзовый */
  margin-top: -15px;
  animation: side-left-2 22s infinite linear;
}
.aur_13 {
  box-shadow: 0 0 125px 50px rgba(75, 212, 130, 0.45);
  margin-top: 35px;
  animation: side-left-3 18s infinite linear;
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ ПРАВЫЕ ПОЛОСКИ - ТЕПЛЕЕ, БОЛЬШЕ СИНЕГО ===== */
.aur_14 {
  box-shadow: 0 0 130px 55px rgba(75, 196, 255, 0.55);
  margin-top: 5px;
  animation: side-right-1 23s infinite linear;
}
.aur_15 {
  box-shadow: 0 0 125px 50px rgba(75, 255, 207, 0.5);
  margin-top: -20px;
  animation: side-right-2 19s infinite linear;
}
.aur_16 {
  box-shadow: 0 0 135px 55px rgba(75, 240, 166, 0.45);
  margin-top: 40px;
  animation: side-right-3 21s infinite linear;
}
/* ===== АНИМАЦИИ ЛЕВЫХ ПОЛОСОК ===== */
@keyframes side-left-1 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translate(-25px, 0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translate(-10px, 150px);
    opacity: 0.12;
  }
  75% {
    opacity: 1;
  }
}

@keyframes side-left-2 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translate(-35px, 0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translate(-15px, 180px);
    opacity: 0.12;
  }
  75% {
    opacity: 1;
  }
}

@keyframes side-left-3 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translate(-20px, 0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translate(-5px, 160px);
    opacity: 0.12;
  }
  75% {
    opacity: 1;
  }
}

/* ===== АНИМАЦИИ ПРАВЫХ ПОЛОСОК ===== */
@keyframes side-right-1 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translate(25px, 0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translate(10px, 170px);
    opacity: 0.12;
  }
  75% {
    opacity: 1;
  }
}

@keyframes side-right-2 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translate(35px, 0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translate(15px, 155px);
    opacity: 0.12;
  }
  75% {
    opacity: 1;
  }
}

@keyframes side-right-3 {
  0%, 100% {
    transform: skew(-0.06turn, 18deg) translate(20px, 0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: skew(-0.06turn, 18deg) translate(5px, 190px);
    opacity: 0.12;
  }
  75% {
    opacity: 1;
  }
}
/* Базово задаём полной высоты документ */
html, body {
  height: 100%;
}

/* На мобильных — запрещаем вертикальный скролл */
@media (max-width: 768px) {
  body {
    overflow: hidden;      /* убираем вертикальную прокрутку */
  }

  .bg {
    height: 100vh;         /* контейнер с сиянием ровно по высоте экрана */
  }
}
.title {
  margin: 0;                 /* чтобы не давал лишнюю высоту/скролл */
  color: #ffffff;
}

.title a {
  color: #ffffff;
  text-decoration: none;
}
@media (max-width: 768px) {
  .title {
    top: 68%;             /* можно чуть двинуть, если уедет */
    font-size: 40px;      /* увеличиваем относительно того, что было */
    letter-spacing: 0.18em;
  color: #ffffff;
  text-decoration: none;
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 30px;
    letter-spacing: 0.16em;
  color: #ffffff;
  text-decoration: none;
  }
}
@media (max-width: 768px) {
  .logo {
    top: 22%;
    width: 400px;
  }
}

@media (max-width: 480px) {
  .logo {
    top: 20%;
    width: 210px;
  }
}
@media (max-width: 768px) {
  .mountain {
    width: 190vw;
    max-height: 45vh;
  }
}

@media (max-width: 480px) {
  .mountain {
    width: 200vw;
    max-height: 45vh;
  }
}