:root {
  --shadow-sm: 0 1px 3px rgba(6, 2, 16, 0.4);
  --shadow-md: 0 6px 20px rgba(6, 2, 16, 0.45);
  --shadow-lg: 0 18px 48px rgba(6, 2, 16, 0.55);

  /* A spectrum hue glowing against the dark ground. */
  --glow-soft:   0 0 14px color-mix(in srgb, var(--c-cyan) 45%, transparent);
  --glow-strong: 0 0 24px color-mix(in srgb, var(--c-violet) 40%, transparent);

  --blur-chrome: blur(14px) saturate(1.15);
}

/* The signature ground: a fine star field over slow nebula washes.
   Apply to the outermost page element. The star layers scroll; the nebulae
   are fixed, so the page feels like it moves through depth. */
.cosmic-ground {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.7px),
    radial-gradient(rgba(45, 212, 245, 0.34) 1px, transparent 1.9px),
    radial-gradient(rgba(240, 56, 159, 0.30) 1px, transparent 1.9px),
    radial-gradient(rgba(255, 179, 64, 0.26) 1px, transparent 1.9px),
    radial-gradient(ellipse 900px 620px at 12% 4%,  rgba(91, 124, 250, 0.16), transparent 70%),
    radial-gradient(ellipse 780px 560px at 88% 22%, rgba(240, 56, 159, 0.13), transparent 70%),
    radial-gradient(ellipse 1000px 700px at 46% 62%, rgba(168, 85, 247, 0.15), transparent 72%),
    radial-gradient(ellipse 640px 460px at 8% 88%,  rgba(45, 212, 245, 0.10), transparent 70%);
  background-size:
    260px 210px, 330px 270px, 210px 240px, 420px 350px,
    100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position:
    0 0, 120px 80px, 60px 170px, 200px 30px,
    0 0, 0 0, 0 0, 0 0;
  background-attachment:
    scroll, scroll, scroll, scroll,
    fixed, fixed, fixed, fixed;
}

/* A hairline that sweeps the full spectrum. Use under sticky chrome. */
.spectrum-rule {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--c-cyan) 55%, transparent) 14%,
    color-mix(in srgb, var(--c-violet) 50%, transparent) 38%,
    color-mix(in srgb, var(--c-magenta) 50%, transparent) 62%,
    color-mix(in srgb, var(--c-gold) 45%, transparent) 84%,
    transparent);
}

@keyframes cosmic-flow {
  0%   { left: 0%;                 opacity: 0; }
  12%  {                           opacity: 1; }
  85%  {                           opacity: 1; }
  100% { left: calc(100% - 8px);   opacity: 0; }
}
@keyframes cosmic-flow-reverse {
  0%   { right: 0%;                opacity: 0; }
  12%  {                           opacity: 1; }
  85%  {                           opacity: 1; }
  100% { right: calc(100% - 8px);  opacity: 0; }
}
@keyframes cosmic-pulse {
  0%   { opacity: 0.5; }
  50%  { opacity: 0.12; }
  100% { opacity: 0.5; }
}