/**
 * components.css — 可复用的部件与进场动效。
 * 章节标题、状态胶囊、标签、按钮、定义列表、小节标题、跑马灯、轻提示。
 */

@layer components {
  /* ── 章节标题 ──────────────────────────────────────────────────────────── */
  .sec-head {
    display: grid;
    gap: clamp(0.9rem, 2.2vh, 1.6rem);
    margin-bottom: clamp(3rem, 9vh, 6.5rem);
  }

  .sec-head__index {
    display: flex;
    align-items: center;
    gap: 1.1rem;
  }

  .orbs {
    display: inline-flex;
    gap: 0.4rem;
  }

  .orbs i {
    width: 7px;
    height: 7px;
    margin: 0;
    border: 1px solid var(--paper-4);
    border-radius: 50%;
  }

  .orbs i.is-lit {
    border-color: var(--amber);
    background: var(--amber);
    box-shadow: 0 0 8px rgb(255 157 46 / 0.6);
  }

  .sec-head__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 clamp(1rem, 2.4vw, 2.5rem);
    line-height: 1;
  }

  .sec-head__zh {
    font-family: var(--font-serif);
    font-size: var(--fs-display);
    font-weight: 900;
    line-height: 1.14;
    letter-spacing: 0.04em;
  }

  .sec-head__en {
    font-family: var(--font-latin);
    font-size: clamp(1.5rem, 1rem + 2.4vw, 3.5rem);
    font-style: italic;
    line-height: 1.1;
    color: var(--paper-3);
  }

  .sec-head__rule {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, var(--line-2), transparent 82%);
    transform-origin: left center;
  }

  .sec-head__lede {
    max-width: 34em;
    font-size: var(--fs-lead);
    line-height: 1.75;
    color: var(--paper-2);
    text-wrap: pretty;
  }

  /* ── 状态胶囊 ──────────────────────────────────────────────────────────── */
  .pill {
    --tone: var(--jade);
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.4em 0.95em 0.4em 0.75em;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: rgb(11 10 9 / 0.5);
    font-size: var(--fs-small);
    line-height: 1.4;
    white-space: nowrap;
  }

  .pill--amber {
    --tone: var(--amber);
  }

  .pill > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tone);
    box-shadow: 0 0 10px var(--tone);
  }

  .pill.is-live > i {
    animation: pulse 2.4s ease-in-out infinite;
  }

  @keyframes pulse {
    50% {
      opacity: 0.35;
      scale: 0.7;
    }
  }

  /* ── 标签 ──────────────────────────────────────────────────────────────── */
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .chips li {
    padding: 0.4em 0.8em;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgb(242 235 224 / 0.03);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: var(--paper-2);
    transition: border-color 0.3s, color 0.3s;
  }

  .chips li:hover {
    border-color: var(--amber-lo);
    color: var(--paper);
  }

  /* ── 按钮 ──────────────────────────────────────────────────────────────── */
  .btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 2.9rem;
    padding: 0.6rem 0.75rem 0.6rem 1.3rem;
    overflow: hidden;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: rgb(11 10 9 / 0.4);
    font-size: 0.9375rem;
    line-height: 1.2;
    transition: color 0.45s var(--ease-out), border-color 0.45s;
  }

  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--paper);
    transform: translateY(102%);
    transition: transform 0.55s var(--ease-out);
  }

  a.btn:hover,
  button.btn:hover,
  .btn:focus-visible {
    border-color: var(--paper);
    color: var(--ink-0);
  }

  a.btn:hover::before,
  button.btn:hover::before,
  .btn:focus-visible::before {
    transform: none;
  }

  .btn__text:only-child {
    padding-right: 0.55rem;
  }

  .btn__arrow {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--amber);
    color: var(--ink-0);
    font-size: 0.875rem;
    transition: rotate 0.5s var(--ease-out);
  }

  .btn:hover .btn__arrow {
    rotate: 45deg;
  }

  .btn.is-soon {
    padding-right: 0.7rem;
    border-style: dashed;
    color: var(--paper-3);
    cursor: default;
  }

  .btn__tag {
    padding: 0.3em 0.7em;
    border-radius: 999px;
    background: rgb(242 235 224 / 0.08);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }

  /* ── 定义列表 ──────────────────────────────────────────────────────────── */
  .deflist__row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
    padding-block: 1rem;
    border-top: 1px solid var(--line);
  }

  .deflist__row:last-child {
    border-bottom: 1px solid var(--line);
  }

  /* ── 小节 ──────────────────────────────────────────────────────────────── */
  .block {
    margin-top: clamp(3.5rem, 10vh, 6.5rem);
  }

  .block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 2rem;
    margin-bottom: clamp(1.25rem, 3vh, 2rem);
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--line-2);
  }

  .block-head h4 {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .block-head .mono {
    text-transform: none;
    letter-spacing: 0.06em;
  }

  /* ── 卡片上的聚光（配合 data-spot / data-tilt 写入的 --mx --my --hover） ── */
  .spot,
  .facet,
  .comp,
  .skill,
  .demo,
  .rule,
  .portal {
    --mx: 50%;
    --my: 50%;
    --hover: 0;
  }

  /* ── 跑马灯 ────────────────────────────────────────────────────────────── */
  .marquee {
    margin-top: clamp(4rem, 11vh, 7.5rem);
    padding-block: clamp(1rem, 2.6vh, 1.9rem);
    overflow: hidden;
    border-block: 1px solid var(--line);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }

  .marquee__track {
    display: flex;
    align-items: baseline;
    width: max-content;
    font-family: var(--font-latin);
    font-size: clamp(1.75rem, 1rem + 3vw, 3.75rem);
    line-height: 1.25;
    white-space: nowrap;
    color: var(--paper-3);
    animation: marquee 70s linear infinite;
  }

  .marquee__track > * {
    margin-right: clamp(1.25rem, 2.4vw, 2.4rem);
  }

  .marquee__track span:nth-of-type(3n + 1) {
    font-style: italic;
    color: var(--paper);
  }

  .marquee__track i {
    font-size: 0.36em;
    color: var(--amber);
    translate: 0 -0.5em;
  }

  .marquee:hover .marquee__track {
    animation-play-state: paused;
  }

  @keyframes marquee {
    to {
      transform: translateX(-50%);
    }
  }

  /* ── 轻提示 ────────────────────────────────────────────────────────────── */
  .toast {
    position: fixed;
    bottom: clamp(1.5rem, 5vh, 3rem);
    left: 50%;
    z-index: var(--z-palette);
    max-width: 92vw;
    padding: 0.7rem 1.25rem;
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-0);
    font-size: 0.875rem;
    opacity: 0;
    translate: -50% 1rem;
    pointer-events: none;
    transition: opacity 0.35s, translate 0.5s var(--ease-out);
  }

  .toast.is-on {
    opacity: 1;
    translate: -50% 0;
  }

  /* ════════════════════════════════════════════════════════════════════════
   * 进场动效
   * 只有脚本确认可以播放动画（html.is-armed）时才把元素藏起来，
   * 所以脚本没跑、出错、或处于精简模式时，所有内容默认可见。
   * ════════════════════════════════════════════════════════════════════════ */

  .is-armed [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 1.75rem, 0);
    transition:
      opacity 1s var(--ease-out) calc(var(--si, 0) * 70ms),
      transform 1.2s var(--ease-out) calc(var(--si, 0) * 70ms);
  }

  .is-armed [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  .is-armed [data-reveal="fade"] {
    transform: none;
  }

  /* 线：从左向右画出来 */
  .is-armed [data-reveal="line"] {
    opacity: 1;
    transform: scaleX(0);
    transition: transform 1.6s var(--ease-out) calc(var(--si, 0) * 70ms);
  }

  .is-armed [data-reveal="line"].is-in {
    transform: none;
  }

  /* 遮罩：每一行从下方滑入 */
  [data-reveal="mask"] .line {
    display: block;
    overflow: hidden;
    padding-block: 0.07em;
  }

  [data-reveal="mask"] .line > span {
    display: block;
  }

  .is-armed [data-reveal="mask"] {
    opacity: 1;
    transform: none;
  }

  .is-armed [data-reveal="mask"] .line > span {
    transform: translate3d(0, 108%, 0);
    transition: transform 1.25s var(--ease-out) calc(var(--si, 0) * 70ms);
  }

  .is-armed [data-reveal="mask"] .line:nth-child(2) > span {
    transition-delay: calc(var(--si, 0) * 70ms + 110ms);
  }

  .is-armed [data-reveal="mask"].is-in .line > span {
    transform: none;
  }

  /* 逐字：章节大标题 */
  [data-reveal="chars"] .split {
    display: inline-block;
    overflow: hidden;
    margin-block: -0.08em;
    padding-block: 0.08em;
    vertical-align: bottom;
  }

  [data-reveal="chars"] .ch {
    display: inline-block;
  }

  .is-armed [data-reveal="chars"] {
    opacity: 1;
    transform: none;
  }

  .is-armed [data-reveal="chars"] .ch {
    transform: translate3d(0, 112%, 0) rotate(7deg);
    transform-origin: left bottom;
    transition: transform 1.3s var(--ease-out) calc(var(--i, 0) * 80ms);
  }

  .is-armed [data-reveal="chars"].is-in .ch {
    transform: none;
  }

  /* 随滚动逐字点亮（--p 由脚本逐帧写入，--i 是每个字的归一化位置） */
  .is-illuminating .ch {
    opacity: clamp(0.16, (var(--p, 0) - var(--i, 0)) * 9 + 0.16, 1);
  }

  /* 首屏元素：等开场（html.is-ready）后按各自的 --d 依次出现 */
  .is-armed [data-intro] {
    opacity: 0;
    transform: translate3d(0, 1.1rem, 0);
    transition: opacity 1.2s var(--ease-out) var(--d, 0s), transform 1.4s var(--ease-out) var(--d, 0s);
  }

  .is-armed.is-ready [data-intro] {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .pill.is-live > i {
    animation: none;
  }
}