/* Motion is progressive enhancement: content remains visible without animation. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: entry 0% entry 75%) {
    .section-head {
      animation: hfav-section-arrival linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }

    .card-grid > .card {
      animation: hfav-card-arrival linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }

    .section-head:focus-within,
    .card-grid > .card:hover,
    .card-grid > .card:focus-within {
      animation: none;
    }

    .route-grid .route-card {
      animation: hfav-card-arrival linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }

    .route-grid .route-card:hover,
    .route-grid .route-card:focus-within {
      animation: none;
    }

    /* Let project and service imagery open into the page as it is reached. */
    .featured-shot .featured-frame,
    .split > .media-frame {
      animation: hfav-image-arrival linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    .featured-shot .featured-frame:focus-within,
    .split > .media-frame:focus-within {
      animation: none;
    }

    .qr-hero-promo .qr-promo-image {
      animation: hfav-frame-arrival linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 38%;
    }

    .qr-hero-promo .qr-promo-kicker::after {
      content: "";
      display: block;
      width: min(100%, 12rem);
      height: 1px;
      margin-top: .85rem;
      background: currentColor;
      transform-origin: left center;
      animation: hfav-signal-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }

    .project-grid .project.wide:first-child img {
      animation: hfav-project-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    .project-grid .project.wide:first-child:hover img,
    .project-grid .project.wide:first-child:focus-within img {
      animation: none;
    }
  }
}

@keyframes hfav-section-arrival {
  from { opacity: .72; transform: translateY(50px); }
  to { opacity: 1; transform: none; }
}

@keyframes hfav-card-arrival {
  from { opacity: .75; transform: translateY(42px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes hfav-image-arrival {
  from { clip-path: inset(5% 0 5% 0 round 14px); transform: translateY(32px) scale(.985); }
  to { clip-path: inset(0 0 0 0 round 0); transform: none; }
}

@keyframes hfav-frame-arrival {
  from { clip-path: inset(8% 0 8% 0 round 18px); transform: translateY(18px); }
  to { clip-path: inset(0 0 0 0 round 0); transform: translateY(0); }
}

@keyframes hfav-signal-draw {
  from { transform: scaleX(.08); }
  to { transform: scaleX(1); }
}

@keyframes hfav-project-drift {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}