/* ============================================================
   「思 → 思庐 Logo」笔画级形变 · 舞台与时间轴
   本文件只写结构与基态；九笔的 d 关键帧在 si-to-logo.gen.css。
   加载顺序：先 gen.css，再本文件（定格规则要能压过播放规则）。
   ============================================================ */

.si-stage {
  --si-ink: #7b0c00;
  --si-ink-end: #7b0400;
  --si-plate: clamp(240px, 46vw, 360px);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

/* ---------------- 纸面 ---------------- */

.si-plate {
  position: relative;
  width: var(--si-plate);
  aspect-ratio: 1;
}

.si-svg,
.si-ref {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.si-svg { overflow: visible; }

/* 审查用：源矢量叠底，对不齐就会露出青边 */
.si-ref {
  opacity: 0;
  pointer-events: none;
  filter: grayscale(1) brightness(0) invert(41%) sepia(72%)
          saturate(520%) hue-rotate(135deg);
}
.si-stage.show-ref .si-ref { opacity: 0.55; }

/* ---------------- 九笔 ---------------- */

.si-ink-group {
  fill: var(--si-ink-end);
  transform-box: view-box;
  transform-origin: 100px 100px;
}

/* 基态 = 终态：无 JS、无动画、prefers-reduced-motion 都停在矢量 Logo。
   每笔的 d 由 gen.css 的 .si-ink--N 给出。 */
.si-ink {
  shape-rendering: geometricPrecision;
}

/* 运笔中线（mask 内）。dashoffset 0 + 超宽描边 = 遮罩全开。 */
.si-pen {
  fill: none;
  stroke: #fff;
  stroke-width: 640;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------- 落款 ---------------- */

.si-slogan {
  margin: 0;
  font-family: var(--serif, "Noto Serif SC", serif);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 400;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  color: var(--ink, #1c1412);
}

/* ---------------- 播放 ---------------- */

.si-stage.is-run .si-ink-group {
  animation: si-hue var(--si-dur) linear both,
             si-settle var(--si-dur) linear both;
}
.si-stage.is-run .si-slogan {
  animation: si-slogan var(--si-dur) linear both;
}

@keyframes si-hue {
  0%, 30% { fill: var(--si-ink); }
  78%, 100% { fill: var(--si-ink-end); }
}

/* 落位后极轻的一次沉气，别做成弹跳 */
@keyframes si-settle {
  0%, 82% { transform: scale(1); }
  88% { transform: scale(1.014); animation-timing-function: cubic-bezier(.33,0,.2,1); }
  97%, 100% { transform: scale(1); }
}

@keyframes si-slogan {
  0%, 86% { opacity: 0; transform: translateY(7px); letter-spacing: 0.62em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 0.44em; }
}

/* ---------------- 定格（审查 / 拖动时间轴） ----------------
   负 animation-delay + paused：拿到的是真实插值帧，不是另画一张。 */
.si-stage.is-run.is-frozen .si-ink,
.si-stage.is-run.is-frozen .si-pen,
.si-stage.is-run.is-frozen .si-ink-group,
.si-stage.is-run.is-frozen .si-slogan {
  animation-play-state: paused;
  animation-delay: var(--si-freeze, 0ms);
}

/* ---------------- 映射表联动高亮 ---------------- */

.si-stage[data-hl] .si-ink { opacity: 0.18; transition: opacity 0.22s ease; }
.si-stage[data-hl="1"] .si-ink--1,
.si-stage[data-hl="2"] .si-ink--2,
.si-stage[data-hl="3"] .si-ink--3,
.si-stage[data-hl="4"] .si-ink--4,
.si-stage[data-hl="5"] .si-ink--5,
.si-stage[data-hl="6"] .si-ink--6,
.si-stage[data-hl="7"] .si-ink--7,
.si-stage[data-hl="8"] .si-ink--8,
.si-stage[data-hl="9"] .si-ink--9 { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .si-stage.is-run .si-ink,
  .si-stage.is-run .si-pen,
  .si-stage.is-run .si-ink-group,
  .si-stage.is-run .si-slogan { animation: none !important; }
}

/* ---------------- 官网页插段（样片不用 .si-band） ----------------
   笔画在 200 方框里实际落在 y 22–177。官网页只露出 y 16–184，
   字号不变，裁掉上下空白。整段目标约 2/3 屏，不够再收图宽。 */

.si-band {
  box-sizing: border-box;
  padding: clamp(18px, 2.6vh, 32px) var(--gut) clamp(14px, 2vh, 24px);
  text-align: center;
}
.si-band .si-stage {
  --si-plate: min(400px, max(240px, 34vw), max(200px, calc((66.67vh - 170px) / 0.84)));
}
.si-band .si-plate {
  aspect-ratio: 200 / 168;
  overflow: hidden;
}
.si-band .si-svg {
  width: 100%;
  height: calc(100% * 200 / 168);
  top: calc(100% * -16 / 168);
  right: auto;
  bottom: auto;
  left: 0;
}
/* 进视口前不闪终态 Logo，播的时候从「思」写起 */
.si-band .si-stage:not(.is-run) .si-svg { visibility: hidden; }

.si-words { margin-top: 12px; }
.si-words h2,
.si-words .si-line,
.si-words .si-go {
  opacity: 0;
}
.si-words h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  line-height: 1.2;
}
.si-words .si-line {
  margin: 10px 0 0;
  font-family: var(--serif, "Noto Serif SC", serif);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--ink-soft, #574C46);
}
.si-words .si-go {
  position: relative;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--red, #7b0c00);
}

/* 动图落定之后，三句像对话一样依次说出，最后一句把人领下去 */
.si-band.is-spoken .si-words h2 {
  animation: si-say-title 0.78s cubic-bezier(.16, .84, .24, 1) both;
}
.si-band.is-spoken .si-words .si-line {
  animation: si-say-line 0.7s cubic-bezier(.16, .84, .24, 1) 0.42s both;
}
.si-band.is-spoken .si-words .si-go {
  animation: si-say-go 0.72s cubic-bezier(.16, .84, .24, 1) 0.92s both;
}
.si-band.is-spoken .si-words .si-go::after {
  content: "";
  display: block;
  width: 1.6em;
  height: 1px;
  margin: 10px auto 0;
  background: var(--red, #7b0c00);
  transform: scaleX(0);
  transform-origin: center;
  animation: si-say-rule 0.55s cubic-bezier(.16, .84, .24, 1) 1.45s both;
}
@keyframes si-say-title {
  0% {
    opacity: 0;
    transform: translateY(12px);
    letter-spacing: 0.72em;
    text-indent: 0.72em;
    filter: blur(3px);
  }
  60% { filter: blur(0); }
  100% {
    opacity: 1;
    transform: none;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    filter: blur(0);
  }
}
@keyframes si-say-line {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}
@keyframes si-say-go {
  0% {
    opacity: 0;
    transform: translateY(8px);
    letter-spacing: 0.48em;
    text-indent: 0.48em;
  }
  100% {
    opacity: 1;
    transform: none;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
  }
}
@keyframes si-say-rule {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .si-band .si-stage:not(.is-run) .si-svg { visibility: visible; }
  .si-words h2,
  .si-words .si-line,
  .si-words .si-go {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }
  .si-words .si-go::after { transform: none; animation: none !important; }
}