@media (prefers-reduced-motion: no-preference) {
  .hero h1,
  .hero .lede,
  .hero .actions,
  .hero-mark {
    animation: resolve var(--dur-slow) var(--ease) both;
  }
  .hero .lede {
    animation-delay: 0.12s;
  }
  .hero .actions {
    animation-delay: 0.22s;
  }
  .hero-mark {
    animation-delay: 0.3s;
  }
  .hero-mark::before {
    animation: spin 9s linear infinite;
  }
  .hero-mark img {
    animation: float 7s ease-in-out infinite;
  }
  .hero-glow {
    animation: drift 14s ease-in-out infinite alternate;
  }
  .dots i {
    animation: blink 1.2s ease-in-out infinite;
  }
  .dots i:nth-child(2) {
    animation-delay: 0.15s;
  }
  .dots i:nth-child(3) {
    animation-delay: 0.3s;
  }
  .js .reveal {
    transition:
      opacity var(--dur-slow) var(--ease),
      transform var(--dur-slow) var(--ease),
      border-color var(--dur) var(--ease);
  }
  .bento .card:nth-child(2),
  .trio li:nth-child(2) {
    transition-delay: 60ms, 60ms, 0s;
  }
  .bento .card:nth-child(3),
  .trio li:nth-child(3) {
    transition-delay: 120ms, 120ms, 0s;
  }
  .bento .card:nth-child(4) {
    transition-delay: 180ms, 180ms, 0s;
  }
  .js .reveal:not(.in) {
    opacity: 0.001;
    transform: translateY(16px);
  }
}
@keyframes resolve {
  from {
    opacity: 0.2;
    filter: blur(10px);
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes float {
  50% {
    transform: translateY(-8px);
  }
}
@keyframes drift {
  to {
    transform: translate3d(-4%, 6%, 0);
  }
}
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}