/*
 * AZPhone home hero depth layer.
 * Scope: public landing page hero only.
 */
.hero {
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("/metaphone-hero-ugphone-style-desktop.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(18px) brightness(0.72) saturate(1.32);
  opacity: 0.42;
  transform: scale(1.04);
}

.hero-bg {
  z-index: 1;
  background:
    radial-gradient(56% 66% at 22% 36%, rgba(255, 58, 39, 0.22) 0%, rgba(255, 58, 39, 0) 68%),
    radial-gradient(48% 56% at 44% 66%, rgba(21, 210, 255, 0.18) 0%, rgba(21, 210, 255, 0) 72%),
    linear-gradient(90deg, rgba(3, 3, 4, 0.5) 0%, rgba(4, 4, 5, 0.44) 26%, rgba(6, 6, 7, 0.3) 48%, rgba(8, 8, 8, 0.12) 70%, rgba(0, 0, 0, 0) 100%);
}

.hero-art {
  z-index: 2;
}

.hero-art-overlay {
  background:
    linear-gradient(90deg, rgba(5, 5, 6, 0.56) 0%, rgba(6, 6, 7, 0.48) 24%, rgba(8, 8, 8, 0.32) 44%, rgba(8, 8, 8, 0.12) 66%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(56% 66% at 76% 48%, rgba(255, 58, 39, 0.2) 0%, rgba(255, 58, 39, 0) 70%),
    radial-gradient(42% 54% at 58% 62%, rgba(21, 210, 255, 0.15) 0%, rgba(21, 210, 255, 0) 72%);
}

.hero-content {
  z-index: 4;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
}

@media (max-width: 899px) {
  .hero::before {
    inset: 0;
    background-image: url("/metaphone-hero-ugphone-style-mobile.png");
    background-size: cover;
    background-position: center center;
    filter: blur(14px) brightness(0.62) saturate(1.2);
    opacity: 0.3;
  }

  .hero-bg {
    display: block;
    background:
      radial-gradient(80% 52% at 50% 42%, rgba(255, 58, 39, 0.16), rgba(255, 58, 39, 0) 72%),
      linear-gradient(180deg, rgba(6, 6, 7, 0.72) 0%, rgba(8, 8, 8, 0.5) 48%, rgba(8, 8, 8, 0.26) 100%);
  }

  .hero-art-overlay {
    background:
      linear-gradient(180deg, rgba(6, 6, 7, 0.78) 0%, rgba(8, 8, 8, 0.54) 42%, rgba(8, 8, 8, 0.24) 100%),
      radial-gradient(78% 54% at 50% 48%, rgba(255, 58, 39, 0.18), rgba(255, 58, 39, 0) 72%);
  }
}