/* ============================================================
   九零管乐 · 动效层 v1 (kinetic)
   与 motion.css 并存：motion 管结构与滚动，kinetic 管触感。

   约束：
     · 所有持续动画只走 transform / opacity
     · 每张卡最多 1 个 rAF 弹簧，离开即停
     · 移动端自动关掉背光与倾斜，只保留按压与抽屉
     · prefers-reduced-motion 下全部让路
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   一、卡片：3D 透视 + 指针流光 + 旋转描边 + 呼吸背光
   ═══════════════════════════════════════════════════════════ */

.kx-tilt {
  --kx-rx: 0deg;
  --kx-ry: 0deg;
  --kx-lift: 0px;
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  transform:
    perspective(1000px)
    rotateX(var(--kx-rx))
    rotateY(var(--kx-ry))
    translate3d(0, var(--kx-lift), 0);
  transition:
    box-shadow .45s cubic-bezier(.16, 1, .3, 1),
    border-color .35s cubic-bezier(.16, 1, .3, 1);
  touch-action: pan-y;
}

/* 指针流光：一层可以被指针拖动的径向光 */
.kx-sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      200px circle at var(--kx-mx, 50%) var(--kx-my, 30%),
      rgba(255, 246, 222, .24),
      rgba(232, 205, 148, .11) 32%,
      rgba(184, 148, 75, .04) 52%,
      transparent 68%
    );
  transition: opacity .42s cubic-bezier(.16, 1, .3, 1);
}
.kx-tilt:hover .kx-sheen,
.kx-tilt.kx-tilting .kx-sheen { opacity: 1; }

/* 旋转渐变描边：不抢眼，只在边缘留一条缓慢流动的金线 */
.kx-ring {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  opacity: .42;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1);
}
.kx-ring i {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 184, 122, .00) 26deg,
    rgba(232, 205, 148, .55) 58deg,
    rgba(184, 148, 75, .30) 92deg,
    transparent 128deg,
    transparent 232deg,
    rgba(184, 148, 75, .22) 300deg,
    transparent 342deg
  );
  animation: kxRingSpin 18s linear infinite;
  will-change: transform;
}
.kx-tilt:hover .kx-ring { opacity: .62; }

@keyframes kxRingSpin {
  to { transform: rotate(360deg); }
}

/* 呼吸弥散背光：贴在卡片底部，模糊后的暖金 */
.kx-aura {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -10px;
  height: 46%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(212, 184, 122, .30),
    rgba(184, 148, 75, .13) 42%,
    rgba(139, 92, 40, .05) 62%,
    transparent 76%
  );
  filter: blur(22px);
  opacity: .38;
  transform: scale(.96);
  animation: kxAuraBreath 7.5s cubic-bezier(.37, 0, .63, 1) infinite;
  will-change: transform, opacity;
}

@keyframes kxAuraBreath {
  0%, 100% { opacity: .11; transform: scale(.97); }
  46%      { opacity: .22; transform: scale(1.015); }
  68%      { opacity: .17; transform: scale(1.005); }
}

/* 不碰卡片子元素的定位：sheen 是低透明度的光，ring 只画边缘，
   aura 用负 z-index 压在内容之下，徽标与图片仍保持原有 absolute 布局。 */

/* 已知层级 bug：徽标链接与图片同为 z-index:1，图片在 DOM 后面会吃掉徽标。
   把徽标所在的直接子链接抬到图片之上，并让文字不竖排换行。 */
.instrument-card.g-card.kx-tilt > a { z-index: 6; }
.resale-badge { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════
   二、入场：交错 + 微弱弹性上滑
   motion.css 已给 .reveal 交错延迟，这里只把曲线换成带回弹的
   ═══════════════════════════════════════════════════════════ */
.rv-stagger > .reveal {
  transform: translate3d(0, 10px, 0) scale(.997);
  transition:
    opacity .78s cubic-bezier(.22, 1, .36, 1),
    transform .82s cubic-bezier(.34, 1.28, .64, 1);
}
.rv-stagger > .reveal.visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* 入场结束后把 transform 交还给 3D 倾斜。
   这里必须写得比 .rv-stagger > .reveal.visible 更具体，
   否则卡片会停在入场结束的 identity transform 上，倾斜只是空转变量。 */
.reveal.visible.kx-tilt,
.rv-stagger > .reveal.visible.kx-tilt {
  transform:
    perspective(1000px)
    rotateX(var(--kx-rx))
    rotateY(var(--kx-ry))
    translate3d(0, var(--kx-lift), 0);
}
.rv-stagger > .reveal.kx-tilt.rv-done {
  transition:
    opacity .4s cubic-bezier(.22, 1, .36, 1),
    box-shadow .45s cubic-bezier(.16, 1, .3, 1),
    border-color .35s cubic-bezier(.16, 1, .3, 1);
}

/* ═══════════════════════════════════════════════════════════
   三、按钮：物理压缩 + 深度内阴影 + 释放超调
   transform 交给 WAAPI，这里只管内阴影与手感
   ═══════════════════════════════════════════════════════════ */
button,
.btn,
.jl-go,
.jl-btn,
.contact-quote-btn,
.cat-tab,
.hbtn,
.page-btn,
.panel-close {
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow .22s cubic-bezier(.16, 1, .3, 1),
    background-color .3s cubic-bezier(.33, 1, .68, 1),
    border-color .3s cubic-bezier(.33, 1, .68, 1),
    color .3s cubic-bezier(.33, 1, .68, 1);
}

.kx-pressed {
  box-shadow:
    inset 0 3px 14px rgba(0, 0, 0, .52),
    inset 0 -1px 0 rgba(255, 246, 222, .05),
    0 1px 0 rgba(255, 246, 222, .03) !important;
}

/* ═══════════════════════════════════════════════════════════
   四、胶囊按钮 → 面板：流体壳
   ═══════════════════════════════════════════════════════════ */
.kx-morph-shell {
  position: fixed;
  z-index: 99997;
  pointer-events: none;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-sc, "Noto Serif SC", serif);
  will-change: transform, width, height, border-radius, opacity;
}
.kx-morph-shell span {
  transition: opacity .16s linear;
}
.kx-morph-shell.is-gone span { opacity: 0; }

.jl-panel.kx-morphing {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.985);
}
.jl-panel.kx-morph-ready {
  opacity: 1;
  transform: none;
  transition:
    opacity .34s cubic-bezier(.22, 1, .36, 1),
    transform .52s cubic-bezier(.16, 1, .3, 1);
}

/* 五、详情展开：纯材质壳（不含图片，避免任何拉伸） */
.kx-fluid-shell {
  position: fixed;
  z-index: 99996;
  pointer-events: none;
  overflow: hidden;
  border: 1px solid rgba(232, 205, 148, .14);
  background:
    radial-gradient(120% 90% at 28% 8%, rgba(232, 205, 148, .16), transparent 55%),
    linear-gradient(150deg, #1c1a16 0%, #141317 62%, #171512 100%);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, .60),
    0 0 0 1px rgba(232, 205, 148, .16),
    0 0 60px rgba(184, 148, 75, .10);
  will-change: left, top, width, height, border-radius, opacity;
}
.kx-fluid-shell::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: linear-gradient(105deg,
    transparent 42%,
    rgba(255, 246, 222, .09) 50%,
    transparent 58%);
  transform: translateX(-28%);
  animation: kxFluidSheen .72s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes kxFluidSheen {
  to { transform: translateX(28%); }
}

/* ═══════════════════════════════════════════════════════════
   六、移动端底部抽屉
   ═══════════════════════════════════════════════════════════ */
.kx-sheet-handle {
  display: none;
  position: relative;
  z-index: 6;
  height: 30px;
  margin: -10px auto 4px;
  width: 100%;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.kx-sheet-handle::before {
  content: '';
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(232, 213, 176, .28);
  box-shadow: 0 0 12px rgba(184, 148, 75, .18);
}

@media (max-width: 768px) {
  .kx-sheet-handle { display: flex; }

  .jl-ov.kx-sheet-mode {
    align-items: flex-end;
    padding: 0;
  }
  .jl-ov.kx-sheet-mode .jl-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 92vh;
    margin: 0;
    border-radius: 24px 24px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -24px 80px rgba(0, 0, 0, .58);
    will-change: transform;
  }
  .jl-ov.kx-sheet-mode .jl-in {
    border-radius: 24px 24px 0 0;
  }

  #detailOverlay.kx-sheet-mode {
    align-items: flex-end;
    padding: 0;
  }
  #detailOverlay.kx-sheet-mode .panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 94vh;
    margin: 0;
    border-radius: 22px 22px 0 0;
    padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
    animation: kxSheetUp .48s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
  }
  #detailOverlay.kx-sheet-mode .panel-close {
    position: absolute;
    top: 2.2rem;
    right: 1rem;
  }

  /* 触屏保留跟手倾斜与流光，只关掉最贵的模糊背光 */
  .kx-aura { display: none; }
  .kx-ring { opacity: .30; }
  .kx-sheen { opacity: .55; }
}

@keyframes kxSheetUp {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   七、降级
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .kx-tilt { transform: none !important; }
  .kx-aura, .kx-ring i, .kx-sheen { animation: none !important; }
  .kx-ring i { display: none; }
  .kx-morph-shell, .kx-fluid-shell { display: none !important; }
  .jl-panel.kx-morphing { opacity: 1; transform: none; }
  .rv-stagger > .reveal {
    transform: none !important;
    transition: opacity .3s linear !important;
  }
  .kx-sheet-handle { display: none; }
}