/* Scroll reveal animations. Connected by script.js via data-animate attributes. */
.js [data-animate] {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition:
    opacity var(--reveal-duration, 1.08s) cubic-bezier(.2, .8, .2, 1),
    transform var(--reveal-duration, 1.08s) cubic-bezier(.2, .8, .2, 1),
    filter var(--reveal-duration, 1.08s) cubic-bezier(.2, .8, .2, 1),
    box-shadow .28s cubic-bezier(.2, .8, .2, 1),
    border-color .28s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-animate="fade-up"] {
  transform: translate3d(0, 34px, 0);
  filter: blur(5px);
}

.js [data-animate="fade-down"] {
  transform: translate3d(0, -28px, 0);
  filter: blur(4px);
}

.js [data-animate="slide-left"] {
  transform: translate3d(-44px, 8px, 0);
}

.js [data-animate="slide-right"] {
  transform: translate3d(44px, 8px, 0);
}

.js [data-animate="pop"] {
  transform: translate3d(0, 22px, 0) scale(.88);
  filter: blur(3px);
}

.js [data-animate="zoom"] {
  transform: scale(.9);
  filter: blur(5px);
}

.js [data-animate="chaos"] {
  transform:
    translate3d(var(--reveal-x, 0), var(--reveal-y, 26px), 0)
    rotate(var(--reveal-rotate, -1.5deg))
    scale(var(--reveal-scale, .94));
  filter: blur(3px);
}

.js [data-animate].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0) scale(1);
  filter: blur(0);
}

/* A restrained handmade feel after reveal. */
@media (hover: hover) and (pointer: fine) {
  .problem__item:hover,
  .architecture__item:hover,
  .brains__item:hover,
  .metrics__card:hover {
    transform: translateY(-7px) rotate(-.35deg) scale(1.012);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
  }

  .step:hover {
    transform: translateY(-5px) rotate(.25deg);
  }

  .browser-mock__wrap:hover {
    transform: translateY(-5px) rotate(.2deg) scale(1.006);
  }
}

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

  .js [data-animate],
  .js [data-animate].is-visible,
  .card,
  .problem__item,
  .architecture__item,
  .browser-mock__wrap,
  .step,
  .brains__item,
  .metrics__card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
}