/* ─────────────────────────────────────────────────────────────────
 * hook-chapter · 完整章节示例样式
 * 默认绑 newsroom 主题。所有视觉属性走语义 token，零硬编码。
 * ───────────────────────────────────────────────────────────────── */

.hk-scene {
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── kicker ── */
.hk-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--t-cue);
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hk-kicker-line {
  width: 64px;
  height: 2px;
  background: var(--accent);
}

/* ── step 1 三 ghost ── */
.hk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: center;
}
.hk-ghost {
  aspect-ratio: 16 / 9;
  border: var(--rule-w) dashed var(--rule);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: var(--space-4);
  background: var(--surface);
}
.hk-ghost-num {
  font-family: var(--font-mono);
  font-size: var(--t-h2);
  color: var(--text-mute);
  letter-spacing: 0.08em;
}
.hk-ghost-label {
  font-family: var(--font-mono);
  font-size: var(--t-cue);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  align-self: end;
}

/* ── step 2-4 单图独占 ── */
.hk-solo-frame {
  width: 78%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hk-solo-img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface-2);
}
.hk-solo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hk-stamp {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 3px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display-en);
  font-size: var(--t-h3);
  font-weight: 900;
  letter-spacing: 0.1em;
  transform: rotate(-8deg);
  background: color-mix(in oklch, var(--surface) 60%, transparent);
  animation: hk-stamp-drop var(--dur-base) var(--ease-quart) backwards;
  animation-delay: 600ms;
}
@keyframes hk-stamp-drop {
  0%   { transform: rotate(-8deg) scale(2.4); opacity: 0; }
  60%  { transform: rotate(-8deg) scale(0.92); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); }
}
.hk-solo-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--t-cue);
  color: var(--text-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hk-solo-label  { color: var(--accent); }
.hk-solo-caption {
  font-family: var(--font-display-cn);
  font-size: var(--t-body);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}

/* ── step 5 takeover ── */
.hk-takeover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  justify-content: center;
}
.hk-mini-row {
  display: flex;
  gap: var(--space-3);
}
.hk-mini {
  width: 140px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--r-card) * 0.5);
  box-shadow: var(--shadow-card);
  animation: hk-mini-shrink var(--dur-base) var(--ease-quart) backwards;
}
@keyframes hk-mini-shrink {
  from { transform: scale(2.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.hk-accent-bar {
  width: 60%;
  height: 4px;
  background: var(--accent);
  animation: hk-bar-grow 700ms var(--ease-quart) 250ms backwards;
}
@keyframes hk-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.hk-hero {
  margin: 0;
  font-family: var(--font-display-en);
  font-size: var(--t-display-1);
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 0.95;
}

/* ── step 6 close + brush ── */
.hk-close {
  display: grid;
  place-items: center;
}
.hk-quote-wrap {
  position: relative;
  display: inline-block;
}
.hk-quote {
  margin: 0;
  font-family: var(--font-display-cn);
  font-size: var(--t-display-2);
  color: var(--text);
}
.hk-brush {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 50%;
  height: 0.18em;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0) translateY(-50%);
  animation: hk-brush-strike 700ms var(--ease-expo) 500ms forwards;
}
@keyframes hk-brush-strike {
  to { transform: scaleX(1) translateY(-50%); }
}