/* ============================================================
   Pickpoint WMS — feature-page animated scenes
   (same visual language as the homepage warehouse tour)
   ============================================================ */

.fscene { padding: 0.4rem 0 1.6rem; }
/* Scenes sit on a framed panel with a floor rule, not loose on the page */
.fscene .container {
  background: var(--white);
  border: 1px solid var(--steel-200);
  border-bottom: 3px solid var(--steel-300);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 0.6rem 1.2rem 0;
}
.pains:has(+ .fscene) { padding-bottom: 0.8rem; }
.fscene__panel {
  padding: 1rem 1.2rem 0.5rem;
}
.fscene__panel svg { display: block; width: 100%; height: auto; }
.fscene__panel + .fscene__panel { margin-top: 1.2rem; }

/* Sweeping clock hand (storage accrual) */
.fs-clockhand { animation: fsClock 8s linear infinite; }
@keyframes fsClock {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Forklift-style run: out, pause, return */
.fs-go { animation: fsGo 9s ease-in-out infinite; }
@keyframes fsGo {
  0%, 6% { transform: translateX(0); }
  42% { transform: translateX(var(--fs-dx, 300px)); }
  52% { transform: translateX(var(--fs-dx, 300px)); }
  92%, 100% { transform: translateX(0); }
}
.fs-cargo { animation: fsCargo 9s linear infinite; }
@keyframes fsCargo {
  0%, 46% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.fs-pop { opacity: 0; animation: fsPop 9s linear infinite; }
@keyframes fsPop {
  0%, 46% { opacity: 0; }
  52%, 90% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* Scanner beam from the mobile app */
.fs-beam { animation: fsBeam 1.6s ease-in-out infinite; }
@keyframes fsBeam {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.55; }
}

/* Scan pulse ring */
.fs-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: fsRing 2.2s ease-out infinite;
}
@keyframes fsRing {
  0% { transform: scale(0.6); opacity: 0.9; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

/* Cycle-count highlight roaming rack slots */
.fs-slot { animation: fsSlot 14s linear infinite; }
@keyframes fsSlot {
  0%, 14% { transform: translate(0, 0); }
  16.6%, 31% { transform: translate(200px, 77px); }
  33.3%, 47% { transform: translate(400px, 152px); }
  50%, 64% { transform: translate(600px, 0); }
  66.6%, 81% { transform: translate(400px, 77px); }
  83.3%, 97% { transform: translate(200px, 152px); }
  100% { transform: translate(0, 0); }
}

/* People */
.fs-bob { animation: fsBob 0.6s ease-in-out infinite alternate; }
@keyframes fsBob {
  from { transform: translateY(0); }
  to { transform: translateY(-2.5px); }
}
.fs-walker { animation: fsWalk 9s ease-in-out infinite alternate; }
@keyframes fsWalk {
  0%, 6% { transform: translateX(0); }
  94%, 100% { transform: translateX(var(--fs-px, 300px)); }
}

/* Conveyor */
.fs-dash { animation: fsDashMove 1.1s linear infinite; }
@keyframes fsDashMove {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -22; }
}
.fs-belt { animation: fsBelt 6s linear infinite; }
.fs-belt--2 { animation-delay: 2s; }
.fs-belt--3 { animation-delay: 4s; }
@keyframes fsBelt {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(var(--fs-run, 330px)); opacity: 0; }
}

/* Truck: parked → departs → reverses back in */
.fs-truck { animation: fsTruck 12s ease-in-out infinite; }
@keyframes fsTruck {
  0%, 50% { transform: translateX(0); }
  64% { transform: translateX(320px); }
  86% { transform: translateX(320px); }
  98%, 100% { transform: translateX(0); }
}
.fs-twheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: fsTWheel 12s ease-in-out infinite;
}
@keyframes fsTWheel {
  0%, 50% { transform: rotate(0deg); }
  64% { transform: rotate(540deg); }
  86% { transform: rotate(540deg); }
  100% { transform: rotate(0deg); }
}

/* Billing: charge chips rising off the work */
.fs-chip { opacity: 0; animation: fsChip 6s ease-in infinite; }
@keyframes fsChip {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(-120px); opacity: 0; }
}

/* Rows / lines appearing in sequence (invoice, audit log, reports) */
.fs-appear { animation: fsAppear 8s linear infinite; }
@keyframes fsAppear {
  0% { opacity: 0; }
  8% { opacity: 1; }
  86% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

/* Progress bar filling (ASN receive checklist) */
.fs-fillbar {
  transform-box: fill-box;
  transform-origin: left center;
  animation: fsFill 8s linear infinite;
}
@keyframes fsFill {
  0% { transform: scaleX(0.06); }
  80% { transform: scaleX(1); }
  94% { transform: scaleX(1); }
  100% { transform: scaleX(0.06); }
}

/* Gentle emphasis pulse */
.fs-pulse { animation: fsPulseSoft 2.4s ease-in-out infinite; }
@keyframes fsPulseSoft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.fs-halo { animation: fsPulseSoft 2.6s ease-in-out infinite; }

/* Dashboard bars growing */
.fs-vbar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: fsVBar 5s ease-in-out infinite;
}
@keyframes fsVBar {
  0% { transform: scaleY(0.08); }
  35% { transform: scaleY(1); }
  85% { transform: scaleY(1); }
  100% { transform: scaleY(0.08); }
}

/* Charge chip falling into the capture funnel */
.fs-drop { opacity: 0; animation: fsTravel 4.5s ease-in infinite; }

/* Data dot travelling along a dotted link */
.fs-data { opacity: 0; animation: fsTravel 3.2s ease-in-out infinite; }
@keyframes fsTravel {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translate(var(--fs-tx, 100px), var(--fs-ty, 0)); opacity: 0; }
}

/* Sweeping security camera */
.fs-cam {
  transform-box: fill-box;
  transform-origin: 15% 50%;
  animation: fsCam 7s ease-in-out infinite alternate;
}
@keyframes fsCam {
  from { transform: rotate(-8deg); }
  to { transform: rotate(8deg); }
}
.fs-blink { animation: fsBlink 1.8s steps(1) infinite; }
@keyframes fsBlink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.15; }
}