html.motion {
  scroll-behavior: smooth;
}

/* Plate impressions also work when the wider motion layer is disabled. */
@media (prefers-reduced-motion: no-preference) {
  .plate-character {
    transform-box: fill-box;
    transform-origin: 50% 50%;
  }

  .plate-character.stamp {
    animation: press 360ms both;
    animation-delay: var(--delay, 0ms);
  }

  @keyframes press {
    0% {
      opacity: 0;
      transform: translateY(-7px) scale(1.09);
      filter: drop-shadow(0 6px 0 rgba(17, 18, 14, .26));
    }
    16% { opacity: 1; }
    46% {
      transform: translateY(2px) scale(.972);
      filter: drop-shadow(0 0 0 transparent);
    }
    72% { transform: translateY(-.3px) scale(1.002); }
    100% {
      opacity: 1;
      transform: none;
      filter: none;
    }
  }
}

html.motion [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transform-origin: 50% 40%;
  transition: opacity 140ms linear, transform 360ms cubic-bezier(.2, .8, .15, 1);
  transition-delay: var(--delay, 0ms);
}

html.motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}




html.motion .btn {
  transition: transform 70ms linear, background .15s, color .15s;
}

html.motion .btn .arrow {
  transition: transform 120ms cubic-bezier(.2, 0, .15, 1);
}

html.motion .btn:hover .arrow {
  transform: translateX(5px);
}

html.motion .btn:active {
  transform: translateY(2px);
}

html.motion details[open] > p {
  animation: detail-open 180ms cubic-bezier(.2, .8, .15, 1) both;
}

@keyframes detail-open {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  html [data-reveal],
  html.motion [data-reveal],
  .plate-character,
  .btn,
  .btn .arrow,
  details[open] > p {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }
}