/* The sky behind the landing pages: night at the top of the page, sunrise in the middle, day at
   the bottom. The colours are the app's own (celestial.js in the app). sky.js sets the variables
   below once a frame as you scroll; everything else is here. Both index.html and about.html use it. */
:root {
  --day: 0; --sky1: #0b0e24; --sky2: #121238; --sky3: #1a1740; --glow: rgba(185, 195, 255, 0.34);
  --stars: 1; --moon-a: 1; --moon-y: 0px; --sun-a: 0; --sun-y: 160px; --dawn-a: 0; --dim: 1;
}
.sky, .stars, .dawn, .moon, .moon-glow, .sun, .sun-glow, .cloud { position: fixed; z-index: 0; pointer-events: none; }
.sky { inset: 0; background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 55%, var(--sky3) 100%); }
.stars {
  inset: 0; opacity: var(--stars);
  background:
    radial-gradient(1px 1px at 12% 18%, #cfd6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%, #cfd6ff 50%, transparent 51%),
    radial-gradient(2px 2px at 33% 31%, #aab3e8 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 22%, #cfd6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 39%, #aab3e8 50%, transparent 51%),
    radial-gradient(2px 2px at 7% 52%, #8f9ad4 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 12%, #cfd6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 64%, #8f9ad4 50%, transparent 51%);
}
/* the warm band on the horizon around sunrise */
.dawn { left: 0; right: 0; bottom: 0; height: 60vh; opacity: var(--dawn-a); background: linear-gradient(0deg, var(--glow) 0%, transparent 100%); }
/* the moon sets on the right and the sun rises on the left */
.moon { top: 40px; right: 6vw; width: 72px; height: 72px; opacity: calc(var(--moon-a) * var(--dim) * var(--clear, 1)); transform: translateY(var(--moon-y)); }
.moon-glow {
  top: 4px; right: calc(6vw - 36px); width: 144px; height: 144px; opacity: calc(var(--moon-a) * var(--clear, 1)); transform: translateY(var(--moon-y));
  background: radial-gradient(circle, rgba(200, 208, 255, 0.2) 0%, rgba(200, 208, 255, 0.07) 45%, transparent 70%);
}
.sun { top: 40px; left: 6vw; width: 72px; height: 72px; opacity: calc(var(--sun-a) * var(--dim) * var(--clear, 1)); transform: translateY(var(--sun-y)); }
.sun-glow {
  top: 4px; left: calc(6vw - 36px); width: 144px; height: 144px; opacity: calc(var(--sun-a) * var(--clear, 1)); transform: translateY(var(--sun-y));
  background: radial-gradient(circle, rgba(255, 220, 150, 0.4) 0%, rgba(255, 220, 150, 0.14) 45%, transparent 70%);
}
/* kept clear of the wordmark and the headline on purpose; the dark clouds hand over to the light ones with the day */
.cloud.a { top: 44px; width: 72px; height: 30px; animation: drift 150s linear infinite; }
.cloud.b { top: 118px; width: 48px; height: 24px; animation: drift 210s linear infinite; animation-delay: -80s; }
.cloud.c { top: 34vh; width: 96px; height: 40px; animation: drift 190s linear infinite; animation-delay: -40s; }
.cloud.d { top: 58vh; width: 60px; height: 30px; animation: drift 240s linear infinite; animation-delay: -150s; }
.cloud.e { top: 76vh; width: 72px; height: 30px; animation: drift 170s linear infinite; animation-delay: -100s; }
.cloud.dark { opacity: calc(0.28 * (1 - var(--day)) * var(--clear, 1)); }
.cloud.light { opacity: calc(0.4 * var(--day) * var(--clear, 1)); }
/* gulls come out with the day: the wrapper drifts across, the bird inside bobs */
.gull { position: fixed; z-index: 0; pointer-events: none; opacity: calc(var(--day) * 0.85 * var(--clear, 1)); animation: drift var(--t) linear infinite; animation-delay: var(--d); }
.gull img { display: block; width: var(--w); animation: flap 2.8s ease-in-out infinite; }
.gull.a { top: 21vh; --w: 60px; --t: 95s; --d: -20s; }
.gull.b { top: 30vh; --w: 48px; --t: 130s; --d: -75s; }
.gull.c { top: 15vh; --w: 40px; --t: 150s; --d: -120s; }
@keyframes flap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes drift { from { transform: translateX(-140px); } to { transform: translateX(calc(100vw + 140px)); } }

/* sky.js sets --clear to 0 on anything a headline would cover, and it fades out */
.moon, .moon-glow, .sun, .sun-glow, .cloud, .gull { transition: opacity 0.4s; }

@media (prefers-reduced-motion: reduce) { .cloud, .gull, .gull img { animation: none; } }
@media (max-width: 760px) {
  .moon-glow, .sun-glow, .cloud.a, .cloud.b, .cloud.c, .gull.c { display: none; }
  .moon, .sun { top: 26px; width: 48px; height: 48px; }
  :root { --dim: 0.5; }
}