html {
  scroll-behavior: smooth;
}

html.js-motion .ty-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.985);
  filter: blur(3px);
  transition:
    opacity .75s cubic-bezier(.22, 1, .36, 1),
    transform .75s cubic-bezier(.22, 1, .36, 1),
    filter .75s ease;
  transition-delay: var(--ty-delay, 0ms);
  will-change: opacity, transform;
}

html.js-motion .ty-reveal.ty-from-right {
  transform: translate3d(42px, 12px, 0) scale(.985);
}

html.js-motion .ty-reveal.ty-from-left {
  transform: translate3d(-42px, 12px, 0) scale(.985);
}

html.js-motion .ty-reveal.ty-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

header,
.site-header,
.navbar {
  transition:
    transform .35s ease,
    background-color .35s ease,
    box-shadow .35s ease,
    backdrop-filter .35s ease;
}

header.ty-scrolled,
.site-header.ty-scrolled,
.navbar.ty-scrolled {
  box-shadow: 0 12px 35px rgba(20, 58, 49, .10);
  backdrop-filter: blur(14px);
}

.card,
.feature-card,
.service-card,
.info-card,
.contact-card,
.legal-card,
.download-card {
  transition:
    transform .35s cubic-bezier(.22, 1, .36, 1),
    box-shadow .35s ease,
    border-color .35s ease;
}

@media (hover: hover) {
  .card:hover,
  .feature-card:hover,
  .service-card:hover,
  .info-card:hover,
  .contact-card:hover,
  .legal-card:hover,
  .download-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 48px rgba(26, 66, 56, .12);
  }

  a.button:hover,
  button:hover,
  .btn:hover {
    transform: translateY(-2px);
  }
}

a.button,
button,
.btn {
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;
}

.hero img,
.app-preview img,
.phone-preview img,
.mockup img {
  animation: tyFloat 6s ease-in-out infinite;
  transform-origin: center;
}

@keyframes tyFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -9px, 0) rotate(.3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js-motion .ty-reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .hero img,
  .app-preview img,
  .phone-preview img,
  .mockup img {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}