/* Shared elemental artwork for every primary web-app tab. */
:root {
  --dasoni-tab-art-height: 216px;
  --dasoni-tab-art-position: center bottom;
  --dasoni-tab-art-mask: linear-gradient(
    180deg,
    #000 0%,
    #000 46%,
    rgba(0, 0, 0, .82) 66%,
    rgba(0, 0, 0, .36) 84%,
    transparent 100%
  );
  --dasoni-tab-art-overlay: linear-gradient(
    180deg,
    rgba(247, 249, 251, .88) 0%,
    rgba(247, 249, 251, .48) 38%,
    rgba(247, 249, 251, .08) 66%,
    transparent 100%
  );
}

html[data-theme="dark"] {
  --dasoni-tab-art-overlay: linear-gradient(
    180deg,
    rgba(23, 28, 36, .82) 0%,
    rgba(23, 28, 36, .46) 38%,
    rgba(23, 28, 36, .08) 66%,
    transparent 100%
  );
}

/* Home and mission render their shared art behind live header content. */
.home-art,
.mission-art {
  position: relative;
  isolation: isolate;
  background: none !important;
}

.home-art::before,
.mission-art::before,
body.dasoni-report .hero::before,
.app::before {
  position: absolute !important;
  z-index: 0 !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: var(--dasoni-tab-art-height) !important;
  content: "" !important;
  pointer-events: none !important;
  background-image: var(--dasoni-tab-art-overlay), var(--element-art) !important;
  background-position: center, var(--dasoni-tab-art-position) !important;
  background-size: 100% 100%, cover !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  -webkit-mask-image: var(--dasoni-tab-art-mask) !important;
  mask-image: var(--dasoni-tab-art-mask) !important;
}

.mission-art > * {
  position: relative;
  z-index: 1;
}

/* Let the chat artwork continue behind the message scroller until its mask ends. */
.app .messages {
  background: transparent !important;
}

/* Profile uses an empty art layer, so the same crop and fade apply directly. */
.profile-art {
  height: var(--dasoni-tab-art-height) !important;
  background-image: var(--dasoni-tab-art-overlay), var(--element-art) !important;
  background-position: center, var(--dasoni-tab-art-position) !important;
  background-size: 100% 100%, cover !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  -webkit-mask-image: var(--dasoni-tab-art-mask) !important;
  mask-image: var(--dasoni-tab-art-mask) !important;
}