[data-etg-motion="image-reveal"],
[data-etg-motion="parallax"] {
    overflow: hidden;
}

[data-etg-motion="image-reveal"] {
    -webkit-mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 48px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 48px),
        transparent 100%
    );
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /*
     * The completed state is the default. GSAP applies the initial 0% state
     * only when it can actually run, so a blocked script or reduced-motion
     * preference can never leave the image hidden.
     */
    -webkit-mask-size: calc(100% + 48px) 100%;
    mask-size: calc(100% + 48px) 100%;
    will-change: -webkit-mask-size, mask-size;
}

[data-etg-motion="image-reveal"] img,
[data-etg-motion="parallax"] img {
    display: block;
    width: 100%;
    will-change: transform;
}

.etg-motion-word {
    display: inline-block;
    will-change: transform, opacity;
}

[data-etg-motion="logos-marquee"] {
    width: 100%;
    max-width: none;
    overflow: hidden;
}

.etg-motion-marquee__track {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: max-content;
    gap: var(--etg-marquee-gap, 48px);
    will-change: transform;
}

.etg-motion-marquee__track > * {
    flex: 0 0 var(--etg-marquee-item-width, 180px) !important;
    width: var(--etg-marquee-item-width, 180px) !important;
    max-width: var(--etg-marquee-item-width, 180px) !important;
    margin: 0 !important;
}

.etg-motion-marquee__track img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    [data-etg-motion="logos-marquee"] {
        overflow-x: auto;
    }
}

.etg-motion-ready [data-etg-motion="border-draw"] {
    position: relative;
}

.etg-motion-border {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    box-sizing: border-box;
    pointer-events: none;
}

.etg-motion-border > span {
    position: absolute;
    display: block;
    background: currentColor;
    will-change: transform;
}

.etg-motion-border__top {
    top: 0;
    left: 0;
    width: 100%;
    height: var(--etg-border-top-width, 1px);
    background: var(--etg-border-top-color, currentColor) !important;
    transform-origin: left center;
}

.etg-motion-border__right {
    top: 0;
    right: 0;
    width: var(--etg-border-right-width, 1px);
    height: 100%;
    background: var(--etg-border-right-color, currentColor) !important;
    transform-origin: center top;
}

.etg-motion-border__bottom {
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--etg-border-bottom-width, 1px);
    background: var(--etg-border-bottom-color, currentColor) !important;
    transform-origin: right center;
}

.etg-motion-border__left {
    bottom: 0;
    left: 0;
    width: var(--etg-border-left-width, 1px);
    height: 100%;
    background: var(--etg-border-left-color, currentColor) !important;
    transform-origin: center bottom;
}

@media (prefers-reduced-motion: reduce) {
    [data-etg-motion],
    [data-etg-motion] > *,
    .etg-motion-word {
        clip-path: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    [data-etg-motion="image-reveal"] {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}