.reveal,
.parallax,
.hero__device-img,
.sync-stage__asset {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.collab__person {
  backface-visibility: hidden;
  will-change: translate;
}

.hero__device-img,
.sync-stage__asset--ipad,
.sync-stage__asset--iphone {
  animation: float-soft 7s ease-in-out infinite;
  will-change: transform;
}

.collab__person--1 {
  animation: float-box 8s ease-in-out infinite;
}

.collab__person--2 {
  animation: float-box 9s ease-in-out infinite reverse;
}

.collab__person--3 {
  animation: float-box 7.5s ease-in-out infinite;
  animation-delay: -2s;
}

.sync-stage__asset--ipad {
  animation-delay: -1.4s;
}

.sync-stage__asset--iphone {
  animation-delay: -2.4s;
}

.btn:active,
.cta__appstore:active {
  transform: translateY(0) scale(0.98);
}

@keyframes float-soft {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -14px, 0);
  }
}

@keyframes float-box {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -18px;
  }
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translate3d(0, 46px, 0);
  }

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

@keyframes sync-ring {
  0% {
    transform: scale(0.72);
    opacity: 0.7;
  }

  70%,
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

@keyframes sync-orb {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes sync-spin-slow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes sync-live {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
}

@keyframes sync-status {
  0%,
  8%,
  100% {
    opacity: 0;
    transform: translateY(6px);
  }

  12%,
  28% {
    opacity: 1;
    transform: translateY(0);
  }

  33%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes sync-beam {
  0%,
  100% {
    opacity: 0.2;
  }

  45%,
  55% {
    opacity: 0.85;
  }
}

@keyframes sync-packet-down {
  0% {
    top: 0;
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.7);
  }

  10% {
    opacity: 1;
    transform: translate(-50%, -20%) scale(1);
  }

  48% {
    top: 100%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  52%,
  100% {
    top: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
}

@keyframes sync-packet-up {
  0%,
  50% {
    top: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }

  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  92% {
    top: 0;
    opacity: 1;
    transform: translate(-50%, -20%) scale(1);
  }

  100% {
    top: 0;
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.7);
  }
}

@keyframes sync-device {
  0%,
  100% {
    border-color: rgba(22, 119, 255, 0.12);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
  }

  48%,
  58% {
    border-color: rgba(22, 119, 255, 0.34);
    box-shadow: 0 18px 42px rgba(22, 119, 255, 0.16);
  }
}

@keyframes sync-ping {
  0%,
  44% {
    opacity: 0;
    transform: scale(0.96);
  }

  48% {
    opacity: 0.85;
    transform: scale(1);
  }

  62%,
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes parallax-drift {
  from {
    transform: translate3d(0, 44px, 0);
  }

  to {
    transform: translate3d(0, -44px, 0);
  }
}

@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    animation: reveal-up 1ms linear both;
    animation-timeline: view(block);
    animation-range: entry 5% cover 34%;
    will-change: opacity, transform;
  }

  .reveal--delay-1 {
    animation-range: entry 8% cover 38%;
  }

  .reveal--delay-2 {
    animation-range: entry 11% cover 42%;
  }

  .reveal--delay-3 {
    animation-range: entry 14% cover 46%;
  }

  .parallax {
    animation: parallax-drift 1ms linear both;
    animation-timeline: view(block);
    animation-range: entry -12% exit 112%;
    will-change: transform;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .parallax {
    opacity: 1 !important;
    transform: none !important;
  }

  .sync-stage__status-item:first-child {
    opacity: 1 !important;
    transform: none !important;
  }
}