/* ════════════════════════════════════════════ */
/* CHAPTER 3 — НАБЛЮДЕНИЕ — Scoped Styles      */
/* ════════════════════════════════════════════ */

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

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

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

/* Thought blocks — Socherel golden */
#chapter-03 .thought-block {
  border-left: 2px solid var(--thought-border-soch);
  color: var(--thought-soch);
}


/* ════════════════════════════════════════════ */
/* STENCIL LABEL                                */
/* ════════════════════════════════════════════ */
#chapter-03 .stencil-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95em;
  letter-spacing: 0.4em;
  color: var(--military);
  border: 1px solid rgba(138, 154, 123, 0.25);
  padding: 0.8em 1.2em;
  text-align: center;
  line-height: 2;
}


/* ════════════════════════════════════════════ */
/* EFFECT 3: STAIRCASE THOUGHT EROSION          */
/* ════════════════════════════════════════════ */
.thought-erosion-zone .word-span {
  display: inline-block;
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  will-change: opacity, filter, transform;
}
.thought-erosion-zone .word-span.space {
  display: inline;
}
.thought-erosion-zone.eroding .word-span:not(.space) {
  opacity: var(--erosion-opacity, 1);
  filter: blur(var(--erosion-blur, 0px));
  transform: translateY(var(--erosion-dy, 0px));
}


/* ════════════════════════════════════════════ */
/* EFFECT 4: GLASS CHAMBER SHIMMER              */
/* ════════════════════════════════════════════ */
.glass-scatter.shimmering {
  animation: glass-shimmer 3s ease-in-out;
}
@keyframes glass-shimmer {
  0%   { text-shadow: none; }
  10%  { text-shadow: 0.5px 0 2px rgba(212, 208, 203, 0.08); }
  25%  { text-shadow: -0.3px 0.3px 3px rgba(212, 208, 203, 0.12); }
  40%  { text-shadow: 0.4px -0.2px 2px rgba(212, 208, 203, 0.06); }
  55%  { text-shadow: -0.5px 0.4px 4px rgba(212, 208, 203, 0.1); }
  70%  { text-shadow: 0.2px -0.3px 2px rgba(212, 208, 203, 0.08); }
  85%  { text-shadow: 0.3px 0.2px 3px rgba(212, 208, 203, 0.05); }
  100% { text-shadow: none; }
}


/* ════════════════════════════════════════════ */
/* EFFECT 4b: GLASS LIGHT SCATTER               */
/* ════════════════════════════════════════════ */
.light-scatter-container {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 998;
}
.light-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(220, 225, 235, 0.7);
  box-shadow: 0 0 6px rgba(220, 225, 235, 0.5), 0 0 14px rgba(220, 225, 235, 0.2);
  opacity: 0;
  animation: scatter-dot var(--dot-duration) ease-in-out var(--dot-delay) forwards;
}
@keyframes scatter-dot {
  0%   { opacity: 0; transform: scale(0.5); }
  20%  { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.8; transform: scale(1.1); }
  80%  { opacity: 0.4; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(0.3); }
}


/* ════════════════════════════════════════════ */
/* EFFECT 6: MEMORY GAP                         */
/* ════════════════════════════════════════════ */
.memory-gap.revealed {
  transition: opacity 0.8s ease, transform 0.6s ease, filter 2s ease 1s;
}
.memory-gap.blurred {
  filter: blur(0.5px);
  opacity: 0.85 !important;
  transition: filter 1.5s ease, opacity 1.5s ease;
}
.memory-gap.snapped {
  filter: blur(0);
  opacity: 1 !important;
  transition: filter 0.15s ease, opacity 0.15s ease;
}


/* ════════════════════════════════════════════ */
/* EFFECT 7: PAVEL'S LETTER (Boxed)             */
/* ════════════════════════════════════════════ */
.pavel-letter-box {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9em;
  font-style: italic;
  color: #d4c8a8;
  line-height: 1.9;
  margin: 2.5em 0;
  padding: 2em 2.2em;
  border: 1px solid rgba(180, 165, 130, 0.2);
  border-radius: 2px;
  background: rgba(255, 248, 230, 0.03);
  opacity: 0;
  transition: opacity 2.5s ease;
}
.pavel-letter-box.revealed {
  opacity: 1;
}
.pavel-letter-box p {
  margin-bottom: 0.8em;
}
.pavel-letter-box p:last-child {
  margin-bottom: 0;
}
.pavel-signature {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-top: 1.2em;
  text-align: right;
  opacity: 0.7;
}
@media (max-width: 600px) {
  .pavel-letter-box {
    padding: 1.5em 1.2em;
  }
}


/* ════════════════════════════════════════════ */
/* EFFECT 8: COPPER MESH WAVE (word drift)      */
/* ════════════════════════════════════════════ */
.copper-mesh .word-span {
  display: inline-block;
  transition: transform 0.9s ease, opacity 0.9s ease;
  will-change: transform;
}
.copper-mesh .word-span.space {
  display: inline;
}
.copper-mesh.waving .word-span:not(.space) {
  transform: translate(var(--mesh-dx, 0), var(--mesh-dy, 0));
  opacity: var(--mesh-opacity, 1);
}


/* Soviet nameplate stamps */
#chapter-03 .soviet-plate {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85em;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
}