/* ============================================================
   锦领视界 JINLING VISION — 全局动态视觉系统 V3.0
   暗金电影级 · 极致动效强化版
   ============================================================ */

:root {
  /* —— 背景与 ink 色阶 —— */
  --bg-0: #08080a;
  --bg-1: #0d0c10;
  --bg-2: #141218;
  --ink: #ece5d8;
  --ink-dim: #9b937f;
  --ink-faint: #5d5749;

  /* —— 金色体系 —— */
  --gold: #d4af37;
  --gold-hi: #f5e3ac;
  --gold-deep: #8a6d1f;
  --line: rgba(212, 175, 55, 0.16);
  --line-soft: rgba(236, 229, 216, 0.08);

  /* —— 字体系统 —— */
  --serif: 'Noto Serif SC', 'Songti SC', serif;
  --sans: 'Noto Sans SC', 'PingFang SC', sans-serif;
  --latin: 'Cormorant Garamond', 'Times New Roman', serif;

  /* —— 缓动曲线 (强化物理感) —— */
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-silk: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);       
  --ease-spring-soft: cubic-bezier(0.22, 1.32, 0.36, 1);  

  /* —— 阴影与层级 —— */
  --space-section: 9rem;
  --radius-sm: 4px;
  --shadow-gold-glow: 0 0 30px rgba(212, 175, 55, 0.2);
  --shadow-press: inset 0 4px 12px rgba(0, 0, 0, 0.6);
  --z-cursor: 10000;
  --z-progress: 9999;
}

/* 全局：去除原生蓝色点击波纹/高亮 */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

a, button, [role="button"], input, textarea, select, label, summary {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

:focus:not(:focus-visible) { outline: none; }
:focus-visible { 
  outline: 1px solid rgba(212, 175, 55, 0.6); 
  outline-offset: 4px; 
  border-radius: var(--radius-sm);
  transition: outline-offset 0.2s var(--ease-lux);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: 5rem;
}

body {
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { 
  background: rgba(212, 175, 55, 0.85); 
  color: #0a0a0c; 
  text-shadow: none;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-radius: 4px;
  border: 2px solid var(--bg-0);
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: transparent; border: none; }

/* ---------- 通用布局 ---------- */
.container {
  width: min(1240px, 92vw);
  margin: 0 auto;
}

.section { 
  position: relative; 
  padding: var(--space-section) 0; 
}

/* ---------- 章节标题系统 ---------- */
.sec-head { 
  position: relative; 
  margin-bottom: 4.5rem; 
}

/* 幽灵文字：缓慢呼吸浮动 */
.sec-ghost {
  position: absolute;
  top: -3.2rem;
  left: -0.5rem;
  font-family: var(--latin);
  font-style: italic;
  font-size: clamp(4.5rem, 10vw, 9rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 175, 55, 0.15);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  will-change: transform, opacity;
  animation: ghost-float 8s ease-in-out infinite alternate;
}

@keyframes ghost-float {
  0% { transform: translateY(0) translateX(0); opacity: 0.8; }
  100% { transform: translateY(15px) translateX(-10px); opacity: 0.4; }
}

.sec-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  font-weight: 400;
}
.sec-kicker::before {
  content: '';
  width: 2.6rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.sec-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-wrap: balance; 
}

/* 标题金色文字：持续流光动画 */
.sec-title em {
  font-style: normal;
  background: linear-gradient(115deg, var(--gold-hi) 10%, var(--gold) 40%, var(--gold-hi) 60%, var(--gold-deep) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gold-flow 6s linear infinite;
  filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.2));
}

@keyframes gold-flow {
  0% { background-position: 0% 0; }
  100% { background-position: 250% 0; }
}

.sec-desc {
  margin-top: 1.2rem;
  max-width: 40rem;
  color: var(--ink-dim);
  font-size: 0.98rem;
  line-height: 2;
  text-wrap: pretty; 
}

/* ---------- 滚动显现：电影对焦效果 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y, 48px));
  filter: blur(12px); /* 初始模糊状态 */
  transition:
    opacity 1.2s var(--ease-lux),
    transform 1.2s var(--ease-lux),
    filter 1.2s var(--ease-lux); /* 模糊度过渡 */
  will-change: opacity, transform, filter;
}
.reveal.is-visible { 
  opacity: 1; 
  transform: translateY(0); 
  filter: blur(0); /* 完全对焦清晰 */
}

/* ---------- 金色描边按钮：高级扫光 ---------- */
.btn-lux {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 2.4rem;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--gold-hi);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  overflow: hidden;
  transition: color 0.5s var(--ease-lux), border-color 0.5s, box-shadow 0.5s;
}
/* 底色滑入 */
.btn-lux::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, var(--gold-hi), var(--gold));
  transform: translateX(-101%);
  transition: transform 0.55s var(--ease-lux);
  z-index: 0;
}
/* 微光扫过效果 */
.btn-lux::after {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 75%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  transition: left 0.7s var(--ease-lux);
  z-index: 2;
  pointer-events: none;
}
.btn-lux:hover { 
  color: #131108; 
  border-color: var(--gold); 
  box-shadow: var(--shadow-gold-glow);
}
.btn-lux:hover::before { transform: translateX(0); }
.btn-lux:hover::after { left: 150%; } /* 触发光扫 */
.btn-lux span, .btn-lux svg { 
  position: relative; 
  z-index: 3; 
}

/* ---------- 光标与全局UI ---------- */
.cursor-aura {
  position: fixed;
  top: 0; left: 0;
  width: 34rem; height: 34rem;
  margin: -17rem 0 0 -17rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.03) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  will-change: transform;
}

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-hi));
  z-index: var(--z-progress);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.8);
}

/* ---------- 通用工具 ---------- */
.gold-num {
  font-family: var(--latin);
  color: var(--gold);
  font-style: italic;
}

.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ============================================================
 * 自定义光标系统 (发光点 + 弹性环)
 * ============================================================ */
.site-root { position: relative; z-index: 0; }

.cursor-dot {
  position: fixed;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-hi);
  z-index: var(--z-cursor) + 1;
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
  box-shadow: 0 0 10px var(--gold-hi); /* 发光点 */
  animation: dot-pulse 3s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 5px var(--gold-hi); opacity: 0.8; }
  50% { box-shadow: 0 0 15px var(--gold-hi); opacity: 1; }
}

.cursor-ring {
  position: fixed;
  top: -19px;
  left: -19px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.6);
  z-index: var(--z-cursor);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease-spring-soft), border-color 0.3s, background 0.3s, width 0.3s, height 0.3s;
  will-change: transform;
  backdrop-filter: blur(2px);
}
.cursor-ring.is-hover {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
  transform: scale(1.2) rotate(45deg); /* 悬停旋转放大 */
}
.cursor-label {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--gold-hi);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s, transform 0.3s var(--ease-spring);
  white-space: nowrap;
  text-transform: uppercase;
}
.cursor-ring.has-label .cursor-label { 
  opacity: 1; 
  transform: scale(1); 
}
.cursor-ring.has-label {
  width: auto;
  min-width: 60px;
  padding: 0 12px;
  height: 32px;
  border-color: var(--gold);
  background: rgba(10, 10, 12, 0.85);
  border-radius: 16px;
  transform: scale(1) rotate(0deg); /* 还原旋转以容纳文字 */
}

/* ============================================================
 * 全站统一点击动画 (jl-press) V3
 * 立体重量感：下沉 + 缩放 + 内阴影
 * ============================================================ */

/* —— 组1：无 transform 冲突的控件 —— */
a, button, .rf, .wfilter, .pulled-close, .card-link, .nav-links a,
.jl-player-close, .jl-player-nav {
  transition: transform 0.18s var(--ease-spring), filter 0.18s ease, box-shadow 0.18s ease;
}
a:active, button:active, .rf:active, .wfilter:active,
.pulled-close:active, .card-link:active,
.jl-player-close:active, .jl-player-nav:active {
  transform: scale(0.94) translateY(2px); /* 加入2px下沉模拟重力按压 */
  filter: brightness(0.9);
  box-shadow: var(--shadow-press);
  transition-duration: 0.08s;
}

/* —— 组2：带 JS/GSAP transform 的卡片 —— */
.work, .service-card, .g-cell, .ww-cell, .svc-panel {
  transition: filter 0.18s ease, box-shadow 0.3s ease;
}
.work:active, .service-card:active, .g-cell:active, .ww-cell:active, .svc-panel:active {
  filter: brightness(0.82);
  box-shadow: var(--shadow-press);
  transition-duration: 0.08s;
}

/* ---------- 响应式适配 ---------- */
@media (hover: none), (pointer: coarse) {
  .cursor-aura, .cursor-dot, .cursor-ring { display: none; }
  body { cursor: auto; }
}

@media (max-width: 768px) {
  :root { --space-section: 5.5rem; }
  .section { padding: var(--space-section) 0; }
  .sec-ghost { top: -2.2rem; }
  /* 移动端减弱呼吸幅度，避免遮挡 */
  
}

@media (max-width: 560px) {
  :root { --space-section: 4.5rem; }
  .section { padding: var(--space-section) 0; }
  .sec-head { margin-bottom: 3rem; }
  .sec-ghost { font-size: 3.6rem; top: -1.8rem; }
  .sec-kicker { letter-spacing: 0.28em; font-size: 0.72rem; }
  .sec-kicker::before { width: 1.6rem; }
  .sec-title { letter-spacing: 0.03em; line-height: 1.45; }
  .sec-desc { font-size: 0.9rem; line-height: 1.9; }
  .btn-lux { padding: 0.9rem 1.9rem; letter-spacing: 0.24em; }
}