/* ==========================================================================
   LB REACTIVE NAV ICONS  (?v=nav1)
   Inline-SVG part animations for the sidebar .sb-nav and mobile #botnav.
   Motion contract: transform/opacity only, every run <=520ms,
   spring cubic-bezier(.34,1.56,.64,1) or tighter, all off under
   prefers-reduced-motion. Colour comes from app.css (.sb-ico svg /
   .bn-ico svg currentColor rules) — nothing here touches colour.
   ========================================================================== */

.lb-i{overflow:visible}
/* botnav imgs were 25px with baked-in padding; the handmade set is
   edge-to-edge, so 22px matches the old visual weight for all four. */
.botnav .bn-ico svg.lb-i{width:22px;height:22px}

/* ---------- battles: the clash (ported from swords-animated.html) -------- */
.lb-i-swords .sw-a,
.lb-i-swords .sw-b{transform-box:view-box}
.lb-i-swords .sw-a{transform-origin:18px 18.2px}   /* grip, bottom-right */
.lb-i-swords .sw-b{transform-origin:5.5px 18.7px}  /* grip, bottom-left  */
:is(.sb-nav,.botnav) button:is(:hover,:focus-visible,:active) .lb-i-swords .sw-a{
  animation:lbnav-clash-a .52s cubic-bezier(.36,.07,.19,.97) both}
:is(.sb-nav,.botnav) button:is(:hover,:focus-visible,:active) .lb-i-swords .sw-b{
  animation:lbnav-clash-b .52s cubic-bezier(.36,.07,.19,.97) both}
@keyframes lbnav-clash-a{
  0%{transform:rotate(0deg)}
  28%{transform:rotate(-9deg)}    /* blades swing apart */
  52%{transform:rotate(5deg)}     /* strike through */
  72%{transform:rotate(-2.2deg)}
  88%{transform:rotate(.9deg)}    /* ring-out shake */
  100%{transform:rotate(0deg)}}
@keyframes lbnav-clash-b{
  0%{transform:rotate(0deg)}
  28%{transform:rotate(9deg)}
  52%{transform:rotate(-5deg)}
  72%{transform:rotate(2.2deg)}
  88%{transform:rotate(-.9deg)}
  100%{transform:rotate(0deg)}}

/* ---------- packs: cards fan from bottom-center ------------------------- */
.lb-i-packs path{transform-box:fill-box;transform-origin:50% 100%;
  transition:transform .34s cubic-bezier(.34,1.56,.64,1)}
:is(.sb-nav,.botnav) button:is(:hover,:focus-visible,:active) .lb-i-packs .i-card-f{transform:rotate(8deg)}
:is(.sb-nav,.botnav) button:is(:hover,:focus-visible,:active) .lb-i-packs .i-card-b{transform:rotate(-6deg)}

/* ---------- rewards: lid lifts, bows flutter ---------------------------- */
.lb-i-gift .i-lidgrp{transform-box:fill-box;transform-origin:50% 100%;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.lb-i-gift .i-bow-l{transform-box:fill-box;transform-origin:100% 100%}
.lb-i-gift .i-bow-r{transform-box:fill-box;transform-origin:0 100%}
.sb-nav button:is(:hover,:focus-visible) .lb-i-gift .i-lidgrp{transform:translateY(-2px) rotate(-4deg)}
.sb-nav button:is(:hover,:focus-visible) .lb-i-gift .i-bow-l{animation:lbnav-flut-l .46s cubic-bezier(.34,1.56,.64,1) both}
.sb-nav button:is(:hover,:focus-visible) .lb-i-gift .i-bow-r{animation:lbnav-flut-r .46s cubic-bezier(.34,1.56,.64,1) both}
@keyframes lbnav-flut-l{0%{transform:rotate(0)}30%{transform:rotate(-10deg)}65%{transform:rotate(6deg)}100%{transform:rotate(0)}}
@keyframes lbnav-flut-r{0%{transform:rotate(0)}30%{transform:rotate(10deg)}65%{transform:rotate(-6deg)}100%{transform:rotate(0)}}

/* ---------- items/cart: wheel wiggle, body tips ------------------------- */
.lb-i-cart .i-body{transform-box:fill-box;transform-origin:50% 90%;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.lb-i-cart .i-wheel{transform-box:fill-box;transform-origin:50% 50%}
.sb-nav button:is(:hover,:focus-visible) .lb-i-cart .i-body{transform:rotate(3deg)}
.sb-nav button:is(:hover,:focus-visible) .lb-i-cart .i-wheel{animation:lbnav-wheel .42s cubic-bezier(.34,1.56,.64,1) both}
/* the .6px x-nudge makes the 40deg wiggle read on a plain circle */
@keyframes lbnav-wheel{
  0%{transform:rotate(0) translateX(0)}
  35%{transform:rotate(40deg) translateX(.6px)}
  70%{transform:rotate(-14deg) translateX(-.3px)}
  100%{transform:rotate(0) translateX(0)}}

/* ---------- items/backpack: small lift + pocket settle ------------------ */
.lb-i-backpack .i-pack-body,
.lb-i-backpack .i-pack-handle,
.lb-i-backpack .i-pack-pocket{
  transform-box:fill-box;
  transition:transform .34s cubic-bezier(.34,1.56,.64,1)}
.lb-i-backpack .i-pack-body{transform-origin:50% 100%}
.lb-i-backpack .i-pack-handle{transform-origin:50% 100%}
.lb-i-backpack .i-pack-pocket{transform-origin:50% 50%}
.sb-nav button:is(:hover,:focus-visible) .lb-i-backpack .i-pack-body{transform:translateY(-.7px)}
.sb-nav button:is(:hover,:focus-visible) .lb-i-backpack .i-pack-handle{transform:translateY(-1px) scaleX(1.08)}
.sb-nav button:is(:hover,:focus-visible) .lb-i-backpack .i-pack-pocket{
  animation:lbnav-pack-pocket .42s cubic-bezier(.34,1.56,.64,1) both}
@keyframes lbnav-pack-pocket{
  0%{transform:translateY(0)}
  42%{transform:translateY(.8px)}
  72%{transform:translateY(-.25px)}
  100%{transform:translateY(0)}}

/* ---------- home: door swings open + tiny hop --------------------------- */
.lb-i-home .i-door{transform-box:fill-box;transform-origin:left center}
:is(.sb-nav,.botnav) button:is(:hover,:focus-visible,:active) .lb-i-home{
  animation:lbnav-hop .4s cubic-bezier(.34,1.56,.64,1) both}
:is(.sb-nav,.botnav) button:is(:hover,:focus-visible,:active) .lb-i-home .i-door{
  animation:lbnav-door .46s cubic-bezier(.34,1.56,.64,1) both}
@keyframes lbnav-door{0%{transform:scaleX(1)}45%{transform:scaleX(.45)}100%{transform:scaleX(1)}}

/* ---------- tiny-hop fallback (support headset) ------------------------- */
.sb-nav button:is(:hover,:focus-visible) .lb-i-support{
  animation:lbnav-hop .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes lbnav-hop{0%{transform:translateY(0)}40%{transform:translateY(-1.5px)}100%{transform:translateY(0)}}

/* ---------- settings: gear turn ----------------------------------------- */
.lb-i-gear{transition:transform .38s cubic-bezier(.34,1.56,.64,1)}
.sb-nav button:is(:hover,:focus-visible) .lb-i-gear{transform:rotate(25deg)}

/* ---------- challenges: crosshair pulse --------------------------------- */
.lb-i-target .i-x{transform-box:view-box;transform-origin:12px 12px}
.sb-nav button:is(:hover,:focus-visible) .lb-i-target .i-x{
  animation:lbnav-pulse .44s cubic-bezier(.34,1.56,.64,1) both}
@keyframes lbnav-pulse{0%{transform:scale(1)}40%{transform:scale(1.16)}72%{transform:scale(.96)}100%{transform:scale(1)}}

/* ---------- invite: second person slides in ----------------------------- */
.lb-i-invite .i-p2{transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
.sb-nav button:is(:hover,:focus-visible) .lb-i-invite .i-p2{transform:translateX(1px)}

/* ---------- transactions: receipt tilt ---------------------------------- */
.lb-i-receipt{transition:transform .34s cubic-bezier(.34,1.56,.64,1)}
.sb-nav button:is(:hover,:focus-visible) .lb-i-receipt{transform:rotate(-6deg)}

/* ---------- responsible: heart pulse ------------------------------------ */
.lb-i-shield .i-heart{transform-box:fill-box;transform-origin:50% 50%}
.sb-nav button:is(:hover,:focus-visible) .lb-i-shield .i-heart{
  animation:lbnav-pulse .44s cubic-bezier(.34,1.56,.64,1) both}

/* ---------- chat (botnav): dots bounce, staggered ----------------------- */
.lb-i-chat .i-dot{transform-box:fill-box}
.botnav button:is(:hover,:focus-visible,:active) .lb-i-chat .i-dot{
  animation:lbnav-dot .4s cubic-bezier(.34,1.56,.64,1) both}
.botnav button:is(:hover,:focus-visible,:active) .lb-i-chat .i-dot:nth-of-type(3){animation-delay:.06s}
.botnav button:is(:hover,:focus-visible,:active) .lb-i-chat .i-dot:nth-of-type(4){animation-delay:.12s}
@keyframes lbnav-dot{0%{transform:translateY(0)}35%{transform:translateY(-1.6px)}100%{transform:translateY(0)}}

/* ---------- reduced motion: everything off ------------------------------ */
@media (prefers-reduced-motion:reduce){
  .lb-i,.lb-i *{animation:none!important;transition:none!important;transform:none!important}
}