/**
 * Sistema de Notificações Wini.IA - Animações CSS
 * Implementação conforme Notification-center.md
 * Versão: 1.0.0
 */

/* ===== ANIMAÇÕES DE ENTRADA ===== */

/* Slide do topo (desktop) */
@keyframes slideInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Slide do bottom (mobile) */
@keyframes slideInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Fade in suave */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Scale in */
@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== ANIMAÇÕES DE SAÍDA ===== */

/* Slide para cima */
@keyframes slideOutToTop {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
}

/* Slide para baixo */
@keyframes slideOutToBottom {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
}

/* Fade out */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Scale out */
@keyframes scaleOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* ===== ANIMAÇÕES DE INTERAÇÃO ===== */

/* Pulse para notificações importantes */
@keyframes notificationPulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  50% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 
                0 0 0 4px rgba(255, 255, 255, 0.3);
  }
}

/* Shake para erros */
@keyframes notificationShake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-2px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(2px);
  }
}

/* Bounce para sucessos */
@keyframes notificationBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

/* Wiggle para avisos */
@keyframes notificationWiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-2deg);
  }
  75% {
    transform: rotate(2deg);
  }
}

/* ===== ANIMAÇÕES DE PROGRESS BAR ===== */

/* Progress bar animada */
@keyframes progressBarFill {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

/* Progress bar pulsante */
@keyframes progressBarPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ===== ANIMAÇÕES DE ÍCONES ===== */

/* Spinner para loading */
@keyframes iconSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Pulse para ícones importantes */
@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* ===== ANIMAÇÕES DE HOVER ===== */

/* Elevação no hover */
@keyframes hoverElevate {
  0% {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  100% {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
}

/* ===== CLASSES DE ANIMAÇÃO ===== */

/* Entrada */
.notification-toast.animate-slide-in-top {
  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-toast.animate-slide-in-bottom {
  animation: slideInFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-toast.animate-fade-in {
  animation: fadeIn 0.3s ease;
}

.notification-toast.animate-scale-in {
  animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Saída */
.notification-toast.animate-slide-out-top {
  animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-toast.animate-slide-out-bottom {
  animation: slideOutToBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-toast.animate-fade-out {
  animation: fadeOut 0.3s ease;
}

.notification-toast.animate-scale-out {
  animation: scaleOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Interação */
.notification-toast.animate-pulse {
  animation: notificationPulse 2s infinite;
}

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

.notification-toast.animate-bounce {
  animation: notificationBounce 0.6s ease;
}

.notification-toast.animate-wiggle {
  animation: notificationWiggle 0.5s ease-in-out;
}

/* Hover */
.notification-toast.animate-hover-elevate:hover {
  animation: hoverElevate 0.2s ease forwards;
}

/* Ícones */
.notification-icon.animate-spin i {
  animation: iconSpin 1s linear infinite;
}

.notification-icon.animate-pulse {
  animation: iconPulse 1s ease-in-out infinite;
}

/* Progress bar */
.notification-progress-bar.animate-fill {
  animation: progressBarFill linear;
}

.notification-progress-bar.animate-pulse {
  animation: progressBarPulse 1s ease-in-out infinite;
}

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

/* Desktop - slide do topo */
@media (min-width: 769px) {
  .notification-toast {
    animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .notification-toast[data-state="exiting"] {
    animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Mobile - slide do bottom */
@media (max-width: 768px) {
  .notification-toast {
    animation: slideInFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .notification-toast[data-state="exiting"] {
    animation: slideOutToBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ===== REDUÇÃO DE MOVIMENTO ===== */
@media (prefers-reduced-motion: reduce) {
  .notification-toast,
  .notification-toast * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .notification-toast {
    animation: fadeIn 0.1s ease;
  }
  
  .notification-toast[data-state="exiting"] {
    animation: fadeOut 0.1s ease;
  }
}

/* ===== ANIMAÇÕES DE STAGGER ===== */
/* Para múltiplas notificações aparecendo em sequência */

.notification-toast:nth-child(1) {
  animation-delay: 0ms;
}

.notification-toast:nth-child(2) {
  animation-delay: 100ms;
}

.notification-toast:nth-child(3) {
  animation-delay: 200ms;
}

/* ===== ANIMAÇÕES DE NOTIFICAÇÕES IMPORTANTES ===== */
.notification-toast--important {
  animation: slideInFromTop 0.4s cubic-bezier(0.4, 0, 0.2, 1),
             notificationPulse 2s infinite 0.4s;
}

/* ===== ANIMAÇÕES DE ESTADO ===== */
.notification-toast[data-state="loading"] .notification-icon i {
  animation: iconSpin 1s linear infinite;
}

.notification-toast[data-state="success"] {
  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1),
             notificationBounce 0.6s ease 0.3s;
}

.notification-toast[data-state="error"] {
  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1),
             notificationShake 0.5s ease-in-out 0.3s;
}

.notification-toast[data-state="warning"] {
  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1),
             notificationWiggle 0.5s ease-in-out 0.3s;
}

/* ===== ANIMAÇÕES DE PERFORMANCE ===== */
/* Usar transform e opacity para melhor performance */
.notification-toast {
  will-change: transform, opacity;
  transform: translateZ(0); /* Force GPU layer */
}

/* ===== ANIMAÇÕES CUSTOMIZÁVEIS ===== */
/* Para permitir animações específicas por contexto */

.notification-toast.animate-custom-bounce {
  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1),
             notificationBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s;
}

.notification-toast.animate-custom-shake {
  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1),
             notificationShake 0.6s ease-in-out 0.3s;
}

.notification-toast.animate-custom-pulse {
  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1),
             notificationPulse 1.5s ease-in-out infinite 0.3s;
}