/* ───────────────────────────────  THE CAT  ────────────────────────────────
   A paw lives behind the primary button. Come near the button, or press it,
   and the paw shoots out from behind it, swats at the cursor, and withdraws.
   Modelled on the cat on rive.app, rebuilt for this page.

   How the illusion works: the anchor sits at the button's centre and rotates
   so its +X axis points at the cursor. Inside it, a clipping window opens
   only towards +X, and the paw slides inside that window. The window's cut
   edge passes through the button's centre, and the button paints above it,
   so the arm always appears to come out from UNDER the button, whatever the
   angle, and never pokes out of its far side.

   Only transform and filter animate. The paw is decoration, so reduced
   motion removes it entirely rather than calming it down.
   ─────────────────────────────────────────────────────────────────────────── */

.paw-stage { position: relative; }

/* the button paints above its cat. .btn already has position from its own
   rules; the z-index is all this adds. */
.paw-host { position: relative; z-index: 1; }

.paw {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;

  /* comic skin: one flat fill, one line colour, one bean, one claw. The
     LIGHT GREY cat is the v15 default, drawn from the clawed examples on
     the reference sheet; the old cats stay switchable on data-skin. */
  --paw-fill: #A2A5AB;
  --paw-edge: #26262B;
  /* the sole is charcoal, not rose: on a white button a pink underside read
     as a different animal. Dark grey keeps both sides the same cat. */
  --paw-bean: #43464E;
  --paw-beanEdge: #2C2E34;
  --paw-claw: #F4F5F7;
}

.paw[data-skin="snow"] {
  --paw-fill: #F6F7F9;
  --paw-edge: #2B2B31;
}

.paw[data-skin="smoke"] {
  --paw-fill: #8F8F98;
  --paw-edge: #26262C;
}

.paw[data-skin="shadow"] {
  --paw-fill: #1B1B20;
  --paw-edge: #9A9AA4;
  --paw-claw: #E3E4E9;
}

/* the edge variant strikes from the border of the screen instead of from
   behind a button. Same anatomy, fixed to the viewport. */
.paw--edge {
  position: fixed;
  z-index: 9990;
}

/* the clipping window. Opens towards +X only; anything of the paw at
   negative X, which is the side the button or the screen edge is on, is cut
   off cleanly, and the button or the edge hides the cut. */
.paw__win {
  position: absolute;
  left: 0;
  top: -70px;
  width: 380px;
  height: 140px;
  overflow: hidden;
}

.paw__slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 380px;
  height: 140px;
  transform: translateX(-380px);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55));
  /* promoted permanently, not per strike: toggling will-change from JS made
     the compositor build the layer at strike time, and on fast passes that
     first paint flashed as a light rectangle beside the button */
  will-change: transform;
}

.paw__art { display: block; width: 100%; height: 100%; }

/* the hand rotates around the wrist for the swat */
.paw__hand {
  transform-box: fill-box;
  transform-origin: 14% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .paw { display: none; }
}

/* while the paw lies ON the button (the feel, the grip), it paints above it */
.paw--above { z-index: 2; }

/* the forearm folds around the elbow knuckle at (152,71): the left edge of
   its own box, halfway up. One direction only - that is what makes it an
   elbow and not a hinge - and js/paw.js only ever asks for that direction. */
.paw__fore { transform-box: fill-box; transform-origin: 0% 50%; }

/* each claw extends out of its own base, hidden under its toe */
.paw__c { transform-box: fill-box; transform-origin: 0% 50%; }