/* Preview: a soft white canopy joins the central fade, keeping controls clear. */
.site-home .site-landscape {
  inset: 0;
  height: 100%;
  background-position: 35% bottom;
}
.site-home .site-river-video { object-position: 35% bottom; }
.site-home .site-landscape::after {
  background:
    linear-gradient(to top, #20324199, #20324100 17%),
    linear-gradient(to bottom,
      rgb(var(--fade-rgb)) 0%, rgb(var(--fade-rgb)) calc(9% + 40px),
      rgb(var(--fade-rgb) / 0.9803921568627451) calc(17% + 40px), rgb(var(--fade-rgb) / 0.8784313725490196) calc(27% + 40px),
      rgb(var(--fade-rgb) / 0.6196078431372549) calc(39% + 40px), rgb(var(--fade-rgb) / 0.25882352941176473) calc(52% + 40px),
      rgb(var(--fade-rgb) / 0) calc(66% + 40px)),
    radial-gradient(ellipse 50% 66% at 50% 12%,
      rgb(var(--fade-rgb)) 0%, rgb(var(--fade-rgb) / 0.9607843137254902) 30%, rgb(var(--fade-rgb) / 0.8196078431372549) 48%,
      rgb(var(--fade-rgb) / 0.45098039215686275) 65%, rgb(var(--fade-rgb) / 0.10196078431372549) 83%, rgb(var(--fade-rgb) / 0) 100%);
}
/* Icon controls inherit the same hover, focus and press effects as the Brain. */
.site-about-credit { margin-top: 24px; text-align: right; font-size: 12px; }
.site-about-credit a { color: var(--muted); text-decoration: none; }
.site-about-credit a:hover { color: var(--accent-dark); text-decoration: underline; }
@media (max-width: 760px) {
  .site-home .site-landscape::after {
    background:
      linear-gradient(to top, #20324199, #20324100 17%),
      linear-gradient(to bottom,
        rgb(var(--fade-rgb)) 0%, rgb(var(--fade-rgb)) calc(9% + 40px),
        rgb(var(--fade-rgb) / 0.9803921568627451) calc(17% + 40px), rgb(var(--fade-rgb) / 0.8) calc(28% + 40px),
        rgb(var(--fade-rgb) / 0.4) calc(40% + 40px), rgb(var(--fade-rgb) / 0) calc(56% + 40px)),
      radial-gradient(ellipse 100% 58% at 50% 10%,
        rgb(var(--fade-rgb) / 0.9607843137254902) 0%, rgb(var(--fade-rgb) / 0.9411764705882353) 32%, rgb(var(--fade-rgb) / 0.7019607843137254) 56%,
        rgb(var(--fade-rgb) / 0.2) 79%, rgb(var(--fade-rgb) / 0) 100%);
  }
}