/* Scroll motion for the numbered step lists and photo strips.
   Loaded by the home, pet owner, practice owner and practice leadership pages.

   The base rules are the finished state, including the connector lines between steps.
   site.js adds .steps-pending / .strip-pending only when motion is welcome, then adds
   .steps-in / .strip-in when the block scrolls into view, then removes both. */

/* Connector between one step's number and the next. Across on desktop (numbers on top), down the left gutter on phones. */
.steps .step:not(:last-child)::after { content: ""; position: absolute; background: rgba(var(--tint-rgb), .18); }
@media (max-width: 899px) {
  .steps .step:not(:last-child)::after { left: 1.1rem; top: 2.9rem; width: 2px; height: calc(100% + 1.5rem - 2.9rem - .6rem); transform-origin: top; }
}
@media (min-width: 900px) {
  /* Timeline: each number sits above its text, so the line between numbers crosses only empty space. */
  .steps .step { padding-left: 0; padding-top: 3.5rem; }
  .steps .step:not(:last-child)::after { left: 3rem; top: 1.1rem; width: calc(100% + 2rem - 3rem - .6rem); height: 2px; transform-origin: left; }
}

@media (prefers-reduced-motion: no-preference) {
  .steps.steps-pending .step::after { scale: 0 1; }
  @media (max-width: 899px) { .steps.steps-pending .step::after { scale: 1 0; } }
  .steps.steps-in .step::after { scale: 1 1; transition: scale .6s var(--ease-out); }
  .steps.steps-in .step:nth-child(1)::after { transition-delay: .15s; }
  .steps.steps-in .step:nth-child(2)::after { transition-delay: .45s; }

  .photo-strip.strip-pending img { clip-path: inset(0 0 100% 0); }
  .photo-strip.strip-in img { clip-path: inset(0 0 0 0); transition: clip-path .7s var(--ease-out); }
  .photo-strip.strip-in img:nth-child(2) { transition-delay: .07s; }
  .photo-strip.strip-in img:nth-child(3) { transition-delay: .14s; }
}