/* healthcare.css — bespoke hero motion layered on industry.css (loaded
   after it via the page's pageCss array; scope .p-industry--healthcare).
   Three sector-specific moves (Mauricio, 2026-08-07), all seam-correct
   (every loop starts at the settled pose):
     · the cross steps a quarter turn on incode-flow, rests 2s, repeats —
       the 90° symmetry makes each landing identical to the start
     · the pulse waveform throbs slightly from its baseline
     · the syringe works: the plunger presses toward the needle while the
       needle extends, both easing home once the push lands */

.p-industry--healthcare .hc-wave {
  transform-origin: 50% 100%;
  --ih-ambient: hc-wave 3.4s ease-in-out 2.4s infinite;
}
@keyframes hc-wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.07); }
}

.p-industry--healthcare .hc-plunger {
  --ih-ambient: hc-plunger 4.2s ease-in-out 3s infinite;
}
@keyframes hc-plunger {
  0%, 100% { transform: translateX(0); }
  16%, 26% { transform: translateX(-16px); } /* press, land */
  46% { transform: translateX(0); }          /* release; rest to 100% */
}
.p-industry--healthcare .hc-needle {
  transform-origin: 100% 50%; /* grows from the hub, leftward */
  --ih-ambient: hc-needle 4.2s ease-in-out 3s infinite;
}
@keyframes hc-needle {
  0%, 100% { transform: scaleX(1); }
  16%, 26% { transform: scaleX(1.67); } /* driven out by the T handle */
  46% { transform: scaleX(1); }
}

/* nested tags need the template's entrance+ambient dual declaration
   (the ih-drift precedent; ih-el / ih-none live in industry.css) */
.p-industry--healthcare .ih-hero__art svg .hc-wave,
.p-industry--healthcare .ih-hero__art svg .hc-plunger,
.p-industry--healthcare .ih-hero__art svg .hc-needle {
  transform-box: fill-box;
  animation:
    ih-el 0.55s var(--ease-out-expo, ease) var(--ih-el-delay, 0.12s) both,
    var(--ih-ambient, ih-none);
}
html[data-ih-skip] html[data-ih-skip] .p-industry--healthcare .ih-hero__art svg .hc-wave,
html[data-ih-skip] .p-industry--healthcare .ih-hero__art svg .hc-plunger,
html[data-ih-skip] .p-industry--healthcare .ih-hero__art svg .hc-needle {
  animation: var(--ih-ambient, ih-none);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .p-industry--healthcare .hc-wave,
  .p-industry--healthcare .hc-plunger,
  .p-industry--healthcare .hc-needle {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
