/* === Galaxy moment CSS vars ===
 *
 * Written on sparse 15-minute server palette ticks by galaxyMomentAdapterScript in
 * app/page.server.go.
 * First-paint values come from the SSR'd <script id="galaxy-moment-initial">
 * blob; the defaults below are the "noon" bucket so anything that somehow
 * misses the adapter still paints.
 *
 * @property keeps color-mix() consumers typed across browsers. The raw
 * --galaxy-* variables intentionally do not transition because Scene3D
 * consumes those values directly; animating them made Chromium rebuild the
 * large galaxy draw state every frame after a sparse palette tick. The
 * --galaxy-chrome-* aliases are CSS-only and can ease text/glow accents
 * without touching WebGL state. The full-screen atmosphere uses raw
 * --galaxy-* values so it matches the incoming scene palette immediately.
 */
@property --galaxy-star-color   { syntax: "<color>";  inherits: true; initial-value: #f4fbff; }
@property --galaxy-fog-color    { syntax: "<color>";  inherits: true; initial-value: #0b142a; }
@property --galaxy-core-inner   { syntax: "<color>";  inherits: true; initial-value: #ffffff; }
@property --galaxy-core-outer   { syntax: "<color>";  inherits: true; initial-value: #4361ee; }
@property --galaxy-dust-inner   { syntax: "<color>";  inherits: true; initial-value: #86e7ff; }
@property --galaxy-dust-outer   { syntax: "<color>";  inherits: true; initial-value: #4f9cff; }
@property --galaxy-spark-inner  { syntax: "<color>";  inherits: true; initial-value: #f8fafc; }
@property --galaxy-spark-outer  { syntax: "<color>";  inherits: true; initial-value: #93c5fd; }
@property --galaxy-twinkle-inner{ syntax: "<color>";  inherits: true; initial-value: #ffffff; }
@property --galaxy-twinkle-outer{ syntax: "<color>";  inherits: true; initial-value: #bfdbfe; }
@property --galaxy-activity     { syntax: "<number>"; inherits: true; initial-value: 0.3; }
@property --galaxy-background-opacity { syntax: "<number>"; inherits: true; initial-value: 0.052; }
@property --galaxy-core-opacity { syntax: "<number>"; inherits: true; initial-value: 0.68; }
@property --galaxy-shell-opacity { syntax: "<number>"; inherits: true; initial-value: 0.06; }
@property --galaxy-infall-opacity { syntax: "<number>"; inherits: true; initial-value: 0.08; }
@property --galaxy-satellite-opacity { syntax: "<number>"; inherits: true; initial-value: 0.075; }
@property --galaxy-halo-opacity { syntax: "<number>"; inherits: true; initial-value: 0.125; }
@property --galaxy-nebula-opacity { syntax: "<number>"; inherits: true; initial-value: 0.155; }
@property --galaxy-gas-opacity { syntax: "<number>"; inherits: true; initial-value: 0.255; }
@property --galaxy-nursery-opacity { syntax: "<number>"; inherits: true; initial-value: 0.095; }
@property --galaxy-glints-opacity { syntax: "<number>"; inherits: true; initial-value: 0.155; }
@property --galaxy-stellar-forge-opacity { syntax: "<number>"; inherits: true; initial-value: 0.76; }
@property --galaxy-veil-opacity { syntax: "<number>"; inherits: true; initial-value: 0.078; }
@property --galaxy-mycelium-opacity { syntax: "<number>"; inherits: true; initial-value: 0.038; }
@property --galaxy-starburst-opacity { syntax: "<number>"; inherits: true; initial-value: 0.108; }
@property --galaxy-lens-caustics-opacity { syntax: "<number>"; inherits: true; initial-value: 0.052; }
@property --galaxy-gravitic-lattice-opacity { syntax: "<number>"; inherits: true; initial-value: 0.044; }
@property --galaxy-accretion-opacity { syntax: "<number>"; inherits: true; initial-value: 0.58; }
@property --galaxy-dust-shadow-opacity { syntax: "<number>"; inherits: true; initial-value: 0.34; }
@property --galaxy-foreground-dust-opacity { syntax: "<number>"; inherits: true; initial-value: 0.084; }
@property --galaxy-lightning-cloud-opacity { syntax: "<number>"; inherits: true; initial-value: 0.024; }
@property --galaxy-lens-shear-opacity-min { syntax: "<number>"; inherits: true; initial-value: 0.035; }
@property --galaxy-lens-shear-opacity-max { syntax: "<number>"; inherits: true; initial-value: 0.075; }
@property --galaxy-lightning-haze-opacity { syntax: "<number>"; inherits: true; initial-value: 0.13; }
@property --galaxy-lightning-glow-opacity { syntax: "<number>"; inherits: true; initial-value: 0.11; }
@property --galaxy-lightning-core-opacity { syntax: "<number>"; inherits: true; initial-value: 0.15; }
@property --galaxy-lightning-branch-opacity { syntax: "<number>"; inherits: true; initial-value: 0.08; }
@property --galaxy-lightning-branch-soft-opacity { syntax: "<number>"; inherits: true; initial-value: 0.055; }

@property --galaxy-chrome-star-color    { syntax: "<color>"; inherits: true; initial-value: #f4fbff; }
@property --galaxy-chrome-fog-color     { syntax: "<color>"; inherits: true; initial-value: #0b142a; }
@property --galaxy-chrome-core-inner    { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --galaxy-chrome-core-outer    { syntax: "<color>"; inherits: true; initial-value: #4361ee; }
@property --galaxy-chrome-dust-inner    { syntax: "<color>"; inherits: true; initial-value: #86e7ff; }
@property --galaxy-chrome-dust-outer    { syntax: "<color>"; inherits: true; initial-value: #4f9cff; }
@property --galaxy-chrome-spark-inner   { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
@property --galaxy-chrome-spark-outer   { syntax: "<color>"; inherits: true; initial-value: #93c5fd; }
@property --galaxy-chrome-twinkle-inner { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --galaxy-chrome-twinkle-outer { syntax: "<color>"; inherits: true; initial-value: #bfdbfe; }

:root {
  /* Opacities arrive as plain numbers (toFixed'd on the JS side). Give
     them defaults that match the noon bucket so first paint doesn't go
     inky if the adapter is slow. */
  --galaxy-star-opacity: 0.74;
  --galaxy-background-opacity: 0.052;
  --galaxy-fog-density: 0.00030;
  --galaxy-core-opacity: 0.68;
  --galaxy-dust-opacity: 0.15;
  --galaxy-spark-opacity: 0.22;
  --galaxy-twinkle-opacity: 0.12;
  --galaxy-shell-opacity: 0.06;
  --galaxy-infall-opacity: 0.08;
  --galaxy-satellite-opacity: 0.075;
  --galaxy-halo-opacity: 0.125;
  --galaxy-nebula-opacity: 0.155;
  --galaxy-gas-opacity: 0.255;
  --galaxy-nursery-opacity: 0.095;
  --galaxy-glints-opacity: 0.155;
  --galaxy-stellar-forge-opacity: 0.76;
  --galaxy-veil-opacity: 0.078;
  --galaxy-mycelium-opacity: 0.038;
  --galaxy-starburst-opacity: 0.108;
  --galaxy-lens-caustics-opacity: 0.052;
  --galaxy-gravitic-lattice-opacity: 0.044;
  --galaxy-accretion-opacity: 0.58;
  --galaxy-dust-shadow-opacity: 0.34;
  --galaxy-foreground-dust-opacity: 0.084;

  --galaxy-chrome-star-color: #f4fbff;
  --galaxy-chrome-fog-color: #0b142a;
  --galaxy-chrome-core-inner: #ffffff;
  --galaxy-chrome-core-outer: #4361ee;
  --galaxy-chrome-dust-inner: #86e7ff;
  --galaxy-chrome-dust-outer: #4f9cff;
  --galaxy-chrome-spark-inner: #f8fafc;
  --galaxy-chrome-spark-outer: #93c5fd;
  --galaxy-chrome-twinkle-inner: #ffffff;
  --galaxy-chrome-twinkle-outer: #bfdbfe;
  --galaxy-lightning-core: #f7ffff;
  --galaxy-lightning-glow: #9ee7ff;
  --galaxy-lightning-haze: #3c8fb8;
  --galaxy-lightning-cloud-opacity: 0.024;
  --galaxy-lens-shear-opacity-min: 0.035;
  --galaxy-lens-shear-opacity-max: 0.075;
  --galaxy-lightning-haze-opacity: 0.13;
  --galaxy-lightning-glow-opacity: 0.11;
  --galaxy-lightning-core-opacity: 0.15;
  --galaxy-lightning-branch-opacity: 0.08;
  --galaxy-lightning-branch-soft-opacity: 0.055;
  --galaxy-lightning-duration-a: 9.7s;
  --galaxy-lightning-duration-b: 13.2s;
  --galaxy-lightning-duration-c: 8.8s;

  transition: none;
}

:root.galaxy-chrome-live {
  transition:
    --galaxy-chrome-star-color 1.6s var(--ease-in-out-quart),
    --galaxy-chrome-fog-color 1.6s var(--ease-in-out-quart),
    --galaxy-chrome-core-inner 1.6s var(--ease-in-out-quart),
    --galaxy-chrome-core-outer 1.6s var(--ease-in-out-quart),
    --galaxy-chrome-dust-inner 1.6s var(--ease-in-out-quart),
    --galaxy-chrome-dust-outer 1.6s var(--ease-in-out-quart),
    --galaxy-chrome-spark-inner 1.6s var(--ease-in-out-quart),
    --galaxy-chrome-spark-outer 1.6s var(--ease-in-out-quart),
    --galaxy-chrome-twinkle-inner 1.6s var(--ease-in-out-quart),
    --galaxy-chrome-twinkle-outer 1.6s var(--ease-in-out-quart),
    --galaxy-stellar-forge-opacity 1.35s var(--ease-out-expo),
    --galaxy-starburst-opacity 1.35s var(--ease-out-expo),
    --galaxy-lens-caustics-opacity 1.35s var(--ease-out-expo),
    --galaxy-gravitic-lattice-opacity 1.35s var(--ease-out-expo),
    --galaxy-accretion-opacity 1.35s var(--ease-out-expo),
    --galaxy-dust-shadow-opacity 1.35s var(--ease-out-expo),
    --galaxy-foreground-dust-opacity 1.35s var(--ease-out-expo),
    --galaxy-lightning-cloud-opacity 1.15s var(--ease-out-expo),
    --galaxy-lens-shear-opacity-min 1.15s var(--ease-out-expo),
    --galaxy-lens-shear-opacity-max 1.15s var(--ease-out-expo),
    --galaxy-lightning-haze-opacity 1.15s var(--ease-out-expo),
    --galaxy-lightning-glow-opacity 1.15s var(--ease-out-expo),
    --galaxy-lightning-core-opacity 1.15s var(--ease-out-expo),
    --galaxy-lightning-branch-opacity 1.15s var(--ease-out-expo),
    --galaxy-lightning-branch-soft-opacity 1.15s var(--ease-out-expo);
}

:root.galaxy-palette-arrival {
  --galaxy-dust-shadow-opacity: 0.48;
  --galaxy-foreground-dust-opacity: 0.11;
  --galaxy-lightning-cloud-opacity: 0.052;
  --galaxy-lens-shear-opacity-min: 0.045;
  --galaxy-lens-shear-opacity-max: 0.084;
  --galaxy-lightning-haze-opacity: 0.20;
  --galaxy-lightning-glow-opacity: 0.18;
  --galaxy-lightning-core-opacity: 0.22;
  --galaxy-lightning-branch-opacity: 0.13;
  --galaxy-lightning-branch-soft-opacity: 0.085;
}

@media (prefers-reduced-motion: reduce) {
  :root.galaxy-chrome-live {
    transition: none;
  }
}

/* === Galaxy Surface === */

.site-shell:has(.landing) .site-nav {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.landing {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  isolation: isolate;
  background: var(--color-bg);
}

.landing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(108deg, transparent 24%, rgba(0, 0, 0, 0.08) 38%, transparent 54%),
    linear-gradient(18deg, transparent 37%, rgba(0, 0, 0, 0.10) 47%, transparent 63%),
    radial-gradient(ellipse 38vw 18vw at 49% 45%, transparent 0 44%, rgba(0, 0, 0, 0.10) 68%, transparent 84%),
    radial-gradient(ellipse 90vw 82vh at 50% 48%, transparent 0 48%, rgba(0, 0, 0, 0.24) 100%);
  mix-blend-mode: multiply;
  opacity: var(--galaxy-dust-shadow-opacity);
  mask-image: radial-gradient(ellipse 58vw 34vw at 50% 44%, black 0 58%, rgba(0, 0, 0, 0.5) 76%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 58vw 34vw at 50% 44%, black 0 58%, rgba(0, 0, 0, 0.5) 76%, transparent 100%);
}

.landing::after {
  content: "";
  position: fixed;
  inset: -8vh -6vw;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(101deg, transparent 29%, rgba(0, 0, 0, 0.08) 43%, transparent 57%),
    linear-gradient(76deg, transparent 48%, rgba(0, 0, 0, 0.06) 55%, transparent 66%),
    radial-gradient(circle at 39% 44%, rgba(0, 0, 0, 0.14) 0 1px, transparent 2px),
    radial-gradient(circle at 53% 39%, rgba(0, 0, 0, 0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 53%, rgba(0, 0, 0, 0.10) 0 1px, transparent 2px);
  background-size: 100% 100%, 100% 100%, 18rem 18rem, 22rem 22rem, 26rem 26rem;
  mix-blend-mode: multiply;
  opacity: var(--galaxy-foreground-dust-opacity);
  transform: translate3d(0, 0, 0);
  animation: galaxy-foreground-dust 34s var(--ease-in-out-quart) infinite alternate;
  mask-image: radial-gradient(ellipse 43vw 24vw at 50% 46%, black 0 42%, rgba(0, 0, 0, 0.55) 66%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 43vw 24vw at 50% 46%, black 0 42%, rgba(0, 0, 0, 0.55) 66%, transparent 100%);
}

.galaxy-boot-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 28vw 16vw at 50% 46%, color-mix(in oklab, var(--galaxy-core-outer) 8%, transparent), transparent 68%),
    radial-gradient(ellipse 78vw 48vw at 50% 45%, color-mix(in oklab, var(--galaxy-dust-outer) 7%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklab, var(--galaxy-fog-color) 34%, #010106) 0%, #030209 58%, #010106 100%);
  opacity: 1;
  transition: opacity 0.9s var(--ease-out-expo);
}

.galaxy-boot-sky::before,
.galaxy-boot-sky::after {
  content: "";
  position: absolute;
  inset: -12vh -10vw;
  z-index: 0;
  pointer-events: none;
}

.galaxy-boot-sky::before {
  background:
    radial-gradient(ellipse 2.8rem 1.6rem at 50% 45%, color-mix(in oklab, var(--galaxy-core-inner) 36%, transparent), transparent 76%),
    radial-gradient(ellipse 35vw 9vw at 50% 45%, color-mix(in oklab, var(--galaxy-dust-inner) 12%, transparent), transparent 72%),
    radial-gradient(ellipse 58vw 15vw at 50% 45%, color-mix(in oklab, var(--galaxy-dust-outer) 8%, transparent), transparent 76%);
  filter: blur(0.4px);
  opacity: 0.66;
  transform: rotate(-9deg);
}

.galaxy-boot-sky::after {
  background:
    radial-gradient(circle at 17% 21%, color-mix(in oklab, var(--galaxy-star-color) 72%, transparent) 0 0.04rem, transparent 0.08rem),
    radial-gradient(circle at 78% 28%, color-mix(in oklab, var(--galaxy-twinkle-outer) 58%, transparent) 0 0.045rem, transparent 0.09rem),
    radial-gradient(circle at 42% 63%, color-mix(in oklab, var(--galaxy-star-color) 62%, transparent) 0 0.035rem, transparent 0.08rem),
    radial-gradient(circle at 64% 72%, color-mix(in oklab, var(--galaxy-twinkle-inner) 54%, transparent) 0 0.03rem, transparent 0.07rem);
  background-size: 19rem 17rem, 23rem 20rem, 29rem 24rem, 37rem 31rem;
  opacity: 0.48;
}

.galaxy-boot-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 1;
  opacity: 0.24;
  filter: grayscale(1) saturate(0) contrast(1.16) brightness(0.72);
  mix-blend-mode: screen;
  transform: scale(1.018);
}

:root.galaxy-scene-ready .galaxy-boot-sky {
  opacity: 0;
}

.galaxy-surface {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1;
  pointer-events: none;
}

.galaxy-surface canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out-expo);
}

.galaxy-surface[data-galaxy-scene-ready="true"] canvas {
  opacity: 1;
}

.galaxy-surface.galaxy-surface-full[data-gosx-scene3d-renderer="webgpu"][data-gosx-scene3d-webgpu-point-draw-instances]:not([data-gosx-scene3d-webgpu-point-draw-instances="0"]) canvas {
  opacity: 1;
}

:root.galaxy-full-scene-ready .galaxy-surface[data-galaxy-progressive-phase="preview"] canvas {
  opacity: 0;
}

@media (max-width: 767px), (pointer: coarse) {
  .galaxy-surface canvas {
    transition-duration: 280ms;
  }
}

.galaxy-lightning-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out-expo);
}

:root.galaxy-scene-ready .galaxy-lightning-field {
  opacity: 1;
}

.galaxy-lightning-field::before,
.galaxy-lightning-field::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.galaxy-lightning-field::before {
  background:
    radial-gradient(ellipse 25vw 12vw at 44% 43%, color-mix(in oklab, var(--galaxy-lightning-glow) 14%, transparent), transparent 72%),
    radial-gradient(ellipse 30vw 14vw at 56% 38%, color-mix(in oklab, var(--galaxy-lightning-haze) 12%, transparent), transparent 74%),
    radial-gradient(ellipse 24vw 10vw at 51% 53%, color-mix(in oklab, var(--galaxy-lightning-core) 10%, transparent), transparent 78%);
  opacity: var(--galaxy-lightning-cloud-opacity);
  animation: galaxy-lightning-cloudglow var(--galaxy-lightning-duration-a) linear infinite;
}

.galaxy-lightning-field::after {
  background:
    linear-gradient(103deg, transparent 35%, color-mix(in oklab, var(--galaxy-lightning-core) 13%, transparent) 47%, transparent 60%),
    linear-gradient(103deg, transparent 41%, color-mix(in oklab, var(--color-gold) 10%, transparent) 49%, transparent 55%);
  opacity: var(--galaxy-lens-shear-opacity-min);
  transform: translate3d(7vw, -3vh, 0) rotate(-6deg);
  mask-image: linear-gradient(90deg, transparent 11%, black 42%, rgba(0, 0, 0, 0.48) 57%, transparent 76%);
  -webkit-mask-image: linear-gradient(90deg, transparent 11%, black 42%, rgba(0, 0, 0, 0.48) 57%, transparent 76%);
  animation: galaxy-lens-shear 21s var(--ease-in-out-quart) infinite alternate;
}

.galaxy-lightning-strike {
  position: absolute;
  display: block;
  width: clamp(12rem, 26vw, 26rem);
  height: clamp(6rem, 14vw, 13rem);
  opacity: 0.003;
  overflow: visible;
  transform-origin: 50% 50%;
  contain: layout paint style;
  filter:
    blur(0.2px)
    drop-shadow(0 0 0.9rem color-mix(in oklab, var(--galaxy-lightning-glow) 16%, transparent));
  mask-image: radial-gradient(ellipse at 50% 50%, black 0 42%, rgba(0, 0, 0, 0.54) 62%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0 42%, rgba(0, 0, 0, 0.54) 62%, transparent 88%);
  animation: galaxy-lightning-flash var(--strike-duration, 8s) linear infinite;
  animation-delay: var(--strike-delay, 0s);
}

.galaxy-lightning-strike path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.lightning-haze {
  stroke: color-mix(in oklab, var(--galaxy-lightning-haze) 42%, transparent);
  stroke-width: 24;
  opacity: var(--galaxy-lightning-haze-opacity);
}

.lightning-glow {
  stroke: color-mix(in oklab, var(--galaxy-lightning-glow) 58%, transparent);
  stroke-width: 7;
  opacity: var(--galaxy-lightning-glow-opacity);
}

.lightning-core {
  stroke: color-mix(in oklab, var(--galaxy-lightning-core) 76%, var(--galaxy-lightning-glow));
  stroke-width: 0.64;
  opacity: var(--galaxy-lightning-core-opacity);
}

.lightning-branch {
  stroke: color-mix(in oklab, var(--galaxy-lightning-core) 52%, var(--galaxy-lightning-glow));
  stroke-width: 0.56;
  opacity: var(--galaxy-lightning-branch-opacity);
}

.lightning-core,
.lightning-branch {
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.branch-soft {
  opacity: var(--galaxy-lightning-branch-soft-opacity);
}

.strike-a {
  left: 36%;
  top: 35%;
  transform: rotate(-18deg);
  --strike-duration: var(--galaxy-lightning-duration-a);
  --strike-delay: -1.1s;
}

.strike-b {
  right: 34%;
  top: 38%;
  width: clamp(8rem, 16vw, 17rem);
  transform: rotate(-28deg) scaleX(0.86);
  --strike-duration: var(--galaxy-lightning-duration-b);
  --strike-delay: -4.2s;
}

.strike-c {
  left: 44%;
  top: 26%;
  width: clamp(9rem, 18vw, 19rem);
  transform: rotate(12deg);
  --strike-duration: var(--galaxy-lightning-duration-c);
  --strike-delay: -5.8s;
}

@keyframes galaxy-lightning-flash {
  0%, 1.2%, 3.4%, 5.9%, 100% {
    opacity: 0.002;
  }

  1.55% {
    opacity: 0.055;
  }

  1.85% {
    opacity: 0.010;
  }

  2.35% {
    opacity: 0.082;
  }

  2.72% {
    opacity: 0.014;
  }

  4.05% {
    opacity: 0.065;
  }

  4.28% {
    opacity: 0.012;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galaxy-surface canvas {
    transition: none;
  }

  .galaxy-lightning-strike {
    animation: none;
    opacity: 0.012;
  }

  .galaxy-lightning-field::before,
  .galaxy-lightning-field::after,
  .landing::after,
  .hero-title.chrome-text {
    animation: none;
  }

  :root.galaxy-palette-arrival {
    --galaxy-dust-shadow-opacity: 0.34;
    --galaxy-foreground-dust-opacity: 0.055;
    --galaxy-lightning-cloud-opacity: 0.018;
    --galaxy-lens-shear-opacity-min: 0.035;
    --galaxy-lens-shear-opacity-max: 0.075;
  }
}

@keyframes galaxy-lightning-cloudglow {
  0%, 1.2%, 3.8%, 6.4%, 100% {
    opacity: var(--galaxy-lightning-cloud-opacity);
  }

  1.85% {
    opacity: var(--galaxy-lens-shear-opacity-max);
  }

  2.75% {
    opacity: var(--galaxy-lens-shear-opacity-min);
  }

  4.7% {
    opacity: var(--galaxy-lens-shear-opacity-max);
  }
}

@keyframes galaxy-lens-shear {
  from {
    opacity: var(--galaxy-lens-shear-opacity-min);
    transform: translate3d(5vw, -4vh, 0) rotate(-7deg);
  }

  to {
    opacity: var(--galaxy-lens-shear-opacity-max);
    transform: translate3d(8vw, -2vh, 0) rotate(-5deg);
  }
}

:root.galaxy-palette-arrival .galaxy-lightning-field::after {
  animation: galaxy-palette-ripple 7.6s var(--ease-out-expo) both;
}

:root.galaxy-palette-arrival .hero-title.chrome-text {
  filter:
    drop-shadow(0 0.13em 0.24em rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 0.42rem color-mix(in oklab, var(--galaxy-chrome-core-inner) 22%, transparent))
    drop-shadow(0 0 1.35rem color-mix(in oklab, var(--galaxy-chrome-dust-outer) 18%, transparent));
}

@keyframes galaxy-palette-ripple {
  0% {
    opacity: 0;
    transform: translate3d(4vw, -5vh, 0) rotate(-8deg) scaleX(0.86);
  }

  14% {
    opacity: var(--galaxy-lens-shear-opacity-max);
    transform: translate3d(6vw, -3.5vh, 0) rotate(-6deg) scaleX(1.02);
  }

  42% {
    opacity: var(--galaxy-lens-shear-opacity-min);
    transform: translate3d(8vw, -2.6vh, 0) rotate(-5deg) scaleX(1.12);
  }

  100% {
    opacity: 0;
    transform: translate3d(10vw, -1.6vh, 0) rotate(-4deg) scaleX(1.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root.galaxy-palette-arrival .galaxy-lightning-field::after {
    animation: none;
  }

  :root.galaxy-palette-arrival .hero-title.chrome-text {
    filter:
      drop-shadow(0 0.13em 0.24em rgba(0, 0, 0, 0.34))
      drop-shadow(0 0 0.78em color-mix(in oklab, var(--galaxy-chrome-core-outer) 12%, transparent));
  }
}

@keyframes galaxy-foreground-dust {
  from {
    transform: translate3d(-0.8vw, -0.4vh, 0);
  }

  to {
    transform: translate3d(0.9vw, 0.5vh, 0);
  }
}

@keyframes galaxy-title-glint {
  from {
    background-position: -85% 50%, 50% 50%;
  }

  to {
    background-position: 45% 50%, 50% 50%;
  }
}

/* === Hero === */

.hero {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-lg);
  text-align: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: 800px;
}

.hero-title {
  font-size: var(--text-hero);
  letter-spacing: 0;
  line-height: 0.9;
  text-wrap: balance;
  white-space: nowrap;
  filter:
    drop-shadow(0 0.13em 0.24em rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 0.78em color-mix(in oklab, var(--galaxy-chrome-core-outer) 12%, transparent));
  text-shadow: none;
}

.hero-title.chrome-text {
  background:
    linear-gradient(104deg, transparent 0 27%, color-mix(in oklab, var(--galaxy-chrome-twinkle-inner) 44%, transparent) 39%, transparent 50% 100%),
    linear-gradient(
      135deg,
      var(--color-chrome-dark) 0%,
      var(--color-chrome-light) 40%,
      var(--color-chrome-dark) 60%,
      var(--color-chrome-light) 100%
    );
  background-size: 220% 100%, 100% 100%;
  background-position: -70% 50%, 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: galaxy-title-glint 24s var(--ease-in-out-quart) infinite alternate;
}

.hero-tagline {
  font-size: var(--text-h3);
  /* Tint the tagline with the current moment's star color — stays readable
     because star colors are always near-white (#d4fffe, #fff0e6, …) so the
     contrast ratio against the dark backdrop barely moves. */
  color: color-mix(in oklab, var(--galaxy-chrome-star-color) 55%, var(--text-secondary));
  max-width: 520px;
  line-height: 1.25;
  text-wrap: balance;
  letter-spacing: -0.01em;
  transition: color 2.4s var(--ease-out-expo);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-sm);
  padding: 0.875em 1.75em;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-deep));
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
  box-shadow:
    0 0.7rem 2.6rem rgba(0, 0, 0, 0.46),
    0 0 2.4rem color-mix(in oklab, var(--color-gold) 13%, transparent),
    0 0 3.4rem color-mix(in oklab, var(--galaxy-chrome-twinkle-outer) 9%, transparent);
  transition:
    transform var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-fast) var(--ease-out-expo);
}

.hero-cta:hover {
  transform: translateY(-2px);
  /* Hover glow picks up the current moment's twinkle outer — keeps the
     gold button but gives it a halo that matches the sky. */
  box-shadow:
    0 0.9rem 2.9rem rgba(0, 0, 0, 0.52),
    0 0 20px var(--color-gold-glow),
    0 0 40px var(--color-gold-glow-soft),
    0 0 28px color-mix(in oklab, var(--galaxy-chrome-twinkle-outer) 45%, transparent);
}

.hero-cta:active {
  transform: translateY(0);
  transition-duration: 100ms;
}

.hero-cta:focus-visible {
  box-shadow:
    0 0 0 2px var(--color-bg),
    0 0 0 4px var(--color-gold);
}

/* === Products === */

.products {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-lg);
}

.products-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  max-width: 1100px;
  width: 100%;
}

.product-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.product-grid,
.product-grid-stagger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* === Product Card === */

.product-card-wrapper {
  display: block;
}

.landing .glass-panel {
  background: rgba(6, 7, 11, 0.76);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.product-card {
  display: block;
  text-decoration: none;
  position: relative;
  border-radius: 1rem;
}

.card-inner {
  padding: var(--space-md) var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  height: 100%;
  min-height: 140px;
  transition:
    transform var(--duration-fast) var(--ease-out-expo),
    border-color var(--duration-fast),
    background var(--duration-fast);
}

.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--color-chrome-dark),
    transparent 50%,
    var(--color-chrome-light)
  );
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal);
}

.product-card:hover::before {
  opacity: 1;
}

.product-card:focus-visible::before {
  opacity: 1;
}

.product-card:hover .card-inner {
  transform: translateY(-4px);
  background: var(--color-glass-bg-hover);
  border-color: var(--color-glass-border-hover);
}

.product-card:focus-visible .card-inner {
  background: var(--color-glass-bg-hover);
  border-color: var(--color-glass-border-hover);
}

.card-header {
  margin-bottom: 0.15em;
}

.product-name {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.card-meta {
  display: flex;
  gap: 0.5em;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.35em;
}

.oss-badge,
.tag-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border-radius: 0.25rem;
  padding: 0.1em 0.4em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.oss-badge {
  color: var(--color-gold);
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.tag-badge {
  color: var(--text-secondary);
  border: 1px solid var(--color-glass-border);
  font-size: 0.7rem;
}

.product-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  text-wrap: pretty;
}


.stat-item {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* @property must be at top level — some browsers drop registrations
   inside @supports blocks and the integer interpolation silently fails. */
@property --count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

/* === Count-up numbers (scroll-triggered via IntersectionObserver) ===
   Star/fork counts animate from 0 to their real values when each product
   card enters the viewport. @property --count above lets the browser
   interpolate the integer frame by frame; counter-reset picks up the
   current value each frame and counter() renders it via ::before.

   The animation is PAUSED by default. A tiny IntersectionObserver in
   card-uniform.js adds `.in-view` to each .product-card-wrapper as it
   enters the viewport, which unpauses the animation inside.

   animation-timeline: view() was the CSS-only holy grail but proved
   unreliable across browsers during testing — with it set, the
   animation snapped to its end state immediately. Fell back to vanilla
   IntersectionObserver + CSS class toggling. Still no framework, no
   CountUp.js, no React hooks, no Framer Motion. */
.count-up {
  position: relative;
  display: inline-block;
  min-width: 1ch;
  color: transparent;
  counter-reset: n var(--count);
  animation-name: count-up;
  /* Slower tick so individual digit changes are perceptible. At 2.4s
     with an ease-out curve, small numbers (e.g., 17) take about a
     second of real interpolation and large numbers (e.g., 445) glide
     visibly from 0 to their final value. Don't shorten this below ~2s
     or the count-up looks like an instant snap. */
  animation-duration: 2.4s;
  /* Hold on 0 after the tile enters view so the user's eye has time to
     lock onto the counter before it starts ticking. */
  animation-delay: 0.65s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.product-card-wrapper.in-view .count-up {
  animation-play-state: running;
}

.count-up::before {
  content: counter(n);
  color: var(--text-muted);
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

@keyframes count-up {
  from { --count: 0; }
  to   { --count: var(--target, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .count-up {
    animation: none;
    --count: var(--target, 0);
  }
}

.ci-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: 0.35em;
  vertical-align: middle;
  position: relative;
  top: -1px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ci-dot-passing {
  background: #4ade80;
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.6);
  animation: ci-hum 2s ease-in-out infinite;
}

.ci-dot-failing {
  background: #f87171;
  box-shadow: 0 0 4px rgba(248, 113, 113, 0.6);
  animation: ci-warn 3s ease-in-out infinite;
}

.ci-dot-running {
  background: #facc15;
  box-shadow: 0 0 4px rgba(250, 204, 21, 0.6);
  animation: ci-pulse 1.2s ease-in-out infinite;
}

@keyframes ci-hum {
  0%, 100% { opacity: 0.9; box-shadow: 0 0 4px rgba(74, 222, 128, 0.6); }
  50% { opacity: 1; box-shadow: 0 0 6px rgba(74, 222, 128, 0.8); }
}

@keyframes ci-warn {
  0%, 100% { opacity: 0.7; box-shadow: 0 0 4px rgba(248, 113, 113, 0.4); }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(248, 113, 113, 0.8); }
}

@keyframes ci-pulse {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 3px rgba(250, 204, 21, 0.3); }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(250, 204, 21, 0.9); }
}

.card-arrow {
  font-size: var(--text-body);
  color: var(--text-muted);
  margin-top: auto;
  transition: color var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
}

.product-card:hover .card-arrow {
  color: var(--color-gold);
  transform: translateX(4px);
}

.product-card:focus-visible .card-arrow {
  color: var(--color-gold);
  transform: translateX(4px);
}

/* === Philosophy === */

.philosophy {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-3xl) var(--space-lg);
}

.philosophy-text {
  max-width: 640px;
  text-align: center;
  margin: 0;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.philosophy-text .chrome-text {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  /* Line-height 1.0 was clipping descenders (g, y, p) — background-clip:text
     uses the glyph bounding box, which on a tight line-height can leave the
     descender tails hanging outside the box. 1.2 leaves comfortable room
     and the extra padding-bottom adds a belt-and-suspenders safety margin. */
  line-height: 1.2;
  letter-spacing: -0.03em;
  white-space: nowrap;
  padding-bottom: 0.12em;
}

.philosophy-text p:last-child {
  font-size: var(--text-body);
  /* Second line picks up the twinkle outer — a quiet signal that the
     atmosphere is shifting under the reader without touching the
     chrome-text above it. */
  color: color-mix(in oklab, var(--galaxy-chrome-twinkle-outer) 40%, var(--text-muted));
  line-height: 1.5;
  letter-spacing: 0.01em;
  transition: color 2.4s var(--ease-out-expo);
}

/* === Services === */

.services {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-3xl) var(--space-lg);
}

.services-panel {
  max-width: 600px;
  width: 100%;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.services-title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.services-lead {
  max-width: 24rem;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.services-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  text-align: center;
}

.services-list li {
  font-size: var(--text-body);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.services-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.875em 1.75em;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-deep));
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-fast) var(--ease-out-expo);
}

.services-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 20px var(--color-gold-glow),
    0 0 40px var(--color-gold-glow-soft),
    0 0 28px color-mix(in oklab, var(--galaxy-chrome-twinkle-outer) 45%, transparent);
}

.services-cta:active {
  transform: translateY(0);
  transition-duration: 100ms;
}

.services-cta:focus-visible {
  box-shadow:
    0 0 0 2px var(--color-bg),
    0 0 0 4px var(--color-gold);
}

/* === Responsive === */

@media (max-width: 767px) {
  .galaxy-surface {
    inset: 0 auto 0 -18vw !important;
    width: 136vw !important;
  }

  .hero {
    padding:
      max(var(--space-xl), env(safe-area-inset-top))
      var(--space-sm)
      var(--space-xl);
  }

  .hero-content {
    width: 100%;
    gap: var(--space-sm);
    max-width: 21rem;
  }

  .hero-tagline {
    font-size: var(--text-body);
    line-height: 1.5;
  }

  .hero-cta {
    width: min(100%, 18rem);
    justify-content: center;
    margin-top: var(--space-xs);
  }

  .products {
    min-height: auto;
    padding: var(--space-xl) var(--space-sm);
  }

  .products-content {
    gap: var(--space-xl);
  }

  .product-group {
    gap: var(--space-md);
  }

  .product-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .card-inner {
    padding: var(--space-sm);
  }

  .product-description {
    line-height: 1.6;
  }

  .philosophy {
    min-height: auto;
    padding: var(--space-xl) var(--space-sm);
  }

  .philosophy-text p:last-child {
    font-size: var(--text-body);
  }

  .services {
    min-height: auto;
    padding: var(--space-xl) var(--space-sm);
  }

  .services-panel {
    padding: var(--space-lg) var(--space-md);
    gap: var(--space-md);
  }

  .services-cta {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 479px) {
  .galaxy-surface {
    inset: 0 auto 0 -24vw !important;
    width: 148vw !important;
  }
}