/* ── Sky background — landing page only ── */

/* Container: fixed, covers top third of viewport */
#sky-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 60vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: sky-fade-in 1.5s ease forwards;
}

@keyframes sky-fade-in {
  to { opacity: 1; }
}

/* ── Gradient layer ── */
.sky-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #87ceeb 0%, rgba(135,206,235,0) 100%);
}

body.dark .sky-gradient {
  background: linear-gradient(to bottom, #080c1a 0%, rgba(8,12,26,0) 100%);
}

/* ── Clouds (light mode only) ── */
.sky-clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

body.dark .sky-clouds {
  display: none;
}

.cloud {
  position: absolute;
  will-change: transform;
}

/* Near — large, opaque, fast */
.cloud-1 {
  top: 14%;
  width: 300px;
  opacity: 0.85;
  animation: cloud-drift 62s linear infinite;
  animation-delay: -14s;
}

/* Near-mid */
.cloud-2 {
  top: 44%;
  width: 240px;
  opacity: 0.72;
  animation: cloud-drift 78s linear infinite;
  animation-delay: -52s;
}

/* Mid */
.cloud-3 {
  top: 22%;
  width: 195px;
  opacity: 0.55;
  animation: cloud-drift 96s linear infinite;
  animation-delay: -33s;
}

/* Far — small, transparent, slow */
.cloud-4 {
  top: 8%;
  width: 145px;
  opacity: 0.38;
  animation: cloud-drift 138s linear infinite;
  animation-delay: -80s;
}

/* Very far */
.cloud-5 {
  top: 56%;
  width: 115px;
  opacity: 0.26;
  animation: cloud-drift 168s linear infinite;
  animation-delay: -55s;
}

@keyframes cloud-drift {
  from { transform: translateX(110vw); }
  to   { transform: translateX(-400px); }
}

/* ── Stars (dark mode only) ── */
.sky-stars {
  display: none;
}

body.dark .sky-stars {
  display: block;
  position: absolute;
  inset: 0;
}

/* 1px dot at sky centre — box-shadows radiate outward, rotate around that point */
.star-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  background: transparent;
  transform-origin: 0 0;
}

.star-layer-1 {
  animation: twinkle-a 3.8s ease-in-out infinite alternate,
             star-sway  48s ease-in-out infinite alternate;
}
.star-layer-2 {
  animation: twinkle-b 5.4s ease-in-out infinite alternate,
             star-sway  48s ease-in-out infinite alternate;
  animation-delay: -1.8s, -16s;
}
.star-layer-3 {
  animation: twinkle-a 2.7s ease-in-out infinite alternate,
             star-sway  48s ease-in-out infinite alternate;
  animation-delay: -0.9s, -32s;
}

/* Uneven keyframes so layers feel independent, not in sync */
@keyframes twinkle-a {
  0%   { opacity: 0.15; }
  40%  { opacity: 1.00; }
  70%  { opacity: 0.50; }
  100% { opacity: 0.85; }
}

@keyframes twinkle-b {
  0%   { opacity: 0.70; }
  25%  { opacity: 0.10; }
  65%  { opacity: 0.95; }
  100% { opacity: 0.30; }
}

/* Slow sway gives the impression of a living sky */
@keyframes star-sway {
  from { transform: rotate(-4deg); }
  to   { transform: rotate( 4deg); }
}

/* ── Lift landing page content above sky ── */
body.landing-body .landing-page {
  position: relative;
  z-index: 1;
}