@keyframes tsPageFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tsPageContentIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

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

@keyframes tsPageFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes tsHeroContentIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@keyframes tsHeroVisualIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }

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

@keyframes tsCardIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

html.ts-page-transitions body {
  animation: tsPageFadeIn 240ms ease-out both;
}

html.ts-page-transitions body > main {
  animation: tsPageContentIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.ts-page-leaving body {
  animation: tsPageFadeOut 140ms ease-in both !important;
  pointer-events: none;
}

html.ts-landing.ts-page-transitions body > main {
  animation: none;
}

html.ts-landing.ts-page-transitions .hero-content {
  animation: tsHeroContentIn 460ms cubic-bezier(0.22, 1, 0.36, 1) 40ms both;
}

html.ts-landing.ts-page-transitions .hero-visual {
  animation: tsHeroVisualIn 520ms cubic-bezier(0.22, 1, 0.36, 1) 110ms both;
}

html.ts-landing.ts-page-transitions .section,
html.ts-landing.ts-page-transitions .final-cta {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 520ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.ts-landing.ts-page-transitions .section.ts-visible,
html.ts-landing.ts-page-transitions .final-cta.ts-visible {
  opacity: 1;
  transform: translateY(0);
}

html.ts-landing.ts-page-transitions .ts-visible .info-card,
html.ts-landing.ts-page-transitions .ts-visible .step-card,
html.ts-landing.ts-page-transitions .ts-visible .feature-card,
html.ts-landing.ts-page-transitions .ts-visible .showcase-card,
html.ts-landing.ts-page-transitions .ts-visible .benefit-card {
  animation: tsCardIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.ts-landing.ts-page-transitions .ts-visible .info-card:nth-child(2),
html.ts-landing.ts-page-transitions .ts-visible .step-card:nth-child(2),
html.ts-landing.ts-page-transitions .ts-visible .feature-card:nth-child(2),
html.ts-landing.ts-page-transitions .ts-visible .showcase-card:nth-child(2),
html.ts-landing.ts-page-transitions .ts-visible .benefit-card:nth-child(2) {
  animation-delay: 55ms;
}

html.ts-landing.ts-page-transitions .ts-visible .info-card:nth-child(3),
html.ts-landing.ts-page-transitions .ts-visible .step-card:nth-child(3),
html.ts-landing.ts-page-transitions .ts-visible .feature-card:nth-child(3),
html.ts-landing.ts-page-transitions .ts-visible .showcase-card:nth-child(3),
html.ts-landing.ts-page-transitions .ts-visible .benefit-card:nth-child(3) {
  animation-delay: 110ms;
}

html.ts-landing.ts-page-transitions .ts-visible .feature-card:nth-child(4),
html.ts-landing.ts-page-transitions .ts-visible .benefit-card:nth-child(4) {
  animation-delay: 165ms;
}

html.ts-landing.ts-page-transitions .ts-visible .feature-card:nth-child(5) {
  animation-delay: 220ms;
}

html.ts-landing.ts-page-transitions .ts-visible .feature-card:nth-child(6) {
  animation-delay: 275ms;
}

@media (prefers-reduced-motion: reduce) {
  html.ts-page-transitions body,
  html.ts-page-transitions body > main,
  html.ts-landing.ts-page-transitions .hero-content,
  html.ts-landing.ts-page-transitions .hero-visual,
  html.ts-landing.ts-page-transitions .ts-visible .info-card,
  html.ts-landing.ts-page-transitions .ts-visible .step-card,
  html.ts-landing.ts-page-transitions .ts-visible .feature-card,
  html.ts-landing.ts-page-transitions .ts-visible .showcase-card,
  html.ts-landing.ts-page-transitions .ts-visible .benefit-card {
    animation: none !important;
  }

  html.ts-landing.ts-page-transitions .section,
  html.ts-landing.ts-page-transitions .final-cta {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
