/**
 * 3D Mouse Tracker - Auto-Injected Depth Panels (with Back Panel)
 * Based on Even Odd's proven 3D depth technique
 */

/* Base 3D tracking container */
.mouse-3d-track {
    will-change: transform;
    perspective: 1000px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: visible;
    padding: 0;
    margin: 0;
}

/* Auto-injected depth panels - positioned at edges */
.depth-panel {
    position: absolute;
    pointer-events: none;
    transform-style: preserve-3d;
    z-index: 1;
    backface-visibility: hidden;
    margin: 0;
    padding: 0;
}

/* Left panel - slides out on left edge */
.depth-panel-left {
    transform-origin: 100%;
    width: var(--depth, 8px);
    height: 100%;
    inset: 0% auto 0% 0%;
    transform: translateX(calc(var(--depth, 8px) * -1)) rotateX(0) rotateY(-90deg) rotate(0);
}

/* Right panel - slides out on right edge */
.depth-panel-right {
    transform-origin: 100%;
    width: var(--depth, 8px);
    height: 100%;
    inset: 0% 0% 0% auto;
    transform: translateZ(calc(var(--depth, 8px) * -1)) rotateX(0) rotateY(90deg) rotate(0);
}

/* Top panel - slides out on top edge */
.depth-panel-top {
    transform-origin: 50% 100%;
    width: 100%;
    height: var(--depth, 8px);
    inset: 0% 0% auto;
    transform: translateY(calc(var(--depth, 8px) * -1)) rotateX(90deg) rotateY(0) rotate(0);
}

/* Bottom panel - slides out on bottom edge */
.depth-panel-bottom {
    transform-origin: 50% 100%;
    width: 100%;
    height: var(--depth, 8px);
    inset: auto 0% 0%;
    transform: translateZ(calc(var(--depth, 8px) * -1)) rotateX(-90deg) rotateY(0) rotate(0);
}

/* Back panel - positioned behind the element */
.depth-panel-back {
    width: 100%;
    height: 100%;
    inset: 0;
    transform: translateZ(calc(var(--depth, 8px) * -1)) rotateY(180deg);
    z-index: 0;
    backface-visibility: visible;
}

/* Images and videos */
.mouse-3d-track img,
.mouse-3d-track video {
    display: block;
    width: 100%;
    height: auto;
    transform-style: preserve-3d;
    object-fit: cover;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
}

/* Remove Elementor default spacing */
.mouse-3d-track > * {
    margin: 0 !important;
    padding: 0 !important;
    transform-style: preserve-3d;
}

/* Hide mobile-box-video-back by default */
.mobile-box-video-back {
    display: none !important;
    visibility: hidden !important;
}

/* Show mobile-box-video-back only when it's in the back panel */
.depth-panel-back .mobile-box-video-back {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    transform-style: preserve-3d !important;
    backface-visibility: visible !important;
}

/* Optional: Rounded corners */
.mouse-3d-track.rounded {
    border-radius: 12px;
    overflow: hidden;
}

/* Disable 3D on mobile/touch devices */
@media (max-width: 768px) {
    .mouse-3d-track {
        perspective: none;
    }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mouse-3d-track {
        transform: none !important;
    }
    
    .depth-panel {
        display: none;
    }
}