/* ============================================
   ENHANCED PUPPY AVATAR WITH BACKGROUND ISOLATION
   Uses CSS filters and masks to isolate puppy
   ============================================ */

/* Enhanced container with gradient background */
.puppy-avatar-container {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  /* Clean white background - no gradient */
  background: transparent;
  border: 2px solid #78c2ad;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Enhanced puppy image with filters */
.puppy-avatar {
  position: absolute;
  width: 95%;
  height: 95%;
  top: 2.5%;
  left: 2.5%;
  object-fit: cover;
  /* Removed transform scale to prevent zoom-in */
  object-position: center center;
  
  /* Filters to reduce background and enhance puppy */
  filter: 
    contrast(1.2)      /* Increase contrast to separate puppy from background */
    brightness(1.1)    /* Slightly brighten */
    saturate(1.3);     /* Enhance golden colors */
  
  /* Blend mode to knock out grays */
  mix-blend-mode: multiply;
}

/* Removed overlay - no longer needed */

/* Removed inner shadow - no longer needed */

/* Navbar specific enhancement */
.user-avatar .puppy-avatar {
  filter: 
    contrast(1.3)
    brightness(1.15)
    saturate(1.4)
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* Avatar manager large display enhancement */
.current-avatar-display .puppy-avatar {
  filter: 
    contrast(1.25)
    brightness(1.12)
    saturate(1.35)
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

/* Alternative mask approach using SVG */
.puppy-mask-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* CSS mask for modern browsers */
@supports (mask-image: url()) {
  .puppy-avatar-container.with-mask .puppy-avatar {
    mask-image: radial-gradient(circle at 45% 40%,
      black 40%,
      rgba(0, 0, 0, 0.8) 60%,
      transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 45% 40%,
      black 40%,
      rgba(0, 0, 0, 0.8) 60%,
      transparent 100%);
  }
}

/* High contrast mode for better isolation */
.puppy-avatar-container.high-contrast .puppy-avatar {
  filter: 
    contrast(1.5)
    brightness(1.2)
    saturate(1.5)
    sepia(0.1);
}

/* Soft focus on edges */
.puppy-avatar-container.soft-edges {
  position: relative;
}

.puppy-avatar-container.soft-edges::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    transparent 60%,
    rgba(255, 255, 255, 0.8) 100%);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

/* Golden glow effect */
.puppy-avatar-container.golden-glow {
  box-shadow: 
    0 2px 8px rgba(255, 193, 7, 0.2),
    0 4px 16px rgba(255, 193, 7, 0.1);
}

.puppy-avatar-container.golden-glow .puppy-avatar {
  filter: 
    contrast(1.2)
    brightness(1.15)
    saturate(1.4)
    hue-rotate(-5deg); /* Enhance golden tones */
}

/* Clean white background option */
.puppy-avatar-container.clean-bg {
  background: white;
}

.puppy-avatar-container.clean-bg .puppy-avatar {
  mix-blend-mode: normal;
  filter: 
    contrast(1.4)
    brightness(1.1)
    saturate(1.3);
}

/* Animated entrance */
@keyframes puppy-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.puppy-avatar-container.animated {
  animation: puppy-fade-in 0.5s ease-out;
}

/* Print styles */
@media print {
  .puppy-avatar-container {
    background: white !important;
    border: 1px solid #ccc !important;
  }
  
  .puppy-avatar {
    filter: none !important;
    mix-blend-mode: normal !important;
  }
}