/* =========================================================
   Space Scene (Global + Homepage / Header Bands)
   ========================================================= */
:root{
  --space-stars-opacity: 0.06;
  --space-vignette: rgba(0, 0, 0, 0.08);
  --space-meteor-opacity: 0;
  --space-glow-1: color-mix(in oklab, var(--brand3) 18%, transparent);
  --space-glow-2: color-mix(in oklab, var(--brand2) 12%, transparent);
  --space-glow-3: color-mix(in oklab, var(--brand) 10%, transparent);
  --space-base-0: color-mix(in oklab, var(--bg) 92%, var(--brand) 8%);
  --space-base-1: color-mix(in oklab, var(--bg) 88%, var(--brand3) 12%);
  --space-star-color: color-mix(in oklab, var(--fg) 70%, var(--brand3) 30%);
  --space-meteor-color: color-mix(in oklab, var(--brand2) 30%, #fff 70%);
}

html[data-theme="dark"]{
  --space-stars-opacity: 0.16;
  --space-vignette: rgba(0, 0, 0, 0.58);
  --space-meteor-opacity: 0.5;
  --space-base-0: color-mix(in oklab, var(--bg) 72%, #000 28%);
  --space-base-1: color-mix(in oklab, var(--bg) 62%, #000 38%);
  --space-glow-1: color-mix(in oklab, var(--brand3) 38%, transparent);
  --space-glow-2: color-mix(in oklab, var(--brand2) 28%, transparent);
  --space-glow-3: color-mix(in oklab, var(--brand) 22%, transparent);
  --space-star-color: color-mix(in oklab, var(--brand4) 10%, #fff 90%);
}

html{
  background:
    radial-gradient(1100px 760px at 18% 10%, var(--space-glow-1), transparent 68%),
    radial-gradient(980px 720px at 82% 20%, var(--space-glow-2), transparent 70%),
    radial-gradient(1300px 960px at 56% 92%, var(--space-glow-3), transparent 74%),
    radial-gradient(1200px 900px at 50% -10%, color-mix(in oklab, var(--brand4) 12%, transparent), transparent 72%),
    linear-gradient(165deg, var(--space-base-1) 0%, var(--space-base-0) 52%, var(--space-base-1) 100%);
}

body{
  position: relative;
  background: transparent;
}

body > *{
  position: relative;
  z-index: 1;
}

body::before,
body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before{
  opacity: var(--space-stars-opacity);
  background-image:
    radial-gradient(var(--space-star-color) 0.9px, transparent 1.5px),
    radial-gradient(var(--space-star-color) 1.6px, transparent 2.2px),
    radial-gradient(color-mix(in oklab, var(--brand3) 12%, var(--space-star-color)) 2.2px, transparent 2.8px),
    radial-gradient(color-mix(in oklab, var(--brand2) 10%, var(--space-star-color)) 0.8px, transparent 1.4px);
  background-size: 113px 131px, 179px 167px, 257px 241px, 317px 283px;
  background-position: 3% 7%, 41% 23%, 77% 61%, 19% 83%;
  mask-image: radial-gradient(closest-side at 50% 35%, transparent 0%, #000 62%, #000 100%);
}

body::after{
  background: radial-gradient(1400px 1000px at 50% 18%, transparent 0%, var(--space-vignette) 82%);
}

html[data-contrast="high"]{
  background: var(--bg);
}
html[data-contrast="high"] body::before,
html[data-contrast="high"] body::after{
  display: none;
}
.pn-space{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
}

/* Optional vignette overlay handled globally */
.pn-space::after{ display: none; }

/* Layering */
.pn-space > .pn-stars,
.pn-space > .pn-meteors,
.pn-space > .pn-decor{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pn-space > .pn-stars{ z-index: 1; }
.pn-space > .pn-meteors{ z-index: 2; }
.pn-space > .pn-decor{ z-index: 3; }
.pn-space .pn-space__content{ position: relative; z-index: 4; }
.pn-space > :not(.pn-stars):not(.pn-meteors):not(.pn-decor){
  position: relative;
  z-index: 4;
}

/* =========================================================
   Stars: denser + more visible (still lightweight)
   ========================================================= */
.pn-space > .pn-stars{ display: none; }

/* Very subtle twinkle (auto-disabled by data-motion=reduced anyway) */
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion="reduced"]) .pn-space > .pn-stars{
    animation: pnStarsTwinkle 10s ease-in-out infinite;
  }
}
@keyframes pnStarsTwinkle{
  0%, 100%{ opacity: var(--space-stars-opacity); }
  50%{ opacity: calc(var(--space-stars-opacity) + 0.02); }
}

/* =========================================================
   Planets: fixed spots, scroll with page (NOT position:fixed)
   ========================================================= */
.pn-space .pn-decor{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.pn-space .pn-decor__item{
  position: absolute;
  left: var(--x, 80%);
  top: var(--y, 24vh);
  width: clamp(90px, 10vw, 240px);
  transform: translate(-50%, -50%) scale(var(--s, 1)) rotate(var(--r, -8deg));
  opacity: var(--o, 0.18);
  filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.35));
}

/* Smaller band variant for subpage headers */
.pn-space.pn-space--band{
  --space-stars-opacity: 0.05;
  --space-meteor-opacity: 0;
}

html[data-theme="dark"] .pn-space.pn-space--band{
  --space-stars-opacity: 0.08;
  --space-meteor-opacity: 0.4;
}

/* Gentle float (only when motion allowed) */
@media (prefers-reduced-motion: no-preference){
  html:not([data-motion="reduced"]) .pn-space .pn-decor__item{
    animation: pnFloat 9s ease-in-out infinite;
  }
  html:not([data-motion="reduced"]) .pn-space .pn-decor__item:nth-child(2){ animation-duration: 11s; }
  html:not([data-motion="reduced"]) .pn-space .pn-decor__item:nth-child(3){ animation-duration: 13s; }
}
@keyframes pnFloat{
  0%, 100%{ transform: translate(-50%, -50%) scale(var(--s, 1)) rotate(var(--r, 0deg)) translateY(0); }
  50%{ transform: translate(-50%, -50%) scale(var(--s, 1)) rotate(var(--r, 0deg)) translateY(-10px); }
}

/* =========================================================
   Shooting stars (meteors) — occasional, not constant
   ========================================================= */
.pn-space .pn-meteor{
  position: absolute;
  top: var(--my, 18%);
  left: var(--mx, 8%);
  width: clamp(180px, 22vw, 320px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--space-meteor-color), transparent);
  opacity: 0;
  transform: translate3d(-35vw, -15vh, 0) rotate(-35deg);
  filter: drop-shadow(0 0 18px color-mix(in oklab, var(--space-meteor-color) 45%, transparent));
  animation: pnMeteor var(--md, 11s) linear infinite;
  animation-delay: var(--mDelay, 0s);
}

@keyframes pnMeteor{
  0%, 72%{
    opacity: 0;
    transform: translate3d(-35vw, -15vh, 0) rotate(-35deg);
  }
  74%{ opacity: var(--space-meteor-opacity); }
  100%{
    opacity: 0;
    transform: translate3d(140vw, 110vh, 0) rotate(-35deg);
  }
}

/* Disable meteors in reduced motion or high contrast */
@media (prefers-reduced-motion: reduce){
  .pn-space > .pn-meteors{ display: none; }
}
html[data-motion="reduced"] .pn-space > .pn-meteors{ display: none; }

html[data-contrast="high"] .pn-space > .pn-stars,
html[data-contrast="high"] .pn-space > .pn-meteors,
html[data-contrast="high"] .pn-space > .pn-decor{ display: none; }
html[data-contrast="high"] .pn-space{ background: var(--bg); }

/* Glass card variant */
.card.card--glass{
  background: color-mix(in oklab, var(--card) 70%, transparent);
  border-color: color-mix(in oklab, var(--border) 70%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
}

/* Fallback: when backdrop-filter not supported */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .card.card--glass{
    background: color-mix(in oklab, var(--card) 92%, transparent);
  }
}