/* =====================================================================
   NOLBIR TV · 全局丝滑过渡 + 底部 tabbar 修复/动效（苹果风）
   独立样式表：不修改任何 JS 逻辑，只增强动效与触感
   2026-09-17 新建 / 2026-09-18 加 tabbar 修复与切换动效
   ⚠️ 改了本文件必须同时把 index.html 里的 ?v= 顺推，否则 12h 强缓存
   ===================================================================== */

/* ---- 0. 隐藏 uni-app 内置 tabbar ---------------------------------- */
/* pages.json 里 tabBar.custom = true，但 list 的三项 text / iconPath 全为空，
   uni-app H5 依然会渲染一个**空的白色内置 tabbar**：
       uni-tabbar{position:fixed;bottom:0;height:50px;background:#fff;z-index:998}
   它压在站点自己的 TabBar 组件（.tabbar_content，z-index:999）上面，
   把三个图标的下半截和全部文字遮住 —— 实测把自定义 tabbar 的 z-index
   抬到 100000 也压不过它（两者不在同一个层叠上下文里），所以只能让内置的消失。
   站点用的是自定义 TabBar，内置这个既无图标也无文字、点了也不切换，直接隐藏。
   ⚠️ 它内部的 .uni-placeholder（50px 占位）一并消失；页面底部的呼吸留白
      由 uni-page-wrapper 提供，实测不受影响。 */
uni-tabbar {
  display: none !important;
}

/* ---- 1. 页面进入：轻柔淡入（display 由 none 切回时会自动重播） ---- */
@keyframes nb-page-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}
uni-page-body {
  -webkit-animation: nb-page-in .26s cubic-bezier(.32, .72, 0, 1) both;
          animation: nb-page-in .26s cubic-bezier(.32, .72, 0, 1) both;
}

/* ---- 2. 移动端滚动惯性 + 去掉灰色点击高亮 ---- */
uni-page-body,
uni-scroll-view,
.uni-scroll-view,
.uni-scroll-view-content {
  -webkit-overflow-scrolling: touch;
}
html, body, uni-app, uni-view, uni-text, uni-image, uni-button, uni-input {
  -webkit-tap-highlight-color: transparent;
}

/* ---- 3. 已有过渡统一改用 iOS 常用曲线（不新增动画，只改手感） ---- */
uni-view, uni-text, uni-image, uni-button, uni-input,
.uni-page-head, .fui-modal__wrap,
.fui-animation, .fui-animation__wrap {
  -webkit-transition-timing-function: cubic-bezier(.32, .72, 0, 1);
          transition-timing-function: cubic-bezier(.32, .72, 0, 1);
}

/* =====================================================================
   4. 底部 tabbar 动效
   真实 DOM（自定义 TabBar 组件，从编译产物里核过）：
     .bar_ul > .list_bar > .center_box > .iconboxs > uni-view > uni-image.tab-image
                                      > uni-text(.active_text) > span
   ⚠️ 模板用的是 .iconboxs（复数），组件自带样式表只写了 .iconbox（单数）；
      这里按真实结构写，不依赖那套对不上的类名。
   ⚠️ 全文顺序有讲究：§4.4 的按下态必须排在 §4.3 的 :has 之后，
      两者优先级相同（0,4,0），靠源序决定胜负。
   ===================================================================== */

/* 4.1 整项：按下位移 */
.tabbar_content .list_bar {
  position: relative;
  -webkit-transition: -webkit-transform .3s cubic-bezier(.32, .72, 0, 1);
          transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}

/* 4.2 图标：常态与过渡 */
.tabbar_content .list_bar .tab-image {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform .32s cubic-bezier(.32, .72, 0, 1);
          transition: transform .32s cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
}

/* 4.3 激活项：图标上浮 + 放大（:has 渐进增强）
   iOS 15.4+ / Chrome 105+ 才有 :has()；不支持时只是少了这点位移，
   红色激活图标（图片本身有常态/激活两套）与下面的指示条照常工作。 */
@supports selector(:has(*)) {
  .tabbar_content .list_bar:has(.active_text) .tab-image {
    -webkit-transform: translateY(-3px) scale(1.12);
            transform: translateY(-3px) scale(1.12);
  }
}

/* 4.3b 激活项指示条（挂在 .active_text 上做绝对定位）
   不参与布局，所以切换高亮不会把图标顶上去；
   .active_text 是新挂上的类 → ::after 随之新生 → 动画自动重播，
   于是「切换 tab」天然带一次指示条入场，不需要任何 JS。 */
@keyframes nb-tab-ind {
  from { opacity: 0; -webkit-transform: translateX(-50%) scaleX(.2); transform: translateX(-50%) scaleX(.2) }
  to   { opacity: 1; -webkit-transform: translateX(-50%) scaleX(1);  transform: translateX(-50%) scaleX(1) }
}
.tabbar_content .list_bar .center_box uni-text.active_text::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 16px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(207deg, #FF1E31, #F7505E);
  box-shadow: 0 1px 4px rgba(255, 30, 49, .35);
  -webkit-animation: nb-tab-ind .34s cubic-bezier(.32, .72, 0, 1) both;
          animation: nb-tab-ind .34s cubic-bezier(.32, .72, 0, 1) both;
}

/* 4.4 按下态（必须在 4.3 之后）
   :active 在真机上不一定被叫醒（见 nolbir-tabfx.js 的说明），
   所以 nolbir-tabfx.js 会给同一个元素挂 .nb-press，两套规则完全一致。 */
.tabbar_content .list_bar:active,
.tabbar_content .list_bar.nb-press {
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}
.tabbar_content .list_bar:active .tab-image,
.tabbar_content .list_bar.nb-press .tab-image {
  -webkit-transform: scale(.84);
          transform: scale(.84);
  -webkit-transition-duration: .1s;
          transition-duration: .1s;
}
/* 兼容组件自带样式表里那套旧写法 */
.list_bar:active .tab-image,
.list_bars:active .tab-image {
  -webkit-transform: scale(.84);
          transform: scale(.84);
}

/* 4.5 点按涟漪（贴着图标，纯装饰、不挡点击） */
.tabbar_content .list_bar::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 28%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 59, 76, .22) 0%, rgba(255, 59, 76, 0) 68%);
  opacity: 0;
  -webkit-transform: scale(.35);
          transform: scale(.35);
  pointer-events: none;
  -webkit-transition: opacity .3s ease, -webkit-transform .34s cubic-bezier(.32, .72, 0, 1);
          transition: opacity .3s ease, transform .34s cubic-bezier(.32, .72, 0, 1);
}
.tabbar_content .list_bar:active::before,
.tabbar_content .list_bar.nb-press::before {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition-duration: .1s, .12s;
          transition-duration: .1s, .12s;
}

/* ---- 5. 弹窗 / 遮罩：更快的丝滑淡入 ---- */
.fui-modal__wrap {
  -webkit-transition-duration: .25s;
          transition-duration: .25s;
}

/* ---- 6. 尊重系统「减弱动态效果」设置 ---- */
@media (prefers-reduced-motion: reduce) {
  uni-page-body,
  .tabbar_content .list_bar,
  .tabbar_content .list_bar::before,
  .tabbar_content .list_bar .center_box uni-text.active_text::after,
  .tab-image {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-transition: none !important;
            transition: none !important;
  }
}