/* =============================================
   完整主义 · 自性唤醒卡 — 自定义样式 v3 (紫金主题强化)
   ============================================= */

/* ---------- 全局背景光晕 ---------- */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  mix-blend-mode: screen;
  will-change: transform;
  pointer-events: none;
}
.orb-a { width: 560px; height: 560px; background: radial-gradient(circle, rgba(180,160,214,.50), transparent 70%); top: -120px; left: -140px; animation: drift 18s ease-in-out infinite; }
.orb-b { width: 460px; height: 460px; background: radial-gradient(circle, rgba(230,201,138,.28), transparent 70%); bottom: -80px; right: -100px; animation: drift-rev 22s ease-in-out infinite; }
.orb-c { width: 340px; height: 340px; background: radial-gradient(circle, rgba(210,180,240,.28), transparent 70%); top: 50%; left: 60%; animation: drift 28s ease-in-out infinite; }

@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1) }
  50%     { transform: translate(40px,-40px) scale(1.1) }
}
@keyframes drift-rev {
  0%,100% { transform: translate(0,0) scale(1) }
  50%     { transform: translate(-40px,40px) scale(1.05) }
}

/* ---------- 噪点 ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 导航 ---------- */
.nav-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: all .3s;
  backdrop-filter: blur(12px);
  background: rgba(15,10,24,.55);
  border: 1px solid rgba(180,160,214,.22);
  color: #efe8da;
}
.nav-btn:hover { color: #e6c98a; border-color: rgba(230,201,138,.4); background: rgba(18,14,30,.7); }

#navbar.scrolled {
  background: rgba(10,6,20,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(180,160,214,.18);
}

/* ---------- 呼吸光 ---------- */
@keyframes breathing {
  0%,100% { opacity:.15; transform: scale(1) }
  50%     { opacity:.55; transform: scale(1.03) }
}

/* ---------- 卡牌缩略图（7:12 强制比例） ---------- */
.card-face {
  position: relative;
  aspect-ratio: 7 / 12 !important;
  width: 100%;
  height: auto;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.2);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
  cursor: pointer;
  background: #1a1428;
}
.card-face:hover {
  transform: translateY(-4px) rotate(-.3deg);
  box-shadow: 0 24px 60px rgba(0,0,0,.65), 0 4px 8px rgba(0,0,0,.3);
}
.card-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-face .group-tag {
  position: absolute;
  bottom: 6px; right: 6px;
  font-size: 9px;
  letter-spacing: .15em;
  color: rgba(255,255,255,.88);
  background: rgba(10,6,20,.55);
  padding: 2px 6px;
  border-radius: 3px;
  backdrop-filter: blur(4px);
}

/* 首页卡片底部文字 */
.card-item p {
  min-height: 2.5em;
}

/* ---------- 详情页卡面（大） ---------- */
.card-hero {
  position: relative;
  aspect-ratio: 7 / 12 !important;
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.4);
  background: #1a1428;
}
@media (min-width: 768px) {
  .card-hero { max-width: 340px; }
}
.card-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.card-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 80px rgba(0,0,0,.25);
  pointer-events: none;
}

/* ---------- 音频播放器（紫金玻璃球 v3） ---------- */
.audio-bar {
  position: relative;
  background: linear-gradient(160deg, rgba(32,24,50,.94), rgba(20,14,36,.97));
  border: 1px solid rgba(180,160,214,.22);
  border-radius: 18px;
  padding: 20px 20px 18px;
  backdrop-filter: blur(24px);
  overflow: hidden;
}
.audio-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,201,138,.45), rgba(180,160,214,.4), transparent);
}
.audio-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(180,160,214,.08), transparent 60%);
  pointer-events: none;
}
.audio-bar.playing {
  border-color: rgba(180,160,214,.5);
  box-shadow: 0 0 60px rgba(180,160,214,.18), 0 0 30px rgba(230,201,138,.1);
}

/* 播放按钮 —— 紫金双色 */
.play-btn {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c9a75d 0%, #b4a0d6 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 28px rgba(180,160,214,.4), 0 2px 10px rgba(201,167,93,.3);
  transition: all .3s;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
}
.play-btn:hover { transform: scale(1.08); box-shadow: 0 8px 36px rgba(180,160,214,.55); }
.play-btn:active { transform: scale(.96); }
.play-btn.playing { animation: playPulse 2.8s ease-in-out infinite; }
@keyframes playPulse {
  0%,100% { box-shadow: 0 6px 28px rgba(180,160,214,.4), 0 2px 10px rgba(201,167,93,.3) }
  50%     { box-shadow: 0 6px 32px rgba(230,201,138,.6), 0 0 50px rgba(180,160,214,.35) }
}

/* 播放按钮外圈光环 */
.play-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(230,201,138,.35);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.audio-bar.playing .play-glow {
  opacity: 1;
  animation: playGlow 2s ease-in-out infinite;
}
@keyframes playGlow {
  0%,100% { transform: scale(1); opacity: .3 }
  50%     { transform: scale(1.18); opacity: 0 }
}

/* 进度条 */
.progress-track {
  height: 4px;
  background: rgba(180,160,214,.12);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #b4a0d6, #e6c98a);
  border-radius: 2px;
  position: relative;
  transition: width .15s linear;
}
.progress-fill::after {
  content: '';
  position: absolute;
  right: -3px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  background: #e6c98a;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(230,201,138,.8);
}

/* 波形动画 */
.wave { display:flex; align-items:center; gap:2px; height:16px; }
.wave span {
  display: block;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(180,160,214,.6), rgba(230,201,138,.6));
  border-radius: 1px;
  opacity: .3;
  transition: height .3s ease, opacity .3s ease;
}
.audio-bar.playing .wave span { animation: waveBar 1.2s ease-in-out infinite; }
.audio-bar.playing .wave span:nth-child(2) { animation-delay: .08s }
.audio-bar.playing .wave span:nth-child(3) { animation-delay: .16s }
.audio-bar.playing .wave span:nth-child(4) { animation-delay: .24s }
.audio-bar.playing .wave span:nth-child(5) { animation-delay: .32s }
.audio-bar.playing .wave span:nth-child(6) { animation-delay: .12s }
.audio-bar.playing .wave span:nth-child(7) { animation-delay: .20s }
@keyframes waveBar {
  0%,100% { height: 20%; opacity: .35 }
  50%     { height: 100%; opacity: 1 }
}

/* ---------- 文本段落 ---------- */
.para {
  position: relative;
  padding-left: 20px;
  border-left: 1px solid rgba(180,160,214,.15);
  transition: all .5s;
  color: #c9bfab;
  line-height: 2.05;
  letter-spacing: .02em;
  font-size: 16px;
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
  .para { font-size: 17px; line-height: 2.15; }
}
.para::before {
  content: '';
  position: absolute;
  left: -1px; top: 14px;
  width: 3px; height: 18px;
  background: rgba(180,160,214,.3);
  border-radius: 2px;
  opacity: 0;
  transition: all .5s;
}
.para.active {
  color: #efe8da;
  border-left-color: rgba(180,160,214,.55);
  padding-left: 24px;
}
.para.active::before {
  opacity: 1;
  height: 26px;
  top: 12px;
  background: linear-gradient(180deg, #b4a0d6, #e6c98a);
  box-shadow: 0 0 14px rgba(180,160,214,.5);
}

/* ---------- 筛选按钮 ---------- */
.group-chip {
  position: relative;
  padding: 8px 18px;
  font-size: 13px;
  letter-spacing: .1em;
  border: 1px solid rgba(180,160,214,.22);
  border-radius: 999px;
  background: transparent;
  color: #c9bfab;
  transition: all .3s;
  cursor: pointer;
  font-family: inherit;
}
.group-chip:hover { color: #efe8da; border-color: rgba(180,160,214,.5); background: rgba(180,160,214,.06); }
.group-chip.active {
  background: linear-gradient(135deg, rgba(180,160,214,.14), rgba(230,201,138,.08));
  border-color: rgba(230,201,138,.5);
  color: #efe8da;
  box-shadow: 0 0 20px rgba(180,160,214,.15);
}

/* ---------- Hero ---------- */
.hero-brand {
  font-size: clamp(30px, 8vw, 52px);
  font-weight: 300;
  letter-spacing: .18em;
  line-height: 1.4;
}
.hero-brand b {
  font-weight: 600;
  background: linear-gradient(135deg, #c9a75d, #e6c98a, #b4a0d6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-en {
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .35em;
  color: rgba(180,160,214,.55);
  font-size: 12px;
}

/* ---------- 渐入动画 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- 前后切换按钮 ---------- */
.card-nav-btn {
  min-width: 0;
  overflow: hidden;
  position: relative;
  background: rgba(15,10,24,.5);
}
.card-nav-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(180,160,214,.06), rgba(230,201,138,.04));
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.card-nav-btn:hover::before { opacity: 1; }
.card-nav-btn .nav-label {
  font-size: 10px;
  color: rgba(230,201,138,.6);
  letter-spacing: .18em;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
}
.card-nav-btn .nav-text {
  font-size: 12px;
  line-height: 1.5;
  color: #c9bfab;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  word-break: break-word;
}

/* ---------- 移动端工具按钮 ---------- */
.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  color: rgba(180,160,214,.7);
  font-size: 10px;
  letter-spacing: .1em;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color .2s;
}
.tool-btn:active { color: #e6c98a; }
.tool-btn span { font-weight: 500; }

/* ---------- 移动端前后导航按钮 ---------- */
.mobile-nav-btn {
  color: #efe8da;
  font-family: inherit;
  transition: all .15s;
  border: 1px solid rgba(180,160,214,.18);
}
.mobile-nav-btn:active {
  transform: scale(.97);
  border-color: rgba(230,201,138,.4);
}

/* ---------- 扫描遮罩 ---------- */
.scan-viewport {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 7 / 12;
  max-height: 70vh;
}
.scan-viewport video,
.scan-viewport canvas { width: 100%; height: 100%; object-fit: cover; }
.scan-frame {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 75%; height: 55%;
  border: 2px solid rgba(180,160,214,.9);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
}
.scan-frame::before,
.scan-frame::after,
.scan-frame [data-c],
.scan-frame [data-d] {
  content: ''; position: absolute; width: 16px; height: 16px;
  border-color: #efe8da;
  border-style: solid;
}
.scan-frame::before { top:-2px; left:-2px; border-width: 2px 0 0 2px }
.scan-frame::after  { top:-2px; right:-2px; border-width: 2px 2px 0 0 }
.scan-frame [data-c]{ bottom:-2px; left:-2px; border-width: 0 0 2px 2px }
.scan-frame [data-d]{ bottom:-2px; right:-2px; border-width: 0 2px 2px 0 }
.scan-line {
  position: absolute;
  left: 6%; right: 6%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(180,160,214,.95), rgba(230,201,138,.95), transparent);
  animation: scanLine 2.2s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(180,160,214,.6);
}
@keyframes scanLine {
  0%,100% { top: 10%; opacity: .4 }
  50%     { top: 90%; opacity: 1 }
}

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  .para { padding-left: 16px; font-size: 15px; line-height: 2; }
  .para.active { padding-left: 18px; }
  .card-nav-btn .nav-text { font-size: 11px; }
  .audio-bar { padding: 16px 14px 14px; border-radius: 14px; }
  .play-btn { width: 50px; height: 50px; }
}

/* ---------- 隐藏 scrollbar ---------- */
.no-scrollbar::-webkit-scrollbar { display: none }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none }

/* ---------- 工具 ---------- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Toast ---------- */
.toast-fade { animation: fadeUp .5s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ========= 扫描识别动画 ========= */
.scan-ball {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,201,138,0.9) 0%, rgba(180,160,214,0.7) 50%, transparent 75%);
  position: relative;
  animation: scan-breath 1.6s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(180,160,214,0.5), 0 0 30px rgba(230,201,138,0.25);
}
.scan-ball::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(180,160,214,0.4);
  animation: scan-ring 1.6s ease-out infinite;
}
.scan-ball::after {
  content: '';
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(230,201,138,0.25);
  animation: scan-ring 1.6s ease-out infinite 0.4s;
}
@keyframes scan-breath {
  0%, 100% { transform: scale(0.85); opacity: 0.85; }
  50% { transform: scale(1.1); opacity: 1; }
}
@keyframes scan-ring {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}