/* ============================================================
   css/redaction-anim.css — single-word Redaction animations
   Triggered when a .redaction-word element gets the .playing class.
   ============================================================ */

.redaction-word {
  display: inline-block;
  will-change: transform, filter;
}

.redaction-word.char-split {
  display: inline-block;
  white-space: pre;
}

.redaction-char {
  display: inline-block;
  will-change: opacity, transform;
}

/* ---- mirror: blur + scaleX oscillation (Order I) ---- */
.redaction-word[data-anim="mirror"].playing {
  animation: redaction-mirror 0.9s cubic-bezier(0.4, 0, 0.6, 1) 3 both;
  animation-delay: 250ms;
}
@keyframes redaction-mirror {
  0%, 100% { filter: blur(0);   transform: scaleX(1);    }
  50%      { filter: blur(5px); transform: scaleX(0.94); }
}

/* ---- distort: skewX oscillation (Order II) ---- */
.redaction-word[data-anim="distort"].playing {
  animation: redaction-distort 0.55s cubic-bezier(0.45, 0, 0.55, 1) 5 alternate;
  animation-delay: 250ms;
}
@keyframes redaction-distort {
  0%   { transform: skewX(0);     }
  50%  { transform: skewX(8deg);  }
  100% { transform: skewX(-8deg); }
}

/* ---- forgotten: per-char fade loop (Order III) ---- */
.redaction-word[data-anim="forgotten"].playing .redaction-char {
  animation: redaction-forgotten 3.2s ease-in-out 2 both;
  animation-delay: calc(var(--char-idx) * 70ms + 250ms);
}
@keyframes redaction-forgotten {
  0%, 100% { opacity: 1; }
  45%, 70% { opacity: 0; }
}

/* ---- original: glitch twitch with colour split (Order IV) ---- */
.redaction-word[data-anim="original"].playing {
  animation: redaction-glitch 0.09s steps(2, end) 8 both;
  animation-delay: 250ms;
}
@keyframes redaction-glitch {
  0%   { transform: translate(0);   text-shadow: none; }
  25%  { transform: translate(3px); text-shadow:  2px 0 #F44336, -2px 0 #4FC3F7; }
  75%  { transform: translate(-3px);text-shadow: -2px 0 #F44336,  2px 0 #4FC3F7; }
  100% { transform: translate(0);   text-shadow: none; }
}

/* ---- dissolve: letter-by-letter fade in on entry (closing words) ---- */
.redaction-word[data-anim="dissolve"].char-split .redaction-char {
  opacity: 0;
}
.redaction-word[data-anim="dissolve"].playing .redaction-char {
  animation: redaction-dissolve 0.55s ease-out both;
  animation-delay: calc(var(--char-idx) * 55ms + 200ms);
}
@keyframes redaction-dissolve {
  0%   { opacity: 0; filter: blur(6px); transform: translateY(4px); }
  100% { opacity: 1; filter: blur(0);   transform: translateY(0);   }
}

/* ---- Reduced motion: snap words into final state ---- */
@media (prefers-reduced-motion: reduce) {
  .redaction-word,
  .redaction-word .redaction-char {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}