/* Atmosfera de universo sobre a paleta ameixa existente. */
.hero,
.cards-section,
.closing {
  isolation: isolate;
}

.hero::before,
.cards-section::before,
.closing::before,
.hero::after,
.cards-section::after,
.closing::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero::before,
.cards-section::before,
.closing::before {
  z-index: -2;
  background-image:
    url("assets/ceu-estrelado.svg"),
    radial-gradient(ellipse at 83% 21%, #9870a128 0%, transparent 55%),
    radial-gradient(ellipse at 69% 87%, #c4836a13 0%, transparent 50%),
    linear-gradient(125deg, #342537 24%, #2b2036 78%, #31233a);
  background-size: cover;
  background-position: center;
}

.hero::after,
.cards-section::after,
.closing::after {
  z-index: -1;
  background: url("assets/estrelas-brilho.svg") center / cover;
  opacity: .72;
}

.cards-section::before {
  background-position: 75% 65%;
  opacity: .82;
}

.cards-section::after {
  background-position: 85% 30%;
}

.closing::before {
  background-position: center 80%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero::after,
  .cards-section::after,
  .closing::after {
    animation: cosmic-shimmer 9s ease-in-out infinite alternate;
  }

  .cards-section::after { animation-delay: -4s; }
  .closing::after { animation-delay: -7s; }
}

@keyframes cosmic-shimmer {
  from { opacity: .25; }
  to { opacity: .9; }
}

@media (max-width: 600px) {
  .hero::before,
  .hero::after {
    background-position: 65% center;
  }
}