/* --- CUBE VISUAL STYLES --- */
.hero-visual {
    flex: 1;
    min-height: 600px;
    height: 100%;
    position: relative;
    display: flex;
}

/* Three.js Canvas Container */
#three-canvas-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    /* Mix blend mode makes black pixels transparent, allowing stars to show through */
    mix-blend-mode: screen;
}

@media (max-width: 768px) {
    .hero-visual {
        height: 400px;
        min-height: 400px;
        width: 100%;
    }

    #three-canvas-container {
        min-height: 400px;
    }
}