/* ============================================
   DIALOGUE / QUOTE EFFECTS - Subtle & Alive
   Add these to your custom_style.css
   ============================================ */

/* 1. BREATHING - gentle letter-spacing pulse
   Use for: contemplative dialogue, inner monologue */
.breathing {
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { letter-spacing: 0em; }
  50% { letter-spacing: 0.01em; }
}

/* 2. WARMTH - subtle color temperature flicker  
   Use for: spoken dialogue, warm/intimate quotes */
.warmth {
  animation: warmth-flicker 3s ease-in-out infinite;
}

@keyframes warmth-flicker {
  0%, 100% {
    color: inherit;
    filter: sepia(0%) brightness(1);
  }
  33% {
    filter: sepia(15%) brightness(1.05);
  }
  66% {
    filter: sepia(5%) brightness(0.97);
  }
}

/* 3. PRESENCE - barely-there glow pulse
   Use for: important quotes, emphasized speech */
.presence {
  filter: url(#presence-glow);
  animation: presence-pulse 3s ease-in-out infinite;
}

@keyframes presence-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* 4. MURMUR - very subtle displacement, like sound vibration
   Use for: whispered dialogue, uncertain speech */
.murmur {
  filter: url(#murmur);
}

/* 5. DRIFT - gentle vertical float
   Use for: dreamy quotes, memory, internal voice */
.drift {
  animation: drift 6s ease-in-out infinite;
}

@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 6. TYPEWRITER CURSOR - blinking cursor at end
   Use for: dialogue being "typed" or spoken in realtime */
.speaking::after {
  content: '▎';
  animation: cursor-blink 1s step-end infinite;
  opacity: 0.7;
  font-weight: 300;
  margin-left: 0.1em;
}

@keyframes cursor-blink {
  0%, 50% { opacity: 0.7; }
  51%, 100% { opacity: 0; }
}

/* 7. VOICE - combines breathing + warmth for natural speech feel
   Use for: general dialogue, default "alive" text */
.voice {
  animation: 
    breathe 4s ease-in-out infinite,
    warmth-flicker 3s ease-in-out infinite;
}

/* ============================================
   BLOCKQUOTE STYLING
   Apply automatically to all blockquotes
   ============================================ */

/* Option A: Auto-apply breathing to all blockquotes */
/*
blockquote {
  animation: breathe 4s ease-in-out infinite;
}
*/

/* Option B: Styled quote with presence effect */
/*
blockquote {
  border-left: 2px solid rgba(150, 170, 200, 0.3);
  padding-left: 1em;
  font-style: italic;
  filter: url(#presence-glow);
  animation: presence-pulse 3s ease-in-out infinite;
}
*/
