/* ============================================================
   See You Onchain — Base layer
   Resets, the navy starfield atmosphere, and the signature
   glitch-letter helper. Consumers get these for free.
   ============================================================ */

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

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(205, 116, 66, 0.34); color: #fff; }

/* ---- The navy starfield background (drop onto any full surface) ---- */
.onc-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 13% 84%, rgba(205,116,66,0.20), transparent 42%),
    radial-gradient(circle at 90% 14%, rgba(126,152,224,0.15), transparent 46%),
    radial-gradient(circle at 6% 14%, rgba(168,102,80,0.12), transparent 44%),
    radial-gradient(ellipse at 70% 46%, var(--horizon) 0%, var(--navy) 52%, var(--space) 100%);
}
.onc-sky::after {
  content: ""; position: absolute; inset: 0; box-shadow: var(--vignette);
}

/* ---- Film grain overlay ---- */
.onc-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- The glitch letter: one letter per title, pixel font + blue/orange split ---- */
.onc-glitch {
  font-family: var(--font-pixel);
  font-weight: 400;
  color: var(--white);
  -webkit-text-fill-color: var(--white);
  text-shadow: var(--glitch-shadow);
}

/* ---- Gradient text (blue → orange) ---- */
.onc-gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- Brand title convention: uppercase ---- */
.onc-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  text-transform: var(--title-transform);
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-tight);
}

/* ---- Pixel eyebrow / label ---- */
.onc-eyebrow {
  font-family: var(--font-pixel);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--orange);
}