/* =========================================================
   RUDY FOX – CSS ANIMATIONS
   Stany: idle | thinking | talking | greeting | not_found |
          excited | searching | reading | pointing | confused
   ========================================================= */

/* --- KEYFRAMES --- */

@keyframes fox-breathe {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(1.03) translateY(-1px); }
}

@keyframes fox-blink {
  0%, 88%, 100% { transform: scaleY(0); }
  90%, 98%      { transform: scaleY(1); }
}

@keyframes fox-tail-sway {
  0%, 100% { transform: rotate(0deg); }
  40%      { transform: rotate(12deg); }
  60%      { transform: rotate(-6deg); }
}

@keyframes fox-jaw-talk {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

@keyframes fox-head-tilt-think {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-8deg); }
  70%      { transform: rotate(5deg); }
}

@keyframes fox-arm-scratch {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%      { transform: rotate(-30deg) translateY(-8px); }
  75%      { transform: rotate(-35deg) translateY(-10px); }
}

@keyframes fox-wave {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-45deg); }
  40%  { transform: rotate(-15deg); }
  60%  { transform: rotate(-50deg); }
  80%  { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

@keyframes fox-shrug {
  0%, 100% { transform: translateY(0); }
  30%, 70% { transform: translateY(-10px) rotate(15deg); }
}

@keyframes fox-shrug-left {
  0%, 100% { transform: translateY(0); }
  30%, 70% { transform: translateY(-10px) rotate(-15deg); }
}

@keyframes fox-bounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-18px); }
  50%      { transform: translateY(-8px); }
  70%      { transform: translateY(-14px); }
}

@keyframes fox-sparkle-appear {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  40%, 60% { opacity: 1; transform: scale(1.2); }
}

@keyframes fox-eyes-scan {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(3px); }
  75%      { transform: translateX(-3px); }
}

@keyframes fox-magnifier-appear {
  0%   { opacity: 0; transform: scale(0.5) rotate(-20deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes fox-book-appear {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fox-point-right {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  40%      { transform: rotate(-60deg) translateY(-5px); }
  60%      { transform: rotate(-55deg) translateY(-5px); }
}

@keyframes fox-head-confused {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(12deg); }
  60%      { transform: rotate(-8deg); }
  80%      { transform: rotate(10deg); }
}

@keyframes fox-question-appear {
  0%        { opacity: 0; transform: scale(0) translateY(6px); }
  60%       { opacity: 1; transform: scale(1.1) translateY(-2px); }
  100%      { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fox-pulse-soft {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* =========================================================
   STAN: idle (domyslny)
   ========================================================= */
.fox-state-idle #fox-body {
  animation: fox-breathe 3s ease-in-out infinite;
}
.fox-state-idle #fox-tail {
  animation: fox-tail-sway 2.5s ease-in-out infinite;
}
.fox-state-idle #fox-blink-left rect,
.fox-state-idle #fox-blink-right rect {
  animation: fox-blink 5s ease-in-out infinite;
}

/* =========================================================
   STAN: thinking
   ========================================================= */
.fox-state-thinking #fox-head {
  animation: fox-head-tilt-think 1.6s ease-in-out infinite;
}
.fox-state-thinking #fox-right-arm {
  animation: fox-arm-scratch 0.7s ease-in-out infinite;
}
.fox-state-thinking #fox-tail {
  animation: fox-tail-sway 1.2s ease-in-out infinite;
}

/* =========================================================
   STAN: talking
   ========================================================= */
.fox-state-talking #fox-jaw {
  animation: fox-jaw-talk 0.25s ease-in-out infinite;
}
.fox-state-talking #fox-tail {
  animation: fox-tail-sway 1.8s ease-in-out infinite;
}
.fox-state-talking #fox-body {
  animation: fox-breathe 1.5s ease-in-out infinite;
}

/* =========================================================
   STAN: greeting
   ========================================================= */
.fox-state-greeting #fox-right-arm {
  animation: fox-wave 1s ease-in-out 3;
  transform-origin: 115px 112px;
}
.fox-state-greeting #fox-body {
  animation: fox-breathe 2s ease-in-out infinite;
}
.fox-state-greeting #fox-tail {
  animation: fox-tail-sway 1s ease-in-out infinite;
}

/* =========================================================
   STAN: not_found
   ========================================================= */
.fox-state-not_found #fox-right-arm {
  animation: fox-shrug 1.2s ease-in-out 2;
}
.fox-state-not_found #fox-left-arm {
  animation: fox-shrug-left 1.2s ease-in-out 2;
}
.fox-state-not_found #fox-head {
  animation: fox-head-tilt-think 2s ease-in-out 1;
}

/* =========================================================
   STAN: excited
   ========================================================= */
.fox-state-excited #fox-body,
.fox-state-excited #fox-head {
  animation: fox-bounce 0.6s ease-in-out 4;
}
.fox-state-excited #fox-sparkle-group {
  display: block;
  animation: fox-sparkle-appear 0.5s ease-in-out infinite alternate;
}
.fox-state-excited #fox-tail {
  animation: fox-tail-sway 0.5s ease-in-out infinite;
}

/* =========================================================
   STAN: searching
   ========================================================= */
.fox-state-searching #fox-prop-magnifier {
  display: block;
  animation: fox-magnifier-appear 0.4s ease-out forwards;
}
.fox-state-searching #fox-left-eye-inner,
.fox-state-searching #fox-right-eye-inner {
  animation: fox-eyes-scan 1s ease-in-out infinite;
}
.fox-state-searching #fox-head {
  animation: fox-head-tilt-think 2s ease-in-out infinite;
}
.fox-state-searching #fox-right-arm {
  transform: rotate(-40deg) translateY(-6px);
  transform-origin: 115px 112px;
  transition: transform 0.4s ease;
}

/* =========================================================
   STAN: reading
   ========================================================= */
.fox-state-reading #fox-prop-book {
  display: block;
  animation: fox-book-appear 0.3s ease-out forwards;
}
.fox-state-reading #fox-left-eye-inner,
.fox-state-reading #fox-right-eye-inner {
  animation: fox-eyes-scan 2s ease-in-out infinite;
}
.fox-state-reading #fox-head {
  transform: rotate(-5deg) translateY(-2px);
  transform-origin: 80px 65px;
  transition: transform 0.5s ease;
}

/* =========================================================
   STAN: pointing
   ========================================================= */
.fox-state-pointing #fox-right-arm {
  animation: fox-point-right 0.8s ease-in-out 2 forwards;
}
.fox-state-pointing #fox-body {
  animation: fox-pulse-soft 1.5s ease-in-out infinite;
}

/* =========================================================
   STAN: confused
   ========================================================= */
.fox-state-confused #fox-head {
  animation: fox-head-confused 1.5s ease-in-out 2;
}
.fox-state-confused #fox-prop-question {
  display: block;
  animation: fox-question-appear 0.4s ease-out forwards;
}
.fox-state-confused #fox-right-arm {
  animation: fox-shrug 1.5s ease-in-out 2;
}

/* =========================================================
   Plynne przejscia miedzy stanami
   ========================================================= */
#rudy-fox * {
  transition: opacity 0.3s ease;
}

/* Reset rekwizytow gdy nie sa aktywne */
#fox-prop-magnifier,
#fox-prop-book,
#fox-prop-question,
#fox-sparkle-group {
  opacity: 0;
  display: none;
}