/* font */
@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth@110&display=swap");

:root {
  font-size: min(18px, 2.6svw);
}
html {
  font-family: "Archivo", sans-serif;
}
h1,
#comet,
.stars > span,
#galaxy > div > article > h3,
#galaxy > div > article > a.satellites,
#telescope > a > span > text,
.planet {
  font-family: "Audiowide", "Archivo", sans-serif;
  font-weight: bold;
}
h1 {
  font-size: 0.8rem;
  font-weight: normal;
}
#earth {
  font-size: 0.9em;
}
#comet {
  font-style: italic;
}
#galaxy > div > article > h3 {
  font-size: 1.5em;
}
#galaxy > div > article > a.satellites {
  font-size: 1.2em;
}
#telescope > a > span > text {
  font-size: 2em;
}
.planet {
  font-size: 2em;
}
#earth {
  font-size: 0.8em;
}

/* style */

:root {
  --bg: #000;
  --c1: #ddd;
  --c2: #fff;
  --outline-bg: solid 0.07em var(--bg);
  --outline-c1: solid 0.07em var(--c1);
  --rady: 2em;
  --c-w: 3em;
  --gas-1: var(--c1);
  --gas-2: var(--c2);
  box-sizing: border-box;
}

::selection {
  color: var(--c2);
  background: var(--c1);
}
body {
  overflow-x: hidden;
}
p {
  margin: 0;
}
a {
  color: var(--c1);
  text-decoration: none;
}
a:hover {
  animation: ahover 0.12s infinite;
}
@keyframes ahover {
  0% {
    color: var(--c2);
  }
  50% {
    color: var(--c2);
  }
  51% {
    color: var(--c1);
  }
  100% {
    color: var(--c1);
  }
}

/* header */

header {
  margin: 0;
  padding: 0.7em 0;
  text-align: center;
}
h1 {
  letter-spacing: 4.5svw;
}
h1 > text {
  letter-spacing: 0;
}

/* star */

#galaxy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 1em;
  overflow: hidden;
  background: center/cover no-repeat var(--bg) url("./n/PIA16528~orig.jpg");
  background-blend-mode: luminosity;
  border-radius: var(--rady);
  outline: var(--outline-c1);
}
#galaxy > div {
  flex-shrink: 1;
  /* background: #ff0; */
}
#galaxy > div:has(input:checked) {
  width: 100%;
  flex-shrink: 0;
}
#galaxy > div > article {
  display: none;
  margin: auto 0;
  /* background: #f00a; */
}
#galaxy > div:has(input:checked) > article {
  display: inherit;
}
.stars {
  min-width: calc(var(--c-w) * 2 + 1em);
  height: calc(var(--c-w) * 2 + 5em); /* need to transition */
  clip-path: circle(var(--c-w));
  shape-outside: circle(var(--c-w)); /* need to transition */
  --gas-1: var(--c1);
  --gas-2: var(--c1);
  background: radial-gradient(
    circle at 60% 10% in hsl shorter hue,
    var(--gas-1) 0%,
    var(--gas-1) 40%,
    var(--gas-2) 70%,
    var(--gas-2) 100%
  );
  color: var(--bg);
  text-align: center;
  transition: min-width 0.2s, height 0.2s, clip-path 0.2s, shape-outside 0.2s;
  cursor: zoom-in;
}
.stars:has(input:checked) {
  cursor: zoom-out;
}
.stars > input {
  display: none;
}
.stars > span {
  line-height: calc(var(--c-w) * 2 + 5em); /* .stars.height */
  user-select: none;
}
.stars:has(input:checked) > span {
  visibility: hidden;
}
/*  */
#star1 {
  --c-w: 11svw;
  float: left;
  --gas-1: #6cf;
  --gas-2: #26a;
  /* --gas-1: #acd; */
  /* --gas-2: #889; */
}
#star1:has(input:checked) {
  min-width: 16em;
  height: 16em;
  clip-path: circle(12em at -1em 4em);
  shape-outside: circle(12em at 0em 4em); /* need for p */
}
div:has(#star1):has(input:checked) {
  height: 13em;
}
/*  */
#star2 {
  --c-w: 7svw;
  float: right;
  --gas-1: #87f;
  --gas-2: #579;
}
#star2:has(input:checked) {
  min-width: 13em;
  height: 13em;
  clip-path: circle(6em at 8em 6.5em);
  shape-outside: circle(6em at 7em 6.5em); /* need for p */
}
div:has(#star2):has(input:checked) {
  height: 9em;
}
div:has(#star2) > article {
  text-align: right;
}
/*  */
#star3 {
  --c-w: 9svw;
  float: left;
  --gas-1: #b6f;
  --gas-2: #a27;
}
#star3:has(input:checked) {
  min-width: calc(24svw + 8em);
  height: 15em;
  clip-path: circle(7em at 24svw 8em);
  shape-outside: circle(7em at calc(24svw + 1em) 8em); /* need for p */
}
div:has(#star3):has(input:checked) {
  height: 14em;
}
/*  */
#star4 {
  --c-w: 7svw;
  float: right;
  --gas-1: #5d5;
  --gas-2: #288;
}
#star4:has(input:checked) {
  min-width: calc(10em + 15svw);
  height: 12em;
  clip-path: circle(6em at 9em 6em);
  shape-outside: circle(6em at 8em 6em); /* need for p */
}
div:has(#star4):has(input:checked) {
  height: 14em;
}
div:has(#star4) > article {
  text-align: right;
}
/*  */
#star5 {
  --c-w: 5svw;
  float: left;
  --gas-1: #f65;
  --gas-2: #c36;
}
#star5:has(input:checked) {
  min-width: 20em;
  height: 12em;
  clip-path: circle(12em at 3em 13em);
  shape-outside: circle(12em at 4em 13em); /* need for p */
}
div:has(#star5):has(input:checked) {
  height: 12em;
}
/*  */
#star1:hover,
#star2:hover,
#star3:hover,
#star4:hover,
#star5:hover {
  color: var(--c1);
}
#galaxy:not(:hover) {
  #star1,
  #star2,
  #star3,
  #star4,
  #star5 {
    --gas-1: var(--c1);
    --gas-2: var(--c1);
  }
}

/* star article appear */

#galaxy > div > article > h3,
#galaxy > div > article > a {
  display: inline-block;
  text-shadow: 0 0 0.4em var(--bg);
  translate: 0 0; /* need for transition */
  scale: 100%; /* need for transition */
  transition: translate 0.2s, scale 0.2s;
  z-index: 2; /* beyond stars */
}
#galaxy > div > article > a {
  margin: 0.1em 0;
  text-decoration: underline;
}
#galaxy > div > article > a::before {
  content: "🌐 ";
  font-variant-emoji: text;
}
#galaxy > div > article > a.satellites {
  margin: 0.3em;
  padding: 0.1em 1em;
  color: var(--c1);
  text-shadow: none;
  text-decoration: none;
  background: var(--bg);
  border: var(--outline-c1);
  border-radius: var(--rady);
  outline: var(--outline-c1);
  outline-offset: 0.2em;
  transition: translate 0.2s, scale 0.2s, background 0.2s, outline-offset 0.2s;
}
#galaxy > div > article > a.satellites:hover {
  color: var(--bg);
  background: var(--c1);
  outline-offset: -0.1em;
}
#galaxy > div > article > a.satellites::before,
#galaxy > div > article > a.satellites::after {
  content: '"';
}
#star1:has(input:checked):hover,
#star3:has(input:checked):hover,
#star5:has(input:checked):hover {
  + article > h3,
  + article > a {
    translate: -5% 0;
    scale: 95%;
  }
}
#star2:has(input:checked):hover,
#star4:has(input:checked):hover {
  + article > h3,
  + article > a {
    translate: 5% 0;
    scale: 95%;
  }
}

/* comet */

div:has(#comet) {
  position: relative;
}
#comet {
  display: inline-block;
  background: center/100% no-repeat url(./comet.svg);
  height: 5em;
  line-height: 5em;
  aspect-ratio: 75/32;
  position: absolute;
  right: 0;
  top: -5em;
  text-align: center;
  color: var(--bg);
  transform: rotate(-10deg);
  transition: transform 0.1s;
}
#comet:hover {
  transform: rotate(-14deg);
}

/* ocdb */

#telescope {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 1em;
  overflow: hidden;
  border-radius: var(--rady);
  outline: var(--outline-c1);
  background: center/cover no-repeat var(--bg) url("./o/1.png"); /* change in script */
  background-blend-mode: luminosity;
}
#telescope:hover {
  background-blend-mode: normal;
}
#telescope > a {
  display: block;
  width: 100%;
  height: 10em;
  transition: height 0.4s;
  position: relative; /* need for span */
}
#telescope:hover > a {
  height: 10.3em;
  background-blend-mode: normal;
}
#telescope > a > span {
  display: inline-block;
  position: absolute;
  left: calc(var(--rady) / 4);
  bottom: calc(var(--rady) / 4);
}

/* planets & asteroids */

#pna {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  overflow: hidden;
  gap: 0.5em;
  margin: 1em;
}

/* planet */

#planets {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5em;
}
.planet {
  display: inline-block;
  width: 1.3em;
  min-height: 4em;
  padding-top: 0.1em;
  color: var(--c1);
  border: var(--outline-c1);
  text-align: right;
  writing-mode: sideways-lr;
  position: relative; /* need for ::before */
  overflow: hidden; /* need for ::before */
}
.planet::before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 101%;
  z-index: -1;
  background: var(--c1);
  position: absolute;
  top: 100%;
  left: 0;
  transition: top 0.3s;
}
.planet:hover::before {
  top: 0;
}

/* asteroid */

#asteroids {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  padding: calc(var(--rady) / 4);
  padding-bottom: calc(var(--rady) / 4 + 0.3em); /* 0.3em for .asteroid box-shadow */
  border: var(--outline-c1);
  border-radius: var(--rady);
}
.asteroid {
  display: inline-block;
}
#ozett {
  margin-left: 0.1em;
  width: 3.6em;
  height: 1.8em;
  stroke: var(--c1);
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icons {
  height: 1.6em;
  aspect-ratio: 1/1;
  fill: var(--c1);
  stroke: var(--bg);
  stroke-width: 0.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  translate: 0 0;
  filter: drop-shadow(0 0.15em var(--bg)) drop-shadow(0 0.3em var(--c1));
  transition: translate 0.1s, filter 0.1s;
}
.icons:hover {
  translate: 0 0.3em;
  filter: drop-shadow(0 0 var(--c1));
  animation: ihover 0.12s infinite;
}
@keyframes ihover {
  0% {
    fill: var(--c2);
  }
  50% {
    fill: var(--c2);
  }
  51% {
    fill: var(--c1);
  }
  100% {
    fill: var(--c1);
  }
}

/* footer */

footer {
  margin-top: 2em;
  text-align: center;
}
#sky {
  height: 8em;
  background: bottom/10em repeat-x url("./sky.svg"),
    linear-gradient(to bottom, transparent, transparent 90%, #000 91%, #000 100%);
}
#earth {
  min-height: 20em;
  background: top/cover no-repeat var(--bg) url("./n/GSFC_20171208_Archive_e000413~medium.jpg");
  background-blend-mode: luminosity;
}