/* CSS resets and specific rules for CSS3DRenderer */
body {
    margin: 0;
    overflow: hidden;
    font-family: 'Space Grotesk', sans-serif;
    background-color: #102216;
    /* Base dark color, webgl will overlay */
}

/* 
 * CRITICAL for CSS3DRenderer interop:
 * We want the CSS3D elements to respond to pointer events (clicks, hovers).
 * By default, they will if pointer-events: auto is set.
 */
.css3d-board {
    pointer-events: auto;
    /* Ensure this catches clicks */
    opacity: 0;
    /* Hidden initially, GSAP will fade in */
    transform-style: preserve-3d;
}

/* Make buttons feel native inside 3D space */
button,
a {
    cursor: pointer;
    outline: none;
    pointer-events: auto !important;
}

/* Custom Scrollbar for inner elements if needed */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(37, 244, 106, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 244, 106, 0.5);
}

/* Add custom animations for folders inside 3D */
@keyframes techFloat {

    0%,
    100% {
        transform: translateY(0) rotateX(5deg)
    }

    50% {
        transform: translateY(-10px) rotateX(10deg)
    }
}

.folder-3d-anim {
    animation: techFloat 4s ease-in-out infinite;
    transform-style: preserve-3d;
}

/* Prevent text selection while dragging camera (orbit controls) */
.css3d-board {
    user-select: none;
}

.css3d-board p,
.css3d-board h1,
.css3d-board h2,
.css3d-board h3 {
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}