/* ========================================
   PULSAR v4.5 - Animações de Ícones
   ======================================== */

/* ========================================
   ✨ ANIMAÇÕES BÁSICAS
   ======================================== */

.hover-glow {
  filter: drop-shadow(0 0 15px var(--neon-pink, #ff1493)) !important;
  transform: scale(1.1) !important;
}

.pulse {
  animation: icon-pulse 0.8s ease-in-out !important;
}

@keyframes icon-pulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1; 
  }
  50% { 
    transform: scale(1.2); 
    opacity: 0.8; 
  }
}

/* ========================================
   🎵 ANIMAÇÕES DE MÚSICA
   ======================================== */

.music-beat {
  animation: music-beat 1.2s ease-in-out !important;
}

@keyframes music-beat {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: scale(1);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: scale(1.15);
  }
}

/* ========================================
   ❤️ ANIMAÇÕES DE CORAÇÃO
   ======================================== */

.heart-beat {
  animation: heart-beat 0.6s ease-in-out !important;
}

.heart-break {
  animation: heart-break 0.6s ease-in-out !important;
}

@keyframes heart-beat {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(1.1); }
  75% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes heart-break {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(0.8) rotate(-5deg); }
  50% { transform: scale(0.9) rotate(5deg); }
  75% { transform: scale(0.85) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ========================================
   📍 ANIMAÇÕES DE LOCALIZAÇÃO
   ======================================== */

.location-ping {
  animation: location-ping 1s ease-out !important;
}

@keyframes location-ping {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(0, 255, 255, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 20px rgba(0, 255, 255, 0);
  }
}

/* ========================================
   🌈 TEMA ARCO-ÍRIS
   ======================================== */

@keyframes rainbow-stroke {
  0% { stroke: #ff0000; }
  16.66% { stroke: #ff8000; }
  33.33% { stroke: #ffff00; }
  50% { stroke: #00ff00; }
  66.66% { stroke: #0000ff; }
  83.33% { stroke: #8000ff; }
  100% { stroke: #ff0000; }
}

/* ========================================
   ⭐ ANIMAÇÕES ESPECIAIS
   ======================================== */

.icon-spin {
  animation: icon-spin 2s linear infinite !important;
}

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-bounce {
  animation: icon-bounce 1s ease-in-out !important;
}

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

.icon-shake {
  animation: icon-shake 0.5s ease-in-out !important;
}

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

.icon-flash {
  animation: icon-flash 1s ease-in-out !important;
}

@keyframes icon-flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.3; }
}

/* ========================================
   🎯 ANIMAÇÕES POR CONTEXTO
   ======================================== */

/* Ícones de navegação */
.nav-icon:hover {
  animation: nav-glow 0.3s ease-in-out !important;
}

@keyframes nav-glow {
  0% { filter: drop-shadow(0 0 5px var(--neon-cyan, #00ffff)); }
  100% { filter: drop-shadow(0 0 15px var(--neon-cyan, #00ffff)); }
}

/* Ícones de ação */
.action-icon:hover {
  animation: action-highlight 0.3s ease-in-out !important;
}

@keyframes action-highlight {
  0% { 
    stroke: var(--neon-cyan, #00ffff);
    filter: drop-shadow(0 0 8px var(--neon-cyan, #00ffff));
  }
  100% { 
    stroke: var(--neon-pink, #ff1493);
    filter: drop-shadow(0 0 15px var(--neon-pink, #ff1493));
  }
}

/* Ícones de status */
.status-icon.active {
  animation: status-active 2s ease-in-out infinite !important;
}

@keyframes status-active {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ========================================
   📱 ANIMAÇÕES RESPONSIVAS
   ======================================== */

@media (max-width: 768px) {
  /* Reduzir intensidade das animações em mobile */
  .hover-glow {
    transform: scale(1.05) !important;
  }
  
  .pulse {
    animation-duration: 0.6s !important;
  }
  
  .music-beat {
    animation-duration: 1s !important;
  }
  
  @keyframes icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Respeitar preferência de movimento reduzido */
  .hover-glow,
  .pulse,
  .music-beat,
  .heart-beat,
  .heart-break,
  .location-ping,
  .icon-spin,
  .icon-bounce,
  .icon-shake,
  .icon-flash {
    animation: none !important;
    transition: none !important;
  }
  
  /* Manter apenas transformações simples */
  .hover-glow {
    filter: drop-shadow(0 0 10px var(--neon-pink, #ff1493)) !important;
  }
}

/* ========================================
   🌟 EFEITOS DE HOVER APRIMORADOS
   ======================================== */

.icon-hover-lift:hover {
  transform: translateY(-3px) scale(1.05);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.icon-hover-rotate:hover {
  transform: rotate(15deg) scale(1.05);
  transition: all 0.3s ease;
}

.icon-hover-pulse:hover {
  animation: continuous-pulse 1.5s ease-in-out infinite;
}

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

/* ========================================
   🎨 TEMAS DARK/LIGHT
   ======================================== */

[data-theme="light"] .icon,
[data-theme="light"] .neon {
  stroke: #8e2de2;
  filter: drop-shadow(0 0 8px #8e2de2);
}

[data-theme="light"] .icon:hover,
[data-theme="light"] .neon:hover {
  stroke: #ff1493;
  filter: drop-shadow(0 0 12px #ff1493);
}

[data-theme="dark"] .icon,
[data-theme="dark"] .neon {
  stroke: #00ffff;
  filter: drop-shadow(0 0 8px #00ffff);
}

/* ========================================
   🔥 EFEITOS ESPECIAIS AVANÇADOS
   ======================================== */

.icon-neon-trail {
  position: relative;
}

.icon-neon-trail::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: blur(8px);
  opacity: 0.5;
  z-index: -1;
  transition: all 0.3s ease;
}

.icon-neon-trail:hover::after {
  opacity: 0.8;
  filter: blur(12px);
  transform: scale(1.2);
}

.icon-electric {
  animation: electric-flicker 0.1s linear infinite;
}

@keyframes electric-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}

/* Efeito de partículas (apenas visual) */
.icon-particles {
  position: relative;
  overflow: visible;
}

.icon-particles::before {
  content: '✨';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 0.7em;
  opacity: 0;
  animation: particle-float 2s ease-in-out infinite;
}

@keyframes particle-float {
  0%, 100% { 
    opacity: 0; 
    transform: translateY(0px) scale(0.5); 
  }
  50% { 
    opacity: 1; 
    transform: translateY(-15px) scale(1); 
  }
}