/* Shared sky behind the header and hero: gradient, clouds, stars, moon and the shooting star. */

.sky {
  position: absolute;
  inset: 0 0 auto;
  height: 920px;
  overflow: hidden;
  pointer-events: none;
  background: var(--sky-bg);
  transition: background var(--theme-fade);
}

.moon { display: none; position: absolute; right: 15%; top: 140px; width: 65px; height: 65px; border-radius: 50%; box-shadow: -15px 8px 0 0 var(--moon); }
.night .moon { display: block; }
/* Pages with text where the moon would sit (adile-nasit/) leave it out. */
.night .sky-moonless .moon { display: none; }

.stars { position: absolute; inset: 0; opacity: 0; transition: opacity var(--theme-fade); }
.night .stars { opacity: 1; }
/* Static stars avoid continuous flashing. */
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--star); opacity: .7; }

/* Clouds have their own canvas; only the clouds take pointer events. */
.sky-scene { position: absolute; inset: 0 0 auto; z-index: 1; height: 845px; max-width: 1500px; margin: auto; overflow: clip; pointer-events: none; }
.cloud {
  position: absolute;
  z-index: 0;
  width: 160px;
  height: 75px;
  background: transparent;
  opacity: var(--cloud-opacity);
  pointer-events: auto;
  animation: drift 12s ease-in-out infinite alternate;
}
.cloud span { display: block; position: absolute; bottom: 5px; width: 100%; height: 40px; border-radius: 80px; background: var(--cloud); filter: drop-shadow(0 8px 12px var(--cloud-shadow)); }
.cloud span::before, .cloud span::after { content: ''; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }
.cloud span::before { left: 25px; width: 67px; height: 65px; }
.cloud span::after { left: 63px; width: 80px; height: 80px; }
.c1 { top: 55px; left: -45px; transform: scale(.8); }
.c2 { top: 65px; right: 10px; transform: scale(1.1); animation-delay: -5s; }
.c3 { bottom: 127px; right: -65px; transform: scale(.9); animation-delay: -8s; }
.cloud.gust { animation: gust 1.3s ease-out; }

/* Decorative star behind the hero content, so glass surfaces blur it; a click on the night sky sends a shooting star */
.shoot-trigger { display: none; position: absolute; right: 7%; top: 30px; z-index: 1; width: 48px; height: 48px; pointer-events: none; text-align: center; line-height: 48px; color: var(--shoot-trigger); font-size: 35px; }
.night .shoot-trigger { display: block; }
.shooting { position: absolute; z-index: 1; width: 110px; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--shooting-star)); transform: rotate(35deg); animation: shoot .85s ease-in forwards; }

@keyframes drift { from { translate: -12px 0; } to { translate: 19px -8px; } }
@keyframes gust { 0% { translate: 0 0; } 40% { translate: 65px -5px; opacity: .35; } 100% { translate: 0 0; } }
@keyframes shoot { from { translate: 0 0; opacity: 1; } to { translate: 400px 230px; opacity: 0; } }

@media (max-width: 700px) {
  .sky { height: 1050px; }
  .sky-scene { height: 850px; }
  .moon { right: 8%; top: 120px; scale: .6; }
  .cloud { scale: .6; }
  .c1 { top: 80px; left: -100px; }
  .c2 { right: -90px; }
  .c3 { bottom: 110px; right: -110px; }
  .shoot-trigger { top: 7px; right: 4px; font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .shooting { display: none; }
  .cloud.gust { opacity: .55; }
}