html {
  scroll-behavior: smooth;
}

.motion-ready .motion-reveal {
  opacity: 0;
  transform: translateY(22px) scale(.99);
  transition:
    opacity 650ms cubic-bezier(.2, .7, .2, 1),
    transform 650ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--motion-delay, 0ms);
}

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

.card,
.tier,
.value-card,
.creator-card,
.project,
.service-item,
.price-row,
.faq-item,
.update-item,
.contact-row,
.row {
  transition:
    transform 240ms cubic-bezier(.2, .7, .2, 1),
    box-shadow 240ms ease,
    border-color 240ms ease,
    background-color 240ms ease;
}

.card:hover,
.tier:hover,
.value-card:hover,
.creator-card:hover,
.project:hover,
.service-item:hover,
.price-row:hover,
.faq-item:hover,
.update-item:hover,
.contact-row:hover,
.row:hover {
  transform: translateY(-4px);
}

.motion-ready .motion-reveal.is-visible.card:hover,
.motion-ready .motion-reveal.is-visible.tier:hover,
.motion-ready .motion-reveal.is-visible.value-card:hover,
.motion-ready .motion-reveal.is-visible.creator-card:hover,
.motion-ready .motion-reveal.is-visible.project:hover,
.motion-ready .motion-reveal.is-visible.service-item:hover,
.motion-ready .motion-reveal.is-visible.price-row:hover,
.motion-ready .motion-reveal.is-visible.faq-item:hover,
.motion-ready .motion-reveal.is-visible.update-item:hover,
.motion-ready .motion-reveal.is-visible.contact-row:hover,
.motion-ready .motion-reveal.is-visible.row:hover {
  transform: translateY(-4px) scale(1);
}

.card,
.tier,
.value-card,
.creator-card {
  will-change: transform;
}

.btn-primary,
.btn-secondary,
.btn-download,
.btn-soon,
.btn,
.tier-cta {
  transition:
    transform 200ms cubic-bezier(.2, .7, .2, 1),
    box-shadow 200ms ease,
    background-color 200ms ease,
    color 200ms ease;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-download:hover,
.btn-soon:hover,
.btn:hover,
.tier-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(29, 29, 31, .14);
}

.hero .logo2,
.hero .logo,
.hero .clock {
  animation: motion-float 5s ease-in-out infinite;
}

@keyframes motion-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .motion-ready .motion-reveal {
    opacity: 1;
    transform: none;
  }
}