/* Photo hero with parallax. Loaded only when $heroPhoto = true in index.php. */
.hm-hero {
  background:
    linear-gradient(100deg, rgba(14, 38, 34, .92) 0%, rgba(20, 52, 47, .78) 45%, rgba(20, 52, 47, .45) 100%),
    url("/assets/images/hero-family.jpg") center 35% / cover no-repeat;
  background-attachment: scroll, fixed;   /* fixed photo = parallax as the page scrolls */
}
.hm-orb-3, .hm-dots { opacity: .5; }
.hm-orb-1 { opacity: .22; }
.hm-orb-2 { opacity: .18; }

/* iOS / touch devices ignore fixed backgrounds and it can look jumpy: use a normal scrolling photo */
@media (max-width: 960px), (hover: none) {
  .hm-hero {
    background-attachment: scroll, scroll;
    background-position: center, 62% center;
    background-image:
      linear-gradient(180deg, rgba(14, 38, 34, .9) 0%, rgba(20, 52, 47, .8) 100%),
      url("/assets/images/hero-family.jpg");
  }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero { background-attachment: scroll, scroll; }
}