/* Grinding Advisor — the stencil man (Easter egg).
   His stage is the masthead: the layer fills the sticky site header and he
   crosses in front of the logo, the title and the Get Matched button.
   Pure decoration: aria-hidden, pointer-events none, never runs for
   reduced-motion visitors. */
/* perspective for the Get Matched flip — set on its parent so the button
   can turn around its own vertical axis (egg.js, morning show) */
.header-inner { perspective: 700px; }

.egg-layer {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 2;
}
.egg-man {
  position: absolute; left: 0; top: 0; width: 42px; height: 56px;
  --step: .34s;
  will-change: transform; visibility: hidden;
}
.egg-man.on { visibility: visible; }
/* he leans into his stride, like the sample — and keeps the lean
   whichever way he faces */
.egg-bob { width: 100%; height: 100%; transition: transform .35s ease; transform: rotate(2.5deg); transform-origin: 50% 100%; }
.egg-bob.flip { transform: scaleX(-1) rotate(2.5deg); }
.egg-man svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* stride is set from JS (--step) so the legs keep time with his velocity.
   Pivots are exact view-box points (hips, shoulders, handle), declared in
   the figure's own units — an engineer's audience checks the joints. */
.egg-man .leg, .egg-man .arm, .egg-man .hat, .egg-man .headg, .egg-man .prop {
  transform-box: view-box;
}
.egg-man .leg-a { transform-origin: 23.3px 44.3px; }
.egg-man .leg-b { transform-origin: 27.6px 44.3px; }
.egg-man .arm-f { transform-origin: 29.5px 31.5px; }
.egg-man .forearm { transform-box: view-box; transform-origin: 33px 38.2px; }
.egg-man .arm-b { transform-origin: 21.5px 31.5px; }
.egg-man .prop-case { transform-origin: 19px 46.2px; }
.egg-man .prop-box { transform-origin: 31px 38.5px; }
/* a carried case is a DRIVEN pendulum: same frequency as the arm and
   the stride (an earlier build ran it at half frequency — it drifted
   against the arm and read as floating), with a quarter-step lag */
.egg-man.walking .prop-case {
  animation: egg-sway var(--step) ease-in-out infinite alternate;
  animation-delay: calc(var(--step) * -.25);
}
@keyframes egg-sway { from { transform: rotate(5deg); } to { transform: rotate(-6deg); } }
.egg-man.walking .prop-box { animation: egg-boxsway var(--step) ease-in-out infinite alternate; }
@keyframes egg-boxsway { from { transform: rotate(1.6deg); } to { transform: rotate(-1.6deg); } }
.egg-man.walking .leg-a { animation: egg-step var(--step) ease-in-out infinite alternate; }
.egg-man.walking .leg-b { animation: egg-step var(--step) ease-in-out infinite alternate-reverse; }
/* cadence: the eye pairs the big case arm with the front leg, so those
   two counter-swing — an arm and the leg it reads as paired with never
   travel the same direction at the same time (Jobi 2026-10-22) */
.egg-man.walking .arm-b { animation: egg-swing var(--step) ease-in-out infinite alternate-reverse; }
.egg-man.walking .arm-f.free { animation: egg-swing var(--step) ease-in-out infinite alternate; }
.egg-man.walking .egg-bob { animation: egg-bob calc(var(--step) * .5) ease-in-out infinite alternate; }
@keyframes egg-step { from { transform: rotate(17deg); } to { transform: rotate(-17deg); } }
@keyframes egg-swing { from { transform: rotate(11deg); } to { transform: rotate(-11deg); } }
@keyframes egg-bob { from { margin-top: 0; } to { margin-top: -1.6px; } }

/* lunch bites are WAAPI-driven from egg.js (shoulder + elbow + a nod),
   spaced 3–6s apart — no CSS bite cycle lives here anymore */
.egg-man .headg { transform-origin: 25px 30px; }

/* 5pm: a proper hat tip on his way in */
.egg-man .hat { transform-origin: 26px 16.8px; transition: transform .45s ease; }
.egg-man.tip .hat { transform: rotate(-16deg) translateY(-2.5px); }

/* props ride with their scene only */
.egg-man .prop { display: none; }
.egg-man.scene-work .prop-case { display: block; }
.egg-man.scene-lunch .prop-wich { display: block; }
.egg-man.scene-home .prop-box { display: block; }

/* the morning commute spins the logo's needle (egg.js drives it with
   WAAPI; this only sets the pivot: the view-box center of the mark) */
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-mark .mark-spin { transform-box: view-box; transform-origin: center; }