/* ===== Services page: scroll reveal rows ===== */

/* image column: slides from its own side */
.mysite-service-row .mysite-media-left,
.mysite-service-row .mysite-media-right {
  opacity: 0;
  transform: translateX(var(--mysite-slide, 0px));
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.mysite-service-row .mysite-media-left  { --mysite-slide: -48px; }
.mysite-service-row .mysite-media-right { --mysite-slide: 48px; }

.mysite-service-row.mysite-visible .mysite-media-left,
.mysite-service-row.mysite-visible .mysite-media-right {
  opacity: 1;
  transform: translateX(0);
}

/* text column: column itself never moves — inner items fade + slide up */
.mysite-service-row .wp-block-column:not(.mysite-media-left):not(.mysite-media-right) > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mysite-service-row.mysite-visible .wp-block-column:not(.mysite-media-left):not(.mysite-media-right) > * {
  opacity: 1;
  transform: translateY(0);
}

/* stagger: heading → paragraph → button */
.mysite-service-row.mysite-visible .wp-block-column:not(.mysite-media-left):not(.mysite-media-right) > *:nth-child(1) { transition-delay: 0.15s; }
.mysite-service-row.mysite-visible .wp-block-column:not(.mysite-media-left):not(.mysite-media-right) > *:nth-child(2) { transition-delay: 0.30s; }
.mysite-service-row.mysite-visible .wp-block-column:not(.mysite-media-left):not(.mysite-media-right) > *:nth-child(3) { transition-delay: 0.45s; }
.mysite-service-row.mysite-visible .wp-block-column:not(.mysite-media-left):not(.mysite-media-right) > *:nth-child(n+4) { transition-delay: 0.55s; }

/* mobile */
@media (max-width: 781px) {
  .mysite-service-row .mysite-media-left  { --mysite-slide: -24px; }
  .mysite-service-row .mysite-media-right { --mysite-slide: 24px; }

  /* image always on top in every stacked row */
  .mysite-service-row .mysite-media-right {
    order: -1;
  }
}

/* accessibility: no motion */
@media (prefers-reduced-motion: reduce) {
  .mysite-service-row .wp-block-column,
  .mysite-service-row .wp-block-column > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}