/* ============================================================
   LAXMI KAPAT — effects.css
   One orchestrated motion moment: scroll reveal + stagger.
   Signature counters (stat-number) handled in animations.js.
   ============================================================ */

/* ── SCROLL REVEAL (base, used site-wide) ─────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.4, 0, .2, 1),
              transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }

/* ── STAGGER REVEAL ────────────────────────────────────────── */
.stagger-parent .stagger-child {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s cubic-bezier(.4, 0, .2, 1),
              transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}
.stagger-parent.visible .stagger-child { opacity: 1; transform: none; }
.stagger-parent.visible .stagger-child:nth-child(1) { transition-delay: .05s; }
.stagger-parent.visible .stagger-child:nth-child(2) { transition-delay: .13s; }
.stagger-parent.visible .stagger-child:nth-child(3) { transition-delay: .21s; }
.stagger-parent.visible .stagger-child:nth-child(4) { transition-delay: .29s; }
.stagger-parent.visible .stagger-child:nth-child(5) { transition-delay: .37s; }
.stagger-parent.visible .stagger-child:nth-child(6) { transition-delay: .45s; }

/* ── SUPPLY LINE CONNECTOR DRAW-IN ─────────────────────────── */
.supply-connector {
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.supply-line-section:not(.is-drawn) .supply-connector { transform: scaleX(0); }
.supply-line-section.is-drawn .supply-connector { transform: scaleX(1); }

/* ── DOOR / SPEC-PLATE HOVER LIFT ──────────────────────────── */
.door, .spec-plate, .case-row {
  transition: transform var(--transition), border-color var(--transition);
}

/* ── NUMBER COUNTERS ───────────────────────────────────────── */
.stat-number { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger-parent .stagger-child,
  .supply-connector {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
