/* ==========================================================================
   Signal Type — neon-tube entrance for every chapter heading
   + a fast, per-character fade for its English subtitle.
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Chinese headline ---------------------------------------------------- */

.signal-type {
  position: relative;
  color: #fff8ec;
}

.signal-type .signal-line {
  display: block;
  white-space: nowrap;
}

.signal-type .signal-line--indent {
  padding-left: .76em;
}

.signal-type .signal-char {
  display: inline-block;
  white-space: pre;
  color: #fff6e6;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

/* Armed but not yet powered: the tube is dark and the layout is reserved. */
.signal-type.is-armed .signal-char {
  opacity: 0;
}

.signal-type.is-playing .signal-char {
  animation-name: signal-flicker-a;
  animation-duration: var(--dur, 820ms);
  animation-delay: var(--d, 0ms);
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

.signal-type.is-playing .signal-char[data-flicker="b"] {
  animation-name: signal-flicker-b;
}

.signal-type.is-playing .signal-char[data-flicker="c"] {
  animation-name: signal-flicker-c;
}

@keyframes signal-flicker-a {
  0%        { opacity: 0;   filter: brightness(.55); }
  5%        { opacity: .92; filter: brightness(1.75); }
  8%        { opacity: .08; filter: brightness(.55); }
  15%       { opacity: .78; filter: brightness(1.35); }
  18%       { opacity: .12; filter: brightness(.60); }
  29%       { opacity: 1;   filter: brightness(1.20); }
  33%       { opacity: .30; filter: brightness(.72); }
  44%       { opacity: 1;   filter: brightness(1.12); }
  49%       { opacity: .58; filter: brightness(.90); }
  61%       { opacity: 1;   filter: brightness(1.04); }
  67%       { opacity: .76; filter: brightness(.96); }
  78%, 100% { opacity: 1;   filter: brightness(1); }
}

@keyframes signal-flicker-b {
  0%        { opacity: 0;   filter: brightness(.55); }
  6%        { opacity: .55; filter: brightness(1.45); }
  10%       { opacity: .04; filter: brightness(.5); }
  19%       { opacity: .88; filter: brightness(1.6); }
  23%       { opacity: .16; filter: brightness(.65); }
  35%       { opacity: 1;   filter: brightness(1.18); }
  40%       { opacity: .28; filter: brightness(.74); }
  52%       { opacity: 1;   filter: brightness(1.1); }
  57%       { opacity: .50; filter: brightness(.9); }
  70%       { opacity: 1;   filter: brightness(1.04); }
  76%       { opacity: .82; filter: brightness(.96); }
  88%, 100% { opacity: 1;   filter: brightness(1); }
}

@keyframes signal-flicker-c {
  0%        { opacity: 0;   filter: brightness(.55); }
  9%        { opacity: .96; filter: brightness(1.8); }
  13%       { opacity: .06; filter: brightness(.5); }
  24%       { opacity: .34; filter: brightness(.8); }
  29%       { opacity: 1;   filter: brightness(1.3); }
  34%       { opacity: .14; filter: brightness(.6); }
  47%       { opacity: .92; filter: brightness(1.16); }
  52%       { opacity: .30; filter: brightness(.76); }
  63%       { opacity: 1;   filter: brightness(1.08); }
  69%       { opacity: .62; filter: brightness(.92); }
  80%, 100% { opacity: 1;   filter: brightness(1); }
}

/* --- English subtitle ---------------------------------------------------- */

/* Match the Chinese heading fill exactly. */
.signal-subtitle {
  color: #fff6e6;
}

.signal-subtitle-visual {
  display: block;
}

.signal-subtitle .subtitle-line {
  display: block;
}

.signal-subtitle .note-word {
  display: inline-block;
  white-space: nowrap;
}

.signal-subtitle .note-char {
  display: inline-block;
  white-space: pre;
}

.signal-subtitle.is-armed .note-char {
  opacity: 0;
  transform: translateY(.16em);
  filter: blur(2.5px);
}

.signal-subtitle.is-playing .note-char {
  animation: note-char-in 360ms cubic-bezier(.16, .84, .3, 1) both;
  animation-delay: calc(var(--note-start, 1680ms) + var(--d, 0ms));
}

@keyframes note-char-in {
  from {
    opacity: 0;
    transform: translateY(.16em);
    filter: blur(2.5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* --- Responsive refinements --------------------------------------------- */

@media (max-width: 800px) {
  /* The Chinese title is wider than the Latin display face, so it needs a
     viewport-scaled floor to stay legible on phones without clipping. */
  .chapter-hero h1 {
    font-size: clamp(60px, 11vw, 80px);
  }

  .chapter .signal-subtitle {
    display: block;
    margin-top: 16px;
    font-size: clamp(13px, 3.35vw, 16px);
    line-height: 1.5;
    letter-spacing: .015em;
  }

  .chapter-hero .signal-subtitle {
    display: block;
    margin-top: 18px;
    font-size: clamp(14px, 3.5vw, 18px);
    line-height: 1.5;
    letter-spacing: .015em;
  }

}

@media (max-width: 360px) {
  .chapter-hero h1 {
    font-size: 56px;
  }
}

/* --- Final-frame title offset ------------------------------------------- */

/* 10px at a 1440px viewport, scaling with the viewport width. */
.chapter-final h2 {
  transform: translateX(.694444vw);
}

/* BG COLOR / RESTART use the same borderless chip treatment as INFO. */
.pill {
  border: 0;
}

.pill:hover {
  background-color: rgba(255, 255, 255, .16);
}

/* --- CHALK palette: keep the light-palette control treatment ------------- */

html[data-bg="CHALK"] .chapter-cta {
  color: #f0eee7;
  border-color: #e2b8ac;
  background-color: rgba(23, 26, 25, .55);
}

html[data-bg="CHALK"] .chapter-cta:hover {
  color: #171a19;
  border-color: #f0eee7;
  background-color: #f0eee7;
}

/* --- Wheel-available hint ------------------------------------------------ */

#wheel-hint {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "HanchanHuoHei", "Songti SC", serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .06em;
  color: var(--fg-raw);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s step-end;
}

#wheel-hint.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity .28s ease, visibility 0ms;
}

#wheel-hint svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: wheel-hint-arrow 1.35s ease-in-out infinite;
}

@keyframes wheel-hint-arrow {
  0%, 100% {
    transform: translateY(-1px);
    opacity: .7;
  }
  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}

@media (max-width: 800px) {
  #wheel-hint {
    gap: 7px;
    font-size: 13px;
  }

  #wheel-hint svg {
    width: 15px;
    height: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal-type .signal-char,
  .signal-subtitle .note-char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}