/* Shared sky styles — used by index.html and download.html. */

.deck { height: 24%; filter: blur(20px); }
/* The paper sheet the sections sit on. */
#paper { position: relative; z-index: 1; background: var(--page); }
/* Overscroll at the top shows more sheet rather than bare canvas. */
#paper::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 100vh; background: var(--page);
}
.sky { position: absolute; inset: 0; overflow: hidden; }
.sky-inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.starfield { position: absolute; inset: -40%; pointer-events: none; transform-origin: 50% 62%; }
.stars, .stars2 { position: absolute; inset: 0; pointer-events: none; }
.milkyway {
  position: absolute; left: -10%; top: 8%; width: 120%; height: 34%;
  transform: rotate(-24deg); filter: blur(6px);
  background: linear-gradient(rgba(205,215,255,0), rgba(215,225,255,.14), rgba(205,215,255,0));
}
.stars {
  background-image:
    radial-gradient(1.1px 1.1px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 32% 8%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 55% 22%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 73% 12%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 28%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 64% 42%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 42% 30%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 80% 52%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 8% 55%, rgba(255,255,255,.45), transparent 60%);
}
.stars2 {
  background-image:
    radial-gradient(1.4px 1.4px at 18% 26%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1.1px 1.1px at 48% 14%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 34%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 30% 50%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 90% 16%, rgba(255,255,255,.85), transparent 60%);
  animation: twinkle 4.5s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity:.35 } 50% { opacity:1 } }
/* The footer's stars breathe on a longer, offset cycle so the sky feels
   alive rather than blinking in step. */
#footSky .stars  { animation: twinkleSlow 7s ease-in-out infinite; }
#footSky .stars2 { animation: twinkleFast 4.2s ease-in-out -1.8s infinite; }
@keyframes twinkleSlow { 0%,100% { opacity:.4 } 50% { opacity:1 } }
@keyframes twinkleFast { 0%,100% { opacity:.25 } 45% { opacity:1 } }
.sun-glow, .sun, .moon { position: absolute; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.sun-glow { width: 230px; height: 230px; }
.sun { width: 42px; height: 42px; }
.moon {
  width: 28px; height: 28px;
  background: radial-gradient(circle at 38% 33%, #fff 0%, #EDF1F9 50%, #C9D2E6 100%);
  box-shadow: 0 0 18px rgba(220,230,255,.45);
}
.moon i {
  position: absolute; inset: 0; border-radius: 50%; display: block;
  background-image:
    radial-gradient(5px 4px at 34% 42%, rgba(159,171,201,.4), transparent 70%),
    radial-gradient(4px 4px at 60% 66%, rgba(159,171,201,.36), transparent 70%),
    radial-gradient(3px 3px at 52% 26%, rgba(159,171,201,.32), transparent 70%);
}
.cloud { position: absolute; pointer-events: none; filter: blur(6px); }
.c1 { left: -6%; top: 32%; width: 78%; height: 15%; }
.c2 { left: 34%; top: 48%; width: 48%; height: 9%; filter: blur(5px); }
.c3 { left: -14%; top: 60%; width: 64%; height: 11%; filter: blur(7px); }
.deck { position: absolute; left: -15%; right: -15%; bottom: -8%; height: 24%; filter: blur(12px); }
.haze { position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.3)); }