/* AxlMotion, scroll reveal and hero leave. Hidden state is opt-in. */

/* Reveal hooks are added by AxlMotion after it enables html.has-motion. */
html.has-motion .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms cubic-bezier(.2,.7,.2,1), transform 560ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--axl-reveal-delay, 0ms);
}

html.has-motion .reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --hero-p is the only value written by the passive scroll listener. */
html.has-motion .stage {
  --hero-p: 0;
}

html.has-motion .stage .specter {
  opacity: calc(1 - var(--hero-p, 0));
  translate: 0 calc(var(--hero-p, 0) * -40px);
  will-change: opacity, transform;
}

html.has-motion .stage .pool {
  translate: 0 calc(var(--hero-p, 0) * -40px);
  will-change: opacity, transform;
  animation-name: axl-motion-pool-breathe;
}

/* The page's pool already breathes through transform and opacity. This name
   keeps that atmosphere while multiplying its opacity by the leave progress. */
@keyframes axl-motion-pool-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: calc(.92 * (1 - var(--hero-p, 0)));
  }
  50% {
    transform: scale(1.06);
    opacity: calc(1 * (1 - var(--hero-p, 0)));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.has-motion .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.has-motion .stage .specter,
  html.has-motion .stage .pool {
    opacity: 1;
    translate: 0 0;
    animation: none;
    will-change: auto;
  }
}