/* ===== Colores (únicas definiciones de color de la página) ===== */
:root {
  --color-bg: #000000;          /* fondo negro liso */
  --color-text-dim: #0b5d1e;    /* verde fósforo apagado (sin luz) */
  --color-depth: #04200a;       /* laterales de la extrusión 3D */

  --font-size: clamp(2.5rem, 9vw, 6.5rem);
  --font-terminal: "Cascadia Mono", "Lucida Console", "Courier New", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--color-bg);
  overflow: hidden;
}

/* Centrado vertical y horizontal + perspectiva */
.scene {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  perspective: 900px;
}

.terminal {
  position: relative;
  margin: 0;
  font: 700 var(--font-size)/1 var(--font-terminal);
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform-style: preserve-3d;
  user-select: none;
}

/* Reserva el espacio; sin JS se ve como texto plano */
.sizer { color: var(--color-text-dim); }
.js .sizer { visibility: hidden; }

/* Cada capa es una copia del texto situada a distinta profundidad */
.layer {
  position: absolute;
  inset: -0.6em;       /* margen extra para que el resplandor no se recorte */
  padding: 0.6em;
  transform: translateZ(var(--z, 0px));
  pointer-events: none;
}

.extrude { color: var(--color-depth); }
.face    { color: var(--color-text-dim); }

/* Cursor parpadeante de terminal */
.caret { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

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