/* Starry Sky Background Effect */

/* Create a starry sky background using the image */
#header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-image: url('../../images/starry_sky.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 1;
    pointer-events: none;
}

/* Ensure header content stays above the starry overlay */
#header .inner {
    position: relative;
    z-index: 3;
}

/* Add a semi-transparent blue overlay on top of the starry sky */
#header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: rgba(15, 20, 50, 0.9);
    z-index: 2;
}

/* Use dynamic viewport units when available to cover full iOS viewport */
@supports (height: 100dvh) {
    #header::before,
    #header::after {
        min-height: 100svh;
    }
}