/* Progressive motion layer: the page remains fully visible without this file or JavaScript. */
.motion-ready .motion-depth-image {
    --motion-x: 0px;
    --motion-y: 0px;
    translate: var(--motion-x) var(--motion-y);
    scale: 1.025;
    will-change: translate;
}

.motion-ready .motion-ambient,
.motion-ready .motion-cockpit { --presence-progress: 1; }

.motion-ready .motion-ambient::after,
.motion-ready .motion-cockpit::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    opacity: calc((1 - var(--presence-progress)) * .17);
    background: rgba(3, 5, 8, .76);
    transition: opacity 90ms linear;
}

.motion-ready .motion-ambient .ambient-editorial {
    opacity: calc(.7 + var(--presence-progress) * .3);
    translate: 0 calc((1 - var(--presence-progress)) * 14px);
    filter: blur(calc((1 - var(--presence-progress)) * .45px));
    will-change: translate, opacity, filter;
}

.motion-ready .motion-cockpit-composition .cockpit-editorial {
    --editorial-progress: 1;
    opacity: calc(.72 + var(--editorial-progress) * .28);
    translate: 0 calc((1 - var(--editorial-progress)) * 15px + var(--editorial-depth-y, 0px));
    will-change: translate, opacity;
}

.motion-ready .motion-cockpit {
    opacity: calc(.84 + var(--presence-progress) * .16);
}

.motion-ready .motion-connectivity-row .connectivity-row__text {
    opacity: calc(.76 + var(--editorial-progress, 1) * .24);
    translate: 0 calc((1 - var(--editorial-progress, 1)) * 16px);
    will-change: translate, opacity;
}

.motion-ready .editorial-backdrop {
    translate: 0 var(--backdrop-y, 0px);
    will-change: translate;
}

.motion-ready .editorial-index,
.motion-ready .service-card__annotation,
.motion-ready .editorial-line-icon {
    opacity: calc(.58 + var(--detail-progress, 1) * .42);
    translate: 0 calc((1 - var(--detail-progress, 1)) * 7px);
    will-change: translate, opacity;
}

.motion-ready .service-card__annotation::before {
    scale: var(--detail-progress, 1) 1;
    transform-origin: left center;
}

.motion-ready .service-card::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: -12%;
    opacity: var(--semantic-opacity, 0);
    pointer-events: none;
    will-change: opacity, translate;
}

.motion-ready .service-card--fahrwerk::after { background: linear-gradient(to top, rgba(215, 218, 222, .11), transparent 38%); }
.motion-ready .service-card--felgen::after {
    background: linear-gradient(108deg, transparent 32%, rgba(241, 243, 244, .22) 47%, rgba(201, 163, 92, .07) 51%, transparent 65%);
    translate: var(--semantic-shift, -85%) 0;
}
.motion-ready .service-card--bremsanlage::after { background: radial-gradient(circle at 62% 53%, rgba(240, 230, 207, .25), rgba(201, 163, 92, .08) 24%, transparent 46%); }
.motion-ready .service-card--turbo::after { background: radial-gradient(circle at 43% 53%, rgba(231, 236, 239, .2), transparent 43%); }
.motion-ready .service-card--abgas::after { background: radial-gradient(ellipse at 79% 78%, rgba(201, 163, 92, .2), transparent 34%); }

.motion-ready .motion-finish-scene::before,
.motion-ready .motion-finish-scene::after {
    content: '';
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.motion-ready .motion-finish-scene::before {
    inset: 0;
    opacity: calc((1 - var(--finish-progress, 1)) * .2);
    background: rgba(2, 3, 5, .86);
    will-change: opacity;
}

.motion-ready .motion-finish-scene::after {
    top: -10%;
    bottom: -10%;
    left: -34%;
    width: 29%;
    opacity: var(--finish-sweep-opacity, 0);
    translate: var(--finish-sweep-x, 0%) 0;
    transform: skewX(-11deg);
    background: linear-gradient(108deg, transparent 24%, rgba(243, 244, 241, .14) 48%, rgba(201, 163, 92, .045) 55%, transparent 78%);
    will-change: translate, opacity;
}

.motion-ready .motion-finish-primary .finish-content,
.motion-ready .motion-finish-primary .finish-more,
.motion-ready .motion-finish-secondary-copy {
    opacity: calc(.72 + var(--finish-copy-progress, 1) * .28);
    translate: 0 calc((1 - var(--finish-copy-progress, 1)) * 18px);
    will-change: translate, opacity;
}

.motion-ready .finish-benefit {
    opacity: calc(.62 + var(--benefit-progress, 1) * .38);
    translate: 0 calc((1 - var(--benefit-progress, 1)) * 8px);
    will-change: translate, opacity;
}

.motion-ready .motion-connectivity-media::before,
.motion-ready .motion-connectivity-media::after {
    content: '';
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.motion-ready .motion-connectivity-media::before {
    inset: 0;
    opacity: calc((1 - var(--presence-progress, 1)) * .34);
    background: radial-gradient(ellipse 38% 31% at 51% 28%, rgba(2, 4, 7, .68), rgba(2, 4, 7, .26) 53%, transparent 80%);
    will-change: opacity;
}

.motion-ready .motion-connectivity-media::after {
    top: -12%;
    bottom: -12%;
    width: 34%;
    opacity: var(--sweep-opacity, 0);
    background: linear-gradient(105deg, transparent 20%, rgba(239, 242, 244, .12) 48%, rgba(201, 163, 92, .035) 55%, transparent 80%);
    translate: var(--sweep-x, 0%) 0;
    transform: skewX(-9deg);
    will-change: translate, opacity;
}

.motion-ready .connectivity-row--display .motion-connectivity-media::after { left: -40%; }
.motion-ready .connectivity-row--smartphone .motion-connectivity-media::after { right: -40%; }

.motion-ready .performance-editorial::before,
.motion-ready .interior-editorial::before,
.motion-ready .ambient-editorial::before {
    scale: var(--rule-progress, 1) 1;
    transform-origin: left center;
    will-change: scale;
}

.motion-ready .connectivity-intro h2::before,
.motion-ready .connectivity-row__text::before {
    scale: var(--rule-progress, 1) 1;
    transform-origin: left center;
    will-change: scale;
}

@media (prefers-reduced-motion: reduce) {
    .motion-ready .motion-depth-image {
        translate: 0 0 !important;
        scale: 1 !important;
        will-change: auto;
    }

    .motion-ready .motion-ambient::after,
    .motion-ready .motion-cockpit::after { display: none; }

    .motion-ready .motion-ambient .ambient-editorial,
    .motion-ready .motion-cockpit-composition .cockpit-editorial,
    .motion-ready .motion-cockpit {
        opacity: 1;
        translate: 0 0;
        filter: none;
        will-change: auto;
    }

    .motion-ready .motion-connectivity-row .connectivity-row__text {
        opacity: 1;
        translate: 0 0;
        will-change: auto;
    }

    .motion-ready .motion-connectivity-media::before,
    .motion-ready .motion-connectivity-media::after { display: none; }

    .motion-ready .editorial-backdrop,
    .motion-ready .editorial-index,
    .motion-ready .service-card__annotation,
    .motion-ready .editorial-line-icon,
    .motion-ready .motion-cockpit-composition .cockpit-editorial {
        translate: 0 0;
        opacity: 1;
        will-change: auto;
    }

    .motion-ready .service-card::after { display: none; }
    .motion-ready .service-card__annotation::before { scale: 1 1; }

    .motion-ready .motion-finish-scene::before,
    .motion-ready .motion-finish-scene::after { display: none; }

    .motion-ready .motion-finish-primary .finish-content,
    .motion-ready .motion-finish-primary .finish-more,
    .motion-ready .motion-finish-secondary-copy,
    .motion-ready .finish-benefit {
        opacity: 1;
        translate: 0 0;
        will-change: auto;
    }

    .motion-ready .performance-editorial::before,
    .motion-ready .interior-editorial::before,
    .motion-ready .ambient-editorial::before { scale: 1 1; }

    .motion-ready .connectivity-intro h2::before,
    .motion-ready .connectivity-row__text::before { scale: 1 1; }
}