@media (prefers-reduced-motion: no-preference) {
  :root {
    --service-motion-ease: cubic-bezier(.22, 1, .36, 1);
  }

  .service-entrance :is(.hero-media, .table-hero-photo, .opening .opening-photo, .detail-image) {
    overflow: hidden;
  }

  .service-entrance :is(.hero-media, .table-hero-photo, .opening .opening-photo, .detail-image, .experience-hero .atmosphere-images) img {
    animation: service-photo-settle 1100ms var(--service-motion-ease);
  }

  .service-entrance :is(.hero-copy, .table-hero-content, .opening-heading, .detail-title, .experience-hero .atmosphere-copy) > h1 {
    animation: service-copy-arrive 700ms var(--service-motion-ease) 70ms backwards;
  }

  .service-entrance :is(.hero-intro, .table-hero-content > p, .opening-heading > p) {
    animation: service-copy-arrive 660ms var(--service-motion-ease) 145ms backwards;
  }

  .service-entrance :is(.hero-copy > .button-row, .table-hero-actions) {
    animation: service-copy-arrive 620ms var(--service-motion-ease) 215ms backwards;
  }

  @keyframes service-photo-settle {
    from { scale: 1.075; }
  }

  @keyframes service-copy-arrive {
    from { opacity: .1; translate: 0 18px; }
  }

  #experiences a.service-card figure {
    overflow: hidden;
  }

  #experiences a.service-card img {
    transition: scale 520ms var(--service-motion-ease);
  }

  #experiences a.service-card:focus-visible img {
    scale: 1.04;
  }

  @media (hover: hover) and (pointer: fine) {
    #experiences a.service-card:hover img {
      scale: 1.04;
    }
  }

  ::view-transition {
    background: var(--black, var(--bg));
  }

  ::view-transition-group(root) {
    animation-duration: 340ms;
  }

  ::view-transition-old(root) {
    animation: service-fade-away 240ms ease-out both;
    mix-blend-mode: normal;
  }

  ::view-transition-new(root) {
    animation: service-fade-in 280ms ease-out 60ms both;
    mix-blend-mode: normal;
  }

  ::view-transition-group(service-photo) {
    z-index: 1;
    animation-duration: 640ms;
    animation-timing-function: var(--service-motion-ease);
    overflow: hidden;
  }

  ::view-transition-old(service-photo),
  ::view-transition-new(service-photo) {
    height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
  }

  ::view-transition-old(service-photo) {
    animation: service-fade-away 270ms ease 270ms both;
  }

  ::view-transition-new(service-photo) {
    animation: service-fade-in 270ms ease 240ms both;
  }

  ::view-transition-group(service-header) {
    z-index: 2;
    animation-duration: 300ms;
  }

  @keyframes service-fade-away {
    to { opacity: 0; }
  }

  @keyframes service-fade-in {
    from { opacity: 0; }
  }
}