/* Motion adds feedback, never the visibility required to read the page. */
:root {
  --motion-ease-out: cubic-bezier(.4, 0, .2, 1);
  --motion-feedback: 320ms;
  --motion-icon: 680ms;
  --motion-folder-ease: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  :is(.button, .text-link, .service-tab, .audience-card, .feedback-toggle) {
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: var(--motion-feedback);
    transition-timing-function: var(--motion-ease-out);
  }

  :is(.primary-nav a, .article-nav a, .utility a, .footer-grid a, .footer-legal a) {
    transition: color var(--motion-feedback) var(--motion-ease-out);
  }

  .primary-nav a::after {
    transition: transform 360ms var(--motion-ease-out);
  }

  :is(.button, .text-link, .card-link) .arrow {
    display: inline-block;
    transition: transform var(--motion-feedback) var(--motion-ease-out);
  }

  :is(.text-link, .utility a, .footer-legal a):hover {
    color: var(--red);
  }

  :is(.icon-pen, .icon-search-lens) {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--motion-icon) var(--motion-ease-out);
  }

  .icon-building-columns path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 620ms var(--motion-ease-out);
  }

  :is(.service-tab, .service-card):focus-visible .icon-building-columns path {
    stroke-dashoffset: 0;
  }

  :is(.service-tab, .service-card):focus-visible .icon-building-columns path:nth-child(2) {
    transition-delay: 70ms;
  }

  :is(.service-tab, .service-card):focus-visible .icon-building-columns path:nth-child(3) {
    transition-delay: 140ms;
  }

  :is(.service-tab, .service-card):focus-visible .icon-folder-lines {
    animation: moll-folder-lines 400ms var(--motion-folder-ease) 1;
  }

  :is(.service-tab, .service-card):focus-visible .icon-pen {
    transform: translate(4px, -3px) rotate(-10deg);
  }

  :is(.service-tab, .service-card):focus-visible .icon-search-lens {
    transform: translate(-2px, -5px) rotate(10deg) scale(1.12);
  }

  /* Move only the arrow, keeping the label and hit area stationary. */
  @media (hover: hover) and (pointer: fine) {
    :is(.button, .text-link):hover .arrow,
    .service-card:hover .card-link .arrow {
      transform: translateX(4px);
    }

    :is(.service-tab, .service-card):hover .icon-folder-lines {
      animation: moll-folder-lines 400ms var(--motion-folder-ease) 1;
    }

    :is(.service-tab, .service-card):hover .icon-pen {
      transform: translate(4px, -3px) rotate(-10deg);
    }

    :is(.service-tab, .service-card):hover .icon-building-columns path {
      stroke-dashoffset: 0;
    }

    :is(.service-tab, .service-card):hover .icon-building-columns path:nth-child(2) {
      transition-delay: 70ms;
    }

    :is(.service-tab, .service-card):hover .icon-building-columns path:nth-child(3) {
      transition-delay: 140ms;
    }

    :is(.service-tab, .service-card):hover .icon-search-lens {
      transform: translate(-2px, -5px) rotate(10deg) scale(1.12);
    }
  }
}

/* The drawing paths receive pathLength="1" in the SVG markup. */
@keyframes moll-folder-lines {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

/* Also cancels pre-existing smooth scrolling and CSS transitions. JS cancels
   its running Web Animations when this preference changes during the visit. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

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

  :is(.button, .text-link, .card-link) .arrow {
    transform: none !important;
  }

  :is(.icon-folder-lines, .icon-pen, .icon-building-columns, .icon-building-columns path, .icon-search-lens) {
    transform: none !important;
    animation: none !important;
    transition: none !important;
    opacity: 1;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}