/* --- GLOBAL & UTILITIES --- */
:root {
    /* Change these variables in the future to update the whole site */
    --font-header: 'Rubik Mono One', sans-serif;
    --font-body: 'Inter', sans-serif;
}
body {
    transition: background-color 0.5s ease, color 0.5s ease;
    overflow: hidden; /* Prevent default scroll on body */
    margin: 0;
    background-color: #050505; /* Default Dark */
    color: white;
   font-family: var(--font-body);
}
.font-header {
    font-family: var(--font-header);
    font-weight: 400; /* Rubik Mono One only has one weight */
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
}

/* --- SCROLLBARS --- */
/* Hidden Scrollbar (for Orbit views) */
.scrollbar-hidden::-webkit-scrollbar {
    display: none;
}
.scrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom Scrollbar (for Grid/List views) */
.custom-scroll {
    overflow-y: auto;
}
.custom-scroll::-webkit-scrollbar {
    width: 6px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* --- ANIMATIONS --- */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px #31db47; }
    50% { opacity: 0.5; text-shadow: 0 0 0px #31db47; }
}

.popup-anim {
    animation: fadeIn 0.3s ease-out forwards;
}

.animate-glow {
    animation: pulse-glow 2s infinite;
}

/* --- LIST / GRID TRANSITIONS --- */
.list-item-enter {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.list-item-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Grid Item Hover */
.grid-item .grid-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.grid-item:hover .grid-overlay {
    opacity: 1;
}

/* Mobile Touch Action Fix */
#canvas-container {
    touch-action: none; /* Prevents browser scrolling/zooming while dragging canvas */
}