/* Robust Global Background and Parallax Effect Styles */

html {
    background-color: #000 !important;
}

body {
    background-color: #000 !important;
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('images/background.png');
    background-attachment: fixed;
    background-size: 110% 110%;
    /* Extra scale for parallax overhead */
    background-position: center center;
    background-repeat: no-repeat;
    transition: background-position 0.1s ease-out;
    margin: 0;
    min-height: 100vh;
}

/* Make sections transparent to reveal background */
main,
section,
div,
.bg-black,
.bg-zinc-950,
.bg-zinc-900,
.bg-zinc-900\/50,
.bg-gray-100,
.bg-white {
    background-color: transparent !important;
}

/* Semi-transparent glass effect for content cards */
.glass-card {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

.dark .glass-card {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 0, 255, 0.3) !important;
}

/* Ensure navbar stays readable */
nav {
    background-color: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(15px);
}

/* Usage cards specificity */
.usage-card {
    background-color: rgba(255, 255, 255, 0.15) !important;
}