@keyframes slowZoomIn {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

.papercuts-fade-gallery {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    min-width: 100vw !important;
    overflow: hidden !important;
    background: #000 !important;
    z-index: -1 !important; /* Position behind other content */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    transform: none !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Force the gallery to break out of any theme containers */
.papercuts-fade-gallery,
.papercuts-fade-gallery * {
    box-sizing: border-box !important;
}

/* Handle ultra-wide screens and ensure full coverage */
@media (min-width: 1920px) {
    .papercuts-fade-gallery {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: none !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .fade-image img,
    .fade-image video {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: none !important;
    }
}

/* Force override any theme max-width constraints */
.papercuts-fade-gallery {
    max-width: 100vw !important;
    width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.fade-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}

.fade-image img {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    animation: slowZoomIn ease-in-out forwards;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
}

.fade-image video {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
}

.fade-image.active {
    opacity: 1;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .papercuts-fallery {
        height: 100vh; /* Keep full height on mobile */
    }
}

@media (max-width: 480px) {
    .papercuts-fallery {
        height: 100vh; /* Keep full height on mobile */
    }
}

/* Alternative positioning options */
.papercuts-fade-gallery.relative {
    position: relative !important;
    z-index: auto !important;
    width: 100% !important;
    height: auto !important;
}

.papercuts-fade-gallery.absolute {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: auto !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ultra-low z-index for stubborn themes */
.papercuts-fade-gallery.ultra-low {
    z-index: -9999 !important;
}

/* Ensure gallery breaks out of theme containers */
.papercuts-fade-gallery.fixed {
    position: fixed !important;
    z-index: -1 !important;
}

/* Ensure content above the gallery is readable */
.papercuts-fade-gallery + * {
    position: relative;
    z-index: 1;
}

/* Foreground overlay */
.papercuts-foreground-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999 !important;
    pointer-events: none !important;
    background-size: cover !important;
    background-position: center !important;
}

/* ======== Sparks ======== */
.spark {
    position: fixed !important; /* Use fixed positioning to match gallery */
    border-radius: 100%;
    scale: 1;
    z-index: 10000 !important; /* Much higher than everything else */
    pointer-events: none !important;
    mix-blend-mode: screen; /* Make sparks more visible */
}

.spark .spark-glow {
    width: 200%;
    height: 200%;
    transform: translate(-25%, -25%);
    background-color: inherit;
    border-radius: 100%;
    filter: blur(8px) brightness(1.5);
    z-index: 99;
} 

/* Neon cursor effect styling */
.papercuts-fade-gallery canvas {
    pointer-events: none;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Ensure canvas doesn't block gallery content */
    mix-blend-mode: screen;
}

/* Ensure neon cursor works with gallery positioning */
.papercuts-fade-gallery.fixed canvas {
    position: fixed;
}

.papercuts-fade-gallery.relative canvas {
    position: absolute;
}

.papercuts-fade-gallery.absolute canvas {
    position: absolute;
}

/* Fix for neon cursor canvas to not interfere with gallery */
.papercuts-fade-gallery canvas {
    /* Remove any background that might block content */
    background: transparent !important;
    /* Ensure proper layering */
    z-index: 10000;
}

/* Additional fix: Ensure neon cursor canvas from document.body doesn't block gallery */
body > canvas {
    pointer-events: none !important;
    z-index: 99998 !important;
    background: transparent !important;
    mix-blend-mode: screen;
}

/* Force neon cursor canvas to be visible */
canvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Neon cursor canvas styling */
body > canvas {
    z-index: 999999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    /* Force above everything */
    transform: translateZ(0) !important;
}

/* Ensure neon canvas is above sparks */
.spark {
    z-index: 99999 !important; /* High but below neon */
}