/* ===================================================================
   TC 设计系统 · 共享层 (tc-ui.css) —— v4「动态大字海报」(2026-06-23 · F)
   深墨底 + 暖纸字 + 辣红强调,巨字驱动、贴纸标签、跑马灯、硬阴影按钮、
   逐字淡入 / 滚动揭示。纯 CSS(只动 transform/opacity),尊重「减少动态」。
   配套 tc-ui.js:逐字巨标动画 + 滚动揭示 + 一键复制微信(.copywx)。
   各页 <style> 仍内联同名 token 以防裸渲染;此处是全站统一来源。
   =================================================================== */

:root{
  --ink:#0c0c0d;
  --ink-2:#141415;
  --paper:#f4f1ea;
  --red:#ff3b21;
  --red-deep:#cf1d0a;
  --red-warm:#ff7a55;
  --mute:#9c998f;
  --line:rgba(244,241,234,.14);
  --line-strong:rgba(244,241,234,.28);
  --sans:ui-sans-serif,-apple-system,"Segoe UI","PingFang SC","HarmonyOS Sans","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,"Liberation Mono",monospace;
  --serif:Georgia,"Times New Roman","Songti SC",serif;
}

/* ---------- 基底(各页也内联,双保险) ---------- */
.tc-base{background:var(--ink);color:var(--paper);font-family:var(--sans)}
::selection{background:var(--red);color:#fff}

/* ---------- keyframes ---------- */
@keyframes tcFadeUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@keyframes tcCharIn{0%{opacity:0;transform:translateY(.42em) rotate(2deg);filter:blur(6px)}100%{opacity:1;transform:translateY(0) rotate(0);filter:blur(0)}}
@keyframes tcFlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes tcDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes tcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tcPulse{0%{box-shadow:0 0 0 0 rgba(255,59,33,.6)}70%{box-shadow:0 0 0 12px rgba(255,59,33,0)}100%{box-shadow:0 0 0 0 rgba(255,59,33,0)}}

/* ---------- 滚动揭示(仅 <html class="tc-js"> 下隐藏,无 JS 不丢内容) ---------- */
.tc-js .reveal{opacity:0}
.tc-js .reveal.in{animation:tcFadeUp .9s cubic-bezier(.16,.84,.44,1) forwards}

/* ---------- 巨字逐字淡入(tc-ui.js 拆字后用) ---------- */
.statement .ch{display:inline-block;opacity:0;animation:tcCharIn .8s cubic-bezier(.2,.8,.3,1) forwards;will-change:transform,opacity}
.statement .ln{display:block;overflow:hidden;padding-bottom:.02em}
/* 强调行:实心辣红(逐字拆分后 background-clip:text 会失效,故用实色,稳定可靠) */
.statement .accent{color:var(--red)}
.statement .accent .ch{color:var(--red)}

/* ---------- 跑马灯(整站最多一条/页) ---------- */
.marquee{background:var(--red);color:#fff;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  overflow:hidden;white-space:nowrap;padding:14px 0;user-select:none}
.marquee-track{display:inline-block;white-space:nowrap;animation:tcMarquee 30s linear infinite;
  font-weight:800;font-size:clamp(20px,3.4vw,40px);letter-spacing:.02em}
.marquee-track span{padding:0 .5em}
.marquee-track .star{color:var(--ink)}

/* ---------- 区块标签 ---------- */
.seclabel{font-family:var(--mono);font-size:clamp(11px,1.1vw,13px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.seclabel::before{content:"";width:42px;height:2px;background:var(--red);flex:none}

/* ---------- 贴纸标签 ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;padding:5px 11px;
  border:1.5px solid var(--paper);border-radius:4px;transform:rotate(-1.5deg);background:var(--ink);white-space:nowrap}
.tag.hot{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(2deg);font-weight:800}
.tag.free{background:var(--paper);color:var(--ink);transform:rotate(1deg);font-weight:700}

/* ---------- 按钮(硬阴影,可推) ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-weight:800;
  font-size:clamp(15px,1.5vw,18px);padding:15px 28px;border-radius:6px;line-height:1.1;cursor:pointer;
  border:none;font-family:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.btn svg{flex:none}
.btn-primary{background:var(--red);color:#fff;box-shadow:5px 5px 0 var(--red-deep)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--red-deep)}
.btn-solid{background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 #b6b3aa}
.btn-solid:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #b6b3aa}
.btn-ghost{background:transparent;color:var(--paper);border:2px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--paper);transform:translate(-2px,-2px)}
.btn:active{transform:translate(0,0)}
.btn:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---------- toast(tc-ui.js 自动注入,若页面没有) ---------- */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(160%);
  background:var(--ink);color:var(--paper);border:2px solid var(--red);padding:14px 24px;border-radius:10px;
  font-weight:700;font-size:15px;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:99;
  transition:transform .35s cubic-bezier(.16,.84,.44,1);display:flex;align-items:center;gap:10px;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast .ok{color:var(--red);flex:none}

/* ---------- 尊重「减少动态」 ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important}
  .statement .ch{opacity:1!important;filter:none!important;transform:none!important}
  .statement .accent{animation:none!important;background-position:0 50%!important}
  .marquee-track{animation:none!important}
  *{animation-duration:.001s!important}
}
