/* Finite, progressive-enhancement motion. Content is visible without JavaScript. */
:root {
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
    --motion-quick: 180ms;
}

.hero-title-line { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.hero-title-line > span { display: block; }

/* Network endpoints give the shared service illustration a clear assembly
   sequence. All motion is finite WAAPI; these styles are the readable rest pose. */
.product-symbol > i { transform-origin: center; }
.product-symbol > i::after {
    content: '';
    position: absolute;
    top: -4px;
    left: calc(50% - 4px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange, #ff9f46);
    box-shadow: 0 0 0 5px #ff9f461a;
}
.product-symbol > i:nth-of-type(2)::after {
    background: #b9def5;
    box-shadow: 0 0 0 5px #b9def51a;
}

.reading-progress {
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    height: 3px;
    background: var(--orange, #f36f21);
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="paused"]) :is(.solution-card, .product-card) {
        transition: transform 220ms var(--motion-ease), background var(--motion-quick), border-color var(--motion-quick);
    }
    html:not([data-motion="paused"]) :is(.button, .text-link, .hero-secondary, .product-card-link, .solution-card-bottom, .contact-methods > a) > .icon {
        transition: transform 220ms var(--motion-ease);
    }
    html:not([data-motion="paused"]) .faq-list summary > .icon {
        transition: transform 220ms var(--motion-ease);
    }
    html:not([data-motion="paused"]) .industry-tabs > button > .icon {
        transition: transform 220ms var(--motion-ease), opacity var(--motion-quick);
    }
    html:not([data-motion="paused"]) .industry-tabs > button[aria-selected="true"] > .icon {
        transform: translate(2px, -2px);
    }
    @media (hover: hover) and (pointer: fine) {
        html:not([data-motion="paused"]) :is(.solution-card, .product-card):hover {
            position: relative;
            z-index: 1;
            transform: translateY(-4px);
        }
        html:not([data-motion="paused"]) :is(.solution-card:hover .solution-card-bottom, .product-card:hover .product-card-link, .button:hover, .text-link:hover) > .icon {
            transform: translate(3px, -3px);
        }
        html:not([data-motion="paused"]) :is(.hero-secondary:hover, .contact-methods > a:hover) > .icon:last-child {
            transform: translateX(4px);
        }
    }
}

/* The explicit pause control covers CSS interactions as well as WAAPI/WebGL. */
html[data-motion="paused"],
html[data-motion="paused"] *,
html[data-motion="paused"] *::before,
html[data-motion="paused"] *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
}
html[data-motion="paused"] .reading-progress { visibility: hidden; }
html[data-motion="paused"] :is(.button:hover, .solution-card:hover, .product-card:hover),
html[data-motion="paused"] :is(.button, .text-link, .hero-secondary, .solution-card-bottom, .product-card-link) > .icon {
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .reading-progress { visibility: hidden; }
    :is(.button:hover, .solution-card:hover, .product-card:hover),
    :is(.button, .text-link, .hero-secondary, .solution-card-bottom, .product-card-link) > .icon {
        transform: none !important;
    }
}