/* Homepage motion: direct attention once, then let the content rest. */
/* The fixed navigation is an opaque boundary for the hero orbit and night video. */
.home-page nav,.home-page nav.scrolled{
  background:var(--bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
/* Feather the effects in below the navigation instead of cutting them at a line. */
.home-page .hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:220px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,var(--bg) 0,var(--bg) 90px,transparent 100%);
}
/* Shift the daylight orbit, its glow and the arriving labels together. */
html[data-theme="light"] .home-page .hero .hero-media{transform:translateY(36px) scale(1.2)}
.home-page .hero-orbits{width:clamp(600px,60vw,1080px)}
.home-page .hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:230px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,var(--bg) 78%);
}
@media(max-width:640px){
  .home-page .hero::before{
    height:168px;
    background:linear-gradient(to bottom,var(--bg) 0,var(--bg) 74px,transparent 100%);
  }
  .home-page .hero-orbits{width:640px}
  html[data-theme="light"] .home-page .hero-orbits{top:calc(46% + 36px)}
  .home-page .hero::after{height:215px}
}

.home-page [data-reveal]{
  transform:translateY(12px);
  filter:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.home-page [data-reveal].in{transform:none}

.home-page .hero-copy>*{animation-duration:.42s}
.home-page .hero-copy>h1{animation-delay:.05s}
.home-page .hero-copy>.lead{animation-delay:.12s}
.home-page .hero-copy>.hero-actions{animation-delay:.16s}

.home-page h1 .lit,.home-page h2 .lit,
.home-page h1.shine .lit,.home-page h2.shine .lit{
  background-size:100% 100%;
  animation:none;
}

.home-page .zc-fab::after{animation:none;opacity:0}
.home-page .zc-fab-ic,.home-page .zc-fab-dot{animation:none}
.home-page .zc-fab-dot{box-shadow:none}