/* A quiet scroll rhythm for editorial sections. Static content remains visible
   in browsers without scroll-driven animations and for reduced motion. */
@keyframes brand-section-arrive {
  from { opacity: .74; transform: translate3d(0, 48px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes brand-section-arrive-fallback {
  from { opacity: .42; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes brand-image-depth {
  from { transform: translate3d(0, -24px, 0) scale(1.075); }
  to { transform: translate3d(0, 24px, 0) scale(1.075); }
}
@keyframes brand-image-depth-mobile {
  from { transform: translate3d(0, -6px, 0) scale(1.045); }
  to { transform: translate3d(0, 6px, 0) scale(1.045); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Browsers without scroll timelines receive the same restrained entrance
     through IntersectionObserver. The element is never hidden before JS runs. */
  .brand-motion-enter {
    will-change: opacity, transform;
    animation: brand-section-arrive-fallback .62s cubic-bezier(.2, .72, .18, 1) both;
  }

  @supports (animation-timeline: view()) {
    .brand-service-step,
    .brand-directions-card,
    .full-route-step,
    .full-story-section .full-story-copy,
    .full-boundary-grid > div {
      animation: brand-section-arrive linear both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 85%;
    }
    .brand-service-feature figure img,
    .brand-directions-card figure img,
    .full-process-hero figure img,
    .full-route-aside img {
      animation: brand-image-depth linear both;
      animation-timeline: scroll(root block);
      animation-range: 0% 100%;
    }
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll(root block)) {
    .brand-service-page--dentistry .brand-service-feature figure img {
      animation-name: brand-image-depth-mobile;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-service-step,
  .brand-directions-card,
  .full-route-step,
  .full-story-section .full-story-copy,
  .full-boundary-grid > div,
  .brand-service-feature figure img,
  .brand-directions-card figure img,
  .full-process-hero figure img,
  .full-route-aside img {
    animation: none !important;
    transform: none !important;
  }
  .brand-motion-enter { opacity: 1 !important; }
}