.tf-reveal {
  opacity: 0.88;
  transform: translateY(10px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.tf-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tf-stagger > * {
  opacity: 0.9;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease, border-color 240ms ease;
}

.tf-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.tf-stagger.is-visible > *:nth-child(2) {
  transition-delay: 80ms;
}

.tf-stagger.is-visible > *:nth-child(3) {
  transition-delay: 160ms;
}

.tf-stagger.is-visible > *:nth-child(4) {
  transition-delay: 240ms;
}

.tf-stagger.is-visible > *:nth-child(5) {
  transition-delay: 320ms;
}

.tf-stagger.is-visible > *:nth-child(n + 6) {
  transition-delay: 380ms;
}

.tf-scroll-depth {
  transform: translateY(10px) scale(0.985);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tf-reveal.is-visible .tf-scroll-depth,
.tf-scroll-depth.tf-reveal.is-visible {
  transform: translateY(0) scale(1);
}

@keyframes tfFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tfScrollCue {
  0%,
  100% {
    opacity: 0.35;
    transform: translate(-50%, 0);
  }
  45% {
    opacity: 1;
    transform: translate(-50%, 8px);
  }
}