/* Space props: red planets and nebula swirls drifting behind the title.
   Positions are inline on each <img> (like the fossils in bones.css) as a % of .space,
   widths are a % of .space so the scene scales with the content column. */

:root {
  --swirl-hook-top: 4%;
  --swirl-hook-left: 58%;
  --swirl-hook-width: 66%;

  --swirl-s-top: 37%;
  --swirl-s-left: -12%;
  --swirl-s-width: 80%;

  --swirl-double-top: 64%;
  --swirl-double-left: 42%;
  --swirl-double-width: 76%;

  --planet-giant-top: 57%;
  --planet-giant-left: -10%;
  --planet-giant-width: 36%;

  --planet-dark-top: 2%;
  --planet-dark-left: 83%;
  --planet-dark-width: 19%;
}

@media (max-width: 600px) {
  :root {
    --swirl-hook-top: 3%;
    --swirl-hook-left: 50%;
    --swirl-hook-width: 75%;

    --swirl-s-top: 40%;
    --swirl-s-left: -12%;
    --swirl-s-width: 90%;

    --swirl-double-top: 66%;
    --swirl-double-left: 35%;
    --swirl-double-width: 85%;

    --planet-giant-top: 60%;
    --planet-giant-left: -14%;
    --planet-giant-width: 42%;

    --planet-dark-top: 24%;
    --planet-dark-left: 84%;
    --planet-dark-width: 22%;
  }
}

.space-props {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.space-prop {
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.swirl {
  filter: drop-shadow(0 0 18px rgba(255, 0, 0, 0.35));
}

.planet {
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.45));
}

/* Large props are positioned through the variables above so they can move on phones */
.swirl-hook {
  top: var(--swirl-hook-top);
  left: var(--swirl-hook-left);
  width: var(--swirl-hook-width);
}

.swirl-s {
  top: var(--swirl-s-top);
  left: var(--swirl-s-left);
  width: var(--swirl-s-width);
}

.swirl-double {
  top: var(--swirl-double-top);
  left: var(--swirl-double-left);
  width: var(--swirl-double-width);
}

.planet-giant {
  top: var(--planet-giant-top);
  left: var(--planet-giant-left);
  width: var(--planet-giant-width);
}

.planet-dark {
  top: var(--planet-dark-top);
  left: var(--planet-dark-left);
  width: var(--planet-dark-width);
}

/* Pixel "+" stars: two bars drawn with gradients so no image is needed */
.space-star {
  --star-color: #f4f4f4;
  --star-size: 14px;
  position: absolute;
  width: var(--star-size);
  height: var(--star-size);
  background:
    linear-gradient(var(--star-color), var(--star-color)) center / 100% 30% no-repeat,
    linear-gradient(var(--star-color), var(--star-color)) center / 30% 100% no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 240, 220, 0.8));
}

.space-star.small {
  --star-size: 9px;
}

.space-star.red {
  --star-color: #e0141c;
  --star-size: 8px;
  filter: none;
}

@media (max-width: 600px) {
  /* The space band is 400px tall on phones, so hide the props that would crowd the title */
  .space-prop.hide-mobile,
  .space-star.hide-mobile {
    display: none;
  }

  .space-star {
    --star-size: 9px;
  }

  .space-star.small,
  .space-star.red {
    --star-size: 6px;
  }
}