/* Subtle layered depth for the hero. */
.hero {
  --parallax-x: 0;
  --parallax-y: 0;
  --parallax-scroll: 0;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.hero-image {
  transform: translate3d(
      calc(var(--parallax-x) * -18px),
      calc(var(--parallax-y) * -13px + var(--parallax-scroll) * .1px),
      -35px
    ) scale(1.08);
  will-change: transform;
}

.hero-content {
  transform: translate3d(
    calc(var(--parallax-x) * 16px),
    calc(var(--parallax-y) * 12px + var(--parallax-scroll) * -.035px),
    55px
  );
  will-change: transform;
}

.hero-proof {
  transform: translate3d(
    calc(var(--parallax-x) * -8px),
    calc(var(--parallax-y) * -5px),
    28px
  );
  will-change: transform;
}

.hero-image,
.hero-content,
.hero-proof {
  transition: transform .14s linear;
}

@media (max-width: 900px) {
  .hero-image {
    transform: translate3d(0, calc(var(--parallax-scroll) * .075px), 0) scale(1.07);
  }

  .hero-content {
    transform: translate3d(0, calc(var(--parallax-scroll) * -.025px), 0);
  }

  .hero-proof { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image,
  .hero-content,
  .hero-proof {
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}