html {
  background: #000;
  color-scheme: dark;
}

body {
  margin: 0;
  overflow: hidden;
}

/* Le ciel prend toute la hauteur en paysage. En portrait il s'élargit à 140 % de l'écran : l'arc de lunes tient
   entre 17 % et 83 % de la largeur de l'image, il se cadre alors presque bord à bord et le daruma reste assez grand
   au doigt. */
.ciel {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(140vw, 168.75vh);
  width: min(140vw, 168.75svh);
  aspect-ratio: 2592 / 1536;
  transform: translate(-50%, -50%);
}

/* Les quatre bords de l'image se fondent dans le noir de la page : aucune couture quand l'écran est plus large ou
   plus haut qu'elle. Les deux dégradés se croisent ; aucun astre n'est à moins de 17 % d'un bord. */
.ciel img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}

/* Un astre est un lien transparent posé sur l'image, en pourcentage : il la suit à toute taille d'écran. */
.astre {
  position: absolute;
  border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
  transition: box-shadow 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}

.astre:hover {
  box-shadow: 0 0 3vmin 0.4vmin rgb(255 255 255 / 0.28);
}

.astre:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.85);
  outline-offset: 4px;
}

/* Position de chaque astre, mesurée sur sources/composite.png (2592 × 1536). */
.daruma {
  left: 45.06%;
  top: 17.25%;
  width: 8.87%;
  height: 16.93%;
}

@media (prefers-reduced-motion: reduce) {
  .astre {
    transition: none;
  }
}