/* Motion extends the supplied design without changing its colors or layout. */
@keyframes pp-menu-settle {
  0% { translate: 0 -8px; scale: .985; }
  72% { translate: 0 1px; scale: 1.002; }
  100% { translate: 0 0; scale: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .pp-nav-services[open] > .pp-nav-mega {
    transform-origin: center top;
    animation: pp-menu-settle 300ms cubic-bezier(.16,1,.3,1);
  }

  .pd-service-cards > article,
  .pp-services-directory-card,
  .pp-nav-service {
    transition: translate 380ms cubic-bezier(.2,.85,.3,1.25), background-color 180ms ease;
  }

  .pd-service-cards > article > img,
  .pp-services-directory-card > img,
  .pp-nav-art img {
    transform-origin: center 75%;
    transition: translate 380ms cubic-bezier(.2,.85,.3,1.25), rotate 380ms cubic-bezier(.2,.85,.3,1.25), scale 300ms ease;
  }

  .pd-button,
  .pp-nav-quote,
  .pp-services-work-controls button {
    transition: translate 280ms cubic-bezier(.2,.85,.3,1.25), scale 160ms ease, background-color 180ms ease;
  }

  .pp-nav-service-arrow,
  .pp-nav-mega-footer a > svg {
    transition: translate 240ms cubic-bezier(.16,1,.3,1);
  }

  .pd-service-cards > article:focus-within,
  .pp-services-directory-card:focus-within,
  .pp-nav-service:focus-visible { translate: 0 -6px; }

  .pd-service-cards > article:focus-within > img,
  .pp-services-directory-card:focus-within > img,
  .pp-nav-service:focus-visible .pp-nav-art img {
    translate: 0 -3px;
    rotate: -3deg;
    scale: 1.045;
  }

  .pd-button:focus-visible,
  .pp-nav-quote:focus-visible,
  .pp-services-work-controls button:focus-visible:not(:disabled) { translate: 0 -2px; }

  .pp-nav-service:focus-visible .pp-nav-service-arrow,
  .pp-nav-mega-footer a:focus-visible > svg { translate: 3px 0; }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .pd-service-cards > article:hover,
  .pp-services-directory-card:hover,
  .pp-nav-service:hover { translate: 0 -6px; }

  .pd-service-cards > article:hover > img,
  .pp-services-directory-card:hover > img,
  .pp-nav-service:hover .pp-nav-art img {
    translate: 0 -3px;
    rotate: -3deg;
    scale: 1.045;
  }

  .pd-button:hover,
  .pp-nav-quote:hover,
  .pp-services-work-controls button:hover:not(:disabled) { translate: 0 -2px; }

  .pp-nav-service:hover .pp-nav-service-arrow,
  .pp-nav-mega-footer a:hover > svg { translate: 3px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .pd-button:active,
  .pp-nav-quote:active,
  .pp-services-work-controls button:active:not(:disabled) {
    translate: 0 0;
    scale: .97;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-nav-services > .pp-nav-mega,
  .pd-service-cards > article,
  .pp-services-directory-card,
  .pp-nav-service,
  .pd-service-cards > article > img,
  .pp-services-directory-card > img,
  .pp-nav-art img,
  .pd-button,
  .pp-nav-quote,
  .pp-services-work-controls button,
  .pp-nav-service-arrow,
  .pp-nav-mega-footer a > svg {
    animation: none;
    translate: none;
    rotate: none;
    scale: none;
    transition: none;
  }
}
