/* Custom Avatar Styles */

/* Enhanced shadow effects */
.shadow-3xl {
  box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25);
}

/* Smooth animations for avatar interactions */
.avatar {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.avatar:hover {
  transform: translateY(-2px);
}

/* Glassmorphism backdrop blur support */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Enhanced gradient animations */
@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-12deg);
  }
  100% {
    transform: translateX(100%) skewX(-12deg);
  }
}

.avatar .shimmer {
  animation: shimmer 2s infinite;
}

/* Subtle pulse animation for premium avatars */
@keyframes subtle-pulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

.avatar .subtle-pulse {
  animation: subtle-pulse 3s ease-in-out infinite;
}

/* Enhanced text shadows for better readability */
.avatar span {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Perfect centering for avatar text */
.avatar .flex {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.avatar span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 100%;
  line-height: 1 !important;
}

/* Responsive avatar sizing */
@media (max-width: 640px) {
  .avatar .w-16 {
    width: 3rem;
    height: 3rem;
  }
  
  .avatar .w-20 {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .avatar .border-white {
    border-color: rgba(255, 255, 255, 0.2);
  }
  
  .avatar .border-white\/30 {
    border-color: rgba(255, 255, 255, 0.1);
  }
}