/* ════════════════════════════════════════════ */
/* CHAPTER 2 — КАРАНТІН                        */
/* Scoped styles and effects                   */
/* ════════════════════════════════════════════ */

/* Chapter-scoped CSS variables */
#chapter-02 {
  --hige: #e05a45;
  --nasti: #4ecdc4;
  --soch: #daa520;
  --merge: #9b7fd4;
  --military: #8a9a7b;
  --flicker-white: #e8e4dc;
  --warning-red: #c0392b;
}

/* Section spacing */
#chapter-02 .chapter-title h1 {}
#chapter-02 .story-section { padding: 0; }
#chapter-02 .story-section:last-of-type { padding-bottom: 40vh; }

/* ════════════════════════════════════════════ */
/* EFFECT 1: FINGER DRUMMING (percussive)       */
/* ════════════════════════════════════════════ */
.drum-container {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9em;
  color: var(--hige);
  letter-spacing: 0.1em;
}
.drum-line {
  margin-bottom: 0.3em;
}
.drum-beat {
  display: inline-block;
  opacity: 0.7;
  will-change: transform, opacity;
}
.drum-beat.tap {
  animation: drum-tap 0.2s cubic-bezier(0.22, 0.68, 0.36, 1.1) forwards;
}
@keyframes drum-tap {
  0%  { transform: translateY(0); opacity: 0.7; }
  35% { transform: translateY(2.5px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.85; }
}
.drum-beat.tap-heavy {
  animation: drum-tap-heavy 0.18s cubic-bezier(0.22, 0.68, 0.36, 1.1) forwards;
}
@keyframes drum-tap-heavy {
  0%  { transform: translateY(0); opacity: 0.7; }
  30% { transform: translateY(3.5px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.85; }
}

/* ════════════════════════════════════════════ */
/* EFFECT 2: MILITARY STENCIL LABELS            */
/* ════════════════════════════════════════════ */
.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;
}
.stencil-large {
  font-size: 1.3em;
  letter-spacing: 0.5em;
  margin: 2em 0;
  padding: 1em 1.5em;
  border-color: rgba(138, 154, 123, 0.35);
}

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

/* ════════════════════════════════════════════ */
/* EFFECT 3: OUTBURST                           */
/* ════════════════════════════════════════════ */
.outburst-caps {
  font-weight: 700;
}

/* ════════════════════════════════════════════ */
/* EFFECT 5: SIDEWAYS TILT                      */
/* ════════════════════════════════════════════ */
.sideways-tilt.revealed {
  transform: rotate(0.3deg);
  transition: opacity 0.8s ease, transform 2s ease;
}

/* ════════════════════════════════════════════ */
/* EFFECT 6: DISSOCIATIVE SKIP                  */
/* ════════════════════════════════════════════ */
.dissociative-zone .word-span {
  display: inline;
  transition: opacity 5s ease, filter 5s ease;
}
.dissociative-zone .word-span.space {
  display: inline;
}
.dissociative-zone.dissolving .word-span {
  opacity: var(--word-opacity, 1);
  filter: blur(var(--word-blur, 0px));
}

/* ════════════════════════════════════════════ */
/* EFFECT 7: FLUORESCENT FLICKER                */
/* ════════════════════════════════════════════ */
.flicker-block.flickering {
  animation: fluorescent-flicker 10s step-end;
  transition: none;
}
@keyframes fluorescent-flicker {
  0%    { opacity: 1; }
  0.5%  { opacity: 0.4; }
  1%    { opacity: 1; }
  1.3%  { opacity: 0.55; }
  1.6%  { opacity: 1; }
  3%    { opacity: 0.3; }
  3.4%  { opacity: 1; }
  3.6%  { opacity: 0.6; }
  3.8%  { opacity: 1; }
  7%    { opacity: 0.45; }
  7.3%  { opacity: 1; }
  7.5%  { opacity: 0.7; }
  7.8%  { opacity: 1; }
  12%   { opacity: 0.35; }
  12.2% { opacity: 1; }
  12.5% { opacity: 0.5; }
  12.7% { opacity: 1; }
  12.9% { opacity: 0.65; }
  13.1% { opacity: 1; }
  18%   { opacity: 0.4; }
  18.3% { opacity: 1; }
  25%   { opacity: 0.3; }
  25.2% { opacity: 1; }
  25.4% { opacity: 0.55; }
  25.6% { opacity: 1; }
  25.8% { opacity: 0.4; }
  26%   { opacity: 1; }
  34%   { opacity: 0.5; }
  34.3% { opacity: 1; }
  34.5% { opacity: 0.7; }
  34.7% { opacity: 1; }
  42%   { opacity: 0.25; }
  42.2% { opacity: 1; }
  42.4% { opacity: 0.6; }
  42.6% { opacity: 1; }
  50%   { opacity: 0.45; }
  50.2% { opacity: 1; }
  50.5% { opacity: 0.35; }
  50.7% { opacity: 1; }
  58%   { opacity: 0.5; }
  58.3% { opacity: 1; }
  65%   { opacity: 0.6; }
  65.2% { opacity: 1; }
  72%   { opacity: 0.7; }
  72.2% { opacity: 1; }
  78%   { opacity: 0.75; }
  78.2% { opacity: 1; }
  85%   { opacity: 0.8; }
  85.2% { opacity: 1; }
  92%   { opacity: 0.85; }
  92.2% { opacity: 1; }
  100%  { opacity: 1; }
}

/* ════════════════════════════════════════════ */
/* EFFECT 8: 40.001 FILE VALUE                  */
/* ════════════════════════════════════════════ */
.file-value {
  text-align: center;
  margin: 1.5em 0;
}
.red-circle {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 1.3em;
  color: var(--warning-red);
  display: inline-block;
  padding: 0.2em 0.5em;
  border: 2px solid rgba(192, 57, 43, 0.5);
  border-radius: 50%;
}
.red-circle.pulse {
  animation: value-pulse 0.8s ease-out;
}
@keyframes value-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ════════════════════════════════════════════ */
/* EFFECT 9: FINAL FADE                         */
/* ════════════════════════════════════════════ */
.final-fade.revealed {
  transition: opacity 2s ease 0.5s, transform 0.6s ease;
}
.final-fade.fading {
  opacity: 0.45 !important;
  transition: opacity 3s ease;
}

/* ════════════════════════════════════════════ */
/* EFFECT 10: PHANTOM GRIP                      */
/* ════════════════════════════════════════════ */
.phantom-grip .word-span {
  display: inline-block;
  transition: transform 0.8s ease, opacity 0.8s ease;
  will-change: transform;
}
.phantom-grip .word-span.space {
  display: inline;
}
.phantom-grip.drifting .word-span:not(.space) {
  transform: translate(var(--grip-dx, 0), var(--grip-dy, 0));
  opacity: var(--grip-opacity, 1);
}

/* ════════════════════════════════════════════ */
/* EFFECT 11: MONITORING UNIT PULSE             */
/* ════════════════════════════════════════════ */
.monitor-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4a9;
  box-shadow: 0 0 4px rgba(68, 170, 153, 0.4);
  vertical-align: middle;
  margin-left: 8px;
  opacity: 0.3;
}
.monitor-pulse.synced {
  animation: monitor-glow 2s ease-in-out infinite;
}
@keyframes monitor-glow {
  0%, 100% { opacity: 0.3; box-shadow: 0 0 4px rgba(68, 170, 153, 0.4); }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(68, 170, 153, 0.8), 0 0 20px rgba(68, 170, 153, 0.3); }
}