/* ============================================================================
   duh-dereva.css — движения аватара «Дух дерева».
   Разделение ответственности:
     • JS-контроллер (duh-dereva.js) выставляет ПОЗУ — морфит рот/брови,
       прищур и взгляд глаз — и переключает data-emotion / data-speaking
       на #dd-avatar. Рот при речи тоже ведёт JS (амплитуда живая/из аудио).
     • CSS отвечает за циклическое ДВИЖЕНИЕ (тело, амбиент, эффекты).
   Морфинг формы рта/бровей делает JS (rAF-интерполяция), НЕ transition: d —
   d как CSS-свойство анимируется только в Chromium, Safari/Firefox снапают.

   Интеграционные ручки:
     --dd-amp  (на #dd-avatar) — множитель амплитуды движения тела, дефолт 1.
                Ставится через avatar.setIntensity(v) или прямо стилем.

   Чтобы добавить новую эмоцию:
     1) описать её в EMOTIONS в duh-dereva.js (или registerEmotion);
     2) добавить сюда блок  #dd-avatar[data-emotion="имя"] #dd-root { animation: ... }
        и, при желании, эффекты в слое #dd-fx.
   ========================================================================== */

/* Точки вращения/масштаба для SVG-частей.
   transform-box: fill-box → transform-origin считается от bbox самой части.
   ВАЖНО: fill-box/transform-origin ставим ТОЛЬКО тем частям, у которых нет
   собственного transform="…" в разметке, иначе origin пересчитывается поверх
   базовой позиции и часть улетает. Всё позиционированное — в обёртках
   *-pos / .dd-fx-pos: позиция на внешней группе, анимация на внутренней. */
#dd-root        { transform-box: fill-box; transform-origin: 50% 100%; }
#dd-sprout      { transform-box: fill-box; transform-origin: 50% 100%; }
#dd-key         { transform-box: fill-box; transform-origin: 50% 0%; }
#dd-sparkle     { transform-box: fill-box; transform-origin: 50% 50%; }
#dd-cheek-left,
#dd-cheek-right { transform-box: fill-box; transform-origin: 50% 50%; }
#dd-eye-left, #dd-eye-right,
.dd-eye-ball    { transform-box: fill-box; transform-origin: 50% 50%; }
#dd-leaf-right-wave { transform-box: fill-box; transform-origin: 5% 65%; }  /* основание листа у стебля */
.dd-fx-star, #dd-fx-tear, #dd-fx-steam-l, #dd-fx-steam-r, #dd-fx-sweat,
.dd-fx-z, .dd-fx-dot, .dd-fx-hear { transform-box: fill-box; transform-origin: 50% 50%; }

/* Плавность того, что выставляет JS */
#dd-brow-left, #dd-brow-right { transition: opacity .25s ease; }
#dd-mouth                     { transition: opacity .15s ease; }
#dd-mouth-open                { transition: opacity .15s ease; }
#dd-eye-left, #dd-eye-right   { transition: transform .18s ease; }  /* взгляд/прищур */
.dd-eye-ball, .dd-eye-closed  { transition: opacity .2s ease; }     /* открыть/закрыть глаза */

/* --------------------------------------------------------------------------
   АМБИЕНТ — живёт всегда, независимо от эмоции
   -------------------------------------------------------------------------- */
#dd-sprout  { animation: dd-sprout-wiggle 4.5s ease-in-out infinite; }
#dd-key     { animation: dd-key-swing 3.2s ease-in-out infinite; }
#dd-sparkle { animation: dd-sparkle-twinkle 2.6s ease-in-out infinite; }

/* Моргание — класс dd-blink навешивает JS по таймеру.
   Анимация на внутренней .dd-eye-ball, чтобы не драться с транформом взгляда */
#dd-avatar.dd-blink .dd-eye-ball { animation: dd-blink .18s ease; }

/* --------------------------------------------------------------------------
   ЭМОЦИИ — циклическое движение всего тела (#dd-root)
   -------------------------------------------------------------------------- */
#dd-avatar[data-emotion="idle"]      #dd-root { animation: dd-idle      5s   ease-in-out infinite; }
#dd-avatar[data-emotion="happy"]     #dd-root { animation: dd-happy     0.9s ease-in-out infinite; }
#dd-avatar[data-emotion="sad"]       #dd-root { animation: dd-sad       4s   ease-in-out infinite; }
#dd-avatar[data-emotion="angry"]     #dd-root { animation: dd-angry     0.18s linear infinite; }
#dd-avatar[data-emotion="impatient"] #dd-root { animation: dd-impatient 0.5s ease-in-out infinite; }
#dd-avatar[data-emotion="surprised"] #dd-root { animation: dd-surprised 2.6s ease-out infinite; }
#dd-avatar[data-emotion="sleepy"]    #dd-root { animation: dd-sleepy    6s   ease-in-out infinite; }
#dd-avatar[data-emotion="thinking"]  #dd-root { animation: dd-thinking  4.5s ease-in-out infinite; }
#dd-avatar[data-emotion="waiting"]   #dd-root { animation: dd-waiting   7s   ease-in-out infinite; }
#dd-avatar[data-emotion="listening"] #dd-root { animation: dd-listening 3s   ease-in-out infinite; }
#dd-avatar[data-emotion="attentive"] #dd-root { animation: dd-attentive 4s   ease-in-out infinite; }

/* Слушаю/Внимателен — росток настораживается («ушки на макушке») */
#dd-avatar[data-emotion="listening"] #dd-sprout,
#dd-avatar[data-emotion="attentive"] #dd-sprout { animation: dd-sprout-perk 2.4s ease-in-out infinite; }

/* Злость — пульсирующий румянец */
#dd-avatar[data-emotion="angry"] #dd-cheek-left,
#dd-avatar[data-emotion="angry"] #dd-cheek-right { animation: dd-flush 0.6s ease-in-out infinite; }

/* Нетерпение — чаще стучит ключик */
#dd-avatar[data-emotion="impatient"] #dd-key { animation: dd-key-swing 0.6s ease-in-out infinite; }

/* Грусть и дрёма — росток поникает */
#dd-avatar[data-emotion="sad"]    #dd-sprout,
#dd-avatar[data-emotion="sleepy"] #dd-sprout { animation: dd-sprout-droop 4s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   ЭФФЕКТЫ (#dd-fx) — включаются только под своей эмоцией
   -------------------------------------------------------------------------- */
#dd-avatar[data-emotion="happy"] .dd-fx-star      { animation: dd-pop 1.15s ease-in-out infinite; }
#dd-avatar[data-emotion="happy"] .dd-fx-star2     { animation-delay: .55s; }
#dd-avatar[data-emotion="sad"] #dd-fx-tear        { animation: dd-tear-fall 2.4s ease-in infinite .4s; }
#dd-avatar[data-emotion="angry"] #dd-fx-steam-l   { animation: dd-steam 1.5s ease-out infinite; }
#dd-avatar[data-emotion="angry"] #dd-fx-steam-r   { animation: dd-steam 1.5s ease-out infinite .75s; }
#dd-avatar[data-emotion="impatient"] #dd-fx-sweat { animation: dd-sweat 1.7s ease-in infinite .3s; }
#dd-avatar[data-emotion="sleepy"] #dd-fx-z1       { animation: dd-zzz 2.6s ease-out infinite; }
#dd-avatar[data-emotion="sleepy"] #dd-fx-z2       { animation: dd-zzz 2.6s ease-out infinite .6s; }
#dd-avatar[data-emotion="sleepy"] #dd-fx-z3       { animation: dd-zzz 2.6s ease-out infinite 1.2s; }
#dd-avatar[data-emotion="thinking"] .dd-fx-dot    { animation: dd-dots 1.5s ease-in-out infinite; }
#dd-avatar[data-emotion="thinking"] #dd-fx-dot2   { animation-delay: .25s; }
#dd-avatar[data-emotion="thinking"] #dd-fx-dot3   { animation-delay: .5s; }
#dd-avatar[data-emotion="listening"] #dd-fx-hear1 { animation: dd-hear 1.4s ease-out infinite; }
#dd-avatar[data-emotion="listening"] #dd-fx-hear2 { animation: dd-hear 1.4s ease-out infinite .35s; }

/* --------------------------------------------------------------------------
   ЖЕСТЫ (data-gesture) — накладываются поверх эмоции и речи
   -------------------------------------------------------------------------- */
#dd-avatar[data-gesture="wave"] #dd-leaf-right-wave { animation: dd-wave .38s ease-in-out infinite alternate; }

/* --------------------------------------------------------------------------
   РЕЧЬ — видимость ртов; амплитуду открытого рта ведёт JS (живая/из аудио)
   -------------------------------------------------------------------------- */
#dd-avatar[data-speaking="true"] #dd-mouth-open { opacity: 1; }
#dd-avatar[data-speaking="true"] #dd-mouth      { opacity: 0; }  /* прячем закрытый, чтобы не двоился */

/* ==========================================================================
   KEYFRAMES — движение тела (амплитуда × var(--dd-amp, 1))
   ========================================================================== */
@keyframes dd-idle {
  0%,100% { transform: translateY(0)    scale(1,1)      rotate(0deg); }
  50%     { transform: translateY(-3px) scale(1.01,.99) rotate(0.6deg); }
}
@keyframes dd-happy {
  0%,100% { transform: translateY(0) scale(1,1); }
  30%     { transform: translateY(calc(-16px * var(--dd-amp,1))) scale(0.98,1.04); }
  55%     { transform: translateY(0) scale(1.05,0.95); }
  75%     { transform: translateY(calc(-6px * var(--dd-amp,1))) scale(1,1); }
}
@keyframes dd-sad {
  0%,100% { transform: translateY(calc(4px * var(--dd-amp,1))) scale(1,0.985) rotate(-1deg); }
  50%     { transform: translateY(calc(9px * var(--dd-amp,1))) scale(1.01,0.97) rotate(-1.5deg); }
}
@keyframes dd-angry {
  0%   { transform: translate(calc(-2px * var(--dd-amp,1)), 0) rotate(-1deg); }
  25%  { transform: translate(calc(2px * var(--dd-amp,1)), -1px) rotate(1deg); }
  50%  { transform: translate(calc(-2px * var(--dd-amp,1)), 1px) rotate(-1deg); }
  75%  { transform: translate(calc(2px * var(--dd-amp,1)), 0) rotate(1deg); }
  100% { transform: translate(calc(-2px * var(--dd-amp,1)), 0) rotate(-1deg); }
}
@keyframes dd-impatient {
  0%,100% { transform: translateY(0) rotate(0deg); }
  20%     { transform: translateY(calc(-5px * var(--dd-amp,1))) rotate(-2deg); }
  40%     { transform: translateY(0) rotate(0deg); }
  60%     { transform: translateY(calc(-5px * var(--dd-amp,1))) rotate(2deg); }
  80%     { transform: translateY(0) rotate(0deg); }
}
@keyframes dd-surprised {
  0%      { transform: translateY(0) scale(1.02); }
  10%     { transform: translateY(calc(-9px * var(--dd-amp,1))) scale(1.05,1.03); }
  22%     { transform: translateY(0) scale(1.03,1.01); }
  60%,100%{ transform: translateY(-1px) scale(1.02); }
}
@keyframes dd-sleepy {
  0%,100% { transform: translateY(2px) rotate(-2deg) scale(1,0.99); }
  50%     { transform: translateY(calc(7px * var(--dd-amp,1))) rotate(-3.5deg) scale(1.01,0.965); }
}
@keyframes dd-thinking {
  0%,100% { transform: rotate(0.8deg) translateX(1px); }
  50%     { transform: rotate(2.4deg) translateX(calc(3px * var(--dd-amp,1))); }
}
@keyframes dd-waiting {   /* терпеливое ожидание: медленное мелкое дыхание */
  0%,100% { transform: translateY(1px)  scale(1,0.995); }
  50%     { transform: translateY(-2px) scale(1.005,1); }
}
@keyframes dd-listening { /* голова слегка наклонена к звуку, мягкое покачивание */
  0%,100% { transform: rotate(2.5deg) translateY(-1px); }
  50%     { transform: rotate(1.2deg) translateY(-3px); }
}
@keyframes dd-attentive { /* подался вперёд и замер */
  0%,100% { transform: translateY(-3px) scale(1.02); }
  50%     { transform: translateY(-4px) scale(1.025); }
}
@keyframes dd-sprout-perk { /* настороженный росток: быстрый двойной вздрог и замер */
  0%      { transform: rotate(0deg); }
  6%      { transform: rotate(-6deg); }
  12%     { transform: rotate(4deg); }
  18%,100%{ transform: rotate(0deg); }
}
@keyframes dd-hear {      /* звуковые дуги: расходятся от «уха» */
  0%   { transform: translateX(-4px) scale(0.7); opacity: 0; }
  30%  { opacity: .85; }
  100% { transform: translateX(3px) scale(1.1);  opacity: 0; }
}

/* ---- мимика/амбиент ---- */
@keyframes dd-blink {
  0%,100% { transform: scaleY(1); }
  50%     { transform: scaleY(0.08); }
}
@keyframes dd-flush {
  0%,100% { opacity: .7;  transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.25); }
}
@keyframes dd-sprout-wiggle {
  0%,100% { transform: rotate(-2deg); }
  50%     { transform: rotate(3deg); }
}
@keyframes dd-sprout-droop {
  0%,100% { transform: rotate(6deg) translateY(2px); }
  50%     { transform: rotate(9deg) translateY(4px); }
}
@keyframes dd-key-swing {
  0%,100% { transform: rotate(-4deg); }
  50%     { transform: rotate(4deg); }
}
@keyframes dd-sparkle-twinkle {
  0%,100% { transform: scale(0.7) rotate(0deg);   opacity: .55; }
  50%     { transform: scale(1.05) rotate(45deg); opacity: 1; }
}

@keyframes dd-wave {
  from { transform: rotate(-12deg); }
  to   { transform: rotate(32deg); }
}

/* ---- эффекты ---- */
@keyframes dd-pop {
  0%   { transform: scale(0.2) rotate(0deg);   opacity: 0; }
  30%  { transform: scale(1.15) rotate(10deg); opacity: 1; }
  55%  { transform: scale(0.9) rotate(25deg);  opacity: 1; }
  100% { transform: scale(0.3) rotate(45deg);  opacity: 0; }
}
@keyframes dd-tear-fall {
  0%   { transform: translateY(-2px); opacity: 0; }
  25%  { opacity: 1; }
  80%  { transform: translateY(22px); opacity: 1; }
  100% { transform: translateY(27px); opacity: 0; }
}
@keyframes dd-steam {
  0%   { transform: translateY(4px) scale(0.7);    opacity: 0; }
  35%  { opacity: .95; }
  100% { transform: translateY(-16px) scale(1.15); opacity: 0; }
}
@keyframes dd-sweat {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  75%  { transform: translateY(14px); opacity: .9; }
  100% { transform: translateY(18px); opacity: 0; }
}
@keyframes dd-zzz {
  0%   { transform: translateY(6px) scale(0.8);    opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(-14px) scale(1.05); opacity: 0; }
}
@keyframes dd-dots {
  0%,100% { transform: scale(0.8); opacity: .15; }
  50%     { transform: scale(1.1); opacity: 1; }
}

/* Уважение к системной настройке «меньше движения».
   JS-петли (морфинг, саккады, речь) сами проверяют prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  #dd-avatar * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}