.masthead--innerpage {
    overflow: hidden;
}

.animated-content > * {
    display: block;
    position: relative;
}

.logo-carousel__wrap .logo-item {
    overflow: hidden;
}

.image-card-flex .image-card-item,
.image-button-list .image-button-item {
    position: relative;
    overflow: hidden;
}

.image-parallax {
    overflow: hidden;
}

.loading-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-white);
    z-index: 9999;
    transform-origin: top;
    transform: scaleY(1);
}

.loading-mask .container,
.loading-mask__container {
    height: 100%;
}

.loading-mask__container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-mask__logo {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.loading-mask__logo__item {
    display: inline-block;
}

.loading-mask__logo__item img {
    width: 150px;
    height: auto;
}

.loading-mask__logo__close {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    overflow: hidden;
}

.loading-mask__logo__close span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
}

.loading-mask__logo__close span:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-black);
    width: 100%;
    height: 1px;
}

.loading-mask__logo__close span:first-child:before {
    transform: translateY(-50%) rotate(45deg);
}

.loading-mask__logo__close span:last-child:before {
    transform: translateY(-50%) rotate(-45deg);
}

/* Loading mask intro: desktop homepage only (mask display toggled by JS during full intro) */
@media (min-width: 1200px) {
    body.home.is-intro-active .loading-mask {
        display: block;
    }

    body.home .loading-mask__animation--left {
        opacity: 0;
        transform: translate(-50px, 0);
    }

    body.home .loading-mask__animation--right {
        opacity: 0;
        transform: translate(50px, 0);
    }

    body.home .loading-mask__logo__close span {
        transform: scale(0);
    }
}

/* Desktop-only animation starting states (JS adds body.site-animation--desktop on mount) */
@media (min-width: 1200px) {
    body.site-animation--desktop:not(.is-header-visible) .page-header__container {
        position: relative;
        transform: translateY(-100%);
        opacity: 0;
    }

    body.site-animation--desktop.is-header-visible .page-header__container {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    body.site-animation--desktop:not(.is-masthead-revealed) .masthead__wrap > *,
    body.site-animation--desktop:not(.is-masthead-revealed) .masthead--innerpage__wrap > * {
        position: relative;
        transform: translateY(100px);
        opacity: 0;
    }

    body.site-animation--desktop:not(.is-masthead-revealed) .masthead--innerpage__bg {
        transform: scale(1.5);
    }

    body.site-animation--desktop.is-masthead-revealed .masthead__wrap > *,
    body.site-animation--desktop.is-masthead-revealed .masthead--innerpage__wrap > *,
    body.site-animation--desktop.is-masthead-revealed .masthead--innerpage__bg {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    body.site-animation--desktop .is-scroll-revealed.animated-content > *,
    body.site-animation--desktop .js-animated-content.is-scroll-revealed > *,
    body.site-animation--desktop .js-image-collage.is-scroll-revealed .js-image-collage-item,
    body.site-animation--desktop .image-card-flex.is-scroll-revealed .image-card,
    body.site-animation--desktop .service-flex.is-scroll-revealed .service-cards,
    body.site-animation--desktop .work-process-flex.is-scroll-revealed .work-process-col-top .work-process-image,
    body.site-animation--desktop .work-process-flex.is-scroll-revealed .work-process-col-top h2,
    body.site-animation--desktop .work-process-flex.is-scroll-revealed .work-process-col-bottom > *,
    body.site-animation--desktop .image-buttons.is-image-buttons-revealed .image-button-list .image-button,
    body.site-animation--desktop .logo-carousel.is-logo-carousel-revealed .logo-carousel__wrap .logo-item img {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* Pre-JS desktop: hide masthead until GSAP mounts (header uses is-header-visible after reveal) */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
    body.home:not(.site-animation--desktop) .masthead__wrap > * {
        opacity: 0;
        visibility: hidden;
        transform: translateY(100px);
    }

    body:not(.home):not(.site-animation--desktop) .masthead--innerpage__wrap > * {
        opacity: 0;
        visibility: hidden;
        transform: translateY(100px);
    }

    body:not(.home):not(.site-animation--desktop) .masthead--innerpage__bg {
        transform: scale(1.5);
    }
}

/* Mobile, tablet, and reduced motion: keep content visible */
@media (max-width: 1199px), (prefers-reduced-motion: reduce) {
    .loading-mask {
        display: none !important;
    }

    .page-header__container,
    .masthead__wrap > *,
    .masthead--innerpage__wrap > *,
    .masthead--innerpage__bg,
    .animated-content > *,
    .image-text__img-left,
    .image-text__img-top,
    .image-text__img-bottom,
    .logo-carousel__wrap .logo-item img,
    .image-card-flex .image-card,
    .image-button-list .image-button,
    .image-parallax-image,
    .service-flex .service-cards,
    .work-process-col-top .work-process-image,
    .work-process-col-top h2,
    .work-process-col-bottom > *,
    .loading-mask__animation--left,
    .loading-mask__animation--right {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}