/* Display utilities */
.d-none{
    display: none;
}

.d-block{
    display: block;
}

/* Body */
body{
    background: var(--bg-surface-primary, #0B0A15);
}

/* Top Left PNG Image - Behind Header and Hero only */
.top-left-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    background-image: url('/resources/images/home_new/particles.png');
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0; /* Below all sections (sections have z-index: 2) */
    overflow: hidden;
}

/* Hero Section Bottom Right Background Image */
.hero-section .hero-bottom-right-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('/resources/images/home_new/hero-bg.png');
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Section */
.section{
    padding: var(--md) 0;
}

/* Header height variable */
:root{
    --header-height: 105px;
}

@media(width < 768px){
    :root{
        --header-height: 90px;
    }
    
    /* Top-left image: not fixed on mobile, scrolls with page */
    .top-left-image {
        position: absolute;
        background-image: url('/resources/images/home_new/particles-mobile.png');
        height: 100%;
        background-size: cover;
    }
    
    /* Fade overlay to hide background image harsh edge on mobile */
    .top-left-image::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 120px;
        background: linear-gradient(to bottom, rgba(11, 10, 21, 0) 0%, rgba(11, 10, 21, 0.3) 50%, var(--bg-surface-primary, #0b0a15) 100%);
        pointer-events: none;
        z-index: 1;
    }
    
    /* Footer bottom background image: use mobile version */
    .footer-new .footer-bottom-image {
        background-image: url('/resources/images/home_new/footer-bg-mobile.png');
    }
}