/**
 * RepairFlow Content Transition — Demo Variant 2 "Staggered Cards"
 * Mirrors frontend/public/labs/content-transition-demo.css [data-variant="staggered"]
 *
 * Demo model:
 *   unit without .is-in  → opacity 0 + translateY(offset)
 *   unit with .is-in     → opacity 1 + translateY(0)
 *
 * 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;
}

/* Armed / waiting — same visual as demo cards before is-in.
 * !important beats legacy panel/list opacity:1 rules that cancelled the stagger. */
.pm-lab--full-repairflow .pm-rf-ct-unit.pm-rf-ct-prep,
.pm-lab--full-repairflow .pm-rf-ct-unit:not(.pm-rf-ct-in),
.pm-lab--main-page-demo .pm-rf-ct-unit.pm-rf-ct-prep,
.pm-lab--main-page-demo .pm-rf-ct-unit:not(.pm-rf-ct-in) {
  opacity: 0 !important;
  transform: translateY(var(--pm-rf-ct-y, 18px)) !important;
  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)) !important;
  will-change: opacity, transform;
}

/* Demo is-in — the only visible entry motion */
.pm-lab--full-repairflow .pm-rf-ct-unit.pm-rf-ct-in,
.pm-lab--main-page-demo .pm-rf-ct-unit.pm-rf-ct-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  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)) !important;
  will-change: opacity, transform;
}

/* When stagger owns the enter panel, suppress legacy panel-level fade reveal */
.pm-lab--full-repairflow .pm-lab-content-stage > .repair-flow-panel.is-frf-content-reveal.is-active[data-pm-rf-ct-scope="staggered"],
.pm-lab--main-page-demo .pm-lab-content-stage > .repair-flow-panel.is-frf-content-reveal.is-active[data-pm-rf-ct-scope="staggered"] {
  opacity: 1;
  transition: none;
}

/*
 * FOUC guard: candidate content must not paint final-visible before .pm-rf-ct-in.
 * Layout box remains (no display:none) so shell geometry stays measurable.
 */
.pm-lab--full-repairflow [data-lab-content-panel="repair"]:is(.is-active, .is-entering) .repair-compact-row:not(.pm-rf-ct-in),
.pm-lab--full-repairflow [data-lab-content-panel="repair"]:is(.is-active, .is-entering) .special-repair-card:not(.pm-rf-ct-in),
.pm-lab--full-repairflow [data-lab-content-panel="repair-overflow"]:is(.is-active, .is-entering) .repair-compact-row:not(.pm-rf-ct-in),
.pm-lab--full-repairflow [data-lab-content-panel="price"]:is(.is-active, .is-entering) .repair-flow-price-card:not(.pm-rf-ct-in),
.pm-lab--full-repairflow [data-lab-content-panel="price"]:is(.is-active, .is-entering) .pm-frf-action-row:not(.pm-rf-ct-in),
.pm-lab--full-repairflow [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .channel-choice-card:not(.pm-rf-ct-in),
.pm-lab--main-page-demo [data-lab-content-panel="repair"]:is(.is-active, .is-entering) .repair-compact-row:not(.pm-rf-ct-in),
.pm-lab--main-page-demo [data-lab-content-panel="repair"]:is(.is-active, .is-entering) .special-repair-card:not(.pm-rf-ct-in),
.pm-lab--main-page-demo [data-lab-content-panel="price"]:is(.is-active, .is-entering) .repair-flow-price-card:not(.pm-rf-ct-in),
.pm-lab--main-page-demo [data-lab-content-panel="price"]:is(.is-active, .is-entering) .pm-frf-action-row:not(.pm-rf-ct-in) {
  opacity: 0 !important;
  transform: translateY(var(--pm-rf-ct-y, 18px)) !important;
}

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