/* =========================
   BACKGROUND
========================= */

.bg-image {
  position: fixed;
  inset: 0;

  background: url('https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=2070&auto=format&fit=crop')
    center/cover no-repeat;

  opacity: 0.2;
  filter: saturate(0.78) contrast(1.08);
}

.bg-overlay {
  position: fixed;
  inset: 0;

  background:
    linear-gradient(90deg, rgba(5, 6, 10, 0.96) 0%, rgba(5, 6, 10, 0.7) 48%, rgba(5, 6, 10, 0.94) 100%),
    linear-gradient(180deg, rgba(5, 6, 10, 0.62), rgba(5, 6, 10, 0.98));
}

.bg-grid {
  position: fixed;
  inset: 0;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 76%, transparent);
  opacity: 0.28;
}

.bg-ribbon {
  position: fixed;
  width: 46vw;
  height: 12vh;
  min-width: 360px;

  background: linear-gradient(90deg, transparent, rgba(109, 140, 255, 0.26), rgba(0, 216, 200, 0.18), transparent);
  filter: blur(26px);
  opacity: 0.82;
  pointer-events: none;
}

.bg-ribbon.is-one {
  top: 17%;
  right: -12%;
  transform: rotate(-18deg);
}

.bg-ribbon.is-two {
  bottom: 19%;
  left: -15%;
  transform: rotate(15deg);
  background: linear-gradient(90deg, transparent, rgba(245, 199, 106, 0.18), rgba(109, 140, 255, 0.2), transparent);
}