/* lumenbyte.com — the surface shared by every page, drawn from
   @lumenbytelabs/tokens (tokens.css). No literal colours: each is a token. */

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

html, body { height: 100%; }

body {
  color: var(--lb-text);
  font-family: var(--lb-font-mono);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* the display grid: lumen columns and magenta rows on a perspective
   plane, sunk below the viewport, fading toward the horizon */
.grid {
  position: fixed;
  left: -50%;
  right: -50%;
  bottom: calc(-1 * var(--lb-grid-sink));
  height: var(--lb-grid-display-reach);
  background:
    repeating-linear-gradient(90deg,
      rgb(from var(--lb-lumen) r g b / var(--lb-grid-display-column-alpha)) 0 var(--lb-grid-line),
      transparent var(--lb-grid-line) var(--lb-grid-column)),
    repeating-linear-gradient(0deg,
      rgb(from var(--lb-magenta) r g b / var(--lb-grid-display-row-alpha)) 0 var(--lb-grid-line),
      transparent var(--lb-grid-line) var(--lb-grid-row));
  transform: perspective(var(--lb-grid-depth)) rotateX(var(--lb-grid-tilt));
  mask-image: linear-gradient(180deg, transparent 0%, #000 var(--lb-grid-fade));
  pointer-events: none;
}

.vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgb(from var(--lb-void) r g b / 0.55) 100%);
  pointer-events: none;
  z-index: 2;
}

/* the top of the stack, per IDENTITY's scanline rule */
.lb-scanlines { z-index: 10; }

main {
  position: relative;
  z-index: 1;
  padding: 0 24px;
  text-align: center;
}

.glyph { color: var(--lb-status-prompt); }

/* the line-high amber caret; its glow is the canon's named exception */
.cursor {
  display: inline-block;
  width: calc(1em * var(--lb-caret-ratio));
  height: 1em;
  vertical-align: var(--lb-caret-line-drop);
  margin-left: var(--lb-caret-gap);
  background: var(--lb-caret-fill);
  box-shadow: var(--lb-caret-glow);
  animation: blink var(--lb-motion-blink) steps(1) infinite;
}

/* chromatic aberration: magenta ghost down-left, lumen ghost up-right,
   bright core on top, the wordmark's halo pair behind */
.wordmark {
  font-weight: 700;
  color: var(--lb-text);
  text-shadow:
    calc(-1 * var(--lb-aberration-offset)) var(--lb-aberration-offset) 0
      rgb(from var(--lb-magenta) r g b / var(--lb-aberration-alpha)),
    var(--lb-aberration-offset) calc(-1 * var(--lb-aberration-offset)) 0
      rgb(from var(--lb-lumen) r g b / var(--lb-aberration-alpha)),
    0 0 var(--lb-aberration-halo-near) rgb(from var(--lb-lumen) r g b / var(--lb-aberration-halo-near-alpha)),
    0 0 var(--lb-aberration-halo-far) rgb(from var(--lb-magenta) r g b / var(--lb-aberration-halo-far-alpha));
}

@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}