/* Operations rail. Graphite surfaces and fine edges shared with the system figures. */

body.home .b-ops {
    padding: var(--space-96) 0;
    color: #ededed;
}

body.home .b-ops .container-main {
    margin-bottom: calc(var(--space-36) + 16px);
}

body.home.landing .b-ops {
    padding-bottom: calc(var(--space-48) + 88px);
}

body.landing .b-ops .b-section-head {
    grid-column: 1 / 8;
}

body.home .b-ops .b-eyebrow {
    flex-wrap: wrap;
    text-wrap: pretty;
}

.ops-flow {
    --flow-speed: 3000ms;
}

.ops-rail {
    position: relative;
    overflow: hidden;
    padding: 0 0 20px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
}

.ops-track {
    display: flex;
    gap: 20px;
    align-items: stretch;
    width: max-content;
    padding-left: 64px;
    animation: rail var(--rail-dur, 96s) linear infinite;
    animation-play-state: var(--rail-state, running);
}

.ops-card {
    flex: 0 0 auto;
    width: 576px;
    scroll-snap-align: start;
    background: #202020;
    border: 1px solid #363636;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
}

.ops-card-stage {
    padding: 26px 28px;
    background: radial-gradient(ellipse at 50% 42%, #1d1d1d 0%, #161616 76%);
    border-bottom: 1px solid #2c2c2c;
}

.ops-diagram {
    width: 100%;
    height: auto;
    display: block;
    --diag-state: running;
}

.ops-diagram [style*="animation"] {
    animation-play-state: var(--diag-state, running);
}

.ops-card-copy {
    padding: 22px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.ops-card-id {
    font-family: 'IBM Plex Mono', 'SF Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: #858585;
}

.ops-card-title {
    margin: 0;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.004em;
    color: #e6e6e6;
}

.ops-card-body {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #a0a0a0;
    max-width: 56ch;
    text-wrap: pretty;
}

@keyframes rail {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(var(--rail-shift), 0, 0); }
}

@keyframes flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: var(--o, -400px); } }
@keyframes litFeed { 0% { opacity: .2; } 8%, 18% { opacity: 1; } 30%, 100% { opacity: .2; } }
@keyframes litCore { 0%, 14% { opacity: 0; } 20%, 30% { opacity: 1; } 40%, 100% { opacity: .3; } }
@keyframes litR1 { 0%, 28% { opacity: 0; } 34%, 46% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes litR2 { 0%, 52% { opacity: 0; } 58%, 66% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes litR3 { 0%, 70% { opacity: 0; } 76%, 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes litDone { 0%, 86% { opacity: 0; } 93%, 100% { opacity: 1; } }
@keyframes scan { 0%, 10% { opacity: 0; transform: translateY(0); } 16% { opacity: 1; } 34% { opacity: 1; transform: translateY(62px); } 42%, 100% { opacity: 0; transform: translateY(62px); } }
@keyframes litLock { 0%, 34% { opacity: 0; } 42%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes litResult { 0%, 50% { opacity: 0; } 58%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes litOut { 0%, 66% { opacity: 0; } 74%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes evtTravel { 0% { opacity: 0; transform: translateX(0); } 8% { opacity: 1; transform: translateX(2px); } 24% { opacity: 1; transform: translateX(10px); } 30%, 100% { opacity: 0; transform: translateX(12px); } }
@keyframes litDep { 0%, 26% { opacity: 0; } 32%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes litStatus { 0%, 34% { opacity: 0; } 40%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes litLink { 0%, 42% { opacity: 0; } 50%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes litOut1 { 0%, 52% { opacity: 0; } 60%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes litOut2 { 0%, 62% { opacity: 0; } 70%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pxFeed { 0% { opacity: 0; } 8%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pxRet { 0%, 44% { opacity: 0; } 56%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pxExc { 0%, 30% { opacity: 0; } 42%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pxExc2 { 0%, 62% { opacity: 0; } 72%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pxOut { 0%, 74% { opacity: 0; } 84%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pxN0 { 0%, 16% { opacity: 0; } 26%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pxN1 { 0%, 18% { opacity: 0; } 28%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pxN2 { 0%, 17% { opacity: 0; } 27%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pxN3 { 0%, 20% { opacity: 0; } 30%, 90% { opacity: 1; } 100% { opacity: 0; } }

.ops-rail.is-static {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #303030 #141414;
}

.ops-rail.is-static .ops-track {
    animation: none;
    padding-right: 24px;
}

@media (max-width: 767px) {
    .ops-rail {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    }

    .ops-track {
        padding-left: 28px;
    }

    .ops-card {
        width: min(576px, calc(100vw - 48px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ops-track {
        animation: none;
    }

    .ops-diagram [style*="animation"] {
        animation: none !important;
    }

    .ops-diagram g[style*="animation"] {
        opacity: 1 !important;
    }
}