@keyframes cs-reveal-text {
  from {
    transform: translateY(120%) skewY(2deg);
    opacity: 0;
  }

  to {
    transform: translateY(0) skewY(0);
    opacity: 1;
  }
}

@keyframes cs-reveal-block {
  from {
    transform: translateY(40px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-33.333%);
  }
}

@keyframes scroll-line {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(200%);
  }
}

.cs-reveal {
  opacity: 0;
  transform: translateY(40px);
}

.cs-reveal.is-visible {
  animation: cs-reveal-block 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cs-reveal-text {
  display: inline-block;
  transform: translateY(120%);
  opacity: 0;
}

.cs-reveal-text.is-visible {
  animation: cs-reveal-text 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cs-hero__title .cs-reveal-text:nth-child(1).is-visible {
  animation-delay: 0.4s;
}

.cs-hero__title .cs-reveal-text:nth-child(2).is-visible {
  animation-delay: 0.55s;
}

.cs-hero__title .cs-reveal-text:nth-child(3).is-visible {
  animation-delay: 0.7s;
}

.cs-scroll-fade-pending,
.cs-scroll-fade-visible {
  transition-property: opacity, transform, filter;
  transition-duration: 0.9s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--cs-scroll-fade-delay, 0ms);
  will-change: opacity, transform, filter;
}

.cs-scroll-fade-pending {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(0.985);
  filter: blur(6px) saturate(0.92);
}

.cs-scroll-fade-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0) saturate(1);
}

@media (prefers-reduced-motion: reduce) {
  .cs-scroll-fade-pending,
  .cs-scroll-fade-visible {
    opacity: 1 !important;
    transition: none !important;
  }
}