/* ============================================================
   ANIMATION PRESETS - Subtle animations for SVG illustrations
   ============================================================

   Design principle: Gentle movements that add life without
   distracting from reading. All animations use small values
   and ease-in-out timing for smoothness.

   Usage: Add animation declarations to story JSON:
   {
     "illustration": {
       "svg": "<svg>...<g id=\"character\">...</g></svg>",
       "animations": [
         { "target": "#character", "preset": "float", "duration": "3s" }
       ]
     }
   }
============================================================ */

/* === CHARACTER ANIMATIONS === */

/* Breathing - very subtle scale for living characters */
@keyframes anim-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Float - gentle up/down bob for idle stance */
@keyframes anim-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Blink - quick opacity dip for eyes */
@keyframes anim-blink {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0.1; }
}

/* Nod - tiny rotation nod for acknowledgment */
@keyframes anim-nod {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
}

/* Wiggle - subtle rotation for curiosity/excitement */
@keyframes anim-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}

/* === ENVIRONMENT ANIMATIONS === */

/* Sway - gentle pendulum from top for trees/plants */
@keyframes anim-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
}

/* Drift - slow horizontal movement for clouds */
@keyframes anim-drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(20px); }
}

/* Twinkle - soft opacity for stars/sparkles */
@keyframes anim-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Shimmer - rapid subtle opacity for water reflections */
@keyframes anim-shimmer {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Glow - soft scale pulse for light sources */
@keyframes anim-glow {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.05); opacity: 1; }
}

/* === UNIVERSAL ANIMATIONS === */

/* Rotate - slow continuous rotation for sun rays, gears */
@keyframes anim-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Pulse - gentle opacity pulse for magical items */
@keyframes anim-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Wave - sine-wave vertical offset for flags, hair */
@keyframes anim-wave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(1deg); }
  75% { transform: translateY(2px) rotate(-1deg); }
}

/* Fall - downward movement for rain/falling objects */
@keyframes anim-fall {
  0% { transform: translateY(-10px); opacity: 1; }
  100% { transform: translateY(200px); opacity: 0.7; }
}

/* === PRESET CLASSES ===
   Each class uses CSS custom properties for duration and delay,
   allowing JSON to override defaults while keeping animation logic in CSS.
*/

/* SVG elements need transform-box to make transform-origin work relative to the element */
[class^="anim-"],
[class*=" anim-"] {
  transform-box: fill-box;
}

/* Character animations */
.anim-breathe {
  animation: anim-breathe var(--anim-dur, 4s) var(--anim-easing, ease-in-out) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, normal);
  transform-origin: center bottom;
}

.anim-float {
  animation: anim-float var(--anim-dur, 3s) var(--anim-easing, ease-in-out) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, normal);
}

.anim-blink {
  animation: anim-blink var(--anim-dur, 4s) var(--anim-easing, ease-in-out) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, normal);
}

.anim-nod {
  animation: anim-nod var(--anim-dur, 2s) var(--anim-easing, ease-in-out) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, normal);
  transform-origin: center bottom;
}

.anim-wiggle {
  animation: anim-wiggle var(--anim-dur, 1.5s) var(--anim-easing, ease-in-out) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, normal);
  transform-origin: center center;
}

/* Environment animations */
.anim-sway {
  animation: anim-sway var(--anim-dur, 4s) var(--anim-easing, ease-in-out) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, normal);
  transform-origin: bottom center;
}

.anim-drift {
  animation: anim-drift var(--anim-dur, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, alternate);
}

.anim-twinkle {
  animation: anim-twinkle var(--anim-dur, 2s) var(--anim-easing, ease-in-out) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, normal);
}

.anim-shimmer {
  animation: anim-shimmer var(--anim-dur, 1s) var(--anim-easing, ease-in-out) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, normal);
}

.anim-glow {
  animation: anim-glow var(--anim-dur, 3s) var(--anim-easing, ease-in-out) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, normal);
}

/* Universal animations */
.anim-rotate {
  animation: anim-rotate var(--anim-dur, 20s) var(--anim-easing, linear) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, normal);
  transform-origin: center center;
}

.anim-pulse {
  animation: anim-pulse var(--anim-dur, 2s) var(--anim-easing, ease-in-out) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, normal);
}

.anim-wave {
  animation: anim-wave var(--anim-dur, 3s) var(--anim-easing, ease-in-out) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, normal);
  transform-origin: top center;
}

.anim-fall {
  animation: anim-fall var(--anim-dur, 2s) var(--anim-easing, linear) var(--anim-delay, 0s) var(--anim-iterations, infinite) var(--anim-direction, normal);
}

/* Performance: Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .anim-breathe,
  .anim-float,
  .anim-blink,
  .anim-nod,
  .anim-wiggle,
  .anim-sway,
  .anim-drift,
  .anim-twinkle,
  .anim-shimmer,
  .anim-glow,
  .anim-rotate,
  .anim-pulse,
  .anim-wave,
  .anim-fall {
    animation: none;
  }
}