.motion-js [data-first-fold-motion] {
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
  animation-duration: 680ms;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: var(--first-fold-delay, 0ms);
}

.motion-js [data-first-fold-motion="logo"] {
  --first-fold-delay: 80ms;
  animation-name: app-first-fold-logo;
}

.motion-js [data-first-fold-motion="card"] {
  --first-fold-delay: 240ms;
  transform-origin: center top;
  animation-name: app-first-fold-card;
  animation-duration: 760ms;
}

.motion-js [data-first-fold-motion="title"] {
  --first-fold-delay: 360ms;
  animation-name: app-first-fold-up;
}

.motion-js [data-first-fold-motion="phone"],
.motion-js [data-first-fold-motion="anvisa"] {
  --first-fold-delay: 760ms;
  animation-name: app-first-fold-soft;
  animation-duration: 720ms;
}

.motion-js [data-first-fold-motion="eyebrow"] {
  --first-fold-delay: 1080ms;
  animation-name: app-first-fold-down;
}

.motion-js [data-first-fold-motion="actions"],
.motion-js [data-first-fold-motion="download"] {
  --first-fold-delay: 1240ms;
  animation-name: app-first-fold-up;
}

.motion-js [data-first-fold-motion="download"] {
  --first-fold-delay: 1360ms;
}

.motion-js .app-hero-visual[data-first-fold-motion="phone"] .app-hero-phone--main {
  animation: app-hero-phone-float 4.8s ease-in-out 1480ms infinite;
  will-change: translate, rotate;
}

.motion-js .app-hero-visual[data-first-fold-motion="phone"] .app-hero-phone--shadow {
  animation: app-hero-phone-shadow-float 4.8s ease-in-out 1480ms infinite;
  will-change: translate, opacity;
}

.motion-js [data-section-motion] {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 56px, 0);
  will-change: opacity, transform;
}

.motion-js [data-section-motion].is-revealed {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

@keyframes app-first-fold-logo {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -10px, 0);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes app-first-fold-card {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 18px, 0) scale(0.985);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes app-first-fold-up {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 18px, 0);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes app-first-fold-down {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -12px, 0);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes app-first-fold-soft {
  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes app-hero-phone-float {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }

  50% {
    translate: 0 -12px;
    rotate: 0.35deg;
  }
}

@keyframes app-hero-phone-shadow-float {
  0%,
  100% {
    translate: 0 0;
    opacity: 0.58;
  }

  50% {
    translate: 0 8px;
    opacity: 0.42;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-js [data-first-fold-motion] {
    opacity: 1;
    visibility: visible;
    transition: none;
    animation: none;
    will-change: auto;
  }

  .motion-js [data-section-motion] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    animation: none;
    will-change: auto;
  }

  .motion-js .app-hero-visual[data-first-fold-motion="phone"] .app-hero-phone {
    animation: none;
    translate: none;
    rotate: none;
    will-change: auto;
  }
}