/* Mobile-first home splash background moved from inline HTML */
.home-splash{

    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 48rem; /* sensible mobile minimum */
}
.home-splash:after {
  content: "AI Generated Image";

}
    .home-splash-video {
        position: fixed;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

/* Larger screens - increase height so content sits visually lower */
@media (min-width: 768px){
    .home-splash{
        min-height: 71rem;
         background-position: center top;
        background-size: 300% auto!important;
    }
}

@media (min-width: 992px){
    .home-splash{
        min-height: 75rem;
        background-position: center top;
        background-size: 100% auto!important;
 
    }
        .home-splash-video {
        position: fixed;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }
}

/* Extra large monitors (1400px+) */
@media (min-width: 1400px){
    .home-splash{
        min-height: 100rem;
        background-position: center top !important;
        background-attachment: fixed;
        background-size: 100% auto!important;
      
    }
    .home-splash-video {
        position: fixed;
        width: 100%;
        height: 70%;
        object-fit: cover;
        z-index: 0;
    }
    
}

/* 1920px+ (Full HD and larger) */
@media (min-width: 1920px){
    .home-splash{
        min-height: 85vh;
        background-position: center 25%;
        background-size: 100% auto;
    }
    .home-splash-video {
        position: fixed;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }
}

/* 4K and ultra-wide monitors (2560px+) */
@media (min-width: 2560px){
    .home-splash{
        min-height: 80vh;
        background-position: center 30%;
        background-size: 100% auto;
        background-attachment: fixed;
    }
    .home-splash-video {
        position: fixed;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }
}

/* Ultra-wide monitors with aspect ratio considerations */
@media (min-width: 3440px) and (min-aspect-ratio: 21/9){
    .home-splash{
        background-size: 100% auto;
        background-position: center 25%;
    }
}

/* TEST */