/* ===== Sahara - the home screen follows the real sun over London (js/sky.js) ===== */
.sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }.sky-tint, .sky-stars { position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease, background 2s ease; }

/* the colour of the sky through the day */
.hero[data-sky="dawn"] .sky-tint { opacity: 1; background: linear-gradient(rgba(255, 150, 160, .32), rgba(255, 190, 120, .12) 55%, transparent); }
.hero[data-sky="day"] .sky-tint { opacity: 1; background: linear-gradient(rgba(255, 236, 190, .14), transparent 60%); }
.hero[data-sky="golden"] .sky-tint { opacity: 1; background: linear-gradient(rgba(255, 150, 40, .38), rgba(255, 110, 20, .16) 60%, rgba(120, 30, 10, .2)); }
.hero[data-sky="dusk"] .sky-tint { opacity: 1; background: linear-gradient(rgba(70, 30, 110, .55), rgba(190, 70, 80, .25) 65%, rgba(20, 8, 30, .3)); }
.hero[data-sky="night"] .sky-tint { opacity: 1; background: linear-gradient(rgba(6, 10, 38, .72), rgba(14, 12, 40, .5) 60%, rgba(30, 12, 10, .45)); }

/* stars come out at dusk and twinkle through the night */
.sky-stars {
  background-image: radial-gradient(1.6px 1.6px at 8% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 21% 30%, #fff, transparent), radial-gradient(2px 2px at 34% 8%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 47% 22%, #fff, transparent), radial-gradient(1.6px 1.6px at 59% 6%, #fff, transparent), radial-gradient(1.2px 1.2px at 68% 28%, #fff, transparent),
    radial-gradient(2px 2px at 79% 14%, #fff, transparent), radial-gradient(1.2px 1.2px at 90% 34%, #fff, transparent), radial-gradient(1.6px 1.6px at 14% 44%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 84% 48%, #fff, transparent), radial-gradient(1.4px 1.4px at 40% 40%, #fff, transparent), radial-gradient(1.2px 1.2px at 96% 6%, #fff, transparent);
  animation: sky-twinkle 3.5s ease-in-out infinite alternate;
}
.hero[data-sky="dusk"] .sky-stars { opacity: .45; }
.hero[data-sky="night"] .sky-stars { opacity: 1; }
@keyframes sky-twinkle { from { filter: brightness(.6); } to { filter: brightness(1.3); } }

/* the sun and the moon travel on an arc over the picture */
.sky-body { position: absolute; width: 80px; height: 80px; margin: -40px 0 0 -40px; transition: left 1.5s ease, top 1.5s ease, opacity 2s ease; }
.sky-body svg { display: block; width: 100%; height: 100%; }
.sky-sun svg { filter: drop-shadow(0 0 18px rgba(255, 210, 90, .9)) drop-shadow(0 0 50px rgba(255, 170, 40, .6)); animation: sky-spin 60s linear infinite; }
.hero[data-sky="golden"] .sky-sun svg, .hero[data-sky="dawn"] .sky-sun svg { filter: drop-shadow(0 0 20px rgba(255, 140, 40, 1)) drop-shadow(0 0 70px rgba(255, 90, 20, .8)); }
.sky-moon { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
.sky-moon svg { filter: drop-shadow(0 0 16px rgba(255, 245, 210, .75)) drop-shadow(0 0 40px rgba(200, 210, 255, .4)); }
@keyframes sky-spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .sky-body { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .sky-moon { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
}
@media (prefers-reduced-motion: reduce) { .sky-sun svg, .sky-stars { animation: none; } }

/* Kept simple for now (2026-11-05, the home page felt too busy): only the sky colour and the
   greeting show. Delete this line to bring back the sun, moon and stars. */
.sky-body, .sky-stars { display: none; }