/* Animated Icons CSS - Modern Animation System */

/* Base Animation Variables */
:root {
  --animation-duration: 0.3s;
  --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-delay: 0s;
  --animation-iteration: 1;
  --animation-direction: normal;
  --animation-fill-mode: both;
}

/* Animated Icon Container */
.animated-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--animation-duration) var(--animation-timing);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Header-specific animated icon constraints */
.header .animated-icon,
.navbar .animated-icon,
.js_live-notifications .animated-icon,
.js_live-messages .animated-icon,
.js_live-requests .animated-icon {
  max-width: 20px;
  max-height: 20px;
  min-width: 20px;
  min-height: 20px;
  overflow: visible;
  transform-origin: center;
}

/* Ensure notification bell doesn't overflow */
.js_live-notifications .animated-icon.notification {
  position: relative;
  z-index: 1;
}

.js_live-notifications .animated-icon.notification::after {
  z-index: 2;
}

/* Counter badge positioning for animated icons */
.js_live-notifications .counter,
.js_live-messages .counter,
.js_live-requests .counter {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 10;
  pointer-events: none;
}

/* Ensure dropdown containers don't overflow */
.js_live-notifications,
.js_live-messages,
.js_live-requests {
  position: relative;
  overflow: visible;
}

.js_live-notifications > a,
.js_live-messages > a,
.js_live-requests > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
}

/* Hover Animations */
.animated-icon:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

/* Header hover animations - more subtle */
.header .animated-icon:hover,
.navbar .animated-icon:hover {
  transform: scale(1.05);
}

/* Pulse Animation */
.animated-icon.pulse {
  animation: iconPulse 2s infinite;
}

.animated-icon.pulse:hover {
  animation: iconPulseFast 0.6s infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes iconPulseFast {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Bounce Animation */
.animated-icon.bounce {
  animation: iconBounce 1s infinite;
}

.animated-icon.bounce:hover {
  animation: iconBounceFast 0.5s infinite;
}

@keyframes iconBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
  60% { transform: translateY(-3px); }
}

@keyframes iconBounceFast {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
}

/* Shake Animation */
.animated-icon.shake {
  animation: iconShake 0.5s ease-in-out;
}

.animated-icon.shake:hover {
  animation: iconShake 0.3s ease-in-out infinite;
}

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

/* Rotate Animation */
.animated-icon.rotate {
  transition: transform var(--animation-duration) var(--animation-timing);
}

.animated-icon.rotate:hover {
  transform: rotate(180deg);
}

.animated-icon.rotate-360 {
  animation: iconRotate360 2s linear infinite;
}

@keyframes iconRotate360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Wiggle Animation */
.animated-icon.wiggle {
  animation: iconWiggle 0.5s ease-in-out;
}

.animated-icon.wiggle:hover {
  animation: iconWiggle 0.3s ease-in-out infinite;
}

@keyframes iconWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

/* Fade Animation */
.animated-icon.fade {
  opacity: 0.7;
  transition: opacity var(--animation-duration) var(--animation-timing);
}

.animated-icon.fade:hover {
  opacity: 1;
}

.animated-icon.fade-in {
  animation: iconFadeIn 0.5s ease-in-out;
}

@keyframes iconFadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Slide Animation */
.animated-icon.slide-left {
  animation: iconSlideLeft 0.5s ease-in-out;
}

.animated-icon.slide-right {
  animation: iconSlideRight 0.5s ease-in-out;
}

.animated-icon.slide-up {
  animation: iconSlideUp 0.5s ease-in-out;
}

.animated-icon.slide-down {
  animation: iconSlideDown 0.5s ease-in-out;
}

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

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

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

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

/* Scale Animation */
.animated-icon.scale {
  transition: transform var(--animation-duration) var(--animation-timing);
}

.animated-icon.scale:hover {
  transform: scale(1.2);
}

.animated-icon.scale-in {
  animation: iconScaleIn 0.5s ease-in-out;
}

@keyframes iconScaleIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* Flip Animation */
.animated-icon.flip {
  transition: transform var(--animation-duration) var(--animation-timing);
  transform-style: preserve-3d;
}

.animated-icon.flip:hover {
  transform: rotateY(180deg);
}

.animated-icon.flip-x {
  transition: transform var(--animation-duration) var(--animation-timing);
}

.animated-icon.flip-x:hover {
  transform: rotateX(180deg);
}

/* Glow Animation */
.animated-icon.glow {
  transition: all var(--animation-duration) var(--animation-timing);
}

.animated-icon.glow:hover {
  filter: drop-shadow(0 0 8px currentColor);
  transform: scale(1.1);
}

.animated-icon.glow-pulse {
  animation: iconGlowPulse 2s infinite;
}

@keyframes iconGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 2px currentColor); }
  50% { filter: drop-shadow(0 0 8px currentColor); }
}

/* Morph Animation */
.animated-icon.morph {
  transition: all var(--animation-duration) var(--animation-timing);
}

.animated-icon.morph:hover {
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  padding: 8px;
}

/* Loading Animation */
.animated-icon.loading {
  animation: iconLoading 1s linear infinite;
}

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

/* Success Animation */
.animated-icon.success {
  animation: iconSuccess 0.6s ease-in-out;
}

@keyframes iconSuccess {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* Error Animation */
.animated-icon.error {
  animation: iconError 0.6s ease-in-out;
}

@keyframes iconError {
  0% { transform: scale(1); }
  25% { transform: scale(1.1) rotate(-5deg); }
  50% { transform: scale(1.1) rotate(5deg); }
  75% { transform: scale(1.1) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Notification Animation */
.animated-icon.notification {
  position: relative;
}

.animated-icon.notification::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #EF4444;
  border-radius: 50%;
  animation: iconNotificationPulse 2s infinite;
}

@keyframes iconNotificationPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* Typing Animation */
.animated-icon.typing {
  animation: iconTyping 1.4s infinite;
}

@keyframes iconTyping {
  0%, 20% { transform: translateY(0); }
  40% { transform: translateY(-3px); }
  60% { transform: translateY(0); }
  80% { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

/* Heartbeat Animation */
.animated-icon.heartbeat {
  animation: iconHeartbeat 1.5s ease-in-out infinite;
}

@keyframes iconHeartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}

/* Sparkle Animation */
.animated-icon.sparkle {
  position: relative;
}

.animated-icon.sparkle::before,
.animated-icon.sparkle::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #F59E0B;
  border-radius: 50%;
  opacity: 0;
}

.animated-icon.sparkle::before {
  top: -5px;
  left: 50%;
  animation: iconSparkle1 2s infinite;
}

.animated-icon.sparkle::after {
  bottom: -5px;
  right: 50%;
  animation: iconSparkle2 2s infinite 0.5s;
}

@keyframes iconSparkle1 {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

@keyframes iconSparkle2 {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(-180deg); }
}

/* Wave Animation */
.animated-icon.wave {
  animation: iconWave 1s ease-in-out infinite;
}

@keyframes iconWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}

/* Zoom Animation */
.animated-icon.zoom {
  transition: transform var(--animation-duration) var(--animation-timing);
}

.animated-icon.zoom:hover {
  transform: scale(1.3);
}

.animated-icon.zoom-in {
  animation: iconZoomIn 0.5s ease-in-out;
}

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

/* Responsive Animations */
@media (max-width: 768px) {
  .animated-icon {
    --animation-duration: 0.2s;
  }
  
  .animated-icon:hover {
    transform: scale(1.05);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .animated-icon {
    animation: none !important;
    transition: none !important;
  }
  
  .animated-icon:hover {
    transform: none !important;
  }
}

/* Dark Mode Animations */
@media (prefers-color-scheme: dark) {
  .animated-icon.glow:hover {
    filter: drop-shadow(0 0 12px currentColor);
  }
  
  .animated-icon.glow-pulse {
    animation: iconGlowPulseDark 2s infinite;
  }
}

@keyframes iconGlowPulseDark {
  0%, 100% { filter: drop-shadow(0 0 4px currentColor); }
  50% { filter: drop-shadow(0 0 12px currentColor); }
}

/* Animation Delays */
.animated-icon.delay-1 { animation-delay: 0.1s; }
.animated-icon.delay-2 { animation-delay: 0.2s; }
.animated-icon.delay-3 { animation-delay: 0.3s; }
.animated-icon.delay-4 { animation-delay: 0.4s; }
.animated-icon.delay-5 { animation-delay: 0.5s; }

/* Animation Durations */
.animated-icon.duration-fast { animation-duration: 0.2s; }
.animated-icon.duration-normal { animation-duration: 0.5s; }
.animated-icon.duration-slow { animation-duration: 1s; }
.animated-icon.duration-slower { animation-duration: 2s; }

/* Animation Iterations */
.animated-icon.infinite { animation-iteration-count: infinite; }
.animated-icon.repeat-2 { animation-iteration-count: 2; }
.animated-icon.repeat-3 { animation-iteration-count: 3; }

/* Page Header Animated Icons */
.page-header .animated-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.page-header .page-header-icon.animated-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 12px;
  padding: 8px;
  transition: all 0.3s ease;
}

.page-header .page-header-icon.animated-icon:hover {
  background: rgba(59, 130, 246, 0.2);
  transform: scale(1.05);
}

/* Autopool specific page header styling */
.page-header .page-header-icon.animated-icon svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Directory Card Animated Icons */
.directory-card .animated-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.directory-card:hover .animated-icon {
  transform: scale(1.05);
}

.directory-card .animated-icon svg {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

/* Settings Page Animated Icons */
.settings.notifications .avatar .animated-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.settings.notifications .avatar:hover .animated-icon {
  transform: scale(1.1);
}

/* Post Action Animated Icons */
.dropdown-item .action .animated-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.dropdown-item:hover .action .animated-icon {
  transform: scale(1.1);
}

/* User Menu Animated Icons */
.dropdown-item .animated-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.dropdown-item:hover .animated-icon {
  transform: scale(1.1);
}

/* Bottom Navigation Bar Animated Icons */
.footer-bottom-bar .animated-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.footer-bottom-bar .link:hover .animated-icon {
  transform: scale(1.1);
}

.footer-bottom-bar .add-quick-item .animated-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.footer-bottom-bar .add-quick-item:hover .animated-icon {
  transform: scale(1.1);
}

/* Sidebar Navigation Animated Icons */
.main-side-nav .animated-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.main-side-nav li:hover .animated-icon {
  transform: scale(1.1);
}

.main-side-nav li.active .animated-icon {
  animation: none;
}

/* Collapsible Sidebar Items */
.main-side-nav .collapse .animated-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.main-side-nav .collapse li:hover .animated-icon {
  transform: scale(1.1);
}