/* LANDING SECTION */

/* Parent container with perspective for subtle 3D depth */
.landing-container {
    position: relative;
    width: 100%; /* Full width alignment */
    height: auto; /* Maintains content-adaptive height */
    margin: 0 auto; /* Centers horizontally */
    overflow: hidden;
    perspective: 1000px; /* Enables 3D transformations */
    box-sizing: border-box;
}

/* Landing section as a 3D container */
.landing {
    position: relative;
    width: 100%;
    height: 100vh; /* Ensures full viewport height */
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 2s ease-out;
}

/* Video background:
   Positioned absolutely, centered horizontally.
   Slightly translated back and scaled for full coverage. */
.landing video {
    width: 100%;
    height: 100%; /* Ensures video fills the section */
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover; /* Covers entire section without distortion */
    z-index: 1; /* Places video behind other content */
}

/* Text overlay:
   Centered both horizontally and vertically, placed "above" video.
   Includes optional fade-in animation. */
.landing-text-overlay {
    width: 100%;
    max-width: 3200px; /* Aligns with content width */
    margin: 0 auto;
    text-align: center; /* Centers the text */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3; /* Above video */
    pointer-events: none; /* Decorative text */
    animation: fadeIn 2s ease-out;
}

/* Overlay image:
   Scales proportionally to match video, with optional max width. */
.landing-text-overlay img {
    width: 100%;
    height: auto;
    max-width: 3200px; /* Maximum width for large screens */
    object-fit: contain;
    display: block;
    opacity: 0;
    animation: fadeInImage 3s ease-out forwards;
}

/* Fade-in animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes fadeInImage {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .landing {
        height: auto; /* Allows height to adapt on smaller screens */
    }

    .landing-text-overlay {
        font-size: 90%; /* Reduces text size for smaller screens */
    }
}

@media (max-width: 480px) {
    .landing-text-overlay {
        font-size: 80%; /* Further reduction for very small screens */
    }
}