/* The public pages' sky (app/templates/public/base.html), as the app draws it (ios StarlightSky): the dawn by day
   and the twilight by night (public.css holds the colours), soft clouds by day, dust and a low rose glow by night,
   thirteen twinkling stars (public.css draws a star), two shooting stars a minute and, by night, motes of light rising from the horizon.
   Decoration only: hidden from screen readers and never in the way of a tap. Reduce Motion stills it; Reduce
   Transparency and Increase Contrast leave the plain gradient. */

/* The sky: fixed behind the page, as tall as the window at its largest, so it holds still as the page scrolls. */
.sky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background: var(--sky);
  pointer-events: none;
}

.sky > div {
  position: absolute;
  inset: 0;
}

/* Soft clouds by day, a faint rose glow low on the horizon by night, placed as on a 393 x 852 phone. */
.clouds i {
  position: absolute;
  border-radius: 50%;
  background: var(--cloud);
  filter: blur(var(--cloud-blur));
  animation: drift 40s ease-in-out infinite;
}

.clouds i:nth-child(1) { left: -20.4%; top: 84.7%; width: 73.8%; height: 15.3%; }
.clouds i:nth-child(2) { left: 40.7%; top: 88.7%; width: 78.9%; height: 16.4%; }
.clouds i:nth-child(3) { left: 60.1%; top: 3.1%; width: 50.9%; height: 7.7%; opacity: .55; }

/* Night dust: the app's tile of fine dots (NightDust). */
.dust {
  display: none;
  background: url("/static/public-dust.svg") 0 0 / 220px 220px;
  opacity: .95;
}

/* Where the app's sky puts its stars on a 393 x 852 phone (SkyLayout, seed 121), as shares of the window; a
   negative delay starts each star where the app's would be in its breath. */
.stars .tw:nth-child(1) { left: 18.3%; top: 58.1%; --z: 13px; --d: -2.18s; }
.stars .tw:nth-child(2) { left: 47.5%; top: 55.5%; --z: 5px; --d: -2.37s; }
.stars .tw:nth-child(3) { left: 15.8%; top: 74.7%; --z: 6px; --d: -1.46s; color: var(--star-gold); }
.stars .tw:nth-child(4) { left: 62.8%; top: 85.2%; --z: 13px; --d: -2.45s; color: var(--star-gold); }
.stars .tw:nth-child(5) { left: 10.5%; top: 32.2%; --z: 7px; --d: -2.6s; }
.stars .tw:nth-child(6) { left: 73%; top: 60%; --z: 8px; --d: -1.52s; }
.stars .tw:nth-child(7) { left: 96.2%; top: 80.2%; --z: 9px; --d: -3.09s; }
.stars .tw:nth-child(8) { left: 49.3%; top: 47.4%; --z: 7px; --d: -1.67s; }
.stars .tw:nth-child(9) { left: 71.2%; top: 43%; --z: 7px; --d: -2.28s; color: var(--star-gold); }
.stars .tw:nth-child(10) { left: 12.3%; top: 22.8%; --z: 7px; --d: -2.58s; color: var(--star-gold); }
.stars .tw:nth-child(11) { left: 39.6%; top: 60.1%; --z: 13px; --d: -1.26s; }
.stars .tw:nth-child(12) { left: 93.2%; top: 29.3%; --z: 5px; --d: -1.51s; }
.stars .tw:nth-child(13) { left: 27.9%; top: 34.5%; --z: 5px; --d: -2.18s; }

/* Two shooting stars a minute: a streak 110 points long that falls down and to the left over 0.85 seconds. */
.meteors i {
  position: absolute;
  width: 110px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
  transform-origin: 0 50%;
  opacity: 0;
  animation: meteor 60s infinite;
}

.meteors i::before,
.meteors i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.meteors i::before { width: 12px; height: 12px; background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); }
.meteors i::after { width: 6px; height: 6px; background: #FFFFFF; }
.meteors i:nth-child(1) { left: 79.2%; top: 15.2%; animation-delay: 6s; }
.meteors i:nth-child(2) { left: 49.1%; top: 47%; animation-delay: 36s; }

/* By night, motes of gold light rising from the horizon over nine seconds. */
.motes { display: none; }

.motes i {
  position: absolute;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #FFE9B8;
  box-shadow: 0 0 5px 2px rgba(255, 233, 184, .55);
  opacity: 0;
  animation: rise 9s linear infinite;
}

.motes i:nth-child(1) { left: 89.2%; top: 64.8%; --dx: 3.8px; animation-delay: -.3s; }
.motes i:nth-child(2) { left: 24.5%; top: 82.6%; --dx: 11.6px; animation-delay: -2.48s; }
.motes i:nth-child(3) { left: 72.8%; top: 63.9%; --dx: 6.6px; animation-delay: -3.9s; }
.motes i:nth-child(4) { left: 61.9%; top: 83.3%; --dx: 8.3px; animation-delay: -5.58s; }
.motes i:nth-child(5) { left: 54.7%; top: 67.6%; --dx: -9.3px; animation-delay: -7.76s; }

@media (prefers-color-scheme: dark) {
  .dust,
  .motes { display: block; }
}

@keyframes drift {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(14px); }
  75% { transform: translateX(-14px); }
}

@keyframes meteor {
  0% { opacity: 0; transform: translate(0, 0) rotate(-24deg); animation-timing-function: ease-in; }
  .38% { opacity: 1; }
  1.42% { opacity: 0; transform: translate(-130px, 58px) rotate(-24deg); }
  100% { opacity: 0; transform: translate(-130px, 58px) rotate(-24deg); }
}

@keyframes rise {
  0% { opacity: 0; transform: translate(0, 0); }
  15%, 85% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -120px); }
}

/* Reduce Motion: a still sky. */
@media (prefers-reduced-motion: reduce) {
  .clouds i { animation: none; }

  .meteors i,
  .motes i { visibility: hidden; animation: none; }
}

/* Reduce Transparency and Increase Contrast: the plain gradient, with nothing in it left running. The stopping rule
   comes last and is at least as specific as each animated one (.clouds i, .meteors i, .motes i, .tw), so it wins. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sky > * { visibility: hidden; }

  .sky i,
  .sky svg { animation: none; }
}