/* /use-cases/employee-onboarding/ — page-specific rules on top of the
   shared solution.css sheet (loaded first via Layout's pageCss array).

   The only page-specific need: re-keying the four-step phone motion.
   solution.css keys each screen's animated layers to ITS customer-
   onboarding deck slot (selfie capture = slot 0, ID capture = slot 1).
   This page's bespoke flow-stage seats them differently — the ID screen
   sits at deck slot 0, and the selfie capture rides INSIDE the step-02
   WorkforceSession phone (no deck slot at all) — so the shared rules
   never fire here. The rules below replay the exact same sequences
   (reusing solution.css's co-* keyframes) against this page's seats. */

/* step 01 "Identity verification" — the license card rides up on
   incode-flow behind the dark scene, lit only inside the capture frame
   (dual-copy light mask), then the frame settles on success green.
   Identical to customer-onboarding's "Validate the document", re-keyed
   from slot 1 to slot 0. */
.p-solution--employee-onboarding svg[data-sol-screen="0"].is-active .idc-card,
.p-solution--employee-onboarding svg[data-sol-screen="0"].is-active .idc-card-lit {
  animation: co-card-in 1.5s cubic-bezier(0.85, 0, 0.25, 1) 0.25s both;
}
.p-solution--employee-onboarding svg[data-sol-screen="0"].is-active .idc-frame path {
  animation: co-frame-success 0.5s ease 1.75s both;
}

/* step 02 "Biometric re-authentication" — the employee's live selfie in
   the session phone: the blue scan ring orbits the face, the caption
   crossfades "Align your face…" → "Get ready…", and the ring settles on
   success green. Identical to customer-onboarding's "Capture", keyed to
   the session stage going active (the svg is slotted into the phone,
   not a deck screen, so it carries no data-sol-screen of its own). */
.p-solution--employee-onboarding .wfs-phone .s3-ring-scan {
  display: inline;
  transform-box: fill-box;
  transform-origin: center;
  animation: co-ring-scan 2.4s linear infinite;
}
.p-solution--employee-onboarding .wfs-stage--step.is-active .s3-caption {
  animation: co-cap-out 0.4s ease 1.6s both;
}
.p-solution--employee-onboarding .wfs-stage--step.is-active .s3-caption-ready {
  display: inline;
  /* one timeline: in (0.5s) · hold (1.5s) · out (0.5s) = 2.5s from 1.9s */
  animation: co-cap-ready 2.5s ease 1.9s both;
}
.p-solution--employee-onboarding .wfs-stage--step.is-active .s3-scan-stop {
  animation: co-scan-success 0.6s ease 3.9s both;
}

@media (prefers-reduced-motion: reduce) {
  .p-solution--employee-onboarding svg[data-sol-screen="0"].is-active .idc-card,
  .p-solution--employee-onboarding svg[data-sol-screen="0"].is-active .idc-card-lit,
  .p-solution--employee-onboarding svg[data-sol-screen="0"].is-active .idc-frame path,
  .p-solution--employee-onboarding .wfs-phone .s3-ring-scan,
  .p-solution--employee-onboarding .wfs-stage--step.is-active .s3-caption,
  .p-solution--employee-onboarding .wfs-stage--step.is-active .s3-scan-stop {
    animation: none;
  }
  /* static state keeps "Align your face…" + the plain blue ring
     (mirrors solution.css's reduced-motion block) */
  .p-solution--employee-onboarding .wfs-stage--step.is-active .s3-caption-ready {
    display: none;
  }
}