/* Motion only: existing layout, colours, text and contact controls stay unchanged. */
@media (prefers-reduced-motion: no-preference) {
  html.rt-motion .lp-comparison,
  html.rt-motion .hero-before-after-card {
    overflow: hidden;
  }

  /* Hero animation is started by JavaScript only once the image is loaded
     and actually visible. Do not start it prematurely from a CSS class. */

  html.rt-motion .btn,
  html.rt-motion .quick-path,
  html.rt-motion .card,
  html.rt-motion .local-proof-card,
  html.rt-motion .review-card {
    transition: transform 220ms ease, box-shadow 220ms ease,
      border-color 220ms ease, background-color 220ms ease, color 220ms ease;
  }

  html.rt-motion .home-photo-grid > a,
  html.rt-motion .service-project figure {
    overflow: hidden;
  }

  html.rt-motion .home-photo-grid img,
  html.rt-motion .service-project figure img,
  html.rt-motion .roof-teaser figure img {
    transition: transform 450ms cubic-bezier(.22, 1, .36, 1);
  }

  @media (hover: hover) and (pointer: fine) {
    html.rt-motion .quick-path:hover,
    html.rt-motion .local-proof-card:hover,
    html.rt-motion .review-card:hover {
      transform: translateY(-3px);
    }

    html.rt-motion .home-photo-grid > a:hover img,
    html.rt-motion .service-project figure:hover img {
      transform: scale(1.025);
    }

    html.rt-motion .roof-teaser figure:hover img {
      transform: scale(1.015);
    }

    html.rt-motion .navlinks > a:not(.btn) {
      text-decoration: underline;
      text-decoration-color: transparent;
      text-underline-offset: .4em;
      text-decoration-thickness: 2px;
      transition: color 180ms ease, text-decoration-color 180ms ease;
    }

    html.rt-motion .navlinks > a:not(.btn):hover {
      text-decoration-color: currentColor;
    }
  }
}

/* Also respect the visitor's preference for the site's existing hover effects. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .btn, .card, .quick-path, .local-proof-card, .review-card,
  .business-gallery-item img, .home-photo-grid img, .gallery img,
  .lp-comparison img, .hero-before-after-card img,
  .service-project figure img, .roof-teaser figure img {
    animation: none !important;
    transition: none !important;
  }
  .btn:hover, .card:hover, .quick-path:hover, .local-proof-card:hover,
  .review-card:hover, .business-gallery-item:hover img,
  .business-gallery-item:focus-visible img, .home-photo-grid a:hover img,
  .gallery figure:hover img, .service-project figure:hover img,
  .roof-teaser figure:hover img {
    transform: none !important;
  }
}

@media print {
  .lp-comparison img, .hero-before-after-card img {
    animation: none !important;
    transform: none !important;
  }
}