/* Home */
.page-node-1 {
    .navbar {
        position: relative;
        background-color: transparent !important;
    }

    article {
        display: grid;
        width: 100%;

        @media (min-width: 992px) {
            min-height: 583px;
        }

        @media (min-width: 1400px) {
            min-height: 765px;
        }
    }

    .hero {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 1;
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
        pointer-events: auto;
        width: 100%;
        position: relative;

        @media (min-width: 992px) {
            min-height: 583px;
        }

        @media (min-width: 1400px) {
            min-height: 765px;
        }

        @media (max-width: 991px) {
            min-height: 600px;
        }

        .hero-content {
            z-index: 2;
            max-width: 419px;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 20px;

            @media (min-width: 992px) {
                position: relative;
                left: 43px;
                grid-column: 1 / 2;
                grid-row: 1;
                gap: 40px;
                top: 50%;
                transform: translateY(-50%);
                width: 390px;
            }

              @media (min-width: 1400px) {
                left: 96px;
                width: 419px;
            }

            @media (max-width: 991px) {
                padding-block: 30px;
                padding-inline: 25px;
                margin-inline: auto;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                background: #ffffff;
                transform: none;
                justify-content: flex-start;
                opacity: 0;
            }

            p {
                margin: 0;

                &:first-child {
                    color: var(--navy-20);
                }
            }

            .btn {
                width: 100%;
                text-align: left;
            }
        }

        .hero-content--top {
            display: flex;
            flex-direction: column;
            gap: 14px;

            .text {
                position: relative;
                text-align: center;

                &:before,
                &:after {
                    position: absolute;
                    left: 0;
                    content: "";
                    display: block;
                    width: 100%;
                    height: 1px;
                    background: var(--gray-20);
                }

                &:before {
                    top: 0;
                }

                &:after {
                    bottom: 0;
                }

                img {
                    width: 144px;
                    padding: 13px 0 9px;
                }
            }
        }

        .home-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            overflow: hidden;
            box-sizing: border-box;
            background-color: #ffffff;

            @media (min-width: 992px) {
                width: 821px;
                left: 50%;
                right: auto;
                transform: translateX(-50%);
                min-height: 583px;
            }

            @media (min-width: 1400px) {
                width: 1077px;
                min-height: 765px;
            }

            > div {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .home-bg-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #ffffff;
                z-index: 2;
                transition: opacity 0.5s ease-out;
                pointer-events: none;
            }

            .home-bg-overlay.fade-out {
                opacity: 0;
            }

            /* Static background for return visits */
            &.static-bg {
                background-image: url('/themes/custom/seeaseizure_bootstrap/images/home/home-bg-mobile.jpg');
                background-size: contain;
                background-position: center top;
                background-repeat: no-repeat;

                @media (min-width: 576px) {
                    background-image: url('/themes/custom/seeaseizure_bootstrap/images/home/home-bg.jpg');
                }
            }

            iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                transition: opacity 1s ease-in;

                @media (max-width: 991px) {
                    /* Force video to fill 600px height based on 1.408:1 aspect ratio */
                    width: 845px;
                    height: 600px;
                    left: 50%;
                    top: 0;
                    transform: translateX(-50%);
                }
            }

            iframe.fade-in {
                opacity: 1;
            }

            video.native-video-mobile {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                transition: opacity 1s ease-in;
                object-fit: cover;

                @media (max-width: 991px) {
                    width: 845px;
                    height: 600px;
                    left: 50%;
                    top: 0;
                    transform: translateX(-50%);
                }

                /* Portrait video (374x474 aspect ratio) */
                &[data-video-type="home-bg"] {
                    @media (max-width: 991px) {
                        width: auto;
                        height: 600px;
                        object-fit: contain;
                        top: 1px;
                    }
                }
            }

            video.native-video-mobile.fade-in {
                opacity: 1;
            }
        }

        &.fade-out {
            opacity: 0;
            pointer-events: none;
        }
    }

    .references {
        &.active {
            z-index: 2;
        }
    }

    &.homepage-animation-completed .home-bg iframe,
    &.homepage-animation-completed .home-bg video.native-video-mobile {
        opacity: 1 !important;
    }
}

/* CSS Fallback */
@keyframes mobile-hero-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 991px) {
    /* Hide content initially if JavaScript is available and animations haven't completed */
    .js .page-node-1:not(.homepage-animation-completed):not(.homepage-animation-initialized) .hero-content {
        opacity: 0;
    }
    
    /* Show content after 3 seconds */
    .page-node-1:not(.homepage-animation-completed):not(.homepage-animation-initialized) .hero-content {
        animation: mobile-hero-fade-in 0.6s ease-out 3s forwards;
    }
    
    /* Override animation if successfully initialized */
    .page-node-1.homepage-animation-completed .hero-content,
    .page-node-1.homepage-animation-initialized .hero-content {
        animation: none;
    }
}