.loading-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2001;
    background-color: #fff;

    -webkit-mask: url(/wp-content/themes/thecocoon/assets/img/brush-sprite.png);
    mask: url(/wp-content/themes/thecocoon/assets/img/brush-sprite.png);
    -webkit-mask-size: 3000% 100%;
    mask-size: 3000% 100%;
    cursor: pointer;
}

.loading-mask.is-active {
    display: block;
}

.loading-mask.is-hidden {
    -webkit-animation: brushInKeyframe 2s steps(29) forwards;
    animation: brushInKeyframe 2s steps(29) forwards;
}

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

.loading-mask__logo {
    width: 400px;
    height: auto;
    margin: 0 auto;
    display: block;
    overflow: hidden;
}

@media (max-width: 767px) {
    .loading-mask__logo {
        width: 300px;
    }
}

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

.loading-mask__text__title {
    font-size: 80px;
    font-weight: 800;
    color: #1D252D;
    text-transform: uppercase;
}

@media (max-width: 1199px) {
    .loading-mask__text__title {
        font-size: 50px;
    }
}

@media (max-width: 767px) {
    .loading-mask__text__title {
        font-size: 30px;
    }
}

@media (min-width: 1200px) {
    .call-us img {
        animation: ring 1.4s infinite ease-in-out;
    }

    .masthead__text > * {
        position: relative;
    }

    .loading-mask__text__item--logo .loading-mask__logo svg {
        position: relative;
    }

    .one-third-image__item.one-third-image-four {
        overflow: hidden;
    }

    .one-third-image__item.one-third-image-two {
        z-index: 2;
    }
}

.loading-mask__text__item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
}

.loading-mask__text__item--logo .loading-mask__logo {
    overflow: hidden;
}

.text-stroke>span {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.text-stroke>span>span {
    display: inline-block;
    position: relative;
    letter-spacing: 0.095em;
    text-indent: 2px;
}

.text-stroke>span>span>span {
    display: inline-block;
}

.text-stroke>span>span>span:first-child {
    -webkit-text-stroke: 5px #1D252D;
    color: transparent;
}

@media (max-width: 1199px) {
    .text-stroke>span>span>span:first-child {
        -webkit-text-stroke: 2px #1D252D;
        color: transparent;
    }
}

.text-stroke>span>span>span:last-child {
    display: inline-block;
    color: #fff;
    position: absolute;
    top: 0;
    left: 2px;
}

.inner-text-wrap__inner>span {
    display: inline-block;
}

.inner-text-wrap__inner>span:not(:last-child) {
    margin-right: 15px;
}

.inner-text-wrap__item {
    position: relative;
    display: inline-block;
}

.image-button-item {
    position: relative;
}

.image-left .animated-multi-image-item.left-image-big {
    transform-origin: top right;
}

.image-right .animated-multi-image-item.left-image-big {
    transform-origin: top left;
}

.animated-multi-image-item {
    position: relative;
}

.history-desktop-slider__wrap--desktop .animated-history-item {
    position: relative;
}

.one-third-image__item.one-third-image-four img,
.one-third-image__item.one-third-image-one img,
.one-third-image__item.one-third-image-two img,
.one-third-image__item.one-third-image-three img {
    position: relative;
}

@keyframes ring {
    0% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(-25deg);
    }

    20% {
        transform: rotate(25deg);
    }

    30% {
        transform: rotate(-25deg);
    }

    50% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes brushInKeyframe {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }

    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

@keyframes brushOutKeyframe {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }

    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

/*
 * Progressive enhancement: content stays visible until JS mounts desktop
 * animations (body.site-animation--desktop). Covers mobile, no-JS, and
 * prefers-reduced-motion — GSAP inline styles own the hidden state only
 * after mount.
 */
body:not(.site-animation--desktop) .masthead__text > *,
body:not(.site-animation--desktop) .masthead__text .accent_heading img,
body:not(.site-animation--desktop) .loading-mask__text__title > span,
body:not(.site-animation--desktop) .text-stroke > span > span,
body:not(.site-animation--desktop) .loading-mask__text__item--logo .loading-mask__logo svg,
body:not(.site-animation--desktop) .inner-text-wrap__inner,
body:not(.site-animation--desktop) .inner-text-wrap__item,
body:not(.site-animation--desktop) .masthead-inner-content .breadcrumbs,
body:not(.site-animation--desktop) .text-stroke-fix__front,
body:not(.site-animation--desktop) .text-stroke-fix__front > span,
body:not(.site-animation--desktop) .history-desktop-slider__wrap--desktop .animated-history-item,
body:not(.site-animation--desktop) .animated-content:not(.animated-content--absolute) > *:not(.fx-untruncated, .ddd-truncated),
body:not(.site-animation--desktop) .animated-content:is(.animated-content--absolute) > *:not(.fx-untruncated, .ddd-truncated),
body:not(.site-animation--desktop) .portfolio-right-big-image,
body:not(.site-animation--desktop) .portfolio-right-small-image,
body:not(.site-animation--desktop) .image-button-item,
body:not(.site-animation--desktop) .animated-multi-image-item,
body:not(.site-animation--desktop) .one-third-image__item.one-third-image-four img,
body:not(.site-animation--desktop) .one-third-image__item.one-third-image-one img,
body:not(.site-animation--desktop) .one-third-image__item.one-third-image-two img,
body:not(.site-animation--desktop) .one-third-image__item.one-third-image-three img,
body:not(.site-animation--desktop).home .marquee-line,
body:not(.site-animation--desktop).home .marquee .marquee__inner a,
body:not(.site-animation--desktop).home .marquee-logo {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

body:not(.site-animation--desktop).home .marquee .marquee__inner {
    animation-play-state: running;
}