/*
 * VibePostAI Core - Enhanced Animations & Interactions
 * Version: 1.2.0
 * 
 * Smooth animations, transitions, and micro-interactions for core features
 */

/* ====== CORE ANIMATION VARIABLES ====== */
:root {
  --vpa-anim-fast: 0.15s;
  --vpa-anim-normal: 0.3s;
  --vpa-anim-slow: 0.6s;
  --vpa-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --vpa-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --vpa-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ====== USER INTERACTION ANIMATIONS ====== */
.vpa-animate-in {
  animation: vpa-fade-in-up var(--vpa-anim-slow) var(--vpa-ease-out) forwards;
}

@keyframes vpa-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.vpa-animate-out {
  animation: vpa-fade-out-down var(--vpa-anim-normal) var(--vpa-ease-in) forwards;
}

@keyframes vpa-fade-out-down {
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}

/* ====== LIKE ANIMATION SYSTEM ====== */
.vpa-like-animation {
  position: relative;
  overflow: visible;
}

.vpa-like-animation::after {
  content: '❤️';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 1.5rem;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.vpa-like-animation.animate::after {
  animation: vpa-like-burst var(--vpa-anim-slow) var(--vpa-ease-bounce);
}

@keyframes vpa-like-burst {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -80%) scale(0.8);
    opacity: 0;
  }
}

/* ====== FOLLOW ANIMATION ====== */
.vpa-follow-animation {
  position: relative;
}

.vpa-follow-animation.animate {
  animation: vpa-follow-confirm var(--vpa-anim-normal) var(--vpa-ease-out);
}

@keyframes vpa-follow-confirm {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.1); }
  40% { transform: scale(0.95); }
  60% { transform: scale(1.05); }
  80% { transform: scale(0.98); }
}

/* ====== COPY SUCCESS ANIMATION ====== */
.vpa-copy-animation {
  position: relative;
}

.vpa-copy-animation.animate {
  animation: vpa-copy-success var(--vpa-anim-slow) var(--vpa-ease-out);
}

@keyframes vpa-copy-success {
  0% { 
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  25% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 16px rgba(16, 185, 129, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* ====== COUNT ANIMATION ====== */
.vpa-count-animation {
  display: inline-block;
  transition: all var(--vpa-anim-normal) var(--vpa-ease-out);
}

.vpa-count-animation.animate {
  animation: vpa-count-bump var(--vpa-anim-normal) var(--vpa-ease-bounce);
}

@keyframes vpa-count-bump {
  0% { transform: scale(1); }
  25% { 
    transform: scale(1.4);
    color: var(--vpa-core-primary);
  }
  50% { 
    transform: scale(1.2);
    color: var(--vpa-core-primary);
  }
  100% { transform: scale(1); }
}

/* ====== LOADING STATES ====== */
.vpa-skeleton {
  background: linear-gradient(90deg, 
    var(--vpa-core-bg-lighter) 25%, 
    var(--vpa-core-border) 50%, 
    var(--vpa-core-bg-lighter) 75%);
  background-size: 200% 100%;
  animation: vpa-skeleton var(--vpa-anim-slow) ease-in-out infinite;
  border-radius: 4px;
}

@keyframes vpa-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.vpa-pulse {
  animation: vpa-pulse 2s ease-in-out infinite;
}

@keyframes vpa-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ====== HOVER ANIMATIONS ====== */
.vpa-hover-lift {
  transition: transform var(--vpa-anim-normal) var(--vpa-ease-out);
}

.vpa-hover-lift:hover {
  transform: translateY(-4px);
}

.vpa-hover-scale {
  transition: transform var(--vpa-anim-fast) var(--vpa-ease-out);
}

.vpa-hover-scale:hover {
  transform: scale(1.05);
}

.vpa-hover-glow {
  transition: all var(--vpa-anim-normal) var(--vpa-ease-out);
}

.vpa-hover-glow:hover {
  box-shadow: 0 0 20px rgba(58, 163, 255, 0.4);
}

/* ====== STAGGER ANIMATIONS ====== */
.vpa-stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  animation: vpa-stagger-in var(--vpa-anim-slow) var(--vpa-ease-out) forwards;
}

.vpa-stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.vpa-stagger-children > *:nth-child(2) { animation-delay: 100ms; }
.vpa-stagger-children > *:nth-child(3) { animation-delay: 200ms; }
.vpa-stagger-children > *:nth-child(4) { animation-delay: 300ms; }
.vpa-stagger-children > *:nth-child(5) { animation-delay: 400ms; }
.vpa-stagger-children > *:nth-child(6) { animation-delay: 500ms; }

@keyframes vpa-stagger-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====== ACHIEVEMENT ANIMATIONS ====== */
.vpa-achievement-unlock {
  animation: vpa-achievement-celebration 2s var(--vpa-ease-out);
}

@keyframes vpa-achievement-celebration {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  10% {
    transform: scale(1.3) rotate(-10deg);
    opacity: 1;
  }
  20% {
    transform: scale(1.1) rotate(5deg);
  }
  30% {
    transform: scale(1.2) rotate(-3deg);
  }
  40% {
    transform: scale(1) rotate(0deg);
  }
  50%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ====== PROGRESS ANIMATIONS ====== */
.vpa-progress-fill {
  position: relative;
  overflow: hidden;
  transition: width var(--vpa-anim-slow) var(--vpa-ease-out);
}

.vpa-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.3), 
    transparent);
  animation: vpa-progress-shine 2s ease-in-out infinite;
  transform: translateX(-100px);
}

@keyframes vpa-progress-shine {
  0% { transform: translateX(-100px); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(-100px); }
}

/* ====== MODAL ANIMATIONS ====== */
.vpa-modal-enter {
  animation: vpa-modal-enter var(--vpa-anim-normal) var(--vpa-ease-out);
}

@keyframes vpa-modal-enter {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.vpa-modal-exit {
  animation: vpa-modal-exit var(--vpa-anim-fast) var(--vpa-ease-in);
}

@keyframes vpa-modal-exit {
  to {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
}

/* ====== SCROLL ANIMATIONS ====== */
.vpa-scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all var(--vpa-anim-slow) var(--vpa-ease-out);
}

.vpa-scroll-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ====== BUTTON PRESS ANIMATIONS ====== */
.vpa-button-press {
  transition: transform var(--vpa-anim-fast) var(--vpa-ease-out);
}

.vpa-button-press:active {
  transform: scale(0.95);
}

/* ====== RIPPLE EFFECT ====== */
.vpa-ripple {
  position: relative;
  overflow: hidden;
}

.vpa-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width var(--vpa-anim-normal) var(--vpa-ease-out),
              height var(--vpa-anim-normal) var(--vpa-ease-out);
}

.vpa-ripple:active::before {
  width: 200px;
  height: 200px;
}

/* ====== FLOATING ANIMATIONS ====== */
.vpa-float {
  animation: vpa-float 3s ease-in-out infinite;
}

@keyframes vpa-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.vpa-bob {
  animation: vpa-bob 2s ease-in-out infinite;
}

@keyframes vpa-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(1deg); }
  50% { transform: translateY(-8px) rotate(0deg); }
  75% { transform: translateY(-5px) rotate(-1deg); }
}

/* ====== SHAKE ANIMATIONS ====== */
.vpa-shake {
  animation: vpa-shake 0.5s ease-in-out;
}

@keyframes vpa-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.vpa-wiggle {
  animation: vpa-wiggle 0.8s ease-in-out;
}

@keyframes vpa-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  75% { transform: rotate(-3deg); }
}

/* ====== LOADING SPINNERS ====== */
.vpa-spinner-dots {
  display: inline-flex;
  gap: 4px;
}

.vpa-spinner-dots::before,
.vpa-spinner-dots::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: vpa-dots 1.4s ease-in-out infinite both;
}

.vpa-spinner-dots::before {
  animation-delay: -0.32s;
}

@keyframes vpa-dots {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.vpa-spinner-pulse {
  width: 24px;
  height: 24px;
  background: currentColor;
  border-radius: 50%;
  animation: vpa-pulse-scale 1s ease-in-out infinite;
}

@keyframes vpa-pulse-scale {
  0%, 100% { transform: scale(0); opacity: 1; }
  50% { transform: scale(1); opacity: 0.3; }
}

/* ====== SUCCESS/ERROR ANIMATIONS ====== */
.vpa-success-check {
  animation: vpa-check-draw 0.6s var(--vpa-ease-out);
}

@keyframes vpa-check-draw {
  0% { stroke-dasharray: 0 100; }
  100% { stroke-dasharray: 100 0; }
}

.vpa-error-x {
  animation: vpa-x-draw 0.4s var(--vpa-ease-out);
}

@keyframes vpa-x-draw {
  0% { stroke-dasharray: 0 50; }
  100% { stroke-dasharray: 50 0; }
}

/* ====== MICRO INTERACTIONS ====== */
.vpa-micro-bounce {
  transition: transform var(--vpa-anim-fast) var(--vpa-ease-bounce);
}

.vpa-micro-bounce:hover {
  transform: scale(1.1);
}

.vpa-micro-rotate {
  transition: transform var(--vpa-anim-normal) var(--vpa-ease-out);
}

.vpa-micro-rotate:hover {
  transform: rotate(5deg);
}

/* ====== RESPONSIVE MOTION ====== */
@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;
  }
  
  .vpa-float,
  .vpa-bob,
  .vpa-pulse,
  .vpa-skeleton {
    animation: none;
  }
}

/* ====== PERFORMANCE OPTIMIZATIONS ====== */
.vpa-will-change {
  will-change: transform, opacity;
}

.vpa-gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ====== INTERACTION STATES ====== */
.vpa-loading .vpa-animate-in,
.vpa-loading .vpa-stagger-children > * {
  animation-play-state: paused;
}

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

/* ====== DARK MODE ANIMATIONS ====== */
@media (prefers-color-scheme: dark) {
  .vpa-skeleton {
    background: linear-gradient(90deg, 
      #1f2937 25%, 
      #374151 50%, 
      #1f2937 75%);
    background-size: 200% 100%;
  }
}

/* ====== COMPLEX ANIMATION COMBINATIONS ====== */
.vpa-like-follow-combo.animate {
  animation: vpa-combo-celebration 1.2s var(--vpa-ease-out);
}

@keyframes vpa-combo-celebration {
  0% { transform: scale(1); }
  20% { 
    transform: scale(1.2);
    filter: hue-rotate(180deg);
  }
  40% { 
    transform: scale(1.1);
    filter: hue-rotate(0deg);
  }
  60% { 
    transform: scale(1.15);
    filter: brightness(1.2);
  }
  100% { 
    transform: scale(1);
    filter: none;
  }
}