#mesh {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(232, 228, 218, 0.012) 2px,
    rgba(232, 228, 218, 0.012) 3px
  );
  mix-blend-mode: overlay;
}

body.has-mesh {
  position: relative;
  overflow-x: hidden;
}

body.has-mesh::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('/images/ascii_art_emot.png');
  filter: blur(1.5px) brightness(0.35) saturate(0.5);
  opacity: 0.12;
  pointer-events: none;
  z-index: -3;
}

body.has-mesh::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, rgba(28, 30, 34, 0.55), rgba(14, 15, 17, 0.72));
  pointer-events: none;
  z-index: -2;
}

body.has-mesh-hero::after {
  background:
    radial-gradient(ellipse 55% 45% at 50% 45%, rgba(28, 30, 34, 0.75) 0%, transparent 78%),
    linear-gradient(to bottom, rgba(28, 30, 34, 0.55), rgba(14, 15, 17, 0.70));
}

body.has-mesh-quiet #mesh { opacity: 0.55; }
body.has-mesh-quiet::after {
  background:
    radial-gradient(ellipse 80% 100% at 50% 50%, rgba(14, 15, 17, 0.35) 0%, transparent 60%),
    linear-gradient(to bottom, rgba(28, 30, 34, 0.62), rgba(14, 15, 17, 0.78));
}