/* A restrained, material-inspired movement for the first section. */
.hero::before {
  animation: orbit 18s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 30%, rgba(212, 179, 91, .17), transparent 20%),
    radial-gradient(circle at 32% 84%, rgba(104, 167, 140, .13), transparent 25%);
  mix-blend-mode: screen;
  animation: glow 10s ease-in-out infinite alternate;
}

.hero-art {
  animation: drift 14s ease-in-out infinite alternate;
  transform-origin: center;
}

.hero-art::after {
  animation: line-breathe 9s ease-in-out infinite alternate;
}

@keyframes orbit {
  from { transform: translate3d(-1%, -1%, 0) scale(.98); opacity: .48; }
  to { transform: translate3d(3%, 4%, 0) scale(1.08); opacity: .82; }
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .46; }
  to { transform: translate3d(-2%, 1.3%, 0) rotate(.7deg); opacity: .7; }
}

@keyframes glow {
  from { opacity: .18; transform: scale(.96); }
  to { opacity: .6; transform: scale(1.04); }
}

@keyframes line-breathe {
  from { opacity: .35; transform: skewY(-7deg) scale(.96); }
  to { opacity: .84; transform: skewY(-7deg) scale(1.035); }
}

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