/* ════════════════════════════════════════════ */
/* CHAPTER 4 — BUFFER — Scoped Styles           */
/* ════════════════════════════════════════════ */

#chapter-04 {
  --nasti: #4ecdc4;
  --military: #8a9a7b;
  --soch: #daa520;
  --pavel-fg: #c4a44a;
  --pavel-border: rgba(196, 164, 74, 0.25);
}

#chapter-04 .chapter-title h1 {
  color: var(--fg);
}

#chapter-04 .story-section {
  padding: 0;
}
#chapter-04 .story-section:last-of-type {
  padding-bottom: 40vh;
}

/* Thought blocks — Nasti teal */
#chapter-04 .thought-block {
  border-left: 2px solid var(--thought-border-nasti);
  color: var(--thought-nasti);
}


/* ════════════════════════════════════════════ */
/* EFFECT 1: EVIDENCE THREAD                    */
/* ════════════════════════════════════════════ */
#chapter-04 .evidence-thread {
  border-left-width: 3px;
  border-left-style: solid;
  border-image: linear-gradient(
    to bottom,
    var(--nasti),
    var(--thought-border-nasti)
  ) 1;
  padding-left: 1.4em;
}
#chapter-04 .evidence-thread.revealed {
  transition: opacity 0.8s ease, transform 0.6s ease, border-color 0.6s ease;
}


/* ════════════════════════════════════════════ */
/* EFFECT 2: COUNT PULSE                        */
/* ════════════════════════════════════════════ */
#chapter-04 .count-pulse {
  font-size: 1.1em;
  font-style: italic;
  color: var(--nasti);
  text-align: left;
  letter-spacing: 0.15em;
  margin: 2em 0;
  border-left: none;
  padding-left: 0;
  margin-left: 0;
}
#chapter-04 .count-pulse.revealed {
  opacity: 1; transform: none;
  transition: opacity 0.8s ease;
}


/* ════════════════════════════════════════════ */
/* EFFECT 3: БУФЕР STENCIL LABEL               */
/* ════════════════════════════════════════════ */
#chapter-04 .stencil-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95em;
  letter-spacing: 0.4em;
  color: #5D1F1E;
  border: 1px solid rgba(93, 31, 30, 0.25);
  padding: 0.8em 1.2em;
  text-align: center;
  line-height: 2;
}


/* ════════════════════════════════════════════ */
/* EFFECT 4: Ф SYMBOL HOLD                     */
/* ════════════════════════════════════════════ */
.phi-symbol {
  display: inline;
  font-weight: 600;
  transition: text-shadow 0.8s ease;
}
.phi-symbol.glow {
  text-shadow:
    0 0 6px rgba(78, 205, 196, 0.4),
    0 0 14px rgba(78, 205, 196, 0.15);
  color: var(--nasti);
}
.phi-focus.dimmed {
  opacity: 0.5 !important;
  transition: opacity 1s ease;
}
.phi-focus.restored {
  opacity: 1 !important;
  transition: opacity 0.6s ease;
}


/* ════════════════════════════════════════════ */
/* EFFECT 5: ECHO OFFSET                       */
/* ════════════════════════════════════════════ */
.echo-offset.echoing {
  text-shadow: 1.5px 1px 3px rgba(212, 208, 203, 0.12);
  transition: text-shadow 2s ease-in;
}
.echo-offset.echo-fade {
  text-shadow: none;
  transition: text-shadow 1.5s ease-out;
}


/* ════════════════════════════════════════════ */
/* EFFECT 6: DOSIMETER TICK                    */
/* ════════════════════════════════════════════ */
.dosimeter-tick {
  position: relative;
}
.dosimeter-indicator {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--soch);
  opacity: 0;
  margin-left: 0.6em;
  vertical-align: middle;
  transition: opacity 0.3s ease;
}
.dosimeter-indicator.tick {
  opacity: 1;
  animation: dosi-pulse 0.8s ease-out;
}
@keyframes dosi-pulse {
  0% { opacity: 0; transform: scale(0.5); }
  30% { opacity: 1; transform: scale(1.3); box-shadow: 0 0 6px rgba(218, 165, 32, 0.5); }
  100% { opacity: 0.8; transform: scale(1); box-shadow: none; }
}


/* ════════════════════════════════════════════ */
/* EFFECT 8: NOTEPAD DISCOVERY                 */
/* ════════════════════════════════════════════ */
.notepad-discovery.flutter {
  animation: notepad-flutter 0.5s ease;
}
@keyframes notepad-flutter {
  0% { opacity: 1; }
  25% { opacity: 0.65; }
  50% { opacity: 0.9; }
  75% { opacity: 0.7; }
  100% { opacity: 1; }
}


/* ════════════════════════════════════════════ */
/* EFFECT 10: HELD NOTE ("I moved the chair")  */
/* ════════════════════════════════════════════ */
.held-note {
  font-weight: 500;
  transition: color 0.8s ease;
}
.held-note.emphasized {
  color: var(--nasti);
  border-left-color: rgba(78, 205, 196, 0.5);
  transition: color 0.4s ease, border-left-color 0.4s ease;
}


/* ════════════════════════════════════════════ */
/* EFFECT 11: CLIMB UP / SLIP                  */
/* ════════════════════════════════════════════ */
.climb-up.revealed {
  transition: opacity 0.8s ease, transform 1.5s ease;
}
.climb-up.floating {
  animation: climb-drift 3s ease-in-out infinite;
}
@keyframes climb-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}

.climb-slip.revealed {
  transition: opacity 0.8s ease, transform 0.6s ease;
}


/* ════════════════════════════════════════════ */
/* EFFECT 12: "ONE." FINAL HOLD                */
/* ════════════════════════════════════════════ */
#chapter-04 .count-final {
  font-size: 1.2em;
  margin-top: 3em;
}
#chapter-04 .count-final.revealed {
  transition: opacity 0.4s ease;
}


/* ════════════════════════════════════════════ */
/* NEW EFFECT: COLD REALIZATION                */
/* "Or to be placed inside." — delayed chill   */
/* ════════════════════════════════════════════ */
#chapter-04 .cold-realization em {
  transition: color 0.6s ease, text-shadow 0.6s ease;
}
#chapter-04 .cold-realization.chilled em {
  color: #fff;
  text-shadow:
    0 0 8px rgba(78, 205, 196, 0.5),
    0 0 20px rgba(78, 205, 196, 0.2);
}
#chapter-04 .cold-realization.settled em {
  color: var(--thought-nasti);
  text-shadow: none;
  transition: color 2s ease, text-shadow 2s ease;
}


/* ════════════════════════════════════════════ */
/* NEW EFFECT: PARANOIA PULSE                  */
/* "Someone was watching him" — vignette       */
/* ════════════════════════════════════════════ */
.ch4-watched-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.4) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 1.5s ease;
}
.ch4-watched-overlay.active {
  opacity: 1;
  transition: opacity 0.8s ease;
}
#chapter-04 .paranoia-watched.pulsed {
  text-shadow:
    0 0 12px rgba(57, 222, 222, 0.15),
    0 0 30px rgba(57, 222, 222, 0.06);
  transition: text-shadow 0.5s ease;
}
#chapter-04 .paranoia-watched.pulsed-fade {
  text-shadow: none;
  transition: text-shadow 3s ease;
}


/* ════════════════════════════════════════════ */
/* NEW EFFECT: WHISPER ISOLATION               */
/* "Were they whispering?" — surroundings dim  */
/* ════════════════════════════════════════════ */
#chapter-04 .whisper-zone .story-block {
  transition: opacity 1.2s ease;
}
#chapter-04 .whisper-zone.isolating .story-block {
  opacity: 0.3 !important;
}
#chapter-04 .whisper-zone.isolating .whisper-focus {
  opacity: 1 !important;
  color: var(--nasti);
  transition: opacity 0.4s ease, color 0.4s ease;
}
#chapter-04 .whisper-zone.restored .story-block {
  opacity: 1 !important;
  transition: opacity 2s ease;
}
#chapter-04 .whisper-zone.restored .whisper-focus {
  color: var(--fg);
  transition: color 2s ease;
}


/* ════════════════════════════════════════════ */
/* NEW EFFECT: SELF-DOUBT BLUR                 */
/* "What if I'm building it?" — wavers, snaps  */
/* ════════════════════════════════════════════ */
#chapter-04 .self-doubt {
  transition: filter 2s ease, opacity 2s ease, color 2s ease;
}
#chapter-04 .self-doubt.doubting {
  filter: blur(0.6px);
  opacity: 0.7;
  color: rgba(57, 222, 222, 0.5);
}
#chapter-04 .self-doubt.clarity {
  filter: blur(0);
  opacity: 1;
  color: var(--thought-nasti);
  transition: filter 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}