/* ───────────────────────────────────────────────────────────
   CyanideX — Base / reset / global atmosphere
   ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--void);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Animated atmospheric backdrop shared across the OS */
.cx-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(0, 229, 255, 0.10), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(182, 255, 58, 0.08), transparent 55%),
    linear-gradient(180deg, #04070d 0%, #03050a 100%);
}
.cx-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 80%);
  animation: gridDrift 24s linear infinite;
}
@keyframes gridDrift {
  to { background-position: 46px 46px, 46px 46px; }
}

/* Scanline veneer */
.cx-scanlines {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.015) 0px,
    rgba(255, 255, 255, 0.015) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; margin: 0; letter-spacing: 0.5px; }

a { color: var(--cyan); text-decoration: none; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.45); }

.mono { font-family: var(--font-mono); }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.up { text-transform: uppercase; letter-spacing: 2px; }
.center { text-align: center; }

.hidden { display: none !important; }

/* Selection */
::selection { background: rgba(0, 229, 255, 0.3); color: #fff; }

/* Reusable fade-in */
@keyframes cxFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.cx-enter { animation: cxFadeUp 0.5s var(--ease) both; }