/* Grainient-inspired homepage background. */
.hero {
  background:
    radial-gradient(ellipse 85% 90% at 4% 8%, #646799 0%, transparent 68%),
    radial-gradient(ellipse 90% 75% at 96% 90%, #5e92c9 0%, transparent 67%),
    linear-gradient(135deg, #7676ad 0%, #6473a5 48%, #5e92c9 100%);
}

.hero #waves,
.hero .hero-orbit {
  display: none;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 58% at 18% 28%, rgba(100,103,153,.95), transparent 72%),
    radial-gradient(ellipse 68% 60% at 83% 70%, rgba(94,146,201,.95), transparent 70%),
    radial-gradient(ellipse 48% 52% at 55% 38%, rgba(118,118,173,.72), transparent 72%);
  filter: blur(28px) saturate(1.08);
  animation: grain-color-drift 14s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .2;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(255,255,255,.46) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 73% 61%, rgba(8,9,11,.38) 0 1px, transparent 1px 4px);
  background-size: 5px 5px, 7px 7px;
  mix-blend-mode: soft-light;
  animation: grain-shift .35s steps(2) infinite;
}

.hero-editorial-title,
.hero-bottom {
  z-index: 3;
}

@keyframes grain-color-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.03) rotate(-1deg); }
  to { transform: translate3d(2%, 1%, 0) scale(1.1) rotate(1deg); }
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(1px, 1px); }
  100% { transform: translate(-1px, -1px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after { animation: none; }
}