/* =====================================================================
   v8 motion: "darkroom"
   A thin light sweeps down the hero and the words appear behind it, photos
   come up from black like a print in the developer, a hairline draws under
   each title and the title rises through it, the line-art branches draw
   themselves. Gated by html.js-motion (set in <head>, skipped for reduced
   motion). assets/js/motion.js adds every class here.
   ===================================================================== */

/* hero and page heads: scan-line reveal */
.js-motion .m8-scan {
  position: relative;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.25, 1) 0.2s;
}
.js-motion .m8-scan.is-in {
  clip-path: inset(0 0 0 0);
}
.js-motion .m8-scanline {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 28px 3px rgba(255, 255, 255, 0.35);
  opacity: 0;
  pointer-events: none;
}
.js-motion .m8-scan.is-in .m8-scanline {
  animation: m8-scanline 1.4s cubic-bezier(0.65, 0, 0.25, 1) 0.2s forwards;
}
@keyframes m8-scanline {
  0% { top: 0; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* photos: exposure, black to print */
.js-motion .m8-expose img.gray,
.js-motion .m8-expose .image-holder img,
.js-motion .m8-expose-bg {
  filter: grayscale(1) contrast(1.6) brightness(0);
  transition: filter 2s cubic-bezier(0.3, 0.6, 0.2, 1) var(--dl, 0s), transform 2.4s cubic-bezier(0.22, 1, 0.36, 1) var(--dl, 0s);
}
.js-motion .m8-expose img.gray,
.js-motion .m8-expose .image-holder img {
  transform: scale(1.06);
}
.js-motion .m8-expose.is-in img.gray,
.js-motion .m8-expose.is-in .image-holder img,
.js-motion .m8-expose-bg.is-in {
  filter: grayscale(1) contrast(1.06) brightness(0.98);
  transform: none;
}

/* titles: a hairline draws above, the title rises up to it, the line dissolves
   (the line sits in the unclipped 40px strip above the text) */
.js-motion .m8-rule {
  position: relative;
  clip-path: inset(-40px 0 100% 0);
  transform: translateY(26px);
  transition:
    clip-path 1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--dl, 0s) + 0.25s),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--dl, 0s) + 0.25s);
}
.js-motion .m8-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 140px;
  height: 1px;
  margin-left: -70px;
  background: currentColor;
  opacity: 0.55;
  transform: scaleX(0);
  transition:
    transform 0.9s cubic-bezier(0.65, 0, 0.25, 1) var(--dl, 0s),
    opacity 0.7s ease calc(var(--dl, 0s) + 1.5s);
}
.js-motion .m8-rule--left::after {
  left: 0;
  margin-left: 0;
  transform-origin: 0 50%;
}
.js-motion .m8-rule.is-in {
  clip-path: inset(-40px 0 -40px 0);
  transform: none;
}
.js-motion .m8-rule.is-in::after {
  transform: scaleX(1);
  opacity: 0;
}

/* copy, buttons, cards: quiet rise */
.js-motion .m8-up {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s ease var(--dl, 0s),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--dl, 0s);
}
.js-motion .m8-up.is-in {
  opacity: 1;
  transform: none;
}

/* stats: the dividers grow down, the line art draws itself */
.js-motion .m8-dividers > div:not(:last-child)::after {
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.25, 1) 0.3s;
}
.js-motion .m8-dividers.is-in > div:not(:last-child)::after {
  transform: scaleY(1);
}
.js-motion .m8-draw line {
  transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.25, 1) calc(var(--i, 0) * 70ms);
}