.scroll-heading-layer {
  display:block;
}

.scroll-heading-base {
  opacity:.15;
  user-select:none;
}

.scroll-heading-fill {
  position:absolute;
  inset:0;
  clip-path:polygon(0 0,var(--heading-fill,0%) 0,var(--heading-fill,0%) 100%,0 100%);
  will-change:clip-path;
}

@keyframes blink {
  50% {
    opacity:0;
  }
}

@keyframes showcase-progress {
  to {
    transform:scaleX(1);
  }
}

.js .reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
}

.js .reveal.in-view {
  opacity:1;
  transform:none;
}

/* Slow, polished scroll choreography. */
.scroll-progress {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent 0,#8292ff 12%,#c3caff 88%,transparent 100%);
  box-shadow:0 0 12px rgba(137,151,255,.7);
  transform:scaleX(0);
  transform-origin:left;
  opacity:.65;
  will-change:transform;
}

.js .feature-grid .reveal:not(.in-view):nth-child(odd), .js .steps .reveal:not(.in-view):nth-child(odd) {
  transform:translate3d(-36px,34px,0) rotate(-1.2deg);
}

.js .feature-grid .reveal:not(.in-view):nth-child(even), .js .steps .reveal:not(.in-view):nth-child(even) {
  transform:translate3d(36px,34px,0) rotate(1.2deg);
}

.js .showcase-stage.reveal:not(.in-view) {
  transform:translate3d(0,48px,0) scale(.975);
}

.js .download-card.reveal:not(.in-view) {
  transform:translate3d(0,50px,0) scale(.98);
}

.js .reveal {
  transition-duration:1.05s;
  transition-timing-function:cubic-bezier(.16,1,.3,1);
}

@keyframes slow-float {
  from {
    margin-top:-4px;
  }
  to {
    margin-top:5px;
  }
}