:root {
  --gold: #d4af37;
  --gold-light: #ffe36d;
  --space: #020306;
  --white: #ffffff;
  --muted: #d6d6d6;
}

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

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  overflow: hidden;
  background: var(--space);
  color: var(--white);
  font-family: Inter, Arial, Helvetica, sans-serif;
}

button {
  font: inherit;
}

/* =========================================================
   LANDING
========================================================= */

#landing {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(45, 100, 185, 0.25),
      transparent 35%
    ),
    radial-gradient(
      circle at 50% 15%,
      #1d2744 0%,
      #070b16 40%,
      #020306 100%
    );
}

/* =========================================================
   SPACE
========================================================= */

#stars {
  position: absolute;
  inset: 0;
  z-index: -4;

  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.9) 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.28) 1px,
      transparent 1.5px
    );

  background-position: 0 0, 22px 22px;
  background-size: 44px 44px;
  opacity: 0.3;

  animation: starsMove 80s linear infinite;
}

#nebula {
  position: absolute;
  inset: -25%;
  z-index: -3;

  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(55, 130, 255, 0.2),
      transparent 25%
    ),
    radial-gradient(
      circle at 35% 70%,
      rgba(212, 175, 55, 0.08),
      transparent 28%
    );

  filter: blur(55px);
  animation: nebulaPulse 9s ease-in-out infinite;
}

.shooting-star {
  display: none;
}

/* =========================================================
   EARTH
========================================================= */

#earth-container {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 760px;
  height: 760px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  z-index: 2;
}

#earth {
  position: relative;
  width: 450px;
  height: 450px;
  border-radius: 50%;

  background:
    url("../assets/images/earth.jpg")
    center center / cover
    no-repeat;

  filter:
    drop-shadow(0 0 30px rgba(80, 160, 255, 0.5))
    drop-shadow(0 0 85px rgba(35, 95, 190, 0.3));

  animation: earthFloat 8s ease-in-out infinite;
  z-index: 3;
}

/* =========================================================
   ORBITS
========================================================= */

#orbit-one,
#orbit-two {
  position: absolute;
  left: 50%;
  top: 50%;
  border: none;
  border-radius: 50%;
  transform-origin: center;
  pointer-events: none;
}

#orbit-one {
  width: 590px;
  height: 590px;
  margin-left: -295px;
  margin-top: -295px;
  z-index: 5;
  animation: orbitClockwise 34s linear infinite;
}

#orbit-two {
  width: 730px;
  height: 730px;
  margin-left: -365px;
  margin-top: -365px;
  z-index: 4;
  animation: orbitCounterClockwise 50s linear infinite;
}

.orbit-flag {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 34px;
  line-height: 1;
  transform-origin: center;

  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 9px rgba(212, 175, 55, 0.42));
}

/* =========================================================
   HERO
========================================================= */

#hero {
  position: relative;
  z-index: 10;
  width: min(920px, 92vw);
  text-align: center;
}

#logo {
  display: block;
  width: 230px;
  height: 230px;
  margin: 0 auto 14px;
  object-fit: contain;

  filter:
    drop-shadow(0 0 15px rgba(255, 255, 255, 0.22))
    drop-shadow(0 0 40px rgba(212, 175, 55, 0.35));
}

#hero h1 {
  margin: 0;
  font-size: clamp(3.7rem, 7vw, 5.9rem);
  line-height: 0.95;
  letter-spacing: 0.15em;
  text-indent: 0.15em;

  text-shadow:
    0 0 22px rgba(255, 255, 255, 0.45),
    0 0 55px rgba(90, 150, 255, 0.3);
}

.tagline {
  margin-top: 22px;
  color: var(--gold-light);
  font-size: clamp(0.72rem, 1.3vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

#hero h2 {
  margin-top: 30px;
  font-size: clamp(1.7rem, 2.8vw, 2.25rem);
}

.translation {
  margin-top: 9px;
  color: var(--muted);
  font-size: 1.08rem;
}

#enterButton {
  margin-top: 30px;
  padding: 17px 48px;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      var(--gold-light),
      var(--gold)
    );

  color: #111;
  cursor: pointer;
  font-size: 1.12rem;
  font-weight: 900;

  box-shadow:
    0 0 30px rgba(212, 175, 55, 0.32);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

#enterButton:hover {
  transform: translateY(-4px);

  box-shadow:
    0 0 52px rgba(212, 175, 55, 0.55);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes starsMove {
  to {
    background-position:
      500px 900px,
      522px 922px;
  }
}

@keyframes nebulaPulse {
  50% {
    opacity: 0.65;
    transform: scale(1.04);
  }
}

@keyframes earthFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes orbitClockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitCounterClockwise {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {
  #earth-container {
    width: 520px;
    height: 520px;
    top: 51%;
  }

  #earth {
    width: 300px;
    height: 300px;
  }

  #orbit-one {
    width: 410px;
    height: 410px;
    margin-left: -205px;
    margin-top: -205px;
  }

  #orbit-two {
    width: 510px;
    height: 510px;
    margin-left: -255px;
    margin-top: -255px;
  }

  .orbit-flag {
    font-size: 26px;
  }

  #logo {
    width: 150px;
    height: 150px;
    margin-bottom: 12px;
  }

  #hero h1 {
    font-size: clamp(3rem, 13vw, 4rem);
  }

  .tagline {
    margin-top: 16px;
    letter-spacing: 0.16em;
  }

  #hero h2 {
    margin-top: 22px;
  }

  #enterButton {
    margin-top: 24px;
  }
}