/*
 * ShareHands Admin Panel - Animations Library
 * Smooth transitions, keyframe animations, and micro-interactions
 */

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Fade Animations */
@keyframes sh-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sh-fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes sh-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sh-fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sh-fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sh-fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide Animations */
@keyframes sh-slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes sh-slideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes sh-slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes sh-slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Scale Animations */
@keyframes sh-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes sh-scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes sh-zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Bounce & Spring */
@keyframes sh-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes sh-bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* Shake Animation (for errors) */
@keyframes sh-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

/* Pulse Animations */
@keyframes sh-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes sh-pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(51, 255, 51, 0.4);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(51, 255, 51, 0);
  }
}

/* Rotate Animations */
@keyframes sh-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes sh-rotateIn {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* Shimmer/Loading Animation */
@keyframes sh-shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes sh-shimmerSkeleton {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Progress Bar Animation */
@keyframes sh-progressIndeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* Ripple Effect */
@keyframes sh-ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* Float Animation */
@keyframes sh-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Attention Seeker */
@keyframes sh-wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}

/* Loading Spinner */
@keyframes sh-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Flip Animation */
@keyframes sh-flipIn {
  from {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateY(0);
    opacity: 1;
  }
}

/* Glow Animation */
@keyframes sh-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(51, 255, 51, 0.5),
                0 0 10px rgba(51, 255, 51, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(51, 255, 51, 0.8),
                0 0 30px rgba(51, 255, 51, 0.6),
                0 0 40px rgba(51, 255, 51, 0.4);
  }
}

/* Typing Animation */
@keyframes sh-typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes sh-blink {
  50% {
    border-color: transparent;
  }
}

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

/* Fade Animations */
.sh-animate-fadeIn {
  animation: sh-fadeIn var(--sh-transition-base) var(--sh-ease-out);
}

.sh-animate-fadeOut {
  animation: sh-fadeOut var(--sh-transition-base) var(--sh-ease-out);
}

.sh-animate-fadeInUp {
  animation: sh-fadeInUp var(--sh-transition-slow) var(--sh-ease-out);
}

.sh-animate-fadeInDown {
  animation: sh-fadeInDown var(--sh-transition-slow) var(--sh-ease-out);
}

.sh-animate-fadeInLeft {
  animation: sh-fadeInLeft var(--sh-transition-slow) var(--sh-ease-out);
}

.sh-animate-fadeInRight {
  animation: sh-fadeInRight var(--sh-transition-slow) var(--sh-ease-out);
}

/* Slide Animations */
.sh-animate-slideInUp {
  animation: sh-slideInUp var(--sh-transition-slow) var(--sh-ease-out);
}

.sh-animate-slideInDown {
  animation: sh-slideInDown var(--sh-transition-slow) var(--sh-ease-out);
}

.sh-animate-slideInLeft {
  animation: sh-slideInLeft var(--sh-transition-slow) var(--sh-ease-out);
}

.sh-animate-slideInRight {
  animation: sh-slideInRight var(--sh-transition-slow) var(--sh-ease-out);
}

/* Scale Animations */
.sh-animate-scaleIn {
  animation: sh-scaleIn var(--sh-transition-base) var(--sh-ease-out);
}

.sh-animate-zoomIn {
  animation: sh-zoomIn var(--sh-transition-base) var(--sh-ease-out);
}

/* Bounce Animations */
.sh-animate-bounce {
  animation: sh-bounce 1s ease-in-out infinite;
}

.sh-animate-bounceIn {
  animation: sh-bounceIn var(--sh-transition-slow) var(--sh-ease-bounce);
}

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

/* Pulse Animations */
.sh-animate-pulse {
  animation: sh-pulse 2s ease-in-out infinite;
}

.sh-animate-pulseGlow {
  animation: sh-pulseGlow 2s ease-in-out infinite;
}

/* Rotate Animations */
.sh-animate-rotate {
  animation: sh-rotate 2s linear infinite;
}

.sh-animate-rotateIn {
  animation: sh-rotateIn var(--sh-transition-slow) var(--sh-ease-out);
}

/* Loading & Shimmer */
.sh-animate-spin {
  animation: sh-spin 1s linear infinite;
}

.sh-animate-float {
  animation: sh-float 3s ease-in-out infinite;
}

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

.sh-animate-glow {
  animation: sh-glow 2s ease-in-out infinite;
}

/* ============================================
   SKELETON LOADING
   ============================================ */

.sh-skeleton {
  background: linear-gradient(
    90deg,
    var(--sh-gray-200) 0%,
    var(--sh-gray-300) 50%,
    var(--sh-gray-200) 100%
  );
  background-size: 200% 100%;
  animation: sh-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--sh-radius-base);
}

.sh-skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.sh-skeleton-circle {
  border-radius: var(--sh-radius-full);
  aspect-ratio: 1;
}

.sh-skeleton-rect {
  border-radius: var(--sh-radius-base);
}

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

.sh-hover-lift {
  transition: transform var(--sh-transition-base) var(--sh-ease-out),
              box-shadow var(--sh-transition-base) var(--sh-ease-out);
}

.sh-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-shadow-lg);
}

.sh-hover-scale {
  transition: transform var(--sh-transition-base) var(--sh-ease-out);
}

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

.sh-hover-glow {
  transition: box-shadow var(--sh-transition-base) var(--sh-ease-out);
}

.sh-hover-glow:hover {
  box-shadow: var(--sh-shadow-green-lg);
}

.sh-hover-rotate {
  transition: transform var(--sh-transition-base) var(--sh-ease-out);
}

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

/* ============================================
   RIPPLE EFFECT
   ============================================ */

.sh-ripple {
  position: relative;
  overflow: hidden;
}

.sh-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.sh-ripple:active::before {
  width: 300px;
  height: 300px;
}

/* ============================================
   LOADING STATES
   ============================================ */

.sh-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.sh-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border: 2px solid var(--sh-primary-green);
  border-top-color: transparent;
  border-radius: 50%;
  animation: sh-spin 0.8s linear infinite;
}

/* Progress Bar */
.sh-progress-bar {
  position: relative;
  height: 4px;
  background: var(--sh-gray-200);
  border-radius: var(--sh-radius-full);
  overflow: hidden;
}

.sh-progress-bar-fill {
  height: 100%;
  background: var(--sh-gradient-primary);
  border-radius: var(--sh-radius-full);
  transition: width var(--sh-transition-slow) var(--sh-ease-out);
}

.sh-progress-bar-indeterminate {
  position: relative;
  height: 4px;
  background: var(--sh-gray-200);
  border-radius: var(--sh-radius-full);
  overflow: hidden;
}

.sh-progress-bar-indeterminate::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 25%;
  background: var(--sh-gradient-primary);
  border-radius: var(--sh-radius-full);
  animation: sh-progressIndeterminate 1.5s ease-in-out infinite;
}

/* ============================================
   PAGE TRANSITIONS
   ============================================ */

.sh-page-enter {
  animation: sh-fadeInUp 0.3s var(--sh-ease-out);
}

.sh-page-exit {
  animation: sh-fadeOut 0.2s var(--sh-ease-out);
}

/* ============================================
   STAGGER ANIMATIONS
   ============================================ */

.sh-stagger-item {
  animation: sh-fadeInUp 0.5s var(--sh-ease-out);
  animation-fill-mode: both;
}

.sh-stagger-item:nth-child(1) { animation-delay: 0.05s; }
.sh-stagger-item:nth-child(2) { animation-delay: 0.1s; }
.sh-stagger-item:nth-child(3) { animation-delay: 0.15s; }
.sh-stagger-item:nth-child(4) { animation-delay: 0.2s; }
.sh-stagger-item:nth-child(5) { animation-delay: 0.25s; }
.sh-stagger-item:nth-child(6) { animation-delay: 0.3s; }
.sh-stagger-item:nth-child(7) { animation-delay: 0.35s; }
.sh-stagger-item:nth-child(8) { animation-delay: 0.4s; }

/* ============================================
   NOTIFICATION ANIMATIONS
   ============================================ */

.sh-toast-enter {
  animation: sh-slideInRight 0.3s var(--sh-ease-out);
}

.sh-toast-exit {
  animation: sh-slideInRight 0.3s var(--sh-ease-out) reverse;
}

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

.sh-modal-backdrop-enter {
  animation: sh-fadeIn 0.2s var(--sh-ease-out);
}

.sh-modal-backdrop-exit {
  animation: sh-fadeOut 0.2s var(--sh-ease-out);
}

.sh-modal-content-enter {
  animation: sh-scaleIn 0.3s var(--sh-ease-out);
}

.sh-modal-content-exit {
  animation: sh-scaleOut 0.2s var(--sh-ease-out);
}

/* ============================================
   UTILITY ANIMATION CONTROLS
   ============================================ */

.sh-animation-delay-100 { animation-delay: 100ms; }
.sh-animation-delay-200 { animation-delay: 200ms; }
.sh-animation-delay-300 { animation-delay: 300ms; }
.sh-animation-delay-500 { animation-delay: 500ms; }

.sh-animation-duration-fast { animation-duration: var(--sh-transition-fast); }
.sh-animation-duration-base { animation-duration: var(--sh-transition-base); }
.sh-animation-duration-slow { animation-duration: var(--sh-transition-slow); }

.sh-animation-infinite { animation-iteration-count: infinite; }
.sh-animation-once { animation-iteration-count: 1; }

/* Pause animations */
.sh-animation-paused {
  animation-play-state: paused;
}

/* ============================================
   RESPONSIVE ANIMATION ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Reduce motion on mobile for better performance */
  .sh-hover-lift:hover {
    transform: translateY(-2px);
  }
  
  .sh-hover-scale:hover {
    transform: scale(1.02);
  }
}