/* ==========================================================================
   MACROS. — the lifter: walk-on, grab, drag the form into view
   Phases live on [data-phase] of .auth-stage.
   ========================================================================== */

.auth-stage{display:flex;align-items:flex-end;justify-content:center;gap:0;
  width:max-content;max-width:96vw;margin-inline:auto;position:relative}

.lifter-wrap{flex:0 0 auto;width:clamp(190px,23vw,290px);margin-right:-46px;
  margin-bottom:-6px;position:relative;z-index:3;pointer-events:none}
.lifter{width:100%;height:auto;display:block;overflow:visible}

/* the card starts off to the right; he drags it in */
.auth-stage .authx{transform:translateX(90px) scale(.94);opacity:0;
  transition:transform 1s var(--ease),opacity .7s var(--ease)}
.auth-stage .authx.shown{transform:none;opacity:1}

/* ---------------------------------------------------------------- joints --- */
/* SVG transform-origin defaults to the user-space origin (0,0), not the shape's
   own centre — so every animated part needs its pivot naming explicitly. */
.l-body{transform-origin:130px 400px}
.l-mouth{transform-origin:133px 126px}
.l-mark{transform-origin:127px 205px}
.l-shadow{transform-origin:130px 404px}
.l-armF{transform-origin:156px 166px}
.l-armB{transform-origin:104px 168px}
.l-legF{transform-origin:146px 258px}
.l-legB{transform-origin:116px 258px}
.l-head{transform-origin:132px 130px}
.l-torso{transform-origin:130px 240px}
.l-shades{transform-origin:132px 104px}
.l-eyes{opacity:0}
.l-armF,.l-armB,.l-legF,.l-legB,.l-head,.l-torso,.l-body,.l-shades,.l-mouth{
  transition:transform .5s var(--ease)}

/* =============================================================== 1 · WALK == */
[data-phase="walk"] .lifter-wrap{animation:walkOn 1.5s cubic-bezier(.34,.02,.36,1) both}
@keyframes walkOn{from{transform:translateX(-190%)}to{transform:translateX(0)}}
[data-phase="walk"] .l-body  {animation:bob .42s ease-in-out infinite}
[data-phase="walk"] .l-legF  {animation:stepF .84s ease-in-out infinite}
[data-phase="walk"] .l-legB  {animation:stepB .84s ease-in-out infinite}
[data-phase="walk"] .l-armF  {animation:swingF .84s ease-in-out infinite}
[data-phase="walk"] .l-armB  {animation:swingB .84s ease-in-out infinite}
[data-phase="walk"] .l-head  {animation:headBob .84s ease-in-out infinite}
@keyframes bob     {0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes stepF   {0%,100%{transform:rotate(24deg)}50%{transform:rotate(-22deg)}}
@keyframes stepB   {0%,100%{transform:rotate(-22deg)}50%{transform:rotate(24deg)}}
@keyframes swingF  {0%,100%{transform:rotate(-26deg)}50%{transform:rotate(24deg)}}
@keyframes swingB  {0%,100%{transform:rotate(24deg)}50%{transform:rotate(-26deg)}}
@keyframes headBob {0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* ============================================================== 2 · REACH == */
/* he plants, leans forward and stretches for the edge of the card */
[data-phase="reach"] .l-body {transform:translateX(10px) rotate(5deg)}
[data-phase="reach"] .l-armF {transform:rotate(-64deg)}
[data-phase="reach"] .l-armB {transform:rotate(16deg)}
[data-phase="reach"] .l-legF {transform:rotate(15deg)}
[data-phase="reach"] .l-legB {transform:rotate(-13deg)}
[data-phase="reach"] .l-head {transform:rotate(7deg)}
[data-phase="reach"] .l-mouth{transform:scaleY(1.5)}

/* =============================================================== 3 · PULL == */
/* weight goes back onto the heels, both arms haul the card across */
[data-phase="pull"] .l-body {transform:translateX(-16px) rotate(-11deg);
  transition:transform .95s cubic-bezier(.2,.9,.3,1)}
[data-phase="pull"] .l-armF {transform:rotate(-40deg);transition:transform .95s var(--ease)}
[data-phase="pull"] .l-armB {transform:rotate(-24deg);transition:transform .95s var(--ease)}
[data-phase="pull"] .l-legF {transform:rotate(-22deg)}
[data-phase="pull"] .l-legB {transform:rotate(20deg)}
[data-phase="pull"] .l-head {transform:rotate(-9deg)}
[data-phase="pull"] .l-torso{transform:scaleY(.97)}
[data-phase="pull"] .l-mouth{transform:scaleY(1.9) translateY(-1px)}

/* =============================================================== 4 · IDLE == */
[data-phase="idle"] .l-body {animation:breathe 3.4s ease-in-out infinite}
[data-phase="idle"] .l-armF {transform:rotate(-8deg);animation:armIdle 3.4s ease-in-out infinite}
[data-phase="idle"] .l-armB {transform:rotate(6deg)}
[data-phase="idle"] .l-head {animation:headIdle 5.5s ease-in-out infinite}
@keyframes breathe {0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.012)}}
@keyframes armIdle {0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-3deg)}}
@keyframes headIdle{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-5deg)}96%{transform:rotate(4deg)}}

/* =============================================================== 5 · HIDE == */
/* your code is private, so he turns away and claps a hand over the shades */
[data-phase="hide"] .l-armF {transform:rotate(-128deg) translateX(6px)}
[data-phase="hide"] .l-armB {transform:rotate(-116deg)}
[data-phase="hide"] .l-head {transform:rotate(-15deg) translateX(-5px)}
[data-phase="hide"] .l-body {transform:translateX(-8px)}
[data-phase="hide"] .l-mouth{transform:scaleX(.6) translateX(6px)}

/* =============================================================== 6 · PEEK == */
/* one hand drops, shades lift, he sneaks a look */
[data-phase="peek"] .l-armF  {transform:rotate(-118deg)}
[data-phase="peek"] .l-armB  {transform:rotate(4deg)}
[data-phase="peek"] .l-shades{transform:translateY(-13px) rotate(-9deg)}
[data-phase="peek"] .l-eyes  {opacity:1}
[data-phase="peek"] .l-head  {transform:rotate(6deg)}

/* ============================================================== 7 · CHEER == */
[data-phase="cheer"] .l-body{animation:jump .62s var(--ease) 2}
[data-phase="cheer"] .l-armF{transform:rotate(-158deg)}
[data-phase="cheer"] .l-armB{transform:rotate(150deg)}
[data-phase="cheer"] .l-legF{transform:rotate(-14deg)}
[data-phase="cheer"] .l-legB{transform:rotate(14deg)}
[data-phase="cheer"] .l-mouth{transform:scaleY(2.2) translateY(-2px)}
[data-phase="cheer"] .l-shadow{animation:shrink .62s var(--ease) 2}
@keyframes jump  {0%,100%{transform:translateY(0)}42%{transform:translateY(-42px)}}
@keyframes shrink{0%,100%{transform:scale(1);opacity:.38}42%{transform:scale(.62);opacity:.16}}

/* ============================================================ RESPONSIVE == */
@media (max-width:900px){
  .auth-stage{flex-direction:column;align-items:center;gap:0}
  .lifter-wrap{width:165px;margin:0 0 -30px 0;order:-1;align-self:flex-start;margin-left:4vw}
  .auth-stage .authx{transform:translateY(40px) scale(.96)}
  .auth-stage .authx.shown{transform:none}
  [data-phase="walk"] .lifter-wrap{animation:walkOnSm 1.5s cubic-bezier(.34,.02,.36,1) both}
  @keyframes walkOnSm{from{transform:translateX(-160%)}to{transform:translateX(0)}}
}
@media (max-width:520px){
  .lifter-wrap{width:118px;margin-bottom:-20px}
}
@media (prefers-reduced-motion:reduce){
  .lifter-wrap{animation:none!important}
  .l-body,.l-armF,.l-armB,.l-legF,.l-legB,.l-head{animation:none!important}
  .auth-stage .authx{transform:none!important;opacity:1!important}
}