/* ========================================
   AVIQUILL ANIMATIONS LIBRARY
   ========================================
   Centralized animation definitions for consistent
   animations across the entire application.
   ======================================== */

/* ========================================
   MODAL ANIMATIONS
   ======================================== */

/* Main modal slide in (for settings, export, etc.) */
@keyframes mainModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Modal pop animation (for smaller modals) */
@keyframes modal-pop {
  from { 
    transform: scale(0.97); 
    opacity: 0; 
  }
  to { 
    transform: scale(1); 
    opacity: 1; 
  }
}

/* Modal slide in from left (for sidebars, previews) */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Modal slide in from right */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Modal slide in from top */
@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal slide in from bottom */
@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Basic fade in */
@keyframes fadeIn {
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1; 
  }
}

/* Fade in with slight upward movement */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in with slight downward movement */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in with scale */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Fade in and out (for loading states) */
@keyframes fadeInOut {
  0% { 
    opacity: 0.6; 
  }
  50% { 
    opacity: 1; 
  }
  100% { 
    opacity: 0.6; 
  }
}

/* ========================================
   SCALE ANIMATIONS
   ======================================== */

/* Scale in animation */
@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Scale out animation */
@keyframes scaleOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

/* ========================================
   SLIDE ANIMATIONS
   ======================================== */

/* Slide down animation */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide up animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide in from left with scale */
@keyframes slideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ========================================
   PULSE ANIMATIONS
   ======================================== */

/* Basic pulse animation */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Pulse for loading states */
@keyframes pulseLoading {
  0%, 100% { 
    opacity: 1; 
  }
  50% { 
    opacity: 0.5; 
  }
}

/* Pulse for selected items */
@keyframes pulseSelected {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* Pulse for placeholders */
@keyframes placeholderPulse {
  0% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.15;
  }
}

/* ========================================
   SHAKE ANIMATIONS
   ======================================== */

/* Basic shake animation */
@keyframes shake {
  0%, 100% { 
    transform: translateX(0); 
  }
  25% { 
    transform: translateX(-4px); 
  }
  75% { 
    transform: translateX(4px); 
  }
}

/* Shake for notes */
@keyframes noteShake {
  0%, 100% { 
    transform: translateX(0); 
  }
  25% { 
    transform: translateX(-4px); 
  }
  75% { 
    transform: translateX(4px); 
  }
}

/* Shake for nodes */
@keyframes nodeShake {
  0%, 100% { 
    transform: translateX(0); 
  }
  25% { 
    transform: translateX(-4px); 
  }
  75% { 
    transform: translateX(4px); 
  }
}

/* ========================================
   ROTATION ANIMATIONS
   ======================================== */

/* Spin animation (for loading) */
@keyframes spin {
  to { 
    transform: rotate(360deg); 
  }
}

/* ========================================
   SPECIAL EFFECT ANIMATIONS
   ======================================== */

/* Flash animation for renewals/updates */
@keyframes flash-renew {
  0% {
    background-color: transparent;
  }
  25% {
    background-color: rgba(var(--primary-color-rgb), 0.3);
  }
  100% {
    background-color: transparent;
  }
}

/* Dash move animation (for connection lines).
   For a seamless loop, animate by exactly one full dash+gap length (18 + 12 = 30). */
@keyframes dashMove {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -30;
  }
}

/* FAB (Floating Action Button) slide in */
@keyframes fabSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Tip fade in animation */
@keyframes tipFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   MODAL-SPECIFIC ANIMATIONS
   ======================================== */

/* Settings modal slide in */
@keyframes settingsModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Link modal slide in */
@keyframes linkModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* YouTube modal slide in */
@keyframes youtubeModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Discord modal slide in */
@keyframes discordModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Tool modal slide in */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mood popup slide in */
@keyframes moodPopupSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Bottom sheet: slide up from bottom */
@keyframes presetSheetSlideUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bottom sheet: slide down on close */
@keyframes presetSheetSlideDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* Sheet overlay backdrop fade in */
@keyframes presetSheetBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Sheet overlay backdrop fade out */
@keyframes presetSheetBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ========================================
   ITEM-SPECIFIC ANIMATIONS
   ======================================== */

/* Note creation animation */
@keyframes noteCreate {
  from {
    opacity: 0;
    transform: scale(0.8) rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Node pulse animation */
@keyframes nodePulse {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.1); 
  }
}

/* Note pulse animation */
@keyframes notePulse {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.05); 
  }
}

/* Board selected pulse */
@keyframes boardSelectedPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

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

/* Animation utility classes for easy application */
.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

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

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

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

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

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

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

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

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

.animate-pulse {
  animation: pulse 2s infinite;
}

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

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

/* ========================================
   ANIMATION DURATION VARIABLES
   ======================================== */

:root {
  --animation-duration-fast: 0.15s;
  --animation-duration-normal: 0.3s;
  --animation-duration-slow: 0.5s;
  --animation-duration-slower: 1s;
  
  --animation-easing-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --animation-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}