.hextra-zoom-image-overlay { position: fixed; inset: 0; background: var(--hextra-image-zoom-backdrop, rgba(0, 0, 0, 0.9)); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1); cursor: zoom-out; overscroll-behavior: contain; touch-action: none; backdrop-filter: blur(var(--hextra-image-zoom-blur, 4px)); -webkit-backdrop-filter: blur(var(--hextra-image-zoom-blur, 4px)); /* Prevent iOS bounce */ position: fixed; overflow: hidden; will-change: transform; } .hextra-zoom-image-overlay.show { opacity: 1; } .hextra-zoom-image-overlay.closing { opacity: 0; transition: opacity 360ms cubic-bezier(0.2, 0, 0, 1); } .hextra-zoom-image { border-radius: 8px; box-shadow: 0 18px 80px rgba(0, 0, 0, 0.5); image-rendering: -webkit-optimize-contrast; image-rendering: high-quality; will-change: transform; /* Prevent image selection on mobile */ user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; /* Hardware acceleration */ transform: translateZ(0); -webkit-transform: translateZ(0); } .hextra-zoom-image-overlay.show .hextra-zoom-image { transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), left 320ms cubic-bezier(0.2, 0.8, 0.2, 1), top 320ms cubic-bezier(0.2, 0.8, 0.2, 1); } .hextra-zoom-image-overlay.closing .hextra-zoom-image { transition: transform 340ms cubic-bezier(0.3, 0, 0.2, 1), left 340ms cubic-bezier(0.3, 0, 0.2, 1), top 340ms cubic-bezier(0.3, 0, 0.2, 1); } /* Disable transitions during interaction */ .hextra-zoom-image-overlay.interacting .hextra-zoom-image { transition: none !important; } @media (prefers-reduced-motion: reduce) { .hextra-zoom-image-overlay, .hextra-zoom-image { transition: none !important; } } .content img:not([data-no-zoom]):not(.not-prose img) { cursor: zoom-in; } /* Loading indicator */ .hextra-zoom-image.loading { opacity: 0; } .hextra-zoom-image.loaded { opacity: 1; transition: opacity 200ms ease-in-out; }