/**
 * KND Cosmos — fixed deep-space environment behind long-scroll pages (Home).
 * Markup: knd_shell_cosmos() (includes/knd_shell.php). Motion: assets/js/knd-cosmos.js.
 * Without JS (or before it boots) the CSS base alone is a finished, quiet near-black navy sky.
 *
 * --kc-p (0…1) is written by the script from page scroll progress; layers that evolve use it:
 *  the key light dims slightly as you go deeper, and a horizon floor (Auth V2 grid) rises at the very end.
 */
.kc-cosmos {
  --kc-p: 0;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -12%, #0a1326 0%, transparent 62%),
    radial-gradient(90% 60% at 50% 115%, #06101c 0%, transparent 70%),
    linear-gradient(180deg, #04070e 0%, #03050a 55%, #020307 100%);
}
.kc-cosmos > * {
  position: absolute;
  pointer-events: none;
}

/* Static Auth V2 key + rim light (shows before/without canvas). */
.kc-cosmos__light {
  inset: -10%;
  background:
    radial-gradient(36% 32% at 24% 16%, rgba(70, 200, 215, 0.09), transparent 70%),
    radial-gradient(30% 30% at 86% 10%, rgba(130, 100, 240, 0.08), transparent 72%);
  opacity: calc(1 - var(--kc-p) * 0.45);
}

.kc-cosmos__canvas {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.kc-cosmos.is-ready .kc-cosmos__canvas { opacity: 1; }

/* Cursor light: a faint cyan/violet bloom that follows fine pointers. */
.kc-cosmos__glow {
  left: 0;
  top: 0;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(98, 217, 230, 0.075), rgba(139, 108, 240, 0.035) 52%, transparent 76%);
  opacity: 0;
  transition: opacity 600ms ease;
  will-change: transform;
}
.kc-cosmos.has-pointer .kc-cosmos__glow { opacity: 1; }

/* Horizon floor: the Auth V2 perspective grid, rising only as the page reaches its end ("the system"). */
.kc-cosmos__floor {
  left: -30%;
  right: -30%;
  bottom: -8%;
  height: 52%;
  background-image:
    linear-gradient(rgba(150, 225, 235, 0.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 225, 235, 0.085) 1px, transparent 1px);
  background-size: 76px 76px;
  background-position: center bottom;
  transform: perspective(760px) rotateX(66deg) translateY(calc((1 - var(--kc-p)) * 18%));
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(58% 100% at 50% 100%, #000 14%, transparent 70%);
  mask-image: radial-gradient(58% 100% at 50% 100%, #000 14%, transparent 70%);
  opacity: clamp(0, calc((var(--kc-p) - 0.78) / 0.2 * 0.6), 0.6);
}
.kc-cosmos__horizon {
  left: 0;
  right: 0;
  bottom: 30%;
  height: 30%;
  background: radial-gradient(46% 50% at 50% 70%, rgba(98, 217, 230, 0.07), transparent 72%);
  opacity: clamp(0, calc((var(--kc-p) - 0.75) / 0.2), 1);
}

.kc-cosmos__grain {
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: 0.04;
  mix-blend-mode: screen;
}

.kc-cosmos__vignette {
  inset: 0;
  background: radial-gradient(130% 100% at 50% 45%, transparent 48%, rgba(0, 0, 0, 0.42) 82%, rgba(0, 0, 0, 0.72) 100%);
}

/* Content stacking above the sky comes from knd-shell.css (.ks-page > main / footer: z-index 1). */

@media (prefers-reduced-motion: reduce) {
  .kc-cosmos__canvas { transition: none; }
  .kc-cosmos__glow { display: none; }
}