/* Mobile-first: content visible by default. Desktop hidden states gated below. */

.animated-masthead-text > span > span {
    line-height: 1.17;
}

.animated-masthead-text > span,
.animated-masthead-sub-text > span {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.animated-masthead-text > span > span,
.animated-masthead-sub-text > span > span {
    display: inline-block;
    position: relative;
}

.loading-animation {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    overflow: hidden;
    transform-origin: top center;
}

.loading-animation .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-animation__logo {
    max-width: 300px;
    width: 100%;
}

.loading-animation__logo svg {
    width: 100%;
    height: auto;
}

.logo-animation__path path {
    stroke-dashoffset: 70;
    stroke-dasharray: 70;
}

/* Desktop: JS owns entrance state after body.site-animation--desktop */
@media (min-width: 1200px) {
    body.site-animation--desktop .masthead__content h1 {
        line-height: 0;
    }

    body.site-animation--desktop .animated-masthead-sub-text,
    body.site-animation--desktop .animated-masthead-text {
        opacity: 0;
    }

    body.site-animation--desktop .animated-masthead-text > span > span,
    body.site-animation--desktop .animated-masthead-sub-text > span > span {
        transform: translateY(100%);
    }

    body.site-animation--desktop .animated-masthead-inner-text {
        position: relative;
        transform: translate(0, 28px);
        opacity: 0;
    }

    body.site-animation--desktop .masthead__content__links {
        transform: translate(0, 20px);
        opacity: 0;
    }

    body.site-animation--desktop .masthead__content__links__col {
        transform: scale(1.12);
        opacity: 0;
    }

    body.site-animation--desktop .animated-content > * {
        opacity: 0;
        transform: translate(0, 28px);
    }

    body.site-animation--desktop .service-cards--homepage .service-cards__item {
        position: relative;
        opacity: 0;
        transform: translate(0, 24px);
    }

    body.site-animation--desktop .service-cards--homepage .service-cards__item:first-child {
        transform: translate(-48px, 48px);
    }

    body.site-animation--desktop .service-cards--homepage .service-cards__item:nth-child(2) {
        transform: translate(0, 48px);
    }

    body.site-animation--desktop .service-cards--homepage .service-cards__item:nth-child(3) {
        transform: translate(48px, 48px);
    }

    body.site-animation--desktop .info-icon-block__card {
        opacity: 0;
        transform: translate(0, 28px);
    }

    body.site-animation--desktop .process-card-item {
        position: relative;
        transform: translate(-32px, 0);
        opacity: 0;
    }
}

/* Homepage loading overlay: desktop + motion only, until intro finishes */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
    body.home:not(.is-animation-done) .loading-animation {
        display: block;
    }

    body.home.is-animation-done .loading-animation {
        display: none !important;
        pointer-events: none;
    }
}

/* Mobile, tablet, and reduced motion: force visible content, no overlay */
@media (max-width: 1199px) {
    .loading-animation {
        display: none !important;
        pointer-events: none !important;
    }

    .animated-masthead-sub-text,
    .animated-masthead-text,
    .animated-masthead-inner-text,
    .masthead__content__links,
    .masthead__content__links__col,
    .animated-content > *,
    .service-cards--homepage .service-cards__item,
    .info-icon-block__card,
    .process-card-item,
    .animated-masthead-text > span > span,
    .animated-masthead-sub-text > span > span {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
}