:root {
  /* C64-ish palette */
  --c64-dark: #2b1b56;
  --c64-black: #1a1026;
  --c64-blue: #3a57c4;
  --c64-cyan: #6ee7ff;
  --c64-green: #6cc66a;
  --c64-ltgreen: #b4f0a0;
  --c64-purple: #7b3f9a;
  --c64-orange: #d99c4a;
  --c64-yellow: #f4e15a;
  --c64-gray: #8b8b8b;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: var(--c64-black);
  color: var(--c64-cyan);
  font-family: "Courier New", Courier, monospace;
}

body {
  overflow-x: hidden;
}

#scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.layer {
  position: absolute;
  inset: 0;
  will-change: transform, background-position;
}

/* BACKGROUND: PCB-like */
#layer-back {
  background-color: #1c2f24;
  background-image:
    linear-gradient(90deg, rgba(108, 198, 106, 0.25) 1px, transparent 1px),
    linear-gradient(0deg, rgba(108, 198, 106, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 225, 90, 0.08) 2px, transparent 2px),
    linear-gradient(0deg, rgba(244, 225, 90, 0.08) 2px, transparent 2px);
  background-size:
    48px 48px,
    48px 48px,
    144px 144px,
    144px 144px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4);
}

/* MIDDLE: STARS + PLANETS */
#layer-mid {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(110, 231, 255, 0.85) 1px, transparent 2px),
    radial-gradient(circle at 40% 70%, rgba(110, 231, 255, 0.65) 1px, transparent 2px),
    radial-gradient(circle at 75% 35%, rgba(244, 225, 90, 0.7) 1px, transparent 2px),
    radial-gradient(circle at 90% 80%, rgba(110, 231, 255, 0.75) 1px, transparent 2px);
  background-size: 200px 200px;
  background-repeat: repeat;
}

#planets {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.planet {
  position: absolute;
  width: var(--size, 100px);
  height: var(--size, 100px);
  image-rendering: pixelated;
  background: linear-gradient(
    var(--dir, 90deg),
    var(--c1, #7b3f9a) 50%,
    var(--c2, #3a57c4) 50%
  );
  box-shadow:
    inset -8px 0 0 rgba(0, 0, 0, 0.25),
    0 0 0 4px rgba(26, 16, 38, 0.9),
    0 0 0 8px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

.planet-1 {
  top: 18%;
  left: 65%;
  background:
    linear-gradient(90deg, var(--c64-purple) 50%, var(--c64-blue) 50%);
  box-shadow:
    inset -8px 0 0 rgba(0, 0, 0, 0.25),
    0 0 0 4px rgba(26, 16, 38, 0.9),
    0 0 0 8px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

.planet-2 {
  top: 60%;
  left: 20%;
  width: 140px;
  height: 140px;
  background:
    linear-gradient(0deg, var(--c64-orange) 50%, var(--c64-yellow) 50%);
  box-shadow:
    inset 0 8px 0 rgba(0, 0, 0, 0.25),
    0 0 0 4px rgba(26, 16, 38, 0.9),
    0 0 0 8px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

.planet-3 {
  top: 30%;
  left: 10%;
  width: 70px;
  height: 70px;
  background:
    linear-gradient(90deg, var(--c64-green) 50%, var(--c64-ltgreen) 50%);
  box-shadow:
    inset -6px 0 0 rgba(0, 0, 0, 0.25),
    0 0 0 4px rgba(26, 16, 38, 0.9),
    0 0 0 8px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

/* FRONT: LOGO */
#layer-front {
  display: grid;
  justify-items: center;
  align-items: start;
  padding-top: 8vh;
  pointer-events: none;
}

#logo-canvas {
  width: 50vw;
  height: auto;
  image-rendering: pixelated;
  display: block;
  filter: drop-shadow(0 0 0 #000) drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.4));
}

#scroll-spacer {
  height: 400vh;
}

.hint {
  position: fixed;
  bottom: 16px;
  right: 20px;
  font-size: 12px;
  color: var(--c64-gray);
  background: rgba(26, 16, 38, 0.6);
  padding: 6px 10px;
  border: 2px solid var(--c64-gray);
}