/* ==========================================================================
 * 文山亚太车城官网主题 — 样式表
 * 由原静态站内联样式原样迁移（保留视觉风格，仅做模板化改造）
 * 1) 设计令牌  2) 语义色回退  3) 关键布局(视频背景/液态玻璃)  4) 工具类
 * ========================================================================== */


/* ---------- 1. 设计令牌（来自原 <style id="theme-vars">） ---------- */

/* 文山亚太车城官网 — 深色震撼风格颜色与字体系统 */

:root {
  /* Semantic aliases required by head contract */
  --yatai-background: #0A0A0A;
  --yatai-foreground: #FAFAFA;
  --yatai-card: #171717;
  --yatai-card-foreground: #FAFAFA;
  --yatai-popover: #171717;
  --yatai-popover-foreground: #FAFAFA;
  --yatai-primary: #DC2626;
  --yatai-primary-foreground: #FFFFFF;
  --yatai-muted: #262626;
  --yatai-muted-foreground: #A3A3A3;
  --yatai-border: #262626;
  --yatai-input: #262626;
  --yatai-ring: #DC2626;

  --yatai-radius-sm: 0.25rem;
  --yatai-radius-md: 0.5rem;
  --yatai-radius-lg: 1rem;

  /* Extended tokens for direct page use */
  --yatai-bg: #0A0A0A;
  --yatai-surface: #171717;
  --yatai-surface-2: #262626;
  --yatai-ink: #FAFAFA;
  --yatai-ink-2: #D4D4D4;
  --yatai-ink-3: #A3A3A3;
  --yatai-line: #262626;
  --yatai-brand: #DC2626;
  --yatai-brand-ink: #FFFFFF;

  --yatai-state-success: #22C55E;
  --yatai-state-warning: #F59E0B;
  --yatai-state-error: #EF4444;
  --yatai-state-info: #38BDF8;

  /* Glow / accent */
  --yatai-glow-red: 0 0 40px rgba(220, 38, 38, 0.35);
  --yatai-glow-amber: 0 0 30px rgba(251, 191, 36, 0.25);

  /* Shadows (keep alpha ≤ 0.05 per token contract) */
  --yatai-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
  --yatai-shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.05);
  --yatai-shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.05);

  /* Type */
  --yatai-font-sans: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

html {
  font-family: var(--yatai-font-sans);
  color: var(--yatai-ink);
  background-color: var(--yatai-bg);
}


/* ---------- 2. 语义色类回退（来自原 <style id="semantic-token-fallback">） ---------- */

      .bg-background { background-color: var(--yatai-background); }
      .text-background { color: var(--yatai-background); }
      .border-background { border-color: var(--yatai-background); }
      .ring-background { --tw-ring-color: var(--yatai-background); }
      .bg-foreground { background-color: var(--yatai-foreground); }
      .text-foreground { color: var(--yatai-foreground); }
      .border-foreground { border-color: var(--yatai-foreground); }
      .ring-foreground { --tw-ring-color: var(--yatai-foreground); }
      .bg-card { background-color: var(--yatai-card); }
      .text-card { color: var(--yatai-card); }
      .border-card { border-color: var(--yatai-card); }
      .ring-card { --tw-ring-color: var(--yatai-card); }
      .bg-card-foreground { background-color: var(--yatai-card-foreground); }
      .text-card-foreground { color: var(--yatai-card-foreground); }
      .border-card-foreground { border-color: var(--yatai-card-foreground); }
      .ring-card-foreground { --tw-ring-color: var(--yatai-card-foreground); }
      .bg-popover { background-color: var(--yatai-popover); }
      .text-popover { color: var(--yatai-popover); }
      .border-popover { border-color: var(--yatai-popover); }
      .ring-popover { --tw-ring-color: var(--yatai-popover); }
      .bg-popover-foreground { background-color: var(--yatai-popover-foreground); }
      .text-popover-foreground { color: var(--yatai-popover-foreground); }
      .border-popover-foreground { border-color: var(--yatai-popover-foreground); }
      .ring-popover-foreground { --tw-ring-color: var(--yatai-popover-foreground); }
      .bg-primary { background-color: var(--yatai-primary); }
      .text-primary { color: var(--yatai-primary); }
      .border-primary { border-color: var(--yatai-primary); }
      .ring-primary { --tw-ring-color: var(--yatai-primary); }
      .bg-primary-foreground { background-color: var(--yatai-primary-foreground); }
      .text-primary-foreground { color: var(--yatai-primary-foreground); }
      .border-primary-foreground { border-color: var(--yatai-primary-foreground); }
      .ring-primary-foreground { --tw-ring-color: var(--yatai-primary-foreground); }
      .bg-muted { background-color: var(--yatai-muted); }
      .text-muted { color: var(--yatai-muted); }
      .border-muted { border-color: var(--yatai-muted); }
      .ring-muted { --tw-ring-color: var(--yatai-muted); }
      .bg-muted-foreground { background-color: var(--yatai-muted-foreground); }
      .text-muted-foreground { color: var(--yatai-muted-foreground); }
      .border-muted-foreground { border-color: var(--yatai-muted-foreground); }
      .ring-muted-foreground { --tw-ring-color: var(--yatai-muted-foreground); }
      .bg-border { background-color: var(--yatai-border); }
      .text-border { color: var(--yatai-border); }
      .border-border { border-color: var(--yatai-border); }
      .ring-border { --tw-ring-color: var(--yatai-border); }
      .bg-input { background-color: var(--yatai-input); }
      .text-input { color: var(--yatai-input); }
      .border-input { border-color: var(--yatai-input); }
      .ring-input { --tw-ring-color: var(--yatai-input); }
      .bg-ring { background-color: var(--yatai-ring); }
      .text-ring { color: var(--yatai-ring); }
      .border-ring { border-color: var(--yatai-ring); }
      .ring-ring { --tw-ring-color: var(--yatai-ring); }

/* ---------- 3. 关键布局：固定视频背景 / 液态玻璃卡片 / 声音按钮 ---------- */

      html { background-color: var(--yatai-bg, #0A0A0A); }
html, body { overflow-x: hidden; max-width: 100%; }
      .section-stack { position: relative; z-index: 10; }
      section { position: relative; }

      /* Single fixed background video covering the whole page */
      #bg-video {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
      height: 100vh;
      height: 100dvh;
        object-fit: cover;
        z-index: 0;
        pointer-events: none;
      }
      /* 视频尚未加载完成时的占位底色（首屏不再为 8MB 视频等待） */
  #bg-video {
    background:
      radial-gradient(120% 100% at 18% 0%, rgba(220, 38, 38, 0.16) 0%, rgba(10, 10, 10, 0) 55%),
      radial-gradient(100% 100% at 85% 100%, rgba(255, 255, 255, 0.05) 0%, rgba(10, 10, 10, 0) 60%),
      #0A0A0A;
  }
  /* Gentle vignette: keeps the video clearly visible everywhere,
         only slightly darkening the far edges for text contrast */
      #bg-scrim {
        position: fixed;
        inset: 0;
      height: 100vh;
      height: 100dvh;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(125% 95% at 50% 35%, rgba(0,0,0,0) 52%, rgba(0,0,0,var(--yatai-scrim,0.45)) 100%);
      }

      /* Make page surfaces transparent so the video is always visible */
      body { background: transparent !important; }
      .bg-background { background-color: transparent !important; }
      /* Liquid-glass cards: refracted highlight + blurred video behind + rim light */
      .bg-card {
        background:
          radial-gradient(120% 80% at 18% -10%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%),
          linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.025) 45%, rgba(255,255,255,0.06) 100%),
          rgba(16,16,16,var(--yatai-card-alpha,0.55));
        backdrop-filter: blur(22px) saturate(165%) brightness(1.06);
        -webkit-backdrop-filter: blur(22px) saturate(165%) brightness(1.06);
        border: 1px solid rgba(255,255,255,0.12);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.10),
          inset 0 -1px 0 rgba(0,0,0,0.30),
          0 12px 32px rgba(0,0,0,0.32);
      }
      .bg-muted { background-color: rgba(38,38,38,0.5) !important; }

      /* 声音开关：低调的液态玻璃小按钮（默认只显示图标，悬停/聚焦才展开文案） */
#sound-btn {
  position: fixed; top: 5rem; right: 1.25rem; z-index: 60;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 9999px;
  background: rgba(16,16,16,0.5);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: rgba(250,250,250,0.78);
  cursor: pointer; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  transition: width .18s ease, background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .15s ease;
}
#sound-btn:hover, #sound-btn:focus-visible {
  width: auto; padding: 0 0.85rem;
  background: rgba(16,16,16,0.78);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
}
#sound-btn:active { transform: scale(0.96); }
#sound-label {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-size: 0.8rem; font-weight: 600;
  transition: max-width .18s ease, opacity .18s ease;
}
#sound-btn:hover #sound-label, #sound-btn:focus-visible #sound-label {
  max-width: 6rem; opacity: 1; margin-left: 0.4rem;
}
/* 静音只做极轻微呼吸提示，不再抢视线 */
#sound-btn.is-muted { animation: sound-breathe 3.2s ease-in-out infinite; }
@keyframes sound-breathe {
  0%,100% { box-shadow: 0 4px 14px rgba(0,0,0,0.28); }
  50%     { box-shadow: 0 4px 16px rgba(0,0,0,0.28), 0 0 0 3px rgba(220,38,38,0.16); }
}
#sound-btn svg { width: 18px; height: 18px; display: block; }

/* ---------- 4. 工具类（来自原 <body> 内联样式） ---------- */

    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    [data-icon] {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      background-color: currentColor;
    }
/* ---------- 5. 内页补充：正文排版 / 列表卡片 / 内页页头 ---------- */
/* 文章与单页正文（Halo 富文本输出，无 Tailwind Typography 插件，故手写基础排版） */
.yatai-prose {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--yatai-ink-2, #D4D4D4);
  word-break: break-word;
}
.yatai-prose > * + * { margin-top: 1.15rem; }
.yatai-prose h1, .yatai-prose h2, .yatai-prose h3, .yatai-prose h4 {
  color: var(--yatai-ink, #FAFAFA);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.yatai-prose h1 { font-size: 1.9rem; margin-top: 2.4rem; }
.yatai-prose h2 { font-size: 1.55rem; margin-top: 2.2rem; }
.yatai-prose h3 { font-size: 1.25rem; margin-top: 1.9rem; }
.yatai-prose h4 { font-size: 1.08rem; margin-top: 1.6rem; }
.yatai-prose a {
  color: var(--yatai-brand, #DC2626);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.yatai-prose strong { color: var(--yatai-ink, #FAFAFA); font-weight: 700; }
.yatai-prose ul, .yatai-prose ol { padding-left: 1.4rem; }
.yatai-prose ul { list-style: disc; }
.yatai-prose ol { list-style: decimal; }
.yatai-prose li + li { margin-top: .45rem; }
.yatai-prose blockquote {
  border-left: 3px solid var(--yatai-brand, #DC2626);
  padding: .25rem 0 .25rem 1.1rem;
  color: var(--yatai-ink-3, #A3A3A3);
  font-style: italic;
}
.yatai-prose code {
  background: rgba(255,255,255,.08);
  border-radius: .375rem;
  padding: .12em .42em;
  font-size: .9em;
}
.yatai-prose pre {
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: .75rem;
  padding: 1rem 1.1rem;
  overflow-x: auto;
}
.yatai-prose pre code { background: none; padding: 0; }
.yatai-prose img {
  border-radius: .75rem;
  max-width: 100%;
  height: auto;
}
.yatai-prose hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,.12);
  margin: 2rem 0;
}
.yatai-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.yatai-prose th, .yatai-prose td {
  border: 1px solid rgba(255,255,255,.12);
  padding: .6rem .75rem;
  text-align: left;
}
.yatai-prose th { background: rgba(255,255,255,.05); color: var(--yatai-ink, #FAFAFA); }

/* 内页页头留出固定导航高度 */
.yatai-page-head { padding-top: 8.5rem; }


/* ---------- 6. 视频背景上的文字可读性（卡片内文字不受影响） ---------- */
.section-stack h1,
.section-stack h2,
.section-stack h3 { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55); }
.section-stack p.text-muted-foreground:not(.bg-card *) { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75); }
.section-stack .text-muted-foreground:not(.bg-card *) { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }