/* ============================================================
   pips.css — pixel-art mascot animations (16×16 pip SVGs)
   Extracted from components.css 2026-05-09 (auth-redesign Phase 1).

   Selectors are keyed on `.pip-cell` (parent-class neutral) so the
   same rules drive sidebar pips AND auth-page pips. Sidebar adds
   the `sb-pip-cell` class for layout-specific styles (lift on
   hover, grid placement) — those rules live in components.css.

   Sport color hues come via `currentColor`: `.pip-cell.sb-pip-swim`
   sets `color: #5A9CE0`, `.pip-cell.sb-pip-bike` sets `#F2A557`,
   `.pip-cell.sb-pip-run` sets `#6FCFA3`. Tokens flatten to graphite
   in the rest of the system, so the hues are pinned here.

   `transform-box: fill-box` on every animatable <g> so transforms
   originate from the element's own bbox. Wheels need the nested-
   group trick because CSS transform replaces the SVG transform attr.
   ============================================================ */

@layer components {

  /* Sport color hues — apply in any context where a pip cell is rendered */
  .pip-cell.sb-pip-swim { color: #5A9CE0; }   /* swim — blue  */
  .pip-cell.sb-pip-bike { color: #F2A557; }   /* bike — amber */
  .pip-cell.sb-pip-run  { color: #6FCFA3; }   /* run  — mint  */

  .pip-cell .pip {
    width: 100%; height: 100%;
    shape-rendering: crispEdges;
    image-rendering: pixelated;
    overflow: visible;
  }
  .pip-cell .pip rect.skin { fill: currentColor; }
  .pip-cell .pip rect.eye  { fill: #16181A; }
  .pip-cell .pip g { transform-box: fill-box; }
  .pip-cell .pip .wheel-back,
  .pip-cell .pip .wheel-front { transform-origin: center; }

  /* ── RUN ─────────────────────────────────────────────────── */
  .pip-cell .run-pip .body      { animation: pipBodyBobIdle 0.9s steps(2) infinite; }
  .pip-cell .run-pip .leg-back  { animation: pipLegBackIdle 0.9s steps(2) infinite; }
  .pip-cell .run-pip .leg-front { animation: pipLegFrontIdle 0.9s steps(2) infinite; }
  .pip-cell .run-pip .arm-back  { animation: pipArmBackIdle 0.9s steps(2) infinite; }
  .pip-cell .run-pip .arm-front { animation: pipArmFrontIdle 0.9s steps(2) infinite; }

  .pip-cell.sb-pip-run:hover .run-pip,
  .pip-cell.sb-pip-run.pip-active .run-pip            { animation: pipForwardSway 1.5s ease-in-out infinite alternate; }
  .pip-cell.sb-pip-run:hover .run-pip .body,
  .pip-cell.sb-pip-run.pip-active .run-pip .body      { animation: pipBodyBobRun 0.4s steps(4) infinite; }
  .pip-cell.sb-pip-run:hover .run-pip .leg-back,
  .pip-cell.sb-pip-run.pip-active .run-pip .leg-back  { animation: pipLegBackRun 0.4s steps(4) infinite; }
  .pip-cell.sb-pip-run:hover .run-pip .leg-front,
  .pip-cell.sb-pip-run.pip-active .run-pip .leg-front { animation: pipLegFrontRun 0.4s steps(4) infinite; }
  .pip-cell.sb-pip-run:hover .run-pip .arm-back,
  .pip-cell.sb-pip-run.pip-active .run-pip .arm-back  { animation: pipArmBackRun 0.4s steps(4) infinite; }
  .pip-cell.sb-pip-run:hover .run-pip .arm-front,
  .pip-cell.sb-pip-run.pip-active .run-pip .arm-front { animation: pipArmFrontRun 0.4s steps(4) infinite; }

  @keyframes pipBodyBobIdle  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
  @keyframes pipLegBackIdle  { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -1px); } }
  @keyframes pipLegFrontIdle { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -1px); } }
  @keyframes pipArmBackIdle  { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -1px); } }
  @keyframes pipArmFrontIdle { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0,  1px); } }
  @keyframes pipBodyBobRun {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-1px); }
    50%  { transform: translateY(-2px); }
    75%  { transform: translateY(-1px); }
  }
  @keyframes pipLegBackRun {
    0%   { transform: translate(-1px, 0); }
    25%  { transform: translate(0, -1px); }
    50%  { transform: translate(1px, 0); }
    75%  { transform: translate(0, -2px); }
  }
  @keyframes pipLegFrontRun {
    0%   { transform: translate(1px, 0); }
    25%  { transform: translate(0, -2px); }
    50%  { transform: translate(-1px, 0); }
    75%  { transform: translate(0, -1px); }
  }
  @keyframes pipArmBackRun {
    0%   { transform: translate(1px, -1px); }
    25%  { transform: translate(0, 1px); }
    50%  { transform: translate(-1px, -1px); }
    75%  { transform: translate(0, 1px); }
  }
  @keyframes pipArmFrontRun {
    0%   { transform: translate(-1px, -1px); }
    25%  { transform: translate(0, 1px); }
    50%  { transform: translate(1px, -1px); }
    75%  { transform: translate(0, 1px); }
  }
  @keyframes pipForwardSway {
    0%   { transform: translateX(-3px); }
    100% { transform: translateX(3px); }
  }

  /* ── BIKE ────────────────────────────────────────────────── */
  .pip-cell .bike-pip .wheel-back,
  .pip-cell .bike-pip .wheel-front { animation: pipWheelIdle 1.4s linear infinite; }
  .pip-cell .bike-pip .leg-back    { animation: pipPedalBackIdle 1.4s steps(4) infinite; }
  .pip-cell .bike-pip .leg-front   { animation: pipPedalFrontIdle 1.4s steps(4) infinite; }
  .pip-cell .bike-pip .rider       { animation: pipRideBobIdle 1.4s steps(2) infinite; }

  .pip-cell.sb-pip-bike:hover .bike-pip,
  .pip-cell.sb-pip-bike.pip-active .bike-pip                 { animation: pipForwardSway 1.5s ease-in-out infinite alternate; }
  .pip-cell.sb-pip-bike:hover .bike-pip .wheel-back,
  .pip-cell.sb-pip-bike:hover .bike-pip .wheel-front,
  .pip-cell.sb-pip-bike.pip-active .bike-pip .wheel-back,
  .pip-cell.sb-pip-bike.pip-active .bike-pip .wheel-front    { animation: pipWheelSpin 0.4s steps(8) infinite; }
  .pip-cell.sb-pip-bike:hover .bike-pip .leg-back,
  .pip-cell.sb-pip-bike.pip-active .bike-pip .leg-back       { animation: pipPedalBack 0.4s steps(4) infinite; }
  .pip-cell.sb-pip-bike:hover .bike-pip .leg-front,
  .pip-cell.sb-pip-bike.pip-active .bike-pip .leg-front      { animation: pipPedalFront 0.4s steps(4) infinite; }
  .pip-cell.sb-pip-bike:hover .bike-pip .rider,
  .pip-cell.sb-pip-bike.pip-active .bike-pip .rider          { animation: pipRideBob 0.4s steps(4) infinite; }

  @keyframes pipWheelIdle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes pipWheelSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes pipPedalBackIdle {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-1px, 0); }
    50%  { transform: translate(0, -1px); }
    75%  { transform: translate(1px, 0); }
  }
  @keyframes pipPedalFrontIdle {
    0%   { transform: translate(0, -1px); }
    25%  { transform: translate(1px, 0); }
    50%  { transform: translate(0, 0); }
    75%  { transform: translate(-1px, 0); }
  }
  @keyframes pipPedalBack {
    0%   { transform: translate(0, 1px); }
    25%  { transform: translate(-2px, 0); }
    50%  { transform: translate(0, -2px); }
    75%  { transform: translate(2px, 0); }
  }
  @keyframes pipPedalFront {
    0%   { transform: translate(0, -2px); }
    25%  { transform: translate(2px, 0); }
    50%  { transform: translate(0, 1px); }
    75%  { transform: translate(-2px, 0); }
  }
  @keyframes pipRideBobIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
  @keyframes pipRideBob {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-1px); }
    50%  { transform: translateY(0); }
    75%  { transform: translateY(-1px); }
  }

  /* ── SWIM ────────────────────────────────────────────────── */
  .pip-cell .swim-pip .body      { animation: pipSwimBobIdle 1.4s ease-in-out infinite; }
  .pip-cell .swim-pip .arm-front { animation: pipStrokeFrontIdle 1.4s steps(2) infinite; }
  .pip-cell .swim-pip .arm-back  { animation: pipStrokeBackIdle 1.4s steps(2) infinite; }
  .pip-cell .swim-pip .leg-back  { animation: pipKickBackIdle 1.4s steps(2) infinite; }
  .pip-cell .swim-pip .leg-front { animation: pipKickFrontIdle 1.4s steps(2) infinite; }
  .pip-cell .swim-pip .splash    { opacity: 0.35; animation: pipSplashIdle 1.4s steps(2) infinite; }

  .pip-cell.sb-pip-swim:hover .swim-pip,
  .pip-cell.sb-pip-swim.pip-active .swim-pip            { animation: pipForwardSway 1.5s ease-in-out infinite alternate; }
  .pip-cell.sb-pip-swim:hover .swim-pip .arm-front,
  .pip-cell.sb-pip-swim.pip-active .swim-pip .arm-front { animation: pipStrokeFront 0.6s steps(4) infinite; }
  .pip-cell.sb-pip-swim:hover .swim-pip .arm-back,
  .pip-cell.sb-pip-swim.pip-active .swim-pip .arm-back  { animation: pipStrokeBack 0.6s steps(4) infinite; }
  .pip-cell.sb-pip-swim:hover .swim-pip .leg-back,
  .pip-cell.sb-pip-swim.pip-active .swim-pip .leg-back  { animation: pipKickBack 0.18s steps(2) infinite; }
  .pip-cell.sb-pip-swim:hover .swim-pip .leg-front,
  .pip-cell.sb-pip-swim.pip-active .swim-pip .leg-front { animation: pipKickFront 0.18s steps(2) infinite; }
  .pip-cell.sb-pip-swim:hover .swim-pip .splash,
  .pip-cell.sb-pip-swim.pip-active .swim-pip .splash    { animation: pipSplash 0.4s steps(4) infinite; }

  @keyframes pipSwimBobIdle    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
  @keyframes pipStrokeFrontIdle { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -1px); } }
  @keyframes pipStrokeBackIdle  { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0,  1px); } }
  @keyframes pipKickBackIdle    { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -1px); } }
  @keyframes pipKickFrontIdle   { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0,  1px); } }
  @keyframes pipSplashIdle      { 0%, 100% { opacity: 0.3; transform: translate(0, 0); } 50% { opacity: 0.5; transform: translate(0, -1px); } }
  @keyframes pipStrokeFront {
    0%   { transform: translate(0, -2px); }
    25%  { transform: translate(1px, 0); }
    50%  { transform: translate(0, 2px); }
    75%  { transform: translate(-1px, 0); }
  }
  @keyframes pipStrokeBack {
    0%   { transform: translate(0, 2px); }
    25%  { transform: translate(-1px, 0); }
    50%  { transform: translate(0, -2px); }
    75%  { transform: translate(1px, 0); }
  }
  @keyframes pipKickBack  { 0%, 100% { transform: translate(0, -1px); } 50% { transform: translate(1px, 1px); } }
  @keyframes pipKickFront { 0%, 100% { transform: translate(0,  1px); } 50% { transform: translate(1px, -1px); } }
  @keyframes pipSplash {
    0%   { opacity: 0;   transform: translate(0, 0); }
    25%  { opacity: 1;   transform: translate(0, -1px); }
    50%  { opacity: 0.7; transform: translate(1px, -2px); }
    75%  { opacity: 0;   transform: translate(2px, -1px); }
  }

  /* Respect users who ask the OS to reduce motion */
  @media (prefers-reduced-motion: reduce) {
    .pip-cell .pip *,
    .pip-cell:hover .pip *,
    .pip-cell.pip-active .pip * { animation: none !important; }
  }

} /* end @layer components */