/* Let the real photo continue behind the sticky header, using one shared black. */
body[data-page='home'] #app {
  margin-top: calc(-1 * var(--header-height));
}
body[data-page='home'] .hero {
  padding-top: var(--header-height);
  min-height: calc(30.3vw + var(--header-height));
  background: var(--abs-dark-surface);
}
body[data-page='home'] .hero-art {
  inset: 0 0 0 40%;
  height: auto;
  background-image:
    linear-gradient(
      90deg,
      var(--abs-dark-surface) 0%,
      rgb(8 8 8 / 80%) 18%,
      rgb(8 8 8 / 40%) 38%,
      rgb(8 8 8 / 0%) 65%
    ),
    var(--hero-photo);
  background-size: cover;
  background-position: center 48%;
}
body[data-page='home'] .hero::after {
  background: linear-gradient(
    90deg,
    var(--abs-dark-surface) 15%,
    rgb(8 8 8 / 53.33%) 34%,
    rgb(8 8 8 / 0%) 58%
  );
}
body[data-page='home'] .header {
  background: linear-gradient(
    180deg,
    var(--abs-dark-surface) 0%,
    var(--abs-dark-surface) 50%,
    rgb(8 8 8 / 25%) 100%
  );
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Scroll position controls opacity directly, without a timed fade. */
body[data-page='home'] .header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--abs-dark-surface);
  opacity: var(--hero-header-black, 0);
  pointer-events: none;
}
:root[data-navigation-open='true'] body[data-page='home'] .header::before {
  opacity: 1;
}
@media (max-width: 760px) {
  body[data-page='home'] .hero {
    min-height: calc(440px + var(--header-height));
  }
  body[data-page='home'] .hero-art {
    inset: 0 0 auto;
    height: calc(245px + var(--header-height));
    background-image:
      linear-gradient(
        0deg,
        var(--abs-dark-surface) 0%,
        rgb(8 8 8 / 53.33%) 18%,
        rgb(8 8 8 / 0%) 60%
      ),
      var(--hero-photo);
    background-position: 62% center;
  }
  body[data-page='home'] .hero::after {
    background: linear-gradient(
      0deg,
      var(--abs-dark-surface) 34%,
      rgb(8 8 8 / 33.33%) 55%,
      rgb(8 8 8 / 0%) 90%
    );
  }
}

body[data-page='home'] .header::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 44px;
  opacity: calc(1 - var(--hero-header-black, 0));
  background: linear-gradient(180deg, rgb(8 8 8 / 25%), rgb(8 8 8 / 0%));
  pointer-events: none;
}

:root[data-navigation-open='true'] body[data-page='home'] .header::after {
  opacity: 0;
}