/* ════════════════════════════════════════════════ */
/* CHAPTER 07 — НА С ТИ?                           */
/* ════════════════════════════════════════════════ */

#chapter-07 {
  --nasti: #4ecdc4;
}

#chapter-07 .chapter-title h1 { color: var(--nasti); }

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

/* ── EFFECT 1: NAME SLIP ECHO ── */
#chapter-07 .name-slip {
  transition: opacity 0.8s ease, transform 0.6s ease;
}
#chapter-07 .name-slip[data-echo="2"] {
  margin-left: 1.4em;
}
#chapter-07 .name-slip[data-echo="3"] {
  margin-left: 2.3em;
}

/* ── EFFECT 2: DARKNESS VEIL ── */
#darkness-veil {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 3s ease;
}

/* ── EFFECT 3: STACCATO — "Do. Not. Look." ── */
#chapter-07 .staccato-block {
  font-weight: 600;
}
#chapter-07 .staccato-word {
  opacity: 0;
  display: inline;
}
#chapter-07 .staccato-word.landed {
  opacity: 1;
  transition: opacity 0.1s ease;
}

/* ── EFFECT 4: STEP COUNTER ── */
#chapter-07 .step-count {
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95em;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
  margin-bottom: 1.2em;
}

/* ── EFFECT 5: PHOSPHENE BLOOM ── */
.phosphene-overlay {
  position: fixed;
  top: -60px; left: -60px;
  width: calc(100% + 120px); height: calc(100% + 120px);
  pointer-events: none;
  z-index: 999;
  opacity: 0;
}
.phosphene-overlay.blooming {
  animation: phosphene-bloom 4s ease-in-out infinite;
  filter: blur(60px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 85%);
  mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 85%);
}
.phosphene-overlay.fading {
  animation: none;
  opacity: 0;
  transition: opacity 3s ease-out;
}
@keyframes phosphene-bloom {
  0%   { opacity: 0;   background-color: rgba(40, 180, 60, 0.14); }
  8%   { opacity: 1;   background-color: rgba(40, 180, 60, 0.14); }
  25%  { opacity: 1;   background-color: rgba(120, 160, 50, 0.14); }
  38%  { opacity: 1;   background-color: rgba(200, 140, 40, 0.14); }
  55%  { opacity: 1;   background-color: rgba(140, 130, 120, 0.13); }
  68%  { opacity: 0.9; background-color: rgba(80, 120, 200, 0.12); }
  82%  { opacity: 0.5; background-color: rgba(60, 100, 180, 0.08); }
  100% { opacity: 0;   background-color: rgba(40, 180, 60, 0.14); }
}

/* ── EFFECT 6: NAMES IN CLAY ── */
#chapter-07 .clay-name {
  text-align: center;
  margin: 2.5em 0;
  opacity: 0;
}
#chapter-07 .clay-name.revealed {
  opacity: 1;
  transition: opacity 1.5s ease;
}
#chapter-07 .clay-name-word {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--fg);
  margin-bottom: 0.8em;
  opacity: 0;
}
#chapter-07 .clay-name-word.etched {
  opacity: 1;
  transition: opacity 2s ease;
}
#chapter-07 .clay-name-word .etch-char {
  display: inline-block;
  will-change: transform;
}

/* ── EFFECT 8: "Someone." REVEAL ── */
#chapter-07 .someone-reveal {
  font-weight: 600;
  font-size: 1.05em;
}
#chapter-07 .someone-reveal.revealed {
  transition: opacity 1.5s ease, transform 1s ease;
}

/* ── EFFECT 9: RECORDER END ── */
#chapter-07 .recorder-end.revealed {
  transition: opacity 3s ease, transform 2s ease;
}
#chapter-07 .cassette-icon {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: middle;
  color: var(--fg-dim);
  margin-left: 0.3em;
}

/* ════════════════════════════════════════════ */
/* NEW EFFECT: PARANOIA SPIRAL                 */
/* Thought blocks progressively destabilize    */
/* ════════════════════════════════════════════ */
#chapter-07 .paranoia-spiral .thought-block {
  transition: transform 0.8s ease, opacity 0.8s ease, border-left-color 0.8s ease;
}
#chapter-07 .paranoia-spiral.destabilizing .thought-block:nth-child(3) {
  transform: translateX(2px) !important;
}
#chapter-07 .paranoia-spiral.destabilizing .thought-block:nth-child(4) {
  transform: translateX(4px) skewX(-0.3deg) !important;
}
#chapter-07 .paranoia-spiral.destabilizing .thought-block:nth-child(5) {
  transform: translateX(6px) skewX(-0.5deg) !important;
  border-left-color: rgba(57, 222, 222, 0.6);
}
#chapter-07 .paranoia-spiral.destabilizing .thought-block:nth-child(6) {
  transform: translateX(8px) skewX(-0.7deg) !important;
  border-left-color: rgba(57, 222, 222, 0.65);
}
#chapter-07 .paranoia-spiral.destabilizing .thought-block:nth-child(7) {
  transform: translateX(10px) skewX(-0.8deg) !important;
  border-left-color: rgba(57, 222, 222, 0.7);
}
#chapter-07 .paranoia-spiral.destabilizing .thought-block:nth-child(8) {
  transform: translateX(8px) skewX(-0.7deg) !important;
  border-left-color: rgba(57, 222, 222, 0.65);
}
#chapter-07 .paranoia-spiral.destabilizing .thought-block:nth-child(9) {
  transform: translateX(12px) skewX(-1deg) !important;
  border-left-color: rgba(57, 222, 222, 0.8);
}
#chapter-07 .paranoia-spiral.settled .thought-block {
  transform: translateX(0) skewX(0) !important;
  border-left-color: var(--thought-border-nasti);
  transition: transform 2s ease, border-left-color 2s ease;
}


/* ════════════════════════════════════════════ */
/* NEW EFFECT: COMPULSIVE PULSE — "More."      */
/* ════════════════════════════════════════════ */
#chapter-07 .compulsive-pulse {
  font-weight: 600;
  text-align: center;
  font-size: 1.05em;
}
#chapter-07 .compulsive-pulse.pulsing {
  animation: ch7-compulsive-throb 1.2s ease-in-out 3;
}
@keyframes ch7-compulsive-throb {
  0%, 100% {
    text-shadow: none;
    transform: translateY(0) scale(1);
  }
  50% {
    text-shadow:
      0 0 6px rgba(57, 222, 222, 0.3),
      0 0 15px rgba(57, 222, 222, 0.1);
    transform: translateY(0) scale(1.02);
  }
}


/* ════════════════════════════════════════════ */
/* NEW EFFECT: DREAD WEIGHT — fourth footprint */
/* ════════════════════════════════════════════ */
#chapter-07 .dread-weight {
  font-weight: 500;
  transition: opacity 2.5s ease, transform 1.5s ease;
  transform: translateY(8px);
}
#chapter-07 .dread-weight.revealed {
  opacity: 1;
  transform: translateY(0);
}
#chapter-07 .dread-weight .dread-word {
  display: inline;
  transition: color 1s ease, text-shadow 1s ease;
}
#chapter-07 .dread-weight.weighted .dread-word {
  color: var(--nasti);
  text-shadow:
    0 0 8px rgba(57, 222, 222, 0.3),
    0 0 20px rgba(57, 222, 222, 0.1);
}
#chapter-07 .dread-weight.weighted-fade .dread-word {
  color: var(--fg);
  text-shadow: none;
  transition: color 3s ease, text-shadow 3s ease;
}


/* ════════════════════════════════════════════ */
/* NEW EFFECT: TACTILE JOLT — growing teeth    */
/* ════════════════════════════════════════════ */
#chapter-07 .tactile-jolt {
  transition: opacity 0.8s ease, transform 0.6s ease;
}
#chapter-07 .tactile-jolt.jolted {
  animation: ch7-jolt-shake 0.3s ease;
}
@keyframes ch7-jolt-shake {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(2px, -1px); }
  30%  { transform: translate(-1.5px, 1px); }
  45%  { transform: translate(1px, -0.5px); }
  60%  { transform: translate(-1px, 0.5px); }
  75%  { transform: translate(0.5px, -0.5px); }
  100% { transform: translate(0, 0); }
}


/* ════════════════════════════════════════════ */
/* NEW EFFECT: PRESENCE DETECTION              */
/* "Something moved ahead" — word displacement */
/* ════════════════════════════════════════════ */
#chapter-07 .presence-detect .presence-word {
  display: inline-block;
  transition: transform 1.5s ease;
}
/* Only promote to compositor layer when animation is active */
#chapter-07 .presence-detect.displaced .presence-word {
  will-change: transform;
}
#chapter-07 .presence-detect .presence-word.space {
  display: inline;
}
#chapter-07 .presence-detect.displaced .presence-word:not(.space) {
  animation: ch7-air-displace var(--displace-dur, 3s) ease-in-out infinite;
  animation-delay: var(--displace-delay, 0s);
}
@keyframes ch7-air-displace {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(var(--displace-x, 1px)); }
  70% { transform: translateX(calc(var(--displace-x, 1px) * -0.6)); }
}
#chapter-07 .presence-detect.displaced-end .presence-word {
  animation: none !important;
  transform: translateX(0);
  transition: transform 0.5s ease;
  will-change: auto;
}


/* ════════════════════════════════════════════ */
/* NEW EFFECT: THE EYES                        */
/* Two dots appear in the void                 */
/* ════════════════════════════════════════════ */
.ch7-eyes-container {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 2s ease;
}
.ch7-eyes-container.visible {
  opacity: 1;
}
.ch7-eyes-container.fading {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.ch7-eyes-container .eye-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(200, 210, 220, 0.7);
  box-shadow:
    0 0 4px rgba(200, 210, 220, 0.5),
    0 0 12px rgba(200, 210, 220, 0.2);
}
.ch7-eyes-container .eye-dot.left {
  top: 38%;
  left: calc(50% - 12px);
}
.ch7-eyes-container .eye-dot.right {
  top: 38%;
  left: calc(50% + 12px);
}
.ch7-eyes-container.closer .eye-dot.left {
  top: 40%;
  left: calc(50% - 10px);
  width: 4px;
  height: 4px;
  transition: all 1.5s ease;
  box-shadow:
    0 0 6px rgba(200, 210, 220, 0.6),
    0 0 18px rgba(200, 210, 220, 0.3);
}
.ch7-eyes-container.closer .eye-dot.right {
  top: 40%;
  left: calc(50% + 10px);
  width: 4px;
  height: 4px;
  transition: all 1.5s ease;
  box-shadow:
    0 0 6px rgba(200, 210, 220, 0.6),
    0 0 18px rgba(200, 210, 220, 0.3);
}
#chapter-07 .two-points-text {
  position: relative;
  z-index: 4;
}


/* ════════════════════════════════════════════ */
/* NEW EFFECT: THE BREATH                      */
/* Warm wave sweeps across text                */
/* ════════════════════════════════════════════ */
#chapter-07 .breath-on-neck {
  position: relative;
  overflow: hidden;
}
#chapter-07 .breath-on-neck::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(180, 120, 80, 0.06),
    rgba(200, 140, 90, 0.1),
    rgba(180, 120, 80, 0.06),
    transparent
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
#chapter-07 .breath-on-neck.breathing::before {
  opacity: 1;
  animation: ch7-breath-sweep 4.5s ease-in-out forwards;
}
@keyframes ch7-breath-sweep {
  0%   { left: -40%; }
  100% { left: 120%; }
}
#chapter-07 .breath-on-neck .breath-word {
  display: inline;
  transition: color 1.2s ease;
}
#chapter-07 .breath-on-neck.breathing .breath-word.warm {
  color: rgba(255, 220, 180, 0.9);
  transition: color 2.25s ease;
}
#chapter-07 .breath-on-neck.breath-settled .breath-word {
  color: var(--fg) !important;
  transition: color 3s ease;
}


/* ════════════════════════════════════════════ */
/* NEW EFFECT: THE IMPACT                      */
/* Hard shake + red flash + blood color        */
/* ════════════════════════════════════════════ */
#chapter-07 .impact-block {
  transition: opacity 1.2s ease, transform 0.9s ease;
}
#chapter-07 .impact-block.impacted {
  animation: ch7-impact-shake 0.375s ease;
}
@keyframes ch7-impact-shake {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(4px, -2px); }
  25%  { transform: translate(-3px, 2px); }
  37%  { transform: translate(2px, -1px); }
  50%  { transform: translate(-2px, 1px); }
  62%  { transform: translate(1px, -1px); }
  75%  { transform: translate(-1px, 0.5px); }
  100% { transform: translate(0, 0); }
}
.ch7-impact-flash {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(180, 40, 40, 0.06);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.ch7-impact-flash.flash {
  opacity: 1;
  transition: opacity 0.045s ease;
}
.ch7-impact-flash.flash-fade {
  opacity: 0;
  transition: opacity 1.2s ease;
}
#chapter-07 .impact-block .blood-text {
  display: inline;
  transition: color 3s ease;
}
#chapter-07 .impact-block.bleeding .blood-text {
  color: rgba(180, 60, 50, 0.7);
}
#chapter-07 .impact-block.blood-settled .blood-text {
  color: var(--fg);
  transition: color 4.5s ease;
}


@media (max-width: 600px) {
  #chapter-07 .clay-name-word {
    font-size: 1em;
    letter-spacing: 0.25em;
  }
  #chapter-07 .name-slip[data-echo="2"] { margin-left: 1em; }
  #chapter-07 .name-slip[data-echo="3"] { margin-left: 1.6em; }
}