/* character-animations.css — GPU-accelerated character reaction animations
 * All animations use transform + filter only (no layout properties).
 * Reduced-motion: all .anim-* animations are disabled.
 * Keyframes are defined once; classes apply them.
 */

/* ── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
  --char-glow-color: #f4bd35;
  --char-success-glow: #12c878;
  --char-danger-glow: #f04444;
  --char-anim-duration-fast: 0.35s;
  --char-anim-duration-normal: 0.6s;
  --char-anim-duration-slow: 1.2s;
}

/* ── Base Container ─────────────────────────────────────────────────────── */
.char-avatar-host {
  display: block;
  will-change: transform;
  transform-origin: center bottom;
  transition: filter 0.3s ease;
  position: relative;
  user-select: none;
}

.char-avatar-host.anim-active {
  pointer-events: none;
}

/* ── Subtitle / Caption Overlay ─────────────────────────────────────────── */
.char-reaction-subtitle {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(4, 11, 39, 0.88);
  color: #f0f0f0;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.95rem;
  max-width: min(520px, 90vw);
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1200;
  border: 1px solid rgba(244, 189, 53, 0.3);
  backdrop-filter: blur(6px);
}

.char-reaction-subtitle.is-visible {
  opacity: 1;
}

[dir="rtl"] .char-reaction-subtitle {
  font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════════════════
   KEYFRAME DEFINITIONS
   ════════════════════════════════════════════════════════════════════════════ */

/* Idle: slow breathing scale */
@keyframes kf-idle-breathing {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.012); }
}

/* Idle: gentle side sway */
@keyframes kf-idle-listening {
  0%, 100% { transform: translateX(0); }
  33%       { transform: translateX(-3px) rotate(-1deg); }
  66%       { transform: translateX(3px) rotate(1deg); }
}

/* Idle: thoughtful tilt + subtle shake */
@keyframes kf-idle-thinking {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-4deg) translateX(-2px); }
  30%  { transform: rotate(-3deg); }
  45%  { transform: rotate(-5deg) translateX(1px); }
  60%  { transform: rotate(-4deg); }
  75%  { transform: rotate(-3deg) translateX(-1px); }
  90%  { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

/* Action: nod up and back */
@keyframes kf-nod-yes {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-10px); }
  55%  { transform: translateY(0); }
  72%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* Action: head tilt curious */
@keyframes kf-head-tilt {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(8deg); }
  80%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

/* Action: open-hand gesture */
@keyframes kf-gesture-open {
  0%   { transform: scale(0.96) translateX(0); }
  40%  { transform: scale(1.04) translateX(6px); }
  70%  { transform: scale(1.01) translateX(3px); }
  100% { transform: scale(1) translateX(0); }
}

/* Action: book reference gesture */
@keyframes kf-gesture-book {
  0%   { transform: translateY(0) rotate(0deg); }
  30%  { transform: translateY(6px) rotate(-3deg); }
  65%  { transform: translateY(3px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Action: celebration bounce — elastic */
@keyframes kf-bounce-celebration {
  0%   { transform: translateY(0) scale(1); }
  18%  { transform: translateY(-28px) scale(1.06); }
  38%  { transform: translateY(0) scale(0.97); }
  52%  { transform: translateY(-12px) scale(1.03); }
  66%  { transform: translateY(0) scale(0.99); }
  78%  { transform: translateY(-5px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

/* Action: proud smile glow */
@keyframes kf-proud-smile {
  0%   { transform: scale(1);    filter: brightness(1); }
  40%  { transform: scale(1.06); filter: brightness(1.22) drop-shadow(0 0 12px var(--char-glow-color)); }
  70%  { transform: scale(1.03); filter: brightness(1.12) drop-shadow(0 0 8px var(--char-glow-color)); }
  100% { transform: scale(1);    filter: brightness(1); }
}

/* Action: surprise pop */
@keyframes kf-surprised {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.14) translateY(-4px); }
  55%  { transform: scale(1.04) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}

/* Action: gentle disappointment droop */
@keyframes kf-gentle-disappointment {
  0%   { transform: translateY(0) scale(1);    filter: brightness(1); }
  35%  { transform: translateY(8px) scale(0.97); filter: brightness(0.88); }
  70%  { transform: translateY(5px) scale(0.98); filter: brightness(0.92); }
  100% { transform: translateY(0) scale(1);    filter: brightness(1); }
}

/* Action: rabbi prayerful upward blessing — signature move */
@keyframes kf-prayerful-gesture {
  0%   { transform: translateY(0) scale(1);    filter: brightness(1); }
  20%  { transform: translateY(-8px) scale(1.04); filter: brightness(1.1); }
  45%  { transform: translateY(-18px) scale(1.1);
         filter: brightness(1.35) drop-shadow(0 0 18px var(--char-glow-color)); }
  70%  { transform: translateY(-10px) scale(1.06); filter: brightness(1.18); }
  100% { transform: translateY(0) scale(1);    filter: brightness(1); }
}

/* Action: small applause oscillation */
@keyframes kf-applause-small {
  0%   { transform: scale(1) rotate(0deg); }
  15%  { transform: scale(1.05) rotate(-2deg); }
  30%  { transform: scale(0.98) rotate(2deg); }
  50%  { transform: scale(1.04) rotate(-1.5deg); }
  70%  { transform: scale(0.99) rotate(1deg); }
  85%  { transform: scale(1.02) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Action: point to screen (LTR default) */
@keyframes kf-point-screen {
  0%   { transform: translateX(0); }
  35%  { transform: translateX(15px); }
  65%  { transform: translateX(12px); }
  100% { transform: translateX(0); }
}

/* RTL point reversal */
[dir="rtl"] .anim-point-screen {
  animation-name: kf-point-screen-rtl !important;
}
@keyframes kf-point-screen-rtl {
  0%   { transform: translateX(0); }
  35%  { transform: translateX(-15px); }
  65%  { transform: translateX(-12px); }
  100% { transform: translateX(0); }
}

/* Idle-loop: suspense hold — subtle breathing scale + dim */
@keyframes kf-suspense-hold {
  0%, 100% { transform: scale(1.02); filter: brightness(0.92); }
  50%       { transform: scale(0.99); filter: brightness(1.0); }
}

/* Action: relieved exhale — scale down then settle */
@keyframes kf-relieved-exhale {
  0%   { transform: scale(1.02); }
  30%  { transform: scale(0.99); }
  60%  { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* Action: confidence pose — stand tall */
@keyframes kf-confidence-pose {
  0%   { transform: scale(1);    filter: brightness(1); }
  40%  { transform: scale(1.06); filter: brightness(1.15) drop-shadow(0 0 10px var(--char-success-glow)); }
  70%  { transform: scale(1.04); filter: brightness(1.1); }
  100% { transform: scale(1);    filter: brightness(1); }
}

/* Action: wave hello */
@keyframes kf-wave-hello {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(15deg); }
  35%  { transform: rotate(-10deg); }
  55%  { transform: rotate(8deg); }
  75%  { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

/* Action: consoling droop */
@keyframes kf-consoling {
  0%   { transform: translateY(0) scale(1);    filter: brightness(1); }
  40%  { transform: translateY(6px) scale(0.96); filter: brightness(0.85); }
  70%  { transform: translateY(4px) scale(0.97); filter: brightness(0.9); }
  100% { transform: translateY(0) scale(1);    filter: brightness(1); }
}

/* Action: champion pose — max glow */
@keyframes kf-champion-pose {
  0%   { transform: scale(1);    filter: brightness(1); }
  30%  { transform: scale(1.12) translateY(-6px);
         filter: brightness(1.4) drop-shadow(0 0 24px var(--char-glow-color)); }
  60%  { transform: scale(1.08) translateY(-4px);
         filter: brightness(1.28) drop-shadow(0 0 18px var(--char-glow-color)); }
  100% { transform: scale(1);    filter: brightness(1); }
}

/* Signature: rabbi prayerful blessing (extended champion) */
@keyframes kf-sig-rabbi-blessing {
  0%   { transform: translateY(0) scale(1);    filter: brightness(1) drop-shadow(0 0 0 transparent); }
  15%  { transform: translateY(-10px) scale(1.06); filter: brightness(1.15); }
  35%  { transform: translateY(-22px) scale(1.12);
         filter: brightness(1.4) drop-shadow(0 0 22px var(--char-glow-color)); }
  55%  { transform: translateY(-18px) scale(1.1);
         filter: brightness(1.3) drop-shadow(0 0 16px var(--char-glow-color)); }
  75%  { transform: translateY(-10px) scale(1.06); filter: brightness(1.15); }
  100% { transform: translateY(0) scale(1);    filter: brightness(1); }
}

/* Signature: scholar dignified bow */
@keyframes kf-sig-scholar-bow {
  0%   { transform: translateY(0) rotate(0deg); }
  30%  { transform: translateY(8px) rotate(-6deg); }
  55%  { transform: translateY(5px) rotate(-4deg); }
  80%  { transform: translateY(2px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Signature: presenter thumbs-up bounce */
@keyframes kf-sig-presenter-thumbsup {
  0%   { transform: scale(1) translateY(0); }
  20%  { transform: scale(1.08) translateY(-10px); }
  45%  { transform: scale(0.97) translateY(0); }
  65%  { transform: scale(1.04) translateY(-4px); }
  100% { transform: scale(1) translateY(0); }
}

/* Signature: educator open arms */
@keyframes kf-sig-educator-open-arms {
  0%   { transform: scale(1); filter: brightness(1); }
  30%  { transform: scale(1.08); filter: brightness(1.12) drop-shadow(0 0 10px var(--char-success-glow)); }
  60%  { transform: scale(1.05); filter: brightness(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ════════════════════════════════════════════════════════════════════════════
   ANIMATION CLASSES
   ════════════════════════════════════════════════════════════════════════════ */

/* Idle loops (infinite, stay until removed) */
.anim-idle-breathing {
  animation: kf-idle-breathing 3.5s ease-in-out infinite;
}
.anim-idle-listening {
  animation: kf-idle-listening 2.8s ease-in-out infinite;
}
.anim-idle-thinking {
  animation: kf-idle-thinking 4.2s ease-in-out infinite;
}
.anim-suspense-hold {
  animation: kf-suspense-hold 1.6s ease-in-out infinite;
}

/* Action animations (one-shot, forwards fill) */
.anim-nod-yes {
  animation: kf-nod-yes 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.anim-head-tilt {
  animation: kf-head-tilt 0.5s ease-in-out forwards;
}
.anim-gesture-open {
  animation: kf-gesture-open 0.7s ease-in-out forwards;
}
.anim-gesture-book {
  animation: kf-gesture-book 0.6s ease-in-out forwards;
}
.anim-bounce-celebration {
  animation: kf-bounce-celebration 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.anim-proud-smile {
  animation: kf-proud-smile 0.8s ease-out forwards;
}
.anim-surprised {
  animation: kf-surprised 0.38s ease-out forwards;
}
.anim-gentle-disappointment {
  animation: kf-gentle-disappointment 1.1s ease-out forwards;
}
.anim-prayerful-gesture {
  animation: kf-prayerful-gesture 1.25s ease-in-out forwards;
}
.anim-applause-small {
  animation: kf-applause-small 1.0s ease-in-out forwards;
}
.anim-point-screen {
  animation: kf-point-screen 0.6s ease-in-out forwards;
}
.anim-relieved-exhale {
  animation: kf-relieved-exhale 0.9s ease-out forwards;
}
.anim-confidence-pose {
  animation: kf-confidence-pose 0.65s ease-out forwards;
}
.anim-wave-hello {
  animation: kf-wave-hello 1.2s ease-in-out forwards;
}
.anim-consoling {
  animation: kf-consoling 1.4s ease-out forwards;
}
.anim-champion-pose {
  animation: kf-champion-pose 1.0s ease-out forwards;
}

/* Signature animations */
.anim-signature-rabbi-blessing {
  animation: kf-sig-rabbi-blessing 1.5s ease-in-out forwards;
}
.anim-signature-scholar-bow {
  animation: kf-sig-scholar-bow 0.85s ease-in-out forwards;
}
.anim-signature-presenter-thumbsup {
  animation: kf-sig-presenter-thumbsup 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.anim-signature-educator-open-arms {
  animation: kf-sig-educator-open-arms 0.9s ease-out forwards;
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .anim-idle-breathing,
  .anim-idle-listening,
  .anim-idle-thinking,
  .anim-suspense-hold,
  .anim-nod-yes,
  .anim-head-tilt,
  .anim-gesture-open,
  .anim-gesture-book,
  .anim-bounce-celebration,
  .anim-proud-smile,
  .anim-surprised,
  .anim-gentle-disappointment,
  .anim-prayerful-gesture,
  .anim-applause-small,
  .anim-point-screen,
  .anim-relieved-exhale,
  .anim-confidence-pose,
  .anim-wave-hello,
  .anim-consoling,
  .anim-champion-pose,
  .anim-signature-rabbi-blessing,
  .anim-signature-scholar-bow,
  .anim-signature-presenter-thumbsup,
  .anim-signature-educator-open-arms {
    animation: none !important;
  }
}