/* Version: 2025-08-13-v1640 */
/*
 * Zoomable Image Styles
 *
 * Enhancements for images with zoom and crisp rendering.
 */

/* Removed global img selector to avoid affecting all images site-wide */

/* Specific overrides for zoomable images to ensure crisp rendering */
.zoomable-image,
.zoomable-image.zoomed-in {
  /* Use high-quality rendering - avoid crisp-edges which causes aliasing */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  image-rendering: optimizeQuality;

  /* Ensure smooth anti-aliasing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Force hardware acceleration for better rendering */
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;

  /* Prevent blurry edges from subpixel positioning */
  transform: translateZ(0);
}

/* Remove conflicting image-rendering that causes aliasing after zoom */
.zoomable-image.zoomed-in {
  /* Only use high-quality rendering properties */
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: high-quality !important;
  image-rendering: optimizeQuality !important;

  /* Prevent browser from applying automatic filters */
  -webkit-filter: none !important;
  filter: none !important;
}

/* Zoomable Image Styles v1.2.0 */

/* Base image state */
.zoomable-image {
  cursor: zoom-in;
  /* Use high-quality rendering to avoid aliasing */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  image-rendering: optimizeQuality;
}

/* Zoomed image positioning and dimensions */
.zoomable-image.zoomed-in {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: calc(100% - 80px);
  max-height: calc(100% - 80px);
  z-index: 10002;
  transform-origin: center;
  user-select: none;
  will-change: transform;
  cursor: zoom-in;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transition: opacity 0.5s ease-out;
  background-color: var(--color-surface);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(var(--color-black-rgb), 0.15);
  opacity: 1;
  /* Use high-quality rendering instead of crisp-edges to avoid aliasing */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  image-rendering: optimizeQuality;

  /* Additional sharpness improvements */
  /* Force exact pixel positioning */
  image-rendering: optimizeQuality;
  image-rendering: high-quality;

  /* Disable any browser smoothing */
  -webkit-filter: none;
  filter: none;

  /* Ensure no rounding errors in positioning */
  transform-box: border-box;

  /* Prevent subpixel alignment issues */
  transform-style: preserve-3d;
}

/* State when image is zoomed to scale 2 - NOTE: This is legacy, we now use natural dimensions */
.zoomable-image.zoomed-in.zoomed-out {
  transform: translate(-50%, -50%) scale(2);
  cursor: zoom-out;
  /* Use high-quality rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  image-rendering: optimizeQuality;
}

/* Cursor states for different zoom levels */
.zoomable-image.zoomed-in[style*="scale(2)"],
.zoomable-image.zoomed-in[style*="scale(3)"] {
  cursor: move;
  transition: none;
}

.zoomable-image.zoomed-in[style*="scale(2)"] {
  cursor: grab;
}

/* Dark overlay with blur effect */
.zoomable-image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black-60, rgba(0, 0, 0, 0.6));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  opacity: 0;
  animation: fadeIn 0.2s ease-out forwards;
}

/* Animation states */
.zoomable-image-overlay.closing {
  animation: fadeOut 0.2s ease-out forwards;
}

/* Fade animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Close button styling */
.zoomable-image-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px !important;
  height: 40px;
  background: var(--color-black-50);
  border: none;
  border-radius: 50%;
  color: var(--color-white);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  transition: background-color 0.2s;
  /* Perfect centering adjustments */
  line-height: 1;
  text-align: center;
  padding: 0;
  margin: 0;
  /* Move the × character up slightly for better visual centering */
  padding-bottom: 2px;
}

.zoomable-image-close:hover {
  background: var(--color-black-10);
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .zoomable-image.zoomed-in {
    cursor: default;
  }
}