/* Keep the primary hero copy visible at first paint. Product cut-outs retain
   their motion, but the heading, text and actions no longer wait on delays. */
.martech-hero-copy > * {
    opacity: 1;
    animation: none;
}

/* Mirror the lower orange accent at the top of the home-page hero. */
.martech-hero::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5;
    height: 4px;
    background: linear-gradient(to left, var(--ltn__secondary-color) 0, #ff9b58 52%, transparent 100%);
    content: "";
    pointer-events: none;
}

/* Moving technical tracks on the far left balance the product animation. */
.martech-hero-copy {
    isolation: isolate;
}

.martech-hero-copy > * {
    position: relative;
    z-index: 1;
}

.martech-hero-copy::before,
.martech-hero-copy::after {
    position: absolute;
    z-index: 0;
    content: "";
    pointer-events: none;
}

.martech-hero-copy::before {
    top: 50%;
    left: -345px;
    width: 430px;
    height: 590px;
    background:
        linear-gradient(to right, rgba(255, 94, 21, 0.2), rgba(255, 94, 21, 0.04) 58%, transparent 100%),
        repeating-linear-gradient(135deg, transparent 0 42px, rgba(255, 255, 255, 0.14) 42px 43px, transparent 43px 86px);
    -webkit-mask-image: linear-gradient(to right, #000 0, rgba(0, 0, 0, 0.82) 48%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, rgba(0, 0, 0, 0.82) 48%, transparent 100%);
    transform: translateY(-50%) skewX(-9deg);
    animation: martech-copy-tracks 12s linear infinite;
}

.martech-hero-copy::after {
    top: 24%;
    left: -155px;
    width: 145px;
    height: 3px;
    background: linear-gradient(to right, transparent, rgba(255, 94, 21, 0.95) 38%, rgba(255, 155, 88, 0.38), transparent);
    box-shadow:
        -38px 175px 0 rgba(255, 255, 255, 0.22),
        18px 342px 0 rgba(255, 94, 21, 0.42);
    animation: martech-copy-signals 6.5s ease-in-out infinite;
}

@keyframes martech-copy-tracks {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 0, 86px -86px; }
}

@keyframes martech-copy-signals {
    0%, 100% { opacity: 0.42; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(42px); }
}

@media (max-width: 767px) {
    .martech-hero-copy::before {
        left: -165px;
        width: 245px;
        height: 450px;
    }

    .martech-hero-copy::after {
        top: 18%;
        left: -82px;
        width: 105px;
        box-shadow:
            -24px 142px 0 rgba(255, 255, 255, 0.2),
            10px 282px 0 rgba(255, 94, 21, 0.36);
    }
}

@media (prefers-reduced-motion: reduce) {
    .martech-hero-copy::before,
    .martech-hero-copy::after {
        animation: none;
    }
}

/* Shared technical banner treatment for primary company pages. */
.martech-unified-subpage-hero {
    border-bottom: 0;
}

.martech-subpage-track-field {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 330px;
    overflow: hidden;
    background:
        linear-gradient(to right, rgba(255, 94, 21, 0.18), rgba(255, 94, 21, 0.035) 58%, transparent 100%),
        repeating-linear-gradient(135deg, transparent 0 42px, rgba(255, 255, 255, 0.13) 42px 43px, transparent 43px 86px);
    -webkit-mask-image: linear-gradient(to right, #000 0, rgba(0, 0, 0, 0.78) 50%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, rgba(0, 0, 0, 0.78) 50%, transparent 100%);
    animation: martech-subpage-tracks 12s linear infinite;
    pointer-events: none;
}

.martech-subpage-track-field::after {
    position: absolute;
    top: 64px;
    left: -34px;
    width: 145px;
    height: 3px;
    background: linear-gradient(to right, transparent, rgba(255, 94, 21, 0.95) 38%, rgba(255, 155, 88, 0.38), transparent);
    box-shadow:
        18px 108px 0 rgba(255, 255, 255, 0.2),
        -12px 210px 0 rgba(255, 94, 21, 0.38);
    content: "";
    animation: martech-subpage-signals 6.5s ease-in-out infinite;
}

.martech-subpage-edge {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 4;
    height: 4px;
    pointer-events: none;
}

.martech-subpage-edge-top {
    top: 0;
    background: linear-gradient(to left, var(--ltn__secondary-color) 0, #ff9b58 52%, transparent 100%);
}

.martech-subpage-edge-bottom {
    bottom: 0;
    background: linear-gradient(to right, var(--ltn__secondary-color) 0, #ff9b58 52%, transparent 100%);
}

@keyframes martech-subpage-tracks {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 0, 86px -86px; }
}

@keyframes martech-subpage-signals {
    0%, 100% { opacity: 0.42; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(38px); }
}

@media (max-width: 767px) {
    .martech-subpage-track-field {
        width: 185px;
        opacity: 0.72;
    }

    .martech-subpage-track-field::after {
        left: -66px;
        width: 110px;
    }

    .martech-unified-subpage-hero .ltn__breadcrumb-list {
        max-width: 100%;
        overflow: hidden;
    }

    .martech-unified-subpage-hero .ltn__breadcrumb-list ul {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        min-width: 0;
    }

    .martech-unified-subpage-hero .ltn__breadcrumb-list ul li {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .martech-unified-subpage-hero .ltn__breadcrumb-list ul li:last-child {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (prefers-reduced-motion: reduce) {
    .martech-subpage-track-field,
    .martech-subpage-track-field::after {
        animation: none;
    }
}