/* El Frasco Vivo — running/pill-throwing animation.
   Geometry below is taken directly from the source character-animation rig
   (parts_run, a 572x600 running-pose sprite sheet cut into body/arm/leg layers).
   This same engine mounts into containers of very different sizes (a 76px nav
   strip, later a full section) — everything scales off the container's own
   height, driven by --ir-ground (how far up from the container's bottom edge
   the character's feet sit), set per-instance from JS. */

.ir-stage {
  position: absolute;
  inset: 0;
  overflow: visible; /* pills are allowed to fall past the container's own edge */
  pointer-events: none;
}

.ir-pills { position: absolute; inset: 0; }

/* Carries ONLY the horizontal travel, as a native (compositor-run) animation —
   see restartTravel() in intro-runner.js. Everything inside it (run-cycle wobble,
   squash/stretch, the throw) stays per-frame JS, but that's all small-amplitude
   motion; the one thing that reads as "laggy" when it stutters — the whole
   character's position sliding across the page — never touches the main thread.
   The default transform below (not JS-applied) parks the figure off-screen from
   the moment it exists in the DOM, so the browser decodes/paints it through its
   own normal image pipeline with nothing hidden behind opacity — there's no
   "reveal" moment for a first-time paint cost to land on. JS takes over via
   .animate() (which overrides this) once it's ready to start the run. */
.ir-travel { position: absolute; inset: 0; will-change: transform; transform: translateX(-160vw); }

.ir-shadow {
  position: absolute; left: 0; width: 150px; height: 16px;
  bottom: calc(var(--ir-ground, 54px) - 10px);
  margin-left: -75px; border-radius: 50%; background: #0a1120; opacity: 0.16;
  filter: blur(6px); will-change: transform;
}

.ir-fig {
  position: absolute; left: 0; width: 572px; height: 600px;
  bottom: var(--ir-ground, 54px);
  margin-left: -286px; transform-origin: 50% 100%; will-change: transform;
}
.ir-fig img{ position: absolute; display: block; will-change: transform; }
.ir-leg-l { left: 45px;  top: 450px; width: 192px; height: 150px; transform-origin: 167px 6px; }
.ir-leg-r { left: 326px; top: 441px; width: 185px; height: 129px; transform-origin: 24px 22px; }
.ir-arm-r { left: 417px; top: 264px; width: 155px; height: 148px; transform-origin: 13px 21px; }
.ir-arm-l { left: 0;     top: 165px; width: 166px; height: 150px; transform-origin: 162px 126px; }
.ir-body  { left: 150px; top: 1px;   width: 341px; height: 464px; }

.ir-pupil {
  position: absolute; width: 25px; height: 39px; border-radius: 50%; background: #17120c;
  will-change: transform;
}
.ir-pupil-l { left: 228px; top: 177px; }
.ir-pupil-r { left: 309px; top: 185px; width: 27px; height: 41px; }
.ir-glint { position: absolute; left: 4px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0.92; }

.ir-lidwrap {
  position: absolute; border-radius: 48%; overflow: hidden;
}
.ir-lidwrap-l { left: 205px; top: 138px; width: 57px; height: 89px; }
.ir-lidwrap-r { left: 289px; top: 144px; width: 69px; height: 99px; }
.ir-lid {
  position: absolute; left: -5px; right: -5px; top: 0; height: 0;
  background: #fff; border-bottom: 6px solid #17120c; box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .ir-stage { display: none !important; }
}