/* ============================================================
   文章科技 · 尖端体验层 (cutting-edge enhancement layer)
   Loaded AFTER styles.css. Progressive enhancement only.
   ============================================================ */

/* ---------- 1. Scroll reveal system ---------------------------------- */
html.js-on [data-reveal] { opacity: 0 !important; transform: translateY(30px) !important; transition: opacity .9s cubic-bezier(.19,.77,.27,1), transform 1s cubic-bezier(.19,.77,.27,1); transition-delay: var(--rd, 0ms); }
html.js-on [data-reveal="left"]  { transform: translateX(-36px) !important; }
html.js-on [data-reveal="right"] { transform: translateX(36px) !important; }
html.js-on [data-reveal="scale"] { transform: scale(.94) !important; }
html.js-on [data-reveal="rise-lg"] { transform: translateY(54px) !important; }
html.js-on [data-reveal="clip"] { opacity: 1 !important; transform: none !important; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.62,.05,.1,1); transition-delay: var(--rd, 0ms); }
html.js-on [data-reveal].is-revealed { opacity: 1 !important; transform: none !important; clip-path: inset(0 0 0 0); }

/* ---------- 2. Editorial edition rail (left running head) ------------ */
.edition-rail { position: fixed; left: 22px; top: 0; height: 100vh; width: 30px; z-index: 60; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px; pointer-events: none; color: var(--ink); transition: color .5s ease; }
.edition-rail.on-dark { color: var(--paper); }
.edition-rail .er-top, .edition-rail .er-bottom { font-family: var(--f-en-mono); font-size: 9.5px; letter-spacing: 0.34em; writing-mode: vertical-rl; text-transform: uppercase; opacity: 0.5; }
.edition-rail .er-center { display: flex; flex-direction: column; align-items: center; gap: 14px; transition: opacity .35s ease; }
.edition-rail .er-no { font-family: var(--f-en-serif); font-size: 30px; line-height: 1; color: var(--jujube); transition: color .5s ease; }
.edition-rail.on-dark .er-no { color: var(--gold-soft); }
.edition-rail .er-name { writing-mode: vertical-rl; font-family: var(--f-biaosong); font-size: 15px; letter-spacing: 0.32em; white-space: nowrap; }
.edition-rail .er-track { width: 1px; height: 110px; background: currentColor; opacity: 0.2; position: relative; }
.edition-rail .er-track::after { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: var(--progress, 0%); background: var(--jujube); transition: height .15s linear; }
.edition-rail.on-dark .er-track::after { background: var(--gold-soft); }
.edition-rail.swapping .er-center { opacity: 0; }
@media (min-width: 1281px) { .edition-rail { display: flex; } }

/* ---------- 3. Header condense on scroll ----------------------------- */
.site-header { transition: background .4s ease, box-shadow .4s ease; }
.site-header .nav { transition: padding .4s cubic-bezier(.2,.7,.2,1); }
.site-header.condensed .nav { padding-top: 14px; padding-bottom: 14px; }
.site-header.condensed { background: rgba(245, 238, 223, 0.95); box-shadow: 0 1px 0 rgba(26,21,18,0.06), 0 20px 40px -36px rgba(26,21,18,0.5); }
.site-header .brand-seal { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.site-header.condensed .brand-seal { transform: scale(0.88); }

/* ---------- 4. Stat count-up: keep tabular alignment ----------------- */
.stats-bar .stat-num { font-variant-numeric: tabular-nums; }

/* ---------- 5. Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js-on [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .edition-rail .er-track::after { transition: none; }
}