body, html {
    margin: 0; padding: 0; height: 100%; overflow: hidden;
    font-family: sans-serif; color: white;
}

/* Your original background image (unchanged) */
.background-image {
    background: url('images/image.jpg') center/cover no-repeat;
    position: fixed; inset: 0; z-index: -1;
}

/* Video starts hidden */
.bg-video {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
    z-index: -1;
}

/* When the video is actually ready → fade in */
.bg-video.ready {
    opacity: 1;
}

/* Optional: hide the image once video is ready (smoother) */
.bg-video.ready ~ .background-image {
    opacity: 0;
}

/* Your original content — 100 % unchanged */
.content {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    height: 100vh; text-align: center;
    background-color: rgba(0,0,0,0.4);
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

h1 { font-size: 3em; margin-bottom: .5em; }
p  { font-size: 1.2em; }