/* PCKR marketing site: the perspective floor grid and neon glow from the homepage hero,
   used as the page background on every other page. Load this last in <head>.
   Needs the page's usual colour variables (--bg, --accent-rgb). */

html, body { overflow-x: clip; }

body {
  background-color: var(--bg);
  background-image: none;
  background-attachment: scroll;
  position: relative;
}

/* The glow and the perspective floor live in their own clipped box (the first thing inside <body>),
   so their oversized shape can never make the page scroll sideways. */
.site-floor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 820px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 34% at 50% 16%, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0) 70%),
    linear-gradient(180deg, #080A0E 0%, var(--bg) 100%);
}
/* A floor that runs away from the viewer, like the markings on a warehouse floor. */
.site-floor::after {
  content: '';
  position: absolute;
  top: 150px;
  left: 50%;
  width: 1500px;
  height: 620px;
  margin-left: -750px;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.34) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(66deg);
  transform-origin: 50% 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 18%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 60% at 50% 18%, #000 10%, transparent 72%);
  opacity: 0.45;
}

/* Page content sits above the background. */
body > main, body > .content, body > footer { position: relative; z-index: 1; }