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

@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes header-arrive {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}

.reveal {
  transition: transform 0.88s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-ready .reveal {
  opacity: 1;
  transform: translate3d(0, 40px, 0);
}

.js-ready .reveal--left {
  transform: translate3d(-36px, 0, 0);
}

.js-ready .reveal--right {
  transform: translate3d(36px, 0, 0);
}

.js-ready .reveal--zoom {
  transform: translate3d(0, 28px, 0);
}

.js-ready .reveal--card {
  transform: translate3d(0, 34px, 0);
}

.js-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js-ready .reveal.is-exiting-up {
  transform: translate3d(0, -28px, 0);
}

.js-ready .reveal.is-exiting-down {
  transform: translate3d(0, 28px, 0);
}

.js-ready .popular-card.reveal.is-visible:hover {
  transform: translateY(-5px);
}

.js-ready .finder-item.reveal.is-visible:hover {
  transform: translateY(-2px);
}

.js-ready .inner-card.reveal.is-visible:hover {
  transform: translateY(-4px);
}

.site-header.header-motion {
  animation: header-arrive 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.foreigners-image.motion-image {
  transition:
    opacity 1.1s ease,
    transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js-ready .foreigners-image.motion-image {
  opacity: 0.52;
  transform: scale(1.045);
}

.js-ready .foreigners-image.motion-image.is-visible {
  opacity: 0.74;
  transform: scale(1);
}

@media (max-width: 600px) {
  .reveal {
    transition-duration: 0.72s;
  }

  .js-ready .reveal { transform: translate3d(0, 30px, 0); }
  .js-ready .reveal--left,
  .js-ready .reveal--right { transform: translate3d(0, 30px, 0); }
  .js-ready .reveal--card { transform: translate3d(0, 30px, 0); }
}

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

  .js-ready .reveal,
  .js-ready .reveal.is-visible,
  .js-ready .reveal.is-exiting-up,
  .js-ready .reveal.is-exiting-down,
  .js-ready .foreigners-image.motion-image {
    opacity: 1 !important;
    transform: none !important;
  }
}
