/* ============================================================================
   sanjie.css — "The Three Stages of Wushu Education" article view
   Animated figures + a little article chrome. Premium motion personality:
   scroll-triggered reveal, staggered draw-ins, restrained ambient motion.
   All motion gated on prefers-reduced-motion. Themes with the site (light+dark).
   ============================================================================ */

.oa-artview#view-sanjie { --acc: #7a2e1d; --accd: #d59155; }

/* figure-local palette — falls back to global --color-* outside .oa-artview */
.sj-fig {
  --fg-ink:  var(--ink,  var(--color-text));
  --fg-soft: var(--ink3, var(--color-text-2));
  --fg-mut:  var(--mut,  var(--color-muted));
  --fg-rule: var(--bd,   var(--color-border));
  --fg-card: var(--surf2, #faf7f1);
  --fg-acc:  var(--acc,  var(--color-accent));
  --fg-accd: var(--accd, #d59155);
  --fg-ochre:#b5723a;
  --fg-sage: #6f8a6a;
  --fg-sage-d:#587a52;
  --fg-night:#5a6a7f;
  --fg-grey: #b9b0a1;
  --fg-e:  cubic-bezier(.4,0,.2,1);
  --fg-e2: cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="dark"] .sj-fig {
  --fg-card:#26221e; --fg-ochre:#d29155; --fg-sage:#8fae86; --fg-sage-d:#a6c39c;
  --fg-night:#93a7c1; --fg-grey:#5b544c;
}

/* ---- figure container + reveal ---- */
.sj-fig {
  margin: 34px 0 30px; text-align: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--fg-e), transform .7s var(--fg-e);
}
.sj-fig.in { opacity: 1; transform: none; }
.sj-fig svg { width: 100%; max-width: 600px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.sj-fig figcaption {
  font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; line-height: 1.55;
  color: var(--fg-mut); text-align: left; margin: 14px auto 0; max-width: 540px;
}
.sj-fig figcaption .fnum {
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  font-size: 10.5px; color: var(--fg-acc); margin-right: .5em;
}
.sj-fig text { font-family: 'Inter', system-ui, sans-serif; fill: var(--fg-soft); }
.sj-fig text.zh { font-family: 'Noto Serif TC', serif; }
.sj-fig .t-sm  { font-size: 11px; fill: var(--fg-mut); }
.sj-fig .t-tiny{ font-size: 9.5px; fill: var(--fg-mut); }
.sj-fig .t-hd  { font-size: 12.5px; font-weight: 700; fill: var(--fg-accd); }
.sj-fig .t-num { font-size: 11px; font-weight: 700; }
:root[data-theme="dark"] .sj-fig .t-hd { fill: var(--fg-acc); }

/* ---- animation primitives (play when .sj-fig gets .in) ---- */
.a-fade { opacity: 0; transition: opacity .6s var(--fg-e); transition-delay: var(--d,0s); }
.sj-fig.in .a-fade { opacity: 1; }

/* soft fade to a target opacity (for faint background fills) */
.a-fade-soft { opacity: 0; transition: opacity .6s var(--fg-e); transition-delay: var(--d,0s); }
.sj-fig.in .a-fade-soft { opacity: var(--o, 1); }

.a-rise { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--fg-e), transform .6s var(--fg-e); transition-delay: var(--d,0s); }
.sj-fig.in .a-rise { opacity: 1; transform: none; }

.a-gx { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; transition: transform .8s var(--fg-e2); transition-delay: var(--d,0s); }
.sj-fig.in .a-gx { transform: scaleX(1); }

.a-gy { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; transition: transform .75s var(--fg-e2); transition-delay: var(--d,0s); }
.sj-fig.in .a-gy { transform: scaleY(1); }

.a-pop { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .4s var(--fg-e), transform .5s cubic-bezier(.34,1.56,.64,1); transition-delay: var(--d,0s); }
.sj-fig.in .a-pop { opacity: 1; transform: scale(1); }

.a-draw { stroke-dasharray: var(--len,1); stroke-dashoffset: var(--len,1); transition: stroke-dashoffset 1.15s var(--fg-e2); transition-delay: var(--d,0s); }
.sj-fig.in .a-draw { stroke-dashoffset: 0; }

.a-grow { transform: scale(.001); transform-box: fill-box; transform-origin: center; transition: transform .7s var(--fg-e2); transition-delay: var(--d,0s); }
.sj-fig.in .a-grow { transform: scale(1); }

/* ambient (only once figure is on-screen; JS adds .amb) */
.sj-fig.amb .pulse { animation: sj-pulse 2.6s var(--fg-e) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sj-pulse { 0%,100%{ opacity:.55; transform:scale(1);} 50%{ opacity:1; transform:scale(1.16);} }
.sj-fig.amb .drift { animation: sj-drift 3.6s ease-in-out infinite; }
@keyframes sj-drift { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-3px);} }
.sj-flowdot { opacity: 0; }
.sj-fig.amb .sj-flowdot { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sj-fig, .a-fade, .a-rise, .a-gx, .a-gy, .a-pop, .a-draw, .a-grow {
    opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important;
  }
  .a-fade-soft { opacity: var(--o, 1) !important; transition: none !important; }
  .sj-fig.amb .pulse, .sj-fig.amb .drift { animation: none !important; }
  .sj-flowdot { opacity: 0 !important; }   /* no rAF to place it → keep hidden */
}

/* ============================================================================
   Article chrome specific to views/sanjie.html
   (companion oa-* classes come from articles.css; these are the extras)
   ============================================================================ */
#view-sanjie sup.oa-fn { font-size: .62em; line-height: 0; vertical-align: super; }
#view-sanjie sup.oa-fn a { color: var(--acc); text-decoration: none; font-weight: 700; }

#view-sanjie .oa-h3 { font-family: 'Spectral', Georgia, serif; font-weight: 700; font-size: 1.16rem; color: var(--ink); margin: 2.1em 0 .45em; line-height: 1.3; }
#view-sanjie .oa-h4 { font-family: 'Spectral', serif; font-style: italic; font-weight: 700; font-size: 1.02rem; color: var(--ink3); margin: 1.5em 0 .3em; }
#view-sanjie .oa-lede-p { font-size: 1.1em; color: var(--ink3); }

#view-sanjie .oa-epi { margin: 1.5em 0; padding: .2em 0 .2em 1.1em; border-left: 2px solid var(--acc); font-family: 'Spectral', serif; font-style: italic; color: var(--ink3); font-size: 1.02rem; }
#view-sanjie .oa-epi .small { font-size: .86em; color: var(--mut); }
#view-sanjie .oa-epi cite { display: block; font-style: normal; font-size: .8rem; color: var(--mut); margin-top: .5em; }
#view-sanjie .oa-epi cite::before { content: "— "; }
#view-sanjie .oa-epi .hanzi { font-family: 'Noto Serif TC', serif; font-style: normal; }

#view-sanjie .oa-thesis { margin: 1.7em 0; padding: 1.05em 1.35em; background: var(--surf2); border: 1px solid var(--bd); border-left: 3px solid var(--acc); border-radius: 9px; }
#view-sanjie .oa-thesis-lbl { display: block; font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 700; color: var(--acc); margin-bottom: .45em; }
#view-sanjie .oa-thesis p { margin: 0; font-size: .98rem; }

#view-sanjie .oa-tablewrap { overflow-x: auto; margin: 1.5em 0; -webkit-overflow-scrolling: touch; }
#view-sanjie .oa-table { border-collapse: collapse; width: 100%; min-width: 540px; font-family: 'Inter', sans-serif; font-size: .82rem; line-height: 1.45; }
#view-sanjie .oa-table th, #view-sanjie .oa-table td { border: 1px solid var(--bd); padding: .55em .7em; vertical-align: top; text-align: left; }
#view-sanjie .oa-table th { background: var(--surf2); color: var(--acc); font-weight: 700; }
#view-sanjie .oa-table caption { caption-side: bottom; text-align: left; font-size: .76rem; color: var(--mut); font-style: italic; margin-top: .6em; }
#view-sanjie .hanzi { font-family: 'Noto Serif TC', serif; }
#view-sanjie .pinyin, #view-sanjie .term { font-style: italic; }

#view-sanjie .oa-sources .oa-h2 { font-size: 1.4rem; }
#view-sanjie .oa-srcs { columns: 2; column-gap: 2.2em; list-style: none; padding: 0; margin: .4em 0 0; font-family: 'Inter', sans-serif; font-size: .8rem; line-height: 1.52; color: var(--ink3); }
#view-sanjie .oa-srcs li { margin: 0 0 .85em; break-inside: avoid; -webkit-column-break-inside: avoid; }
#view-sanjie .oa-srcs li .n { color: var(--acc); font-weight: 700; margin-right: .3em; }
#view-sanjie .oa-srcs em { font-style: italic; }

#view-sanjie .oa-summary-lbl { font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 700; color: var(--acc); margin-bottom: .5em; }

@media (max-width: 640px) {
  #view-sanjie .oa-srcs { columns: 1; }
}