/* Mobile-first: content visible below 1200px. Motion from 1200px + JS mount. */

.loading-mask {
    display: none;
}

@media (min-width: 1200px) {
    .loading-mask {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        background-color: #fff;
        overflow: hidden;
    }
}

.loading-mask .container,
.loading-mask__container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.loading-mask__logo {
    width: 220px;
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    margin: 0;
    transform: translate(-50%, -50%) scale(2);
    will-change: transform, opacity;
}

@media (min-width: 768px) {
    .loading-mask__logo {
        width: 300px;
    }
}

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

.loading-mask__text {
    padding-left: 70px;
    font-size: 30px;
    line-height: 1.2em;
    color: #0D7577;
    font-family: 'Noto Sans', sans-serif;
}

@media (min-width: 768px) {
    .loading-mask__text {
        display: block;
        font-size: 40px;
        padding-left: 135px;
    }
}

/* Pre-JS homepage: prevent header flash before GSAP mounts */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
    body.home:not(.site-animation--desktop) .page-header {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-50px);
    }
}

/* Hidden states after body.site-animation--desktop is set */
@media (min-width: 1200px) {
    body.site-animation--desktop.home .page-header {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-50px);
    }

    body.site-animation--desktop.home .masthead__content > *:not(img) {
        position: relative;
        opacity: 0;
        visibility: hidden;
        transform: translateY(50px);
    }

    body.site-animation--desktop .animated-content > * {
        display: block;
        position: relative;
        opacity: 0;
        visibility: hidden;
        transform: translateY(100px);
    }

    body.site-animation--desktop .animated-content.tab-accordion-left > *,
    body.site-animation--desktop .animated-content.fx-accordion__panels > * {
        transform: translateX(-100px);
    }

    body.site-animation--desktop .logo-mask__path {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
    }

    body.site-animation--desktop .logo-mask__circle {
        opacity: 0;
        visibility: hidden;
    }

    body.site-animation--desktop .loading-mask__text span {
        display: block;
        position: relative;
        opacity: 0;
        visibility: hidden;
        transform: translateX(100px);
    }
}

/* Mobile + reduced motion: visible content, override block icon-line hides */
@media (max-width: 1199px), (prefers-reduced-motion: reduce) {
    body.home .page-header,
    body.home .masthead__content > *:not(img),
    .animated-content > *,
    .icon-line__line,
    .icon-line__circle {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .loading-mask {
        display: none !important;
    }
}