/* Parallax background layers; fixed to viewport, behind all content */
.parallax-root {
  position: fixed;
  inset: 0;
  z-index: 0; /* base layer behind content but above page canvas */
  pointer-events: none;
  overflow: hidden;
  /* CSS variables updated by JS for parallax transform */
  --parallax-y: 0; /* pixels */
  /* Fallback to ensure no white flash before theme applies */
  background: #000;
}

.parallax-root .layer {
  position: absolute;
  inset: -24vh -24vw; /* extra bleed to avoid edge exposure on mobile */
  will-change: transform, opacity;
  transform: translate3d(0, var(--parallax-y), 0);
  backface-visibility: hidden;
}
/* Define stacking order for clarity */
.parallax-root .stars-deep { z-index: 0; }
.parallax-root .stars-far  { z-index: 1; }
.parallax-root .stars-mid  { z-index: 2; }
.parallax-root .stars-near { z-index: 3; }
.parallax-root .moon       { z-index: 4; }
/* clouds layers order */
.parallax-root .clouds-far { z-index: 1; }
.parallax-root .clouds-puffy { z-index: 2; }
.parallax-root .sun-rays { z-index: 3; }
.parallax-root .sun      { z-index: 4; }

/* Base sky (light by default) */
.app-shell.theme-light .parallax-root,
html:not(.theme-dark) .parallax-root {
  /* brighter, playful sky */
  background: linear-gradient(180deg, #7ed1ff 0%, #b8ecff 40%, #e8faff 78%, #ffffff 100%);
}

/* Dark theme sky */
.app-shell.theme-dark .parallax-root,
html.theme-dark .parallax-root {
  background: radial-gradient(1600px 800px at 70% -10%, #2b3a6b 0%, #0f1731 45%, #050915 100%);
}

/* Fallback to OS dark if app hasn't set explicit light theme */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) .parallax-root {
    background: radial-gradient(1600px 800px at 70% -10%, #2b3a6b 0%, #0f1731 45%, #050915 100%);
  }
}

/* Orb: sun (light) */
.orb {
  width: 40vmin;
  height: 40vmin;
  border-radius: 50%;
  top: 5vh;
  left: 65vw;
  filter: blur(0.2px);
  opacity: 0.9;
}

.sun { 
  background: radial-gradient(circle at 35% 35%, #fff6bf, #ffd966 55%, #ffb400 100%);
  box-shadow: 0 0 120px 30px rgba(255, 209, 84, 0.35);
  display: none; /* default hidden; explicitly shown in light mode */
}

.moon {
  background: radial-gradient(circle at 35% 35%, #ffffff, #dfe7ff 55%, #92a4ff 100%);
  box-shadow: 0 0 120px 30px rgba(146, 164, 255, 0.25);
  display: none;
}

.app-shell.theme-light .sun, html:not(.theme-dark) .sun { display: block; }
.app-shell.theme-dark .moon, html.theme-dark .moon { display: block; }
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) .sun { display: none; }
  html:not(.theme-light) .moon { display: block; }
}

/* Clouds (light) */
.clouds-far, .clouds-mid {
  background-repeat: repeat-x;
  background-size: 1200px 300px;
  /* full-layer coverage; vertical placement via background-position like star layers */
  background-position: 0 80%;
  opacity: .55;
  display: none; /* default hidden; explicitly shown in light mode only */
}

.clouds-far { background-image: url('/Assets/clouds_far.svg'); background-position-y: 82%; animation: cloud-drift 120s linear infinite; }
.clouds-mid { background-image: url('/Assets/clouds_mid.svg'); background-position-y: 86%; animation: cloud-drift 90s linear infinite; opacity: .7; }
.clouds-puffy {
  display: none; /* hidden by default; shown in light mode */
  opacity: .9;
  /* layer multiple soft cloud clusters using radial-gradients */
  background-image:
    radial-gradient(120px 70px at 10% 65%, rgba(255,255,255,.95) 60%, rgba(255,255,255,0) 61%),
    radial-gradient(160px 95px at 16% 62%, rgba(255,255,255,.95) 60%, rgba(255,255,255,0) 61%),
    radial-gradient(130px 80px at 22% 68%, rgba(255,255,255,.98) 60%, rgba(255,255,255,0) 61%),

    radial-gradient(110px 70px at 52% 40%, rgba(255,255,255,.95) 60%, rgba(255,255,255,0) 61%),
    radial-gradient(150px 90px at 58% 44%, rgba(255,255,255,.95) 60%, rgba(255,255,255,0) 61%),
    radial-gradient(120px 75px at 64% 42%, rgba(255,255,255,.98) 60%, rgba(255,255,255,0) 61%),

    radial-gradient(130px 85px at 82% 55%, rgba(255,255,255,.96) 60%, rgba(255,255,255,0) 61%),
    radial-gradient(170px 100px at 88% 52%, rgba(255,255,255,.96) 60%, rgba(255,255,255,0) 61%),
    radial-gradient(130px 80px at 94% 56%, rgba(255,255,255,.98) 60%, rgba(255,255,255,0) 61%);
  background-repeat: repeat-x;
  background-size: 1600px 450px;
  background-position: 0 78%;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,0.04)) drop-shadow(0 16px 20px rgba(0,0,0,0.06));
  animation: cloud-drift 70s linear infinite, cloud-bob 12s ease-in-out infinite;
}
.app-shell.theme-light .clouds-puffy,
html:not(.theme-dark) .clouds-puffy { display: block; }
.app-shell.theme-dark .clouds-puffy,
html.theme-dark .clouds-puffy { display: none; }
.app-shell.theme-light .clouds-far, html:not(.theme-dark) .clouds-far { display: block; }
.app-shell.theme-light .clouds-mid, html:not(.theme-dark) .clouds-mid { display: block; }
.app-shell.theme-dark .clouds-far, .app-shell.theme-dark .clouds-mid,
html.theme-dark .clouds-far, html.theme-dark .clouds-mid { display: none; }
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) .clouds-far, html:not(.theme-light) .clouds-mid { display: none; }
}

@keyframes cloud-drift { from { background-position-x: 0; } to { background-position-x: -1200px; } }
@keyframes cloud-bob { 0%, 100% { transform: translate3d(0, var(--parallax-y), 0) translateY(0); } 50% { transform: translate3d(0, var(--parallax-y), 0) translateY(-6px);} }

/* Sun rays (light): subtle radial burst under the sun */
.sun-rays {
  background: radial-gradient(circle at 65% 15%, rgba(255, 217, 102, .25), rgba(255, 217, 102, 0) 35%),
              radial-gradient(circle at 60% 20%, rgba(255, 200, 60, .15), rgba(255, 200, 60, 0) 45%),
              conic-gradient(from 0deg at 65% 15%, rgba(255, 217, 102, .12) 0 10deg, transparent 10deg 20deg,
                                              rgba(255, 217, 102, .12) 20deg 30deg, transparent 30deg 40deg,
                                              rgba(255, 217, 102, .12) 40deg 50deg, transparent 50deg 60deg,
                                              rgba(255, 217, 102, .12) 60deg 70deg, transparent 70deg 80deg,
                                              rgba(255, 217, 102, .12) 80deg 90deg, transparent 90deg 100deg,
                                              rgba(255, 217, 102, .12) 100deg 110deg, transparent 110deg 120deg,
                                              rgba(255, 217, 102, .12) 120deg 130deg, transparent 130deg 140deg,
                                              rgba(255, 217, 102, .12) 140deg 150deg, transparent 150deg 160deg,
                                              rgba(255, 217, 102, .12) 160deg 170deg, transparent 170deg 180deg,
                                              rgba(255, 217, 102, .12) 180deg 190deg, transparent 190deg 200deg,
                                              rgba(255, 217, 102, .12) 200deg 210deg, transparent 210deg 220deg,
                                              rgba(255, 217, 102, .12) 220deg 230deg, transparent 230deg 240deg,
                                              rgba(255, 217, 102, .12) 240deg 250deg, transparent 250deg 260deg,
                                              rgba(255, 217, 102, .12) 260deg 270deg, transparent 270deg 280deg,
                                              rgba(255, 217, 102, .12) 280deg 290deg, transparent 290deg 300deg,
                                              rgba(255, 217, 102, .12) 300deg 310deg, transparent 310deg 320deg,
                                              rgba(255, 217, 102, .12) 320deg 330deg, transparent 330deg 340deg,
                                              rgba(255, 217, 102, .12) 340deg 350deg, transparent 350deg 360deg);
  opacity: .55;
  display: none; /* default hidden; explicitly shown in light mode */
}
.app-shell.theme-light .sun-rays, html:not(.theme-dark) .sun-rays { display: block; }
.app-shell.theme-dark .sun-rays, html.theme-dark .sun-rays { display: none; }
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) .sun-rays { display: none; }
}

/* Stars (dark) */
.stars-deep, .stars-far, .stars-mid, .stars-near {
  display: none;
}

.app-shell.theme-dark .stars-deep, .app-shell.theme-dark .stars-far, .app-shell.theme-dark .stars-mid, .app-shell.theme-dark .stars-near,
html.theme-dark .stars-deep, html.theme-dark .stars-far, html.theme-dark .stars-mid, html.theme-dark .stars-near { display: block; }
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) .stars-deep, html:not(.theme-light) .stars-far, html:not(.theme-light) .stars-mid, html:not(.theme-light) .stars-near { display: block; }
}

.app-shell.theme-dark .stars-deep, html.theme-dark .stars-deep {
  background-image: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.4) 50%, transparent 51%),
                    radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,.45) 50%, transparent 51%),
                    radial-gradient(1px 1px at 35% 70%, rgba(255,255,255,.4) 50%, transparent 51%),
                    radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,.5) 50%, transparent 51%);
  background-size: 1000px 1000px;
  background-repeat: repeat;
  opacity: .6;
}

.app-shell.theme-dark .stars-far, html.theme-dark .stars-far {
  background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7) 50%, transparent 51%),
                    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.8) 50%, transparent 51%),
                    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.6) 50%, transparent 51%),
                    radial-gradient(1px 1px at 85% 65%, rgba(255,255,255,.75) 50%, transparent 51%);
  background-size: 800px 800px;
  background-repeat: repeat;
  opacity: .8;
}

.app-shell.theme-dark .stars-mid, html.theme-dark .stars-mid {
  background-image: radial-gradient(1.5px 1.5px at 15% 50%, rgba(255,255,255,.9) 50%, transparent 51%),
                    radial-gradient(1.5px 1.5px at 60% 15%, rgba(255,255,255,.85) 50%, transparent 51%),
                    radial-gradient(1.5px 1.5px at 75% 75%, rgba(255,255,255,.85) 50%, transparent 51%),
                    radial-gradient(1.5px 1.5px at 35% 25%, rgba(255,255,255,.9) 50%, transparent 51%);
  background-size: 600px 600px;
  background-repeat: repeat;
  opacity: .9;
}

.app-shell.theme-dark .stars-near, html.theme-dark .stars-near {
  background-image: radial-gradient(2px 2px at 25% 35%, rgba(255,255,255,1) 50%, transparent 51%),
                    radial-gradient(2px 2px at 65% 25%, rgba(255,255,255,.95) 50%, transparent 51%),
                    radial-gradient(2px 2px at 50% 80%, rgba(255,255,255,.95) 50%, transparent 51%),
                    radial-gradient(2px 2px at 85% 70%, rgba(255,255,255,1) 50%, transparent 51%);
  background-size: 500px 500px;
  background-repeat: repeat;
  opacity: 1;
}

/* Also apply star field backgrounds when theme-dark is set on the app shell (Blazor layout) */
.app-shell.theme-dark .stars-far {
  background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7) 50%, transparent 51%),
                    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.8) 50%, transparent 51%),
                    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.6) 50%, transparent 51%),
                    radial-gradient(1px 1px at 85% 65%, rgba(255,255,255,.75) 50%, transparent 51%);
  background-size: 800px 800px;
  background-repeat: repeat;
  opacity: .8;
}

.app-shell.theme-dark .stars-mid {
  background-image: radial-gradient(1.5px 1.5px at 15% 50%, rgba(255,255,255,.9) 50%, transparent 51%),
                    radial-gradient(1.5px 1.5px at 60% 15%, rgba(255,255,255,.85) 50%, transparent 51%),
                    radial-gradient(1.5px 1.5px at 75% 75%, rgba(255,255,255,.85) 50%, transparent 51%),
                    radial-gradient(1.5px 1.5px at 35% 25%, rgba(255,255,255,.9) 50%, transparent 51%);
  background-size: 600px 600px;
  background-repeat: repeat;
  opacity: .9;
}

/* Removed skyline/terrain per design preference */

/* Apply perspective-y via transform based on data-speed set per layer; JS updates --parallax-y
   We use multiplier in JS; CSS keeps simple translate var. */

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .parallax-root .layer { transform: none !important; animation: none !important; }
}