/* ============================================================
   九零管乐 · 动效与玻璃层  v4
   丝滑来自「只动 transform / opacity」，质感来自「玻璃真的磨到了东西」。

   四条铁律（来自 60fps-animation / glassmorphism）：
     1. 每帧只动 transform 与 opacity —— 其余一律交给静止态
     2. 玻璃必须压在「有内容的背景」上，纯色背景上做玻璃是假的
     3. backdrop-filter 数量要封顶：卡片只在悬停时开启，同时最多一张
     4. 三套降级必须真能跑：reduced-motion / reduced-transparency / 无 backdrop-filter
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   一、底色 —— 给玻璃一层「有颜色的背」
   纯 #121214 上做毛玻璃什么也看不见。用多层大半径暖调径向渐变
   铺满整篇文档，玻璃压上去才有东西可磨。
   ═══════════════════════════════════════════════════════════ */
body {
  background-color: var(--ink, #121214);
  background-image:
    radial-gradient(ellipse 92% 58% at 12% 6%,  rgba(184, 148, 75, .105), transparent 62%),
    radial-gradient(ellipse 68% 46% at 88% 18%, rgba(139, 92, 40, .080), transparent 66%),
    radial-gradient(ellipse 84% 56% at 26% 94%, rgba(94, 72, 38, .072), transparent 64%),
    radial-gradient(ellipse 58% 40% at 72% 66%, rgba(212, 184, 122, .045), transparent 70%);
}

/* ═══════════════════════════════════════════════════════════
   二、玻璃基元
   四件套缺一不可：磨砂 / 半透 / 亮边 / 层次。
   ═══════════════════════════════════════════════════════════ */

/* 细颗粒：抹掉重模糊下的色带（banding） */
.g-grain::after,
.g-card::after,
.g-panel::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; border-radius: inherit;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 玻璃的边缘：左上受光、右下背光的一道环 */
.g-card::before,
.g-panel::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(145deg,
    rgba(255, 246, 222, .34) 0%,
    rgba(232, 213, 176, .10) 32%,
    rgba(184, 148, 75, .05) 58%,
    rgba(255, 246, 222, .16) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* ── 导航玻璃：常驻，全站只有 1 个 nav ──
   注意：index 与选购页的 nav 没有 nav-solid 类，所以不能只挂 .nav-solid */
.nav,
.nav.nav-solid {
  background: rgba(22, 20, 17, .58) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.7) !important;
          backdrop-filter: blur(22px) saturate(1.7) !important;
  border-bottom: 1px solid rgba(232, 213, 176, .10) !important;
  box-shadow:
    0 1px 0 rgba(255, 246, 222, .05) inset,
    0 -1px 0 rgba(0, 0, 0, .30) inset,
    0 10px 40px rgba(0, 0, 0, .34) !important;
}
.nav.scrolled,
.nav.nav-solid.scrolled {
  background: rgba(20, 18, 15, .72) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
          backdrop-filter: blur(28px) saturate(1.8) !important;
}

/* ── 卡片玻璃：静止不开模糊，悬停才开 —— 同时最多一张卡在磨 ── */
.g-card {
  position: relative;
  background: rgba(255, 250, 240, .035);
  border: 1px solid rgba(232, 213, 176, .085);
  box-shadow:
    0 1px 0 rgba(255, 246, 222, .045) inset,
    0 -1px 0 rgba(0, 0, 0, .28) inset,
    0 12px 34px rgba(0, 0, 0, .34);
  transition:
    transform .52s cubic-bezier(.16, 1, .3, 1),
    border-color .52s cubic-bezier(.33, 1, .68, 1),
    background .52s cubic-bezier(.33, 1, .68, 1),
    box-shadow .52s cubic-bezier(.33, 1, .68, 1);
}
.g-card:hover,
.g-card:focus-within {
  background: rgba(255, 250, 240, .062);
  border-color: rgba(232, 213, 176, .20);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
          backdrop-filter: blur(16px) saturate(1.6);
  box-shadow:
    0 1px 0 rgba(255, 246, 222, .10) inset,
    0 -1px 0 rgba(0, 0, 0, .32) inset,
    0 22px 56px rgba(0, 0, 0, .46);
}

/* 指针跟随的高光：用 transform 移动一个小光斑，全程合成器 */
.card-spot {
  position: absolute; top: 0; left: 0;
  width: 260px; height: 260px; margin: -130px 0 0 -130px;
  border-radius: 50%; pointer-events: none;
  opacity: 0; z-index: 0;
  background: radial-gradient(circle, rgba(232, 213, 176, .13) 0%, rgba(184, 148, 75, .05) 42%, transparent 68%);
  transition: opacity .42s cubic-bezier(.33, 1, .68, 1);
}
/* 只在指针真的落在卡上时才提升图层，同时最多一张 */
.g-card:hover .card-spot { opacity: 1; will-change: transform; }
.g-card > *:not(.card-spot):not(.inventory-card-overlay) { position: relative; z-index: 1; }

/* ── 弹层玻璃：常驻，同一时刻只有一层 ── */
.g-panel {
  position: relative;
  background: rgba(16, 15, 13, .74);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
          backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid rgba(232, 213, 176, .14);
  box-shadow:
    0 1px 0 rgba(255, 246, 222, .09) inset,
    0 -1px 0 rgba(0, 0, 0, .40) inset,
    0 34px 90px rgba(0, 0, 0, .60);
}

/* ═══════════════════════════════════════════════════════════
   三、滚动渐入
   交给 .reveal / .visible 这一对既有契约（main.js 也在用），
   本层只做三件事：加交错、保证不掉帧、保证 JS 挂了也看得见。
   ═══════════════════════════════════════════════════════════ */

/* 关键：没有 JS 时内容必须可见。motion.js 一执行就给 <html> 打上 js-on */
html:not(.js-on) .reveal {
  opacity: 1 !important;
  transform: none !important;
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity .72s cubic-bezier(.22, .61, .36, 1),
    transform .82s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--rv-d, 0ms);
  /* 不预设 will-change：浏览器在过渡期间会自行提升图层，
     常驻反而让每页几十个元素长期占着合成层。 */
}
.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* 兼容旧类名：进场结束不再需要额外处理，保留以免外部选择器失效 */
.reveal.rv-done { will-change: auto; }

/* 网格里的卡片自带交错，不用逐个写 delay */
.rv-stagger > *:nth-child(1) { --rv-d: 0ms; }
.rv-stagger > *:nth-child(2) { --rv-d: 70ms; }
.rv-stagger > *:nth-child(3) { --rv-d: 140ms; }
.rv-stagger > *:nth-child(4) { --rv-d: 210ms; }
.rv-stagger > *:nth-child(5) { --rv-d: 280ms; }
.rv-stagger > *:nth-child(6) { --rv-d: 350ms; }
.rv-stagger > *:nth-child(n+7) { --rv-d: 400ms; }

/* ═══════════════════════════════════════════════════════════
   四、页间过渡
   内部跳转时盖一层暗幕再淡出，消掉白闪
   ═══════════════════════════════════════════════════════════ */
.page-veil {
  position: fixed; inset: 0; z-index: 99990;
  pointer-events: none; background: var(--ink, #121214);
  opacity: 0; transition: opacity .30s cubic-bezier(.33, 1, .68, 1);
}
.page-veil.is-on { opacity: 1; }
body.page-leaving { opacity: .001; }   /* 交棒给暗幕，避免内容先闪 */

/* 进场：从略下方浮入 */
@keyframes pageRise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }   /* 收在 none：留着 transform 会变成 fixed 子元素的包含块 */
}
main, .hero, .form-section, .hist-wrap {
  animation: pageRise .62s cubic-bezier(.16, 1, .3, 1) both;
}

/* ═══════════════════════════════════════════════════════════
   五、微交互 —— 一律交给 transform / opacity
   ═══════════════════════════════════════════════════════════ */

/* 按钮按压：合成器缩放，不碰布局 */
.btn, .form-submit, .jl-go, .hbtn, .jl-btn, .page-btn,
.instrument-cta, .contact-quote-btn, .gallery-flow-label {
  transition: transform .18s cubic-bezier(.16, 1, .3, 1),
              color .3s cubic-bezier(.33, 1, .68, 1),
              border-color .3s cubic-bezier(.33, 1, .68, 1),
              background-color .3s cubic-bezier(.33, 1, .68, 1);
}
.btn:active, .form-submit:active, .jl-go:active, .hbtn:active,
.jl-btn:active, .page-btn:active, .contact-quote-btn:active {
  transform: scale(.972);
}

/* 链接下划线：scaleX 而不是 width */
.nav-services a::after,
.nav-links a::after,
.footer a::after {
  will-change: transform;
}

/* 图片放大：transform 而非 width */
.instrument-card .instrument-img img,
.gallery-slide img {
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), filter .6s cubic-bezier(.33, 1, .68, 1);
}
.instrument-card:hover .instrument-img img {
  transform: scale(1.045);
}

/* 金色微光扫描：只在悬停时扫一次，纯 transform */
.shine {
  position: relative; overflow: hidden;
}
.shine::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 55%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 246, 222, .17), transparent);
  transform: translate3d(0, 0, 0) skewX(-14deg);
  opacity: 0;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .3s;
}
.shine:hover::before {
  transform: translate3d(300%, 0, 0) skewX(-14deg);
  opacity: 1;
}

/* 数字滚动 / 计数器：等宽数字避免抖动 */
[data-count] { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   六、降级 —— 三条都必须真能跑
   ═══════════════════════════════════════════════════════════ */

/* 用户要求减少透明度：玻璃变实体，别留半透的鬼影 */
@media (prefers-reduced-transparency: reduce) {
  .g-card, .g-panel,
  .nav, .nav.nav-solid, .nav.scrolled {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    background: #17161a !important;
  }
  .g-card::after, .g-panel::after, .g-grain::after { display: none; }
}

/* 不支持 backdrop-filter：给足不透明的底，保证任何背景上都读得清 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .g-card { background: rgba(26, 24, 21, .90); }
  .g-panel { background: rgba(16, 15, 13, .96); }
  .nav, .nav.nav-solid, .nav.scrolled { background: rgba(20, 18, 15, .95) !important; }
}

/* 用户要求减少动效：全部停掉，内容直接呈现 */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .g-card, .g-panel, .card-spot, .shine::before,
  .page-veil, .btn, .form-submit, .jl-go, .hbtn, .jl-btn,
  .instrument-card .instrument-img img, .page-btn {
    transition: none !important;
    animation: none !important;
  }
  .card-spot, .shine::before { display: none; }
  main, .hero, .form-section, .hist-wrap { animation: none !important; }
  html:not(.js-on) .reveal { opacity: 1 !important; }
}