/* ============================================================
   COMPIE — BRAND BACKGROUNDS
   The signature canvas: a single brand color radiating from a
   corner into Midnight Core, optionally over a faint column grid.
   Use the CSS vars as `background:` values, or the utility classes.
   ============================================================ */

:root {
  /* Corner glow gradients (color → midnight). Anchor the radial at a corner. */
  --bg-neon-pulse:
    radial-gradient(2008px 2008px at 100% 100%, rgba(206,255,0,0.5) 0%, rgba(1,4,13,0) 100%),
    var(--brand-midnight-core-500);
  --bg-digital-surge:
    radial-gradient(2008px 2008px at 0% 0%, rgba(0,255,255,0.5) 0%, rgba(1,4,13,0) 100%),
    var(--brand-midnight-core-500);
  --bg-pixel-spark:
    radial-gradient(1994px 1994px at 0% 100%, rgba(255,0,231,0.5) 0%, rgba(1,4,13,0) 100%),
    var(--brand-midnight-core-500);
  /* Dual-tone: surge top-right + pulse bottom-right (the brand's hero blend) */
  --bg-surge-x-pulse:
    radial-gradient(2202px 2202px at 100% 0%, rgba(0,255,255,0.5) 0%, rgba(1,4,13,0) 100%),
    radial-gradient(1315px 1315px at 100% 100%, rgb(206,255,0) 0%, rgba(1,4,13,0) 100%),
    var(--brand-midnight-core-500);

  /* Faint vertical column grid overlay (the "Vertical cols" texture) */
  --grid-columns:
    repeating-linear-gradient(90deg,
      rgba(134,145,178,0.06) 0 1px,
      transparent 1px 96px); /* @kind other */
  /* Pixel dot grid */
  --grid-pixels:
    radial-gradient(rgba(134,145,178,0.10) 1.5px, transparent 1.5px); /* @kind other */
}

.compie-bg            { background: var(--bg-neon-pulse); color: var(--text-primary); }
.compie-bg--surge     { background: var(--bg-digital-surge); }
.compie-bg--spark     { background: var(--bg-pixel-spark); }
.compie-bg--hero      { background: var(--bg-surge-x-pulse); }

/* Layer the column grid on top of any brand bg */
.compie-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grid-columns);
  pointer-events: none;
}