/* Landing page for the homepage, after Material for MkDocs' own home page
   (squidfunk.github.io/mkdocs-material).
 *
 * Loaded only from overrides/home.html, so none of this can leak onto the other
 * pages. The rules below are adapted from the reference's own home stylesheet
 * (assets/stylesheets/home.*.min.css), with two deliberate departures:
 *
 *   1. The reference makes .mdx-parallax a 100vh box with `overflow: auto`, so
 *      the whole homepage scrolls inside that one element and the parallax is
 *      pure CSS. That works for them because they hide the sidebars and the
 *      page has no other scroll. Here the homepage keeps the docs chrome, so
 *      scrolling the window is not an option -- the parallax transform is
 *      driven from a rAF-throttled scroll listener in parallax.js instead, and
 *      the layers are translated rather than left to `perspective`.
 *
 *   2. The reference reveals elements by shipping `hidden` in the HTML and
 *      having JS remove it, with CSS keyed on `.js [hidden]`. That needs markup
 *      this site's Markdown cannot produce. Instead parallax.js adds
 *      `.mdx-reveal` from script, and only removes it once the element has been
 *      seen. Consequence worth keeping: with JS off, or before it runs, nothing
 *      is hidden. A page whose content is invisible without JavaScript is a
 *      page that does not work without JavaScript.
 */

/* ---------------------------------------------------------------- hero band */

.md-header {
  position: initial;
}

/* Let the band span the full width instead of sitting inside the main
   padding, as the reference does. */
.md-main__inner {
  margin: 0;
}

.mdx-parallax {
  height: 100vh;
  margin-top: -2.4rem;
  overflow: hidden;
  position: relative;
  width: 100vw;
}

.mdx-parallax__group {
  background-color: var(--md-default-bg-color);
  color: var(--md-typeset-color);
  display: block;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.mdx-parallax__group:first-child {
  background-color: initial;
}

.mdx-parallax__layer {
  height: max(120vh, 100vw);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: calc(10 - var(--md-parallax-depth, 0));
}

.mdx-parallax__image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: var(--md-image-position, 50%);
  position: absolute;
  width: 100%;
  z-index: -1;
}

/* Fades the layers into the page background at the bottom of the band. */
.mdx-parallax__blend {
  background-image: linear-gradient(to bottom, #0000, var(--md-default-bg-color));
  bottom: 0;
  height: min(100vh, 100vw);
  top: auto;
}

.mdx-hero {
  display: block;
  height: inherit;
}

/* Above every .mdx-parallax__layer, whose `z-index: calc(10 - depth)` tops out
   at 10 for the blend. This is the one thing the port cannot inherit: the
   reference orders the layers against the hero with `perspective` on
   .mdx-parallax plus `transform-style: preserve-3d` on the group, so each
   layer's `translateZ` sorts it *behind* the hero in a 3D rendering context.
   With those gone the layers are ordinary positioned siblings and
   `z-index: auto` no longer wins -- positive z-index paints later, so the four
   images and the opaque blend gradient all landed on top of the teaser. */
.mdx-hero__inner {
  bottom: 3.2rem;
  display: block;
  position: absolute;
  transition: transform .4s cubic-bezier(.1, .7, .1, 1), opacity .25s;
  width: 100%;
  z-index: 20;
}

@media screen and (max-width: 44.984375em) {
  .mdx-hero__inner {
    bottom: 6.4rem;
  }
}

.mdx-hero__teaser {
  backface-visibility: hidden;
  color: var(--md-primary-bg-color);
  margin: 0 .8rem;
  max-width: 27rem;
}

.mdx-hero__teaser h1 {
  color: inherit;
  font-weight: 700;
  margin-bottom: 0;
  font-size: 44px;
}

.mdx-hero__teaser :not(.md-button) {
  text-shadow: 0 0 .2rem #211d2dcc;
}

.mdx-hero .md-button {
  border-width: 0;
  margin-right: .5rem;
  margin-top: .5rem;
}

.mdx-hero .md-button--primary {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

.mdx-hero .md-button--secondary {
  background-color: initial;
}

/* Bouncing chevron, the reference's cue that there is more below. */
@keyframes mdx-hero-bounce {
  0% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-16px) translateZ(0);
  }
}

.mdx-hero__more {
  animation: mdx-hero-bounce 2s cubic-bezier(.4, 0, .2, 1) infinite;
  bottom: -2.4rem;
  display: block;
  left: 50%;
  margin-left: -.6rem;
  pointer-events: none;
  position: absolute;
  text-align: center;
  z-index: 20;
}

.mdx-hero__more svg {
  fill: #fff;
  height: 1.2rem;
  width: 1.2rem;
}

/* The header sits over the band until the content scrolls under it, so the
   reference keeps it transparent and only paints a background once the shadow
   class lands (toggled from parallax.js). */
.md-header:not(.md-header--shadow) {
  background-color: initial;
  transition: background-color 125ms, transform 125ms cubic-bezier(.1, .7, .1, 1), box-shadow 0ms;
}

.md-header--shadow {
  transition: background-color .25s, transform .25s cubic-bezier(.1, .7, .1, 1), box-shadow .25s;
}

/* ------------------------------------------------------------- reveal on scroll */

/* Added by parallax.js, never in the markup, so the no-JS page is complete. */
.mdx-reveal {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity .75s cubic-bezier(.075, .85, .175, 1) 125ms,
              transform .75s cubic-bezier(.075, .85, .175, 1) 125ms;
}

.mdx-reveal.mdx-reveal--visible {
  opacity: 1;
  transform: none;
}

/* Mermaid renders asynchronously and swaps its own DOM in, so the diagram is
   faded as a whole rather than per node. */
.md-content__inner .mermaid {
  transition: opacity .75s cubic-bezier(.075, .85, .175, 1) 125ms,
              transform .75s cubic-bezier(.075, .85, .175, 1) 125ms;
}

.md-content__inner .mermaid.mdx-reveal {
  opacity: 0;
  transform: translateY(1.6rem);
}

.md-content__inner .mermaid.mdx-reveal--visible {
  opacity: 1;
  transform: none;
}

/* Diagrams are wide; let them use the full column and shrink on small screens
   instead of overflowing, which the reference's own feature grid does by
   capping width. */
.md-content__inner .mermaid {
  max-width: 100%;
  overflow-x: auto;
}

/* Nothing should animate for someone who has asked for stillness. */
@media (prefers-reduced-motion: reduce) {

  .mdx-reveal,
  .md-content__inner .mermaid {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .mdx-hero__more {
    animation: none;
  }
}

/* ------------------------------------------------------------------- content */

/* The reference hides the right-hand rail on a landing page. Keep the left
   sidebar: the homepage doubles as the process overview and needs the nav. */
@media screen and (min-width: 60em) {
  .md-sidebar--secondary {
    display: none;
  }
}