/**
 * RepairFlow Content Transition — Demo Variant 2 "Staggered Cards"
 * Mirrors frontend/public/labs/content-transition-demo.css [data-variant="staggered"]
 * CONTENT ONLY: opacity + translateY. No width/height/layout writes.
 */

.pm-lab--full-repairflow,
.pm-lab--main-page-demo {
  --pm-rf-ct-duration: 400ms;
  --pm-rf-ct-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pm-rf-ct-y: 18px;
  --pm-rf-ct-stagger: 55ms;
  --pm-rf-ct-delay: 30ms;
}

.pm-rf-ct-unit.pm-rf-ct-prep {
  opacity: 0;
  transform: translateY(var(--pm-rf-ct-y, 18px));
  transition:
    opacity var(--pm-rf-ct-duration, 400ms) var(--pm-rf-ct-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--pm-rf-ct-duration, 400ms) var(--pm-rf-ct-ease, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: opacity, transform;
}

.pm-rf-ct-unit.pm-rf-ct-in {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--pm-rf-ct-duration, 400ms) var(--pm-rf-ct-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--pm-rf-ct-duration, 400ms) var(--pm-rf-ct-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* After settle, helper strips prep/transient styles — keep unit class inert. */
.pm-rf-ct-unit:not(.pm-rf-ct-prep):not(.pm-rf-ct-in) {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .pm-rf-ct-unit.pm-rf-ct-prep,
  .pm-rf-ct-unit.pm-rf-ct-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}