/* The six core pages remain fully readable until JS opts a mobile viewport in. */
@media (max-width: 800px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  body[data-cm-motion="on"] .cm-item {
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1),
      transform .6s cubic-bezier(.22, 1, .36, 1),
      clip-path .7s cubic-bezier(.22, 1, .36, 1);
  }

  body[data-cm-motion="on"] .cm-item.cm-wait[data-cm-role="heading"],
  body[data-cm-motion="on"] .cm-item.cm-wait[data-cm-role="copy"],
  body[data-cm-motion="on"] .cm-item.cm-wait[data-cm-role="hero-copy"],
  body[data-cm-motion="on"] .cm-item.cm-wait[data-cm-role="closing"] {
    opacity: .46;
    transform: translate3d(0, 17px, 0);
  }

  body[data-cm-motion="on"] .cm-item.cm-wait[data-cm-role="price-card"],
  body[data-cm-motion="on"] .cm-item.cm-wait[data-cm-role="route"],
  body[data-cm-motion="on"] .cm-item.cm-wait[data-cm-role="outcome"] {
    opacity: .5;
    clip-path: inset(0 0 14% 0);
    transform: translate3d(0, 22px, 0);
  }

  body[data-cm-motion="on"] .cm-item.cm-wait[data-cm-role="row"],
  body[data-cm-motion="on"] .cm-item.cm-wait[data-cm-role="group-label"] {
    opacity: .5;
    transform: translate3d(-12px, 0, 0);
  }

  body[data-cm-motion="on"] .cm-item.cm-wait[data-cm-role="media"] {
    opacity: .8;
    clip-path: inset(0 0 13% 0);
    transform: translate3d(0, 15px, 0);
  }

  body[data-cm-motion="on"] .cm-item.cm-first[data-cm-role="hero"] {
    animation: cm-editorial-title .7s cubic-bezier(.22, 1, .36, 1) both;
  }

  body[data-cm-page="pricing"] .price-card.cm-in .price-card__top i {
    animation: cm-marker-arrive .62s cubic-bezier(.22, 1, .36, 1) both;
  }
  body[data-cm-page="pricing"] .price-card.cm-in .price-card__price strong {
    animation: cm-price-arrive .65s cubic-bezier(.22, 1, .36, 1) both;
  }
  body[data-cm-page="check"] .check-entry__route.cm-in .check-entry__icon,
  body[data-cm-page="check"] .check-output__grid article.cm-in .check-output__icon {
    animation: cm-marker-arrive .6s cubic-bezier(.22, 1, .36, 1) both;
  }
  body[data-cm-page="references"] .project-media.cm-in img {
    animation: cm-media-settle .8s cubic-bezier(.22, 1, .36, 1) backwards;
  }

  @keyframes cm-editorial-title {
    from { opacity: .5; clip-path: inset(0 0 15% 0); transform: translate3d(0, 15px, 0); }
    to { opacity: 1; clip-path: inset(0); transform: translate3d(0, 0, 0); }
  }
  @keyframes cm-marker-arrive {
    from { opacity: .35; transform: rotate(-25deg) scale(.8); }
    to { opacity: 1; transform: rotate(0) scale(1); }
  }
  @keyframes cm-price-arrive {
    from { opacity: .55; clip-path: inset(0 0 20% 0); transform: translate3d(0, 10px, 0); }
    to { opacity: 1; clip-path: inset(0); transform: translate3d(0, 0, 0); }
  }
  @keyframes cm-media-settle {
    from { transform: scale(1.035); }
    to { transform: scale(1); }
  }
}

@media (hover: none) and (pointer: coarse) {
  .page-pricing .price-card:focus-within,
  .page-pricing .price-card:active { background: var(--paper-bright); }
  .page-pricing .price-card .text-link:active,
  .page-website-check .check-entry__route:focus-within .button--dark,
  .page-website-check .check-entry__route .button--dark:active {
    color: var(--orange);
  }
  .page-pricing .faq-list details[open] summary,
  .page-pricing .faq-list details:active summary { color: var(--orange); }
  .page-website-check .check-entry__route:focus-within { border-color: var(--orange); }
  .page-website-check .check-entry__route .button:active,
  .page-website-check .direct-contact__form .button:active { transform: scale(.985); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-cm-motion="on"] .cm-item {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}