/* Static phones remain complete with CSS, scripting, or motion disabled. */
.sync-illustration .sync-moving-card {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 0 0;
  offset-anchor: 0px 0px;
  offset-rotate: 0deg;
}

/* The one-shot visibility hook starts this finite 2.49s exchange on entry. */
@supports (offset-path: path("M0 0L1 1")) {
  @media (prefers-reduced-motion: no-preference) {
    .sync-illustration.is-visible .sync-moving-card {
      animation-name: sync-clip-travel, sync-clip-fade;
      animation-timing-function: cubic-bezier(.4, 0, .2, 1), linear;
      animation-iteration-count: 1;
      animation-fill-mode: both;
    }

    .sync-illustration.is-visible .sync-moving-card--outbound {
      offset-path: path("M70 63C116 32 164 34 210 69");
      animation-delay: .24s;
      animation-duration: 1.05s;
    }

    .sync-illustration.is-visible .sync-moving-card--return {
      offset-path: path("M210 100C167 127 113 124 70 94");
      animation-delay: 1.38s;
      animation-duration: 1.11s;
    }
  }
}

@keyframes sync-clip-travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

@keyframes sync-clip-fade {
  0%, 100% { opacity: 0; }
  12%, 88% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sync-illustration .sync-moving-card {
    animation: none;
    display: none;
  }
}