/**
 * Infinity Gallery Styles
 * Infinite scrollable/draggable gallery with parallax effects
 */

/* Container */
.infinity-gallery-block,
.image-space-block {
    position: relative;
    width: 100%;
}

.infinity-gallery-container,
.image-space-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: transparent;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: auto; /* Always capture pointer events for dragging */
}

/* Background mode: allow click-through to content behind except on images */
.infinity-gallery-container[style*="z-index: -"],
.image-space-container[style*="z-index: -"] {
    pointer-events: none;
}

.infinity-gallery-container[style*="z-index: -"] .infinity-gallery-item,
.image-space-container[style*="z-index: -"] .infinity-gallery-item {
    pointer-events: auto;
}

.infinity-gallery-container[style*="z-index: -"] .infinity-gallery-canvas,
.image-space-container[style*="z-index: -"] .infinity-gallery-canvas {
    pointer-events: auto;
}

/* When dragging in background mode, capture all pointer events */
.infinity-gallery-container.is-dragging,
.image-space-container.is-dragging {
    pointer-events: auto !important;
}

.infinity-gallery-container.is-dragging,
.image-space-container.is-dragging {
    cursor: grabbing;
}

/* Canvas - holds all images */
.infinity-gallery-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    will-change: transform;
    pointer-events: auto; /* Canvas captures drag events */
    transform-origin: center center; /* Zoom from center */
}

/* Individual images */
.infinity-gallery-item {
    position: absolute;
    display: block;
    will-change: transform, opacity;
    transition: opacity 0.3s ease, filter 0.3s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-origin: center center;
}

/* Scroll animation classes */
.infinity-gallery-item.has-scroll-animation {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.3s ease;
}

.infinity-gallery-item.animate-immediate {
    transition: opacity 0s, transform 0s, filter 0.3s ease;
}

.infinity-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* Hover effects */
.infinity-gallery-item {
    transition: opacity 0.3s ease;
}

.infinity-gallery-item.has-click {
    cursor: pointer;
}

/* Loading indicator */
.infinity-gallery-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.infinity-gallery-container.is-loaded .infinity-gallery-loading {
    opacity: 0;
}

.infinity-gallery-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    animation: infinity-gallery-spin 0.8s linear infinite;
}

@keyframes infinity-gallery-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Instructions overlay */
.infinity-gallery-instructions {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 20px;
    font-size: 14px;
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 5;
}

.infinity-gallery-container.has-interacted .infinity-gallery-instructions {
    opacity: 0;
}

.infinity-gallery-instructions p {
    margin: 0;
    padding: 0;
}

/* Performance optimizations */
.infinity-gallery-item {
    /* Use GPU acceleration */
    transform: translate3d(0, 0, 0);
}

/* Disable transitions during drag for better performance */
.infinity-gallery-container.is-dragging .infinity-gallery-item {
    transition: none !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .infinity-gallery-instructions {
        font-size: 13px;
        padding: 8px 16px;
    }
}

@media (max-width: 768px) {
    .infinity-gallery-instructions {
        font-size: 12px;
        padding: 6px 14px;
        bottom: 15px;
    }

    .infinity-gallery-loading-spinner {
        width: 32px;
        height: 32px;
        border-width: 2px;
    }
}

/* Dark mode support (if theme uses it) */
@media (prefers-color-scheme: dark) {
    .infinity-gallery-loading-spinner {
        border-color: rgba(255, 255, 255, 0.1);
        border-top-color: rgba(255, 255, 255, 0.5);
    }
}

/* Prevent text selection during drag */
.infinity-gallery-container.is-dragging,
.infinity-gallery-container.is-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Accessibility - focus states */
.infinity-gallery-item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Print styles - show all images in a grid */
@media print {
    .infinity-gallery-container {
        height: auto !important;
        overflow: visible !important;
    }

    .infinity-gallery-canvas {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }

    .infinity-gallery-item {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
    }

    .infinity-gallery-loading,
    .infinity-gallery-instructions {
        display: none;
    }
}