/* Slug-scoped service illustrations: Lambda, Dyno and TCU. */
:is(.service-card--lambda, .service-card--dyno, .service-card--tcu) {
    transition: transform 240ms ease, background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

:is(.service-card--lambda, .service-card--dyno, .service-card--tcu) .service-title {
    padding-right: 6.4rem;
}

:is(.service-card--lambda, .service-card--dyno, .service-card--tcu):is(:hover, :focus-within, :active) {
    transform: translateY(-3px);
    border-color: var(--color-primary);
}

:is(.service-card--lambda, .service-card--dyno, .service-card--tcu):has(.service-link:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.lambda-effect,
.dyno-effect,
.tcu-effect {
    position: absolute;
    z-index: 1;
    top: 0.8rem;
    right: 0.65rem;
    width: 114px;
    height: 64px;
    opacity: 0.9;
    pointer-events: none;
    transition: opacity 260ms ease;
}

:is(.service-card--lambda, .service-card--dyno, .service-card--tcu):is(:hover, :focus-within, :active) :is(.lambda-effect, .dyno-effect, .tcu-effect) {
    opacity: 1;
}

.lambda-effect__svg,
.dyno-effect__svg,
.tcu-effect__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Lambda solution */
.lambda-exhaust {
    fill: #292b2f;
    stroke: #62656a;
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.lambda-exhaust path + path {
    fill: none;
    stroke: #85888b;
    stroke-width: 0.7;
    stroke-linecap: round;
}

.lambda-sensor {
    fill: #3a3d41;
    stroke: #8b8e91;
    stroke-width: 1;
    stroke-linejoin: round;
}

.lambda-sensor path + path {
    fill: none;
    stroke: #b6b8b9;
    stroke-width: 0.75;
}

.lambda-wire,
.lambda-signal {
    fill: none;
    stroke-linecap: round;
}

.lambda-wire {
    stroke: #55585c;
    stroke-width: 1.1;
}

.lambda-signal {
    stroke: #c7c8c5;
    stroke-width: 1.25;
    stroke-dasharray: 5 4;
    stroke-dashoffset: 0;
    opacity: 0.55;
}

.lambda-engine-light {
    fill: rgba(185, 111, 31, 0.38);
    stroke: #b87b2a;
    stroke-width: 1;
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: 0.72;
    transform-box: fill-box;
    transform-origin: center;
}

.lambda-engine-light circle {
    fill: none;
}

.lambda-success-mark {
    fill: rgba(201, 154, 46, 0.1);
    stroke: var(--color-primary);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

/* Dyno service */
.dyno-wheel,
.dyno-roller {
    transform-box: view-box;
}

.dyno-wheel {
    transform-origin: 29px 25px;
}

.dyno-wheel__tire {
    fill: #202225;
    stroke: #595c60;
    stroke-width: 3.2;
    stroke-dasharray: 3 2;
}

.dyno-wheel-rim {
    fill: #313439;
    stroke: #919396;
    stroke-width: 1;
}

.dyno-wheel__spokes {
    fill: none;
    stroke: #a4a6a7;
    stroke-width: 1;
    stroke-linecap: round;
}

.dyno-wheel__hub {
    fill: #141517;
    stroke: #a0a2a4;
    stroke-width: 0.8;
}

.dyno-roller {
    fill: #303338;
    stroke: #76797c;
    stroke-width: 1.1;
}

.dyno-roller path {
    fill: none;
    stroke: #979a9c;
    stroke-width: 0.8;
}

.dyno-roller--left {
    transform-origin: 18px 51px;
}

.dyno-roller--right {
    transform-origin: 42px 51px;
}

.dyno-speed-lines {
    fill: none;
    stroke: #8a8d8f;
    stroke-width: 0.9;
    stroke-linecap: round;
    opacity: 0;
}

.dyno-chart-axis {
    fill: none;
    stroke: #46494c;
    stroke-width: 0.65;
}

.dyno-power-curve,
.dyno-torque-curve {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
}

.dyno-power-curve {
    stroke: var(--color-primary);
    stroke-width: 1.55;
}

.dyno-torque-curve {
    stroke: #dededb;
    stroke-width: 1.25;
}

.dyno-result-point {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.dyno-result-point--hp {
    fill: var(--color-primary);
}

.dyno-result-point--nm {
    fill: #e3e3df;
}

/* TCU software */
.tcu-gear-large,
.tcu-gear-small {
    fill: #282b2f;
    stroke: #85888b;
    stroke-width: 1.25;
    transform-box: view-box;
}

.tcu-gear-large path,
.tcu-gear-small path {
    fill: none;
    stroke-linecap: round;
}

.tcu-gear-large {
    transform-origin: 31px 35px;
}

.tcu-gear-small {
    transform-origin: 58px 23px;
}

.tcu-module {
    fill: #292c30;
    stroke: #696c70;
    stroke-width: 1;
    stroke-linejoin: round;
}

.tcu-module rect + rect {
    fill: #151618;
    stroke: #8a8c8e;
    stroke-width: 0.7;
}

.tcu-module path {
    fill: none;
    stroke: #777a7d;
    stroke-width: 0.8;
}

.tcu-signal,
.tcu-shift-arrow,
.tcu-torque-flow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tcu-signal {
    stroke: #777a7d;
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.tcu-gear-display rect {
    fill: #151618;
    stroke: #606367;
    stroke-width: 1;
}

.tcu-gear-value {
    fill: #ecece8;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 800;
    text-anchor: middle;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.tcu-gear-value--1 {
    opacity: 1;
}

.tcu-shift-arrow {
    stroke: var(--color-primary);
    stroke-width: 1.2;
    opacity: 0.28;
    transform-box: fill-box;
    transform-origin: center;
}

.tcu-torque-flow {
    stroke: #717477;
    stroke-width: 1.2;
    stroke-dasharray: 5 3;
    opacity: 0.35;
}

.service-card--lambda:is(:hover, :focus-within, :active) .lambda-signal {
    animation: lambda-signal-run 850ms ease-out both;
}

.service-card--lambda:is(:hover, :focus-within, :active) .lambda-engine-light {
    animation: lambda-engine-resolve 850ms ease-out both;
}

.service-card--lambda:is(:hover, :focus-within, :active) .lambda-success-mark {
    animation: lambda-success-in 850ms ease-out both;
}

.service-card--dyno:is(:hover, :focus-within, :active) .dyno-wheel {
    animation: dyno-wheel-run 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.service-card--dyno:is(:hover, :focus-within, :active) .dyno-roller {
    animation: dyno-roller-run 650ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.service-card--dyno:is(:hover, :focus-within, :active) .dyno-speed-lines {
    animation: dyno-speed-in 650ms ease-out both;
}

.service-card--dyno:is(:hover, :focus-within, :active) .dyno-power-curve {
    animation: dyno-power-draw 760ms ease-out 160ms both;
}

.service-card--dyno:is(:hover, :focus-within, :active) .dyno-torque-curve {
    animation: dyno-torque-draw 800ms ease-out 180ms both;
}

.service-card--dyno:is(:hover, :focus-within, :active) .dyno-result-point {
    animation: dyno-result-in 950ms ease-out both;
}

.service-card--tcu:is(:hover, :focus-within, :active) .tcu-gear-large {
    animation: tcu-gear-large-run 760ms cubic-bezier(0.22, 0.66, 0.3, 1) 80ms both;
}

.service-card--tcu:is(:hover, :focus-within, :active) .tcu-gear-small {
    animation: tcu-gear-small-run 760ms cubic-bezier(0.22, 0.66, 0.3, 1) 80ms both;
}

.service-card--tcu:is(:hover, :focus-within, :active) .tcu-signal {
    animation: tcu-signal-run 500ms ease-out both;
}

.service-card--tcu:is(:hover, :focus-within, :active) .tcu-gear-value--1 {
    animation: tcu-value-one 900ms ease-out both;
}

.service-card--tcu:is(:hover, :focus-within, :active) .tcu-gear-value--2 {
    animation: tcu-value-two 900ms ease-out both;
}

.service-card--tcu:is(:hover, :focus-within, :active) .tcu-gear-value--3 {
    animation: tcu-value-three 900ms ease-out both;
}

.service-card--tcu:is(:hover, :focus-within, :active) .tcu-shift-arrow {
    animation: tcu-shift-run 900ms ease-out both;
}

.service-card--tcu:is(:hover, :focus-within, :active) .tcu-torque-flow {
    animation: tcu-torque-in 900ms ease-out both;
}

@keyframes lambda-signal-run {
    0% { opacity: 0.55; stroke: #c7c8c5; stroke-dashoffset: 18; }
    30%, 100% { opacity: 1; stroke: var(--color-primary); stroke-dashoffset: 0; }
}

@keyframes lambda-engine-resolve {
    0% { opacity: 0.72; transform: scale(1); }
    40% { opacity: 1; transform: scale(1.04); }
    66%, 100% { opacity: 0.08; transform: scale(0.96); }
}

@keyframes lambda-success-in {
    0%, 68% { opacity: 0; transform: scale(0.72); }
    82%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes dyno-wheel-run {
    from { transform: rotate(0); }
    to { transform: rotate(240deg); }
}

@keyframes dyno-roller-run {
    from { transform: rotate(0); }
    to { transform: rotate(-300deg); }
}

@keyframes dyno-speed-in {
    0%, 100% { opacity: 0; transform: translateX(0); }
    25%, 65% { opacity: 0.62; transform: translateX(3px); }
}

@keyframes dyno-power-draw {
    from { stroke-dashoffset: 90; }
    to { stroke-dashoffset: 0; }
}

@keyframes dyno-torque-draw {
    from { stroke-dashoffset: 90; }
    to { stroke-dashoffset: 0; }
}

@keyframes dyno-result-in {
    0%, 72% { opacity: 0; transform: scale(0.7); }
    86%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes tcu-gear-large-run {
    from { transform: rotate(0); }
    to { transform: rotate(135deg); }
}

@keyframes tcu-gear-small-run {
    from { transform: rotate(0); }
    to { transform: rotate(-216deg); }
}

@keyframes tcu-signal-run {
    0% { stroke: #777a7d; stroke-dashoffset: 14; }
    45%, 100% { stroke: var(--color-primary); stroke-dashoffset: 0; }
}

@keyframes tcu-value-one {
    0%, 25% { opacity: 1; transform: translateY(0); }
    34%, 100% { opacity: 0; transform: translateY(-2px); }
}

@keyframes tcu-value-two {
    0%, 31% { opacity: 0; transform: translateY(2px); }
    38%, 52% { opacity: 1; transform: translateY(0); }
    61%, 100% { opacity: 0; transform: translateY(-2px); }
}

@keyframes tcu-value-three {
    0%, 58% { opacity: 0; transform: translateY(2px); fill: #ecece8; }
    68%, 100% { opacity: 1; transform: translateY(0); fill: var(--color-primary); }
}

@keyframes tcu-shift-run {
    0%, 22% { opacity: 0.28; transform: translateX(0); }
    42% { opacity: 1; transform: translateX(3px); }
    52% { opacity: 0.28; transform: translateX(0); }
    70%, 100% { opacity: 1; transform: translateX(4px); }
}

@keyframes tcu-torque-in {
    0%, 52% { opacity: 0.35; stroke: #717477; stroke-dashoffset: 12; }
    72%, 100% { opacity: 0.95; stroke: var(--color-primary); stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    :is(.service-card--lambda, .service-card--dyno, .service-card--tcu),
    .lambda-effect *,
    .dyno-effect *,
    .tcu-effect * {
        animation: none !important;
        transition: none !important;
    }

    .service-card--lambda:is(:hover, :focus-within, :active) .lambda-signal {
        opacity: 1;
        stroke: var(--color-primary);
        stroke-dashoffset: 0;
    }

    .service-card--lambda:is(:hover, :focus-within, :active) .lambda-engine-light {
        opacity: 0.08;
        transform: none;
    }

    .service-card--lambda:is(:hover, :focus-within, :active) .lambda-success-mark {
        opacity: 1;
        transform: none;
    }

    .service-card--dyno:is(:hover, :focus-within, :active) :is(.dyno-power-curve, .dyno-torque-curve) {
        stroke-dashoffset: 0;
    }

    .service-card--dyno:is(:hover, :focus-within, :active) .dyno-result-point {
        opacity: 1;
        transform: none;
    }

    .service-card--tcu:is(:hover, :focus-within, :active) :is(.tcu-gear-value--1, .tcu-gear-value--2) {
        opacity: 0;
    }

    .service-card--tcu:is(:hover, :focus-within, :active) .tcu-gear-value--3 {
        opacity: 1;
        fill: var(--color-primary);
        transform: none;
    }

    .service-card--tcu:is(:hover, :focus-within, :active) .tcu-torque-flow {
        opacity: 0.95;
        stroke: var(--color-primary);
        stroke-dashoffset: 0;
    }
}

@media (max-width: 768px) {
    :is(.service-card--lambda, .service-card--dyno, .service-card--tcu) .service-title {
        padding-right: 5.2rem;
    }

    .lambda-effect,
    .dyno-effect,
    .tcu-effect {
        width: 90px;
        height: 52px;
        right: 0.35rem;
        opacity: 0.82;
    }
}

@media (max-width: 360px) {
    :is(.service-card--lambda, .service-card--dyno, .service-card--tcu) .service-title {
        padding-right: 4.7rem;
    }

    .lambda-effect,
    .dyno-effect,
    .tcu-effect {
        width: 84px;
        height: 49px;
        right: 0.25rem;
    }
}