/* Independent photo-textured ground. Pair with scene/ground.js and #groundCanvas. */
.dirt-ground {
  position: fixed;
  inset: 68vh 0 0;
  overflow: hidden;
  background: #20130c;
  pointer-events: none;
  z-index: 0;
}

.dirt-ground {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 0%, #000 4vh);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 0%, #000 4vh);
}

.dirt-ground::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 27%, rgba(255, 151, 57, 0.28), transparent 13%),
    radial-gradient(ellipse at 50% 40%, rgba(177, 73, 25, 0.18), transparent 26%),
    linear-gradient(180deg, rgba(61, 28, 15, 0.2), rgba(14, 9, 7, 0.68));
  box-shadow: inset 0 60px 100px rgba(44, 13, 5, 0.22);
  z-index: 1;
}

.dirt-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 36%, transparent 14%, rgba(7, 5, 4, 0.18) 60%, rgba(3, 3, 3, 0.46) 100%);
  z-index: 2;
}

.dirt-ground canvas {
  width: 100%;
  height: 100%;
  display: block;
}