/* Scroll depth belongs to the artwork; headings, copy and controls stay in flow. */
#services { --cb-service-depth: 44px; }
@media (max-width: 1000px) { #services { --cb-service-depth: 28px; } }
@media (max-width: 720px) { #services { --cb-service-depth: 12px; } }

@supports (animation-timeline: view()) and (view-timeline-name: --cb-service-depth) and (animation-range: cover 0% cover 100%) {
  @media (prefers-reduced-motion: no-preference) {
    #services.cb-services-ready .cb-service {
      view-timeline-name: --cb-service-depth;
      view-timeline-axis: block;
    }
    #services .cb-service .cb-service-media {
      animation: cb-service-depth 1ms linear both;
      animation-timeline: --cb-service-depth;
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes cb-service-depth {
  from { transform: translate3d(0, calc(var(--cb-service-depth) * -1), 0); }
  to { transform: translate3d(0, var(--cb-service-depth), 0); }
}

/* Lightweight fallback for browsers without CSS view timelines. */
#services[data-cb-service-parallax="fallback"] .cb-service-media {
  animation: none;
  transform: translate3d(0, var(--cb-service-offset, 0px), 0);
}
@media (prefers-reduced-motion: reduce) {
  #services .cb-service .cb-service-media {
    animation: none !important;
    transform: none !important;
  }
}