/* Home motion layer — Topo Field hero background, the CSS hero entrance and
 * anime.js reveals. Loaded by the two homes only (index.html, ko/index.html). The entrance runs only under
 * .js-motion, which the head probe sets when motion is allowed and modules run.
 */

.home .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.home .hero__inner {
  position: relative;
  z-index: var(--z-base);
}

.topo-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Lines stay faint behind the copy and fade into the next section. */
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.3) 50%, #000 72%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.3) 50%, #000 72%, #000 82%, transparent 100%);
}

@media (min-width: 64rem) {
  .topo-field {
    -webkit-mask-image:
      linear-gradient(90deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.3) 28%, #000 62%),
      linear-gradient(180deg, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.3) 28%, #000 62%),
      linear-gradient(180deg, #000 72%, transparent 100%);
    mask-composite: intersect;
  }
}

/* The synthetic screen floats on the terrain instead of sitting flat on it. */
.home .shot img {
  box-shadow:
    0 1px 2px rgb(15 22 33 / 0.06),
    0 24px 60px -24px rgb(15 22 33 / 0.28);
}

.example__saved ul li {
  transform-origin: left center;
}

/* The hero rises in once from the first paint. CSS runs it, so the copy never
 * waits for home-motion.js or the anime.js download. */
.js-motion .hero__copy > *,
.js-motion .hero .shot {
  animation: home-rise 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.js-motion .hero__copy > :nth-child(1) { animation-delay: 0.08s; }
.js-motion .hero__copy > :nth-child(2) { animation-delay: 0.17s; }
.js-motion .hero__copy > :nth-child(3) { animation-delay: 0.26s; }
.js-motion .hero__copy > :nth-child(4) { animation-delay: 0.35s; }
.js-motion .hero__copy > :nth-child(5) { animation-delay: 0.44s; }

.js-motion .hero .shot {
  --rise-y: 48px;
  --rise-scale: 0.965;
  animation-duration: 1.4s;
  animation-delay: 0.32s;
}

/* Reduced motion turned on during the entrance ends it at once. */
@media (prefers-reduced-motion: reduce) {
  .js-motion .hero__copy > *,
  .js-motion .hero .shot {
    animation: none;
  }
}

@keyframes home-rise {
  from {
    opacity: 0;
    transform: translateY(var(--rise-y, 28px)) scale(var(--rise-scale, 1));
  }
}