/* ═══════════════════════════════════════════════════════════
   MIST SYSTEM — Jailbirds In Flight
   Dreamy frosted-glass overlay with click-to-reveal.

   To DISABLE across the whole book:
     Option A: Delete this file (mist.css) and mist.js
     Option B: Comment out the <link> and <script> tags in each chapter
   ═══════════════════════════════════════════════════════════ */

/* Make sections clickable */
.image-section,
.video-bg-section {
  cursor: pointer;
}

/* ── Mist Layer ──────────────────────────────────────────────
   Sits between the image/video and the text overlay.
   backdrop-filter blurs + desaturates whatever is behind it,
   creating a cinematic frosted-glass mist.               */
.mist-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(7px) saturate(0.72) brightness(0.76);
  -webkit-backdrop-filter: blur(7px) saturate(0.72) brightness(0.76);
  background: rgba(6, 3, 16, 0.20);
  transition: opacity 0.85s ease;
  pointer-events: none;
}

/* Ensure text overlay sits above mist layer */
.image-overlay {
  z-index: 2 !important;
  transition: opacity 0.85s ease;
  pointer-events: none;
}

/* ── Revealed State ──────────────────────────────────────────
   Clicking a section toggles .image-revealed on it.
   Mist, text, and hint all fade to zero.               */
.image-revealed .mist-layer,
.image-revealed .image-overlay,
.image-revealed .reveal-hint {
  opacity: 0 !important;
}

/* ── Per-section Hint ────────────────────────────────────────
   Tiny nudge that fades in when the section enters view,
   then auto-dismisses. Hidden once the user clicks.    */
.reveal-hint {
  position: absolute;
  bottom: 28px;
  right: 32px;
  z-index: 3;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 300;
  opacity: 0;
  color: rgba(255, 255, 255, 0.5);
  transition: opacity 0.7s ease;
  pointer-events: none;
  font-family: "Cormorant Garamond", serif;
  white-space: nowrap;
}
.reveal-hint.hint-visible {
  opacity: 1;
}

/* ── Page Toast ──────────────────────────────────────────────
   One-time message on page load telling the viewer
   how to interact. Fades in, holds, then fades out.   */
.mist-toast {
  position: fixed;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(4, 2, 12, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.88);
  padding: 16px 36px;
  font-family: "Cormorant Garamond", serif;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 300;
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
  white-space: nowrap;
}
.mist-toast.toast-visible {
  opacity: 1;
}