/**
 * Site-wide animated dot grid — fixed canvas behind all content.
 * Static CSS variants kept as fallback / for other pages.
 */

:root {
  --vb-site-grid-step: 46px;
  --vb-site-grid-dot: rgba(254, 27, 63, 0.14);
}

html {
  background-color: #000000;
}

/* ── Site-wide animated canvas host ──────────────────────────────────────── */
#vb-site-canvas-host {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/**
 * Jednotný ambient pro celý web: jeden nenápadný radiální gradient (střed nahoře,
 * rozplynutí směrem dolů přes viewport). Nad #vb-site-canvas-host, pod .vb-page-wrapper.
 */
.vb-site-ambient-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse 120% 100% at 50% -5%,
    rgba(254, 27, 63, 0.1) 0%,
    rgba(254, 27, 63, 0.035) 40%,
    transparent 68%
  );
}

/* All page content sits above the fixed canvas + ambient */
.vb-page-wrapper {
  position: relative;
  z-index: 2;
  min-height: 100vh;
}

/* ── Static CSS fallback (other pages / no-JS) ───────────────────────────── */
.vb-bg-black-grid {
  background-color: #000000;
  background-image:
    radial-gradient(circle, var(--vb-site-grid-dot) 1.2px, transparent 1.35px);
  background-size: var(--vb-site-grid-step) var(--vb-site-grid-step);
}

.vb-bg-nearblack-grid {
  background-color: #0a0a0a;
  background-image:
    radial-gradient(circle, rgba(254, 27, 63, 0.11) 1.2px, transparent 1.35px);
  background-size: var(--vb-site-grid-step) var(--vb-site-grid-step);
}