/**
 * Animation Utilities - "Living Pages" Keyframes
 * 
 * CSS keyframe definitions for Tome of Tales animation system.
 * Follows the design philosophy from TOME_OF_TALES_DESIGN_PHILOSOPHY.md.
 * 
 * All animations respect prefers-reduced-motion accessibility preference.
 * 
 * @author Tome of Tales Dev Team
 * @version 1.0.0
 * @created January 2025
 */

/* ========================================
   ACCESSIBILITY: Reduced Motion Support
   ======================================== */

/**
 * Disable animations for users who prefer reduced motion
 * This respects WCAG AAA accessibility guidelines
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   GLOW PULSE ANIMATIONS (Quill Touch)
   ======================================== */

/**
 * Subtle glow - For ambient effects and idle states
 * Use: Input fields, buttons at rest
 */
@keyframes glow-pulse-subtle {
  0%,
  100% {
    box-shadow: 0 0 5px var(--glow-color, var(--dice)),
      0 0 10px var(--glow-color, var(--dice));
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 10px var(--glow-color, var(--dice)),
      0 0 20px var(--glow-color, var(--dice));
    filter: brightness(1.1);
  }
}

/**
 * Medium glow - For interactive elements
 * Use: Focused inputs, hover states, selected options
 */
@keyframes glow-pulse-medium {
  0%,
  100% {
    box-shadow: 0 0 10px var(--glow-color, var(--dice)),
      0 0 20px var(--glow-color, var(--dice)),
      0 0 30px var(--glow-color, var(--dice));
    filter: brightness(1.1);
  }
  50% {
    box-shadow: 0 0 15px var(--glow-color, var(--dice)),
      0 0 30px var(--glow-color, var(--dice)),
      0 0 45px var(--glow-color, var(--dice));
    filter: brightness(1.2);
  }
}

/**
 * Strong glow - For critical actions and highlights
 * Use: Success states, important notifications, active elements
 */
@keyframes glow-pulse-strong {
  0%,
  100% {
    box-shadow: 0 0 15px var(--glow-color, var(--dice)),
      0 0 30px var(--glow-color, var(--dice)),
      0 0 45px var(--glow-color, var(--dice)),
      0 0 60px var(--glow-color, var(--dice));
    filter: brightness(1.2);
  }
  50% {
    box-shadow: 0 0 20px var(--glow-color, var(--dice)),
      0 0 40px var(--glow-color, var(--dice)),
      0 0 60px var(--glow-color, var(--dice)),
      0 0 80px var(--glow-color, var(--dice));
    filter: brightness(1.3);
  }
}

/* ========================================
   SCALE ANIMATIONS (Button Press)
   ======================================== */

/**
 * Scale pulse - For button press feedback
 * Use: Click events, selection confirmations
 */
@keyframes scale-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(var(--pulse-scale, 1.05));
  }
  100% {
    transform: scale(1);
  }
}

/* ========================================
   SHAKE ANIMATION (Error State)
   ======================================== */

/**
 * Shake - For validation errors and warnings
 * Use: Invalid inputs, failed actions, error messages
 */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(calc(var(--shake-distance, 10px) * -1));
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(var(--shake-distance, 10px));
  }
}

/* ========================================
   FADE ANIMATIONS
   ======================================== */

/**
 * Fade in - Element appears gradually
 * Use: Modals, tooltips, notifications
 */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/**
 * Fade out - Element disappears gradually
 * Use: Closing modals, dismissing notifications
 */
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ========================================
   SLIDE ANIMATIONS (Expandable Sections)
   ======================================== */

/**
 * Slide down - For expanding sections
 * Use: Expandable menus, collapsible content
 * Note: max-height is set programmatically via JavaScript
 */
@keyframes slide-down {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: var(--target-height, 1000px);
    opacity: 1;
  }
}

/**
 * Slide up - For collapsing sections
 * Use: Collapsing menus, hiding content
 */
@keyframes slide-up {
  from {
    max-height: var(--start-height, 1000px);
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}

/* ========================================
   PAGE TURN ANIMATIONS (Tome Theme)
   ======================================== */

/**
 * Page turn in - Modal/section appears like turning a page
 * Use: Opening modals, revealing new sections
 */
@keyframes page-turn-in {
  0% {
    opacity: 0;
    transform: perspective(1000px) rotateY(-90deg);
    transform-origin: left center;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg);
    transform-origin: left center;
  }
}

/**
 * Page turn out - Modal/section disappears like turning a page
 * Use: Closing modals, hiding sections
 */
@keyframes page-turn-out {
  0% {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg);
    transform-origin: right center;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: perspective(1000px) rotateY(90deg);
    transform-origin: right center;
  }
}

/* ========================================
   CANDLE FLICKER ANIMATION (Ambient)
   ======================================== */

/**
 * Candle flicker - Ambient background effect
 * Use: Page background, decorative elements
 */
@keyframes candle-flicker {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  25% {
    opacity: 0.95;
    filter: brightness(0.98);
  }
  50% {
    opacity: 0.9;
    filter: brightness(0.95);
  }
  75% {
    opacity: 0.95;
    filter: brightness(0.98);
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/**
 * Apply animation utility classes directly to elements
 * These provide quick access to common animations
 */

/* Glow animations */
.animate-glow-subtle {
  animation: glow-pulse-subtle 2.5s ease-in-out infinite;
}

.animate-glow-medium {
  animation: glow-pulse-medium 2.5s ease-in-out infinite;
}

.animate-glow-strong {
  animation: glow-pulse-strong 2.5s ease-in-out infinite;
}

/* Pulse animation */
.animate-pulse {
  animation: scale-pulse 0.3s ease-out;
}

/* Fade animations */
.animate-fade-in {
  animation: fade-in 0.3s ease-in;
}

.animate-fade-out {
  animation: fade-out 0.3s ease-out;
}

/* Shake animation */
.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* Page turn animations */
.animate-page-turn-in {
  animation: page-turn-in 0.5s ease-out;
}

.animate-page-turn-out {
  animation: page-turn-out 0.5s ease-out;
}

/* Candle flicker (ambient) */
.animate-candle-flicker {
  animation: candle-flicker 3s ease-in-out infinite;
}

/* ========================================
   ANIMATION TIMING UTILITIES
   ======================================== */

/**
 * Animation duration utilities
 * Apply to elements to override default timing
 */

.animation-instant {
  animation-duration: 0s !important;
}

.animation-fast {
  animation-duration: 0.2s !important;
}

.animation-medium {
  animation-duration: 0.3s !important;
}

.animation-slow {
  animation-duration: 0.5s !important;
}

.animation-very-slow {
  animation-duration: 1s !important;
}

.animation-ambient {
  animation-duration: 3s !important;
}

/* ========================================
   ANIMATION STATE UTILITIES
   ======================================== */

/**
 * Control animation playback state
 */

.animation-paused {
  animation-play-state: paused !important;
}

.animation-running {
  animation-play-state: running !important;
}

/* ========================================
   HOVER EFFECTS
   ======================================== */

/**
 * Hover-activated animations
 * These only play on hover
 */

.hover-glow:hover {
  animation: glow-pulse-medium 0.5s ease-out forwards;
}

.hover-lift:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease-out;
}

.hover-pulse:hover {
  animation: scale-pulse 0.3s ease-out;
}

/* ========================================
   SELECTION STATE ANIMATIONS
   ======================================== */

/**
 * Selected state with glow
 * Use: Selected buttons, active options
 */

.selected-glow {
  animation: glow-pulse-medium 2.5s ease-in-out infinite;
}

/* ========================================
   LOADING ANIMATIONS
   ======================================== */

/**
 * Spinner animation for loading states
 */

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.animate-spinner {
  animation: spinner 1s linear infinite;
}

/* ========================================
   BOOKMARK LIFT ANIMATION (Tabs)
   ======================================== */

/**
 * Bookmark lift - Tabs rise slightly on hover
 * Use: Tab navigation, bookmarks
 */

.bookmark-tab {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.bookmark-tab:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.bookmark-tab.active {
  transform: translateY(-2px);
}