/* Hero background cross-fade for the day and night theme switch. */
.hero,
.about-hero {
  background: #191919;
}

.hero-shade {
  display: none;
}

.hero::before,
.hero::after,
.about-hero::before,
.about-hero::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  transition: opacity .9s ease, transform 1.15s ease;
  will-change: opacity, transform;
}

.hero::before,
.about-hero::before {
  background-image: url("../img/black-panther-shop-hero.jpg");
  opacity: 1;
  transform: scale(1);
}

.hero::after,
.about-hero::after {
  background-image: url("../img/black-panther-shop-hero2.jpg");
  opacity: 0;
  transform: scale(1.025);
}

body[data-theme="light"] .hero::before,
body[data-theme="light"] .about-hero::before {
  opacity: 0;
  transform: scale(1.025);
}

body[data-theme="light"] .hero::after,
body[data-theme="light"] .about-hero::after {
  opacity: 1;
  transform: scale(1);
}

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