/* =========================================================
   V904 · 小宠任务屋可爱底部导航
   首页 / 任务 / 互动 / 背包 / 我的
========================================================= */


/* ---------- 导航底座 ---------- */

.bottom-nav{
  overflow:visible !important;

  height:72px !important;

  padding:5px 6px !important;

  border-radius:27px !important;

  background:
    rgba(255,253,248,.96) !important;

  border:
    1px solid
    rgba(255,255,255,.92) !important;

  box-shadow:
    0 12px 32px rgba(66,54,42,.11),
    inset 0 1px 0 rgba(255,255,255,.9) !important;

  backdrop-filter:
    blur(18px)
    saturate(1.05) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(1.05) !important;
}


/* ---------- 每一个按钮 ---------- */

.bottom-nav .nav-item{
  position:relative !important;

  min-width:0 !important;

  height:62px !important;

  margin:0 1px !important;

  padding:5px 2px 4px !important;

  border-radius:22px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  gap:3px !important;

  overflow:visible !important;

  color:#948b81 !important;

  background:
    transparent !important;

  box-shadow:none !important;

  transform:none !important;

  transition:
    color .24s ease,
    background .28s ease,
    transform .30s cubic-bezier(.2,.85,.25,1.25),
    box-shadow .28s ease !important;

  -webkit-tap-highlight-color:
    transparent;
}


/* ---------- 图标容器 ---------- */

.bottom-nav .nav-item > span{
  position:relative !important;

  width:29px !important;
  height:29px !important;

  display:grid !important;
  place-items:center !important;

  flex:none !important;

  font-size:0 !important;

  line-height:1 !important;

  color:currentColor !important;

  z-index:3 !important;

  transform-origin:center bottom;

  transition:
    transform .25s
    cubic-bezier(.2,.9,.25,1.3),
    filter .25s ease !important;
}


/* SVG 统一尺寸 */

.bottom-nav .nav-item
.v904-nav-svg{
  width:27px;
  height:27px;

  display:block;

  overflow:visible;

  stroke:currentColor;

  stroke-width:2;

  stroke-linecap:round;
  stroke-linejoin:round;

  fill:none;
}


/* ---------- 文字 ---------- */

.bottom-nav .nav-item > b{
  position:relative !important;
  z-index:3 !important;

  margin:0 !important;

  font-size:10.5px !important;
  line-height:1 !important;

  font-weight:700 !important;

  color:currentColor !important;

  letter-spacing:.1px;

  transition:
    transform .25s ease,
    color .25s ease !important;
}


/* =========================================================
   选中状态
========================================================= */

.bottom-nav .nav-item.active{
  color:#ffffff !important;

  background:
    linear-gradient(
      145deg,
      #b9e78f 0%,
      #8fd36d 52%,
      #78c65e 100%
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.82) !important;

  box-shadow:
    0 8px 18px rgba(103,172,78,.28),
    0 2px 5px rgba(66,122,51,.14),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -8px 18px rgba(82,153,61,.09) !important;

  transform:
    translateY(-7px)
    scale(1.045) !important;

  animation:
    v904NavSelected
    .42s
    cubic-bezier(.18,.9,.24,1.28)
    both !important;
}


/* 选中的图标轻弹一下 */

.bottom-nav .nav-item.active > span{
  transform:
    translateY(-1px)
    scale(1.08) !important;

  filter:
    drop-shadow(
      0 2px 2px
      rgba(64,111,46,.14)
    );

  animation:
    v904IconBounce
    .55s
    cubic-bezier(.2,.9,.25,1.35)
    both;
}


/* 选中文字稍微明显 */

.bottom-nav .nav-item.active > b{
  font-weight:850 !important;

  text-shadow:
    0 1px 2px
    rgba(58,112,42,.16);
}


/* =========================================================
   小心心
========================================================= */

.bottom-nav .nav-item::before{
  content:"";

  position:absolute;

  top:-8px;
  right:7px;

  width:17px;
  height:17px;

  opacity:0;

  z-index:5;

  pointer-events:none;

  transform:
    scale(.3)
    rotate(-12deg);

  transition:
    opacity .2s ease,
    transform .35s
    cubic-bezier(.2,.9,.2,1.4);
}


.bottom-nav .nav-item.active::before{
  content:"♥";

  display:grid;
  place-items:center;

  color:#ff8388;

  background:
    #fffaf5;

  border-radius:50%;

  box-shadow:
    0 3px 7px
    rgba(172,99,88,.18);

  font-size:10px;

  opacity:1;

  transform:
    scale(1)
    rotate(8deg);

  animation:
    v904HeartPop
    .6s
    cubic-bezier(.2,.9,.2,1.4);
}


/* =========================================================
   闪光
========================================================= */

.bottom-nav .nav-item::after{
  content:"";

  position:absolute;

  inset:3px;

  z-index:1;

  opacity:0;

  pointer-events:none;

  border-radius:19px;

  background:
    radial-gradient(
      circle at 18% 25%,
      rgba(255,255,255,.95) 0 1.5px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 82% 68%,
      rgba(255,255,255,.85) 0 1.3px,
      transparent 2.4px
    ),
    radial-gradient(
      circle at 72% 20%,
      rgba(255,245,174,.95) 0 1px,
      transparent 2.2px
    ),
    radial-gradient(
      circle at 24% 76%,
      rgba(255,255,255,.90) 0 1px,
      transparent 2px
    );
}


.bottom-nav .nav-item.active::after{
  opacity:1;

  animation:
    v904Sparkle
    2.2s
    ease-in-out
    infinite;
}


/* =========================================================
   点击反馈
========================================================= */

.bottom-nav .nav-item.v904-tap{
  animation:
    v904Tap
    .28s
    cubic-bezier(.2,.8,.3,1.25)
    !important;
}


/* =========================================================
   各图标小特色
========================================================= */


/* 首页 */

.bottom-nav
.nav-item[data-nav="home"].active
.v904-nav-svg{
  animation:
    v904HomeWiggle
    .55s ease;
}


/* 任务 */

.bottom-nav
.nav-item[data-nav="tasks"].active
.v904-nav-svg{
  animation:
    v904TaskCheck
    .45s ease;
}


/* 互动 */

.bottom-nav
.nav-item[data-nav="play"].active
.v904-nav-svg{
  animation:
    v904PlaySpin
    .55s ease;
}


/* 背包 */

.bottom-nav
.nav-item[data-nav="bag"].active
.v904-nav-svg{
  animation:
    v904BagJump
    .5s ease;
}


/* 我的 */

.bottom-nav
.nav-item[data-nav="mine"].active
.v904-nav-svg{
  animation:
    v904PawBounce
    .55s ease;
}


/* =========================================================
   Animations
========================================================= */

@keyframes v904NavSelected{

  0%{
    transform:
      translateY(0)
      scale(.94);
  }

  65%{
    transform:
      translateY(-9px)
      scale(1.07);
  }

  100%{
    transform:
      translateY(-7px)
      scale(1.045);
  }

}


@keyframes v904IconBounce{

  0%{
    transform:
      translateY(3px)
      scale(.86);
  }

  60%{
    transform:
      translateY(-3px)
      scale(1.14);
  }

  100%{
    transform:
      translateY(-1px)
      scale(1.08);
  }

}


@keyframes v904HeartPop{

  0%{
    opacity:0;
    transform:
      translateY(5px)
      scale(.2)
      rotate(-18deg);
  }

  65%{
    opacity:1;
    transform:
      translateY(-2px)
      scale(1.18)
      rotate(10deg);
  }

  100%{
    opacity:1;
    transform:
      scale(1)
      rotate(8deg);
  }

}


@keyframes v904Sparkle{

  0%,100%{
    opacity:.55;
  }

  50%{
    opacity:1;
  }

}


@keyframes v904Tap{

  0%{
    transform:
      translateY(-7px)
      scale(1.045);
  }

  45%{
    transform:
      translateY(-3px)
      scale(.92);
  }

  100%{
    transform:
      translateY(-7px)
      scale(1.045);
  }

}


@keyframes v904HomeWiggle{

  0%,100%{
    transform:rotate(0);
  }

  30%{
    transform:rotate(-7deg);
  }

  65%{
    transform:rotate(6deg);
  }

}


@keyframes v904TaskCheck{

  0%{
    transform:
      scale(.82)
      rotate(-5deg);
  }

  65%{
    transform:
      scale(1.12)
      rotate(4deg);
  }

  100%{
    transform:
      scale(1);
  }

}


@keyframes v904PlaySpin{

  0%{
    transform:
      scale(.75)
      rotate(-40deg);
  }

  75%{
    transform:
      scale(1.12)
      rotate(8deg);
  }

  100%{
    transform:
      scale(1)
      rotate(0);
  }

}


@keyframes v904BagJump{

  0%,100%{
    transform:
      translateY(0);
  }

  45%{
    transform:
      translateY(-4px)
      rotate(-4deg);
  }

  70%{
    transform:
      translateY(-1px)
      rotate(3deg);
  }

}


@keyframes v904PawBounce{

  0%{
    transform:
      scale(.75);
  }

  55%{
    transform:
      scale(1.16)
      rotate(-5deg);
  }

  100%{
    transform:
      scale(1)
      rotate(0);
  }

}


/* =========================================================
   小屏
========================================================= */

@media(max-height:760px){

  .bottom-nav{
    height:68px !important;
  }

  .bottom-nav .nav-item{
    height:58px !important;
  }

  .bottom-nav .nav-item.active{
    transform:
      translateY(-5px)
      scale(1.035) !important;
  }

  .bottom-nav .nav-item > span{
    width:26px !important;
    height:26px !important;
  }

  .bottom-nav .nav-item
  .v904-nav-svg{
    width:24px;
    height:24px;
  }

}


/* 无动画偏好 */

@media(prefers-reduced-motion:reduce){

  .bottom-nav *,
  .bottom-nav *::before,
  .bottom-nav *::after{
    animation:none !important;
  }

}