/* Decorative layer for the existing homepage hero. */
.hero.hero-centered {
  overflow: hidden;
  background:
    radial-gradient(circle at 1% 82%, rgba(190, 125, 19, .075) 0, transparent 31%),
    radial-gradient(circle at 100% 18%, rgba(6, 26, 61, .055) 0, transparent 34%),
    linear-gradient(180deg, var(--cream), var(--paper));
}

.hero-centered .hero-copy {
  position: relative;
  z-index: 2;
}

.hero-accent-orbit,
.hero-accent-pixels {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.hero-accent-orbit {
  width: 360px;
  height: 360px;
  border: 1px solid rgba(190, 125, 19, .28);
  border-radius: 50%;
}

.hero-accent-orbit::before {
  content: "";
  position: absolute;
  inset: 19px;
  border: 1px solid rgba(6, 26, 61, .09);
  border-radius: 50%;
}

.hero-accent-orbit-left { left: -305px; top: 35%; }
.hero-accent-orbit-right { right: -294px; top: 2%; }

.hero-accent-pixels {
  width: 86px;
  height: 86px;
  background-image: radial-gradient(circle, rgba(190, 125, 19, .68) 1.7px, transparent 2px);
  background-size: 16px 16px;
  mask-image: linear-gradient(135deg, black, transparent 92%);
}

.hero-accent-pixels-left { bottom: 76px; left: max(6%, calc((100% - 1180px) / 2 + 22px)); }
.hero-accent-pixels-right { top: 74px; right: max(6%, calc((100% - 1180px) / 2 + 22px)); transform: rotate(180deg); }

@media (max-width: 900px) {
  .hero-accent-orbit { width: 280px; height: 280px; }
  .hero-accent-orbit-left { left: -249px; top: 42%; }
  .hero-accent-orbit-right { right: -242px; top: 7%; }
  .hero-accent-pixels { width: 56px; height: 56px; opacity: .6; }
}

@media (max-width: 540px) {
  .hero-accent-orbit { display: none; }
  .hero-accent-pixels { width: 32px; height: 32px; background-size: 13px 13px; opacity: .36; }
  .hero-accent-pixels-left { bottom: 22px; left: 12px; }
  .hero-accent-pixels-right { top: 21px; right: 12px; }
}