/* Blur effect */
.blur {
  filter: blur(5px);
  /* Gaussian blur, good for backgrounds */
}

/* Brightness: make lighter */
.bright {
  filter: brightness(1.3);
  /* 1 = original, >1 = lighter, <1 = darker */
}

/* Brightness: make darker */
.dark {
  filter: brightness(0.7);
  /* Darkens the element */
}

/* Contrast: increase detail */
.contrast-high {
  filter: contrast(1.5);
  /* 1 = original, >1 = more contrast */
}

/* Grayscale: remove all color */
.grayscale {
  filter: grayscale(100%);
  /* 0% = full color, 100% = fully gray */
}

/* Partial grayscale */
.grayscale-partial {
  filter: grayscale(50%);
  /* Desaturated but still some color */
}

/* Hue rotation: shift colors */
.hue-rotate {
  filter: hue-rotate(180deg);
  /* Rotates color wheel by 180deg */
}

/* Invert colors */
.invert {
  filter: invert(100%);
  /* Inverts all colors (negative effect) */
}

/* Sepia: vintage photo effect */
.sepia {
  filter: sepia(100%);
  /* 0% = normal, 100% = full sepia */
}

/* Opacity filter */
.opacity-filter {
  filter: opacity(50%);
  /* Similar to CSS opacity, but on filter chain */
}

/* Multiple filters in one property */
.multi-filter {
  filter:
    brightness(1.1)
    contrast(1.2)
    saturate(1.3);
  /* Applied in order: brightness first, then contrast, then saturate */
}

/* Complex effect */
.artistic {
  filter:
    grayscale(50%)
    sepia(30%)
    hue-rotate(30deg)
    saturate(1.2);
  /* Creates unique vintage look */
}

/* Darkened with blur overlay effect */
.darkened-blur {
  filter:
    brightness(0.8)
    blur(2px)
    contrast(1.1);
  /* Darker and slightly blurred */
}

/* Photo effect combinations */

/* Black and white */
.black-white {
  filter: grayscale(100%) contrast(1.2);
  /* Grayscale + extra contrast */
}

/* Vintage/faded */
.vintage {
  filter:
    sepia(30%)
    saturate(0.8)
    brightness(1.1);
  /* Sepia-toned, less saturated, lighter */
}

/* Cool/cold tone */
.cool-tone {
  filter:
    hue-rotate(200deg)
    saturate(1.1)
    brightness(0.95);
  /* Blue shift, more saturated, slightly darker */
}

/* High contrast/comic book effect */
.high-contrast {
  filter:
    grayscale(20%)
    contrast(2)
    brightness(1.1)
    saturate(1.3);
  /* Very strong contrast, vibrant */
}

/* Image hover effect (desaturate to color) */
.image-hover {
  transition: filter 0.3s ease;
  filter: grayscale(100%);
}

.image-hover:hover {
  filter: grayscale(0%);
  /* Transitions from grayscale to color */
}

/* Dimmed background */
.dimmed-bg {
  background-image: url('image.jpg');
  filter: brightness(0.6);
  /* Darkens background for overlay text readability */
}

/* Focus state with brightness change */
button {
  transition: filter 0.2s ease;
}

button:focus-visible {
  filter: brightness(1.2);
  /* Brightens on focus */
}

button:active {
  filter: brightness(0.9);
  /* Darkens on click */
}

/* Disabled state (grayscale) */
.disabled {
  filter: grayscale(100%) opacity(60%);
  pointer-events: none;
  /* Looks disabled with grayscale + transparency */
}

/* Hover to reveal color */
.color-reveal {
  position: relative;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

.color-reveal:hover {
  filter: grayscale(0%);
}

/* Dark mode contrast adjustment */
@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(0.9) contrast(1.1);
    /* Slightly darker images in dark mode */
  }
}

/* Glassmorphism (frosted glass with blur) */
.glass {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  /* Blurred background creates glass effect */
}

/* Warning/alert styling */
.alert-image {
  filter: hue-rotate(0deg) saturate(1.3) brightness(1.05);
  /* Normal colors, more vibrant */
}

.critical-alert {
  filter:
    hue-rotate(10deg)
    saturate(1.5)
    brightness(0.95);
  /* Red-shift, very saturated */
}

/* GPU-accelerated filters for smooth animations */
.animated {
  transition: filter 0.3s ease;
  filter: grayscale(0%);
}

.animated:hover {
  filter: grayscale(100%);
  /* Smooth animation, GPU accelerated */
}

/* Use will-change for heavy filter use */
.heavy-filter {
  will-change: filter;
  filter:
    brightness(1.2)
    contrast(1.5)
    saturate(1.3);
}

/* Simpler filters are faster */
.fast {
  filter: grayscale(100%);
  /* Single filter = best performance */
}

.slower {
  filter:
    brightness(1.1)
    contrast(1.2)
    saturate(1.3)
    hue-rotate(10deg)
    sepia(10%);
  /* Many filters = more CPU/GPU work */
}

/* Browser support is excellent */
.supported {
  filter: blur(5px);
  /* Works in all modern browsers */
}

/* No prefixes needed for modern browsers */

/* Alternative: SVG filters for older browser support */
svg {
  filter: url('#custom-filter');
  /* SVG filters as fallback */
}

/* Spotlight effect (reveal on hover) */
.image-spotlight {
  filter: brightness(0.4) contrast(0.8);
  /* Dimmed by default */
  transition: filter 0.3s ease;
}

.image-spotlight:hover {
  filter: brightness(1) contrast(1);
  /* Reveals at full brightness */
}

/* Night mode filter */
.night-mode {
  filter:
    brightness(0.8)
    contrast(1.2)
    hue-rotate(20deg);
  /* Darker, more contrast, slightly orange-shifted */
}

/* Thermal/infrared effect */
.thermal {
  filter:
    hue-rotate(200deg)
    saturate(3)
    brightness(1.2);
  /* Blue tones, very saturated */
}

/* Underwater effect */
.underwater {
  filter:
    hue-rotate(170deg)
    saturate(1.5)
    brightness(0.8);
  /* Cyan/blue shift, darker */
}

/* Comic book effect */
.comic-book {
  filter:
    grayscale(20%)
    contrast(2.5)
    brightness(1.05);
  /* High contrast, slightly desaturated */
}

/* Fade-in animation using filter */
@keyframes fade-in-filter {
  from { filter: opacity(0%); }
  to { filter: opacity(100%); }
}

.fade-in {
  animation: fade-in-filter 0.6s ease forwards;
}