/* 琢绳集 · 视觉动效层（重度版 · 桌面增强 / 移动降级 / prefers-reduced-motion 全关） */

/* ---------- 0. 全局 ---------- */
html.motion-ready body { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #zsj-preloader, #zsj-cursor, #zsj-thread { display: none !important; }
}

/* ---------- 1. 预加载（金线绘制 + 计数） ---------- */
#zsj-preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--paper, #f6f1e7);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  transition: opacity 0.8s ease, visibility 0.8s;
}
#zsj-preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
#zsj-preloader .pl-brand {
  font-family: var(--display, serif); font-size: 26px; letter-spacing: 0.5em;
  text-indent: 0.5em; color: var(--ink, #2b2622);
  animation: plBreath 2.2s ease-in-out infinite;
}
#zsj-preloader .pl-en {
  font-family: var(--latin, serif); font-size: 9px; letter-spacing: 0.5em;
  text-indent: 0.5em; color: var(--ink-3, #a89a86); text-transform: uppercase;
}
#zsj-preloader .pl-line {
  width: 120px; height: 1px; background: var(--line-soft, #ddd3c2); position: relative; overflow: hidden;
}
#zsj-preloader .pl-line i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--gold, #a9823f);
  transition: width 0.25s ease;
}
#zsj-preloader .pl-num {
  font-family: var(--latin, serif); font-size: 10px; letter-spacing: 0.3em;
  color: var(--gold, #a9823f); font-variant-numeric: tabular-nums;
}
@keyframes plBreath { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---------- 2. 自定义光标（金点 + 迟滞环） ---------- */
#zsj-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  #zsj-cursor { display: block; position: fixed; z-index: 9998; left: 0; top: 0; pointer-events: none; }
  #zsj-cursor .dot {
    position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    border-radius: 50%; background: var(--gold, #a9823f);
    transition: transform 0.25s ease, opacity 0.25s;
  }
  #zsj-cursor .ring {
    position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
    border-radius: 50%; border: 1px solid var(--gold, #a9823f);
    opacity: 0.55; transition: transform 0.3s ease, opacity 0.3s;
  }
  #zsj-cursor.hover .dot { transform: scale(0); }
  #zsj-cursor.hover .ring { transform: scale(1.5); opacity: 0.9; }
}

/* ---------- 3. 丝线跟随（canvas 渐隐金丝带） ---------- */
#zsj-thread {
  position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  mix-blend-mode: multiply;
}
@media (max-width: 860px), (pointer: coarse) { #zsj-thread { display: none; } }

/* ---------- 4. 页面进场 / 过渡 ---------- */
body { animation: pageIn 0.9s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body.leaving { opacity: 0; transition: opacity 0.4s ease; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

/* ---------- 5. Reveal 强化（错落浮现） ---------- */
.reveal { transition-delay: var(--rv-delay, 0s); }

/* ---------- 6. 产品图 3D tilt 容器 ---------- */
.tilt { transform-style: preserve-3d; will-change: transform; transition: transform 0.5s var(--ease, ease); }
.tilt img { will-change: transform; }
.tilt .tilt-shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--shx, 50%) var(--shy, 50%), rgba(255, 252, 240, 0.28), transparent 55%);
  transition: opacity 0.4s;
}
.tilt:hover .tilt-shine { opacity: 1; }

/* ---------- 7. 首屏全屏视频 Hero（.hero-v 变体） ---------- */
.hero-v {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding: 0 5vw; overflow: hidden; isolation: isolate;
}
.hero-v .hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-v .hero-bg video,
.hero-v .hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: 78% 100%;
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.16); }
  to { transform: scale(1.22) translate3d(-1.5%, -1%, 0); }
}
.hero-v .hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(24, 17, 12, 0.72) 0%, rgba(24, 17, 12, 0.38) 46%, rgba(24, 17, 12, 0.18) 100%),
    linear-gradient(0deg, rgba(24, 17, 12, 0.55) 0%, transparent 32%);
}
.hero-v .hero-inner { max-width: 1240px; margin: 0 auto; width: 100%; }
.hero-v .hero-text { color: #f3ead9; }
.hero-v .hero-text h1 {
  color: #f7efdd; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero-v .hero-text h1 .accent::after { background: rgba(212, 175, 106, 0.3); }
.hero-v .hero-sub { color: rgba(243, 234, 217, 0.85); }
.hero-v .hero-cta .btn-ghost { color: #f3ead9; border-color: rgba(243, 234, 217, 0.5); }
.hero-v .hero-cta .btn-ghost:hover { border-color: var(--gold, #d4af6a); color: #f0dcae; }
.hero-v .hero-cta .btn-solid { box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.5); }
.hero-v .hero-cap {
  position: absolute; right: 5vw; bottom: 34px;
  font-family: var(--latin, serif); font-size: 9px; letter-spacing: 0.4em;
  text-transform: uppercase; color: rgba(243, 234, 217, 0.55);
}
/* 文字逐行浮现 */
.hero-v .hero-text > * { opacity: 0; transform: translateY(26px); animation: heroLine 1.1s var(--ease, ease) forwards; }
.hero-v .hero-text h1 { animation-delay: 0.25s; }
.hero-v .hero-text h1 span { display: block; }
.hero-v .hero-text .hero-sub { animation-delay: 0.55s; }
.hero-v .hero-text .hero-cta { animation-delay: 0.8s; }
@keyframes heroLine { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-v .hero-text > * { animation: none; opacity: 1; transform: none; }
  .hero-v .hero-bg video, .hero-v .hero-bg img { animation: none; }
}
/* 移动端：与 PC 一致播放视频，仅加深遮罩保证文字可读 */
@media (max-width: 860px), (pointer: coarse) {
  .hero-v .hero-scrim { background: linear-gradient(90deg, rgba(24,17,12,0.78), rgba(24,17,12,0.5)); }
}
.hero-v .hero-bg video { opacity: 0; transition: opacity 1.2s ease; }
.hero-v .hero-bg video.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-v .hero-bg video { opacity: 1; transition: none; }
}