* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: "Georgia", "Times New Roman", serif;
  background: #000;
  color: #fff;
  overflow: hidden;
  opacity: 0;
  animation: fade-in 1.5s ease forwards;
}

.page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-image: url("bg-space.jpg");
  background-size: cover;
  background-position: center;
  animation: star-glow 10s ease-in-out infinite;
}

/* Логотип */

.header {
  position: absolute;
  top: 2vh;
  left: 2vw;
  z-index: 5;
}

.logo-spacejak {
  display: block;
  max-width: 220px;
  width: 25vw;
}

/* Центральный блок */

.main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2vh;
}

/* Машина по центру с вертикальной анимацией и возможностью смещения по оси X */

.rocket-car {
  max-width: 70vw;
  width: 800px;
  height: auto;
  --car-offset-x: -8%; /* ← Меняй это значение для сдвига машины по горизонтали */
  animation: float-car 6s ease-in-out infinite;
}

/* Текст под машиной */

.title-coming {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  margin-top: 1.5vh;
  text-transform: uppercase;
  animation: breathe 4s ease-in-out infinite;
}

/* Кнопки */

.buttons-row {
  position: absolute;
  top: calc(50% + 29vh);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6vw;
  align-items: center;
  justify-content: center;
}

.pill-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease-out;
}

.pill-btn:active {
  transform: scale(0.96);
}

.pill-img {
  display: block;
  height: auto;
  max-width: 260px;
  width: 22vw;
}

/* Астронавт */

.astronaut-mems {
  position: absolute;
  right: 3vw;
  bottom: 0;
  max-height: 35vh;
  height: 260px;
  width: auto;
  animation: float-astronaut 5s ease-in-out infinite;
}

/* === АНИМАЦИИ === */

@keyframes fade-in {
  to { opacity: 1; }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.95; }
}

@keyframes star-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.05); }
}

/* Вертикальное покачивание машины, с учётом горизонтального смещения */

@keyframes float-car {
  0%   { transform: translate(var(--car-offset-x), 0); }
  50%  { transform: translate(var(--car-offset-x), -15px); }
  100% { transform: translate(var(--car-offset-x), 0); }
}

/* Астронавт */

@keyframes float-astronaut {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-15px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Адаптация под мобильные экраны */

@media (max-width: 768px) {
  .logo-spacejak { max-width: 150px; }
  .rocket-car { max-width: 90vw; }
  .title-coming { font-size: clamp(2rem, 6vw, 3rem); }
  .buttons-row { top: calc(50% + 25vh); gap: 10vw; }
  .pill-img { max-width: 190px; width: 30vw; }
  .astronaut-mems { max-height: 26vh; right: 1.5vw; }
}